fix and improve devices page

app/content/ui/components/button/button.gd

@@ -47,13 +47,13 @@ const ECHO_WAIT_REPEAT = 0.1
 		
 		if icon:
 			label_node.font = IconFont
-			label_node.font_size = 36
+			label_node.font_size = size.x / 0.05 * 36
 			label_node.width = 1000
 			label_node.autowrap_mode = TextServer.AUTOWRAP_OFF
 		else:
 			label_node.font = null
 			label_node.font_size = font_size
-			label_node.width = 50
+			label_node.width = size.x / label_node.pixel_size
 			label_node.autowrap_mode = TextServer.AUTOWRAP_WORD_SMART
 
 @export var toggleable: bool = false
@@ -204,6 +204,7 @@ func _update():
 	touch.position = Vector3(0, 0, size.z / 2)
 
 	mesh.mesh.size = Vector2(size.x, size.y)
+	mesh.material_override.set_shader_parameter("size", Vector2(size.x, size.y) * 25)
 	collision.shape.size = Vector3(size.x, size.y, size.z)
 	label_node.width = size.x / label_node.pixel_size
 	mesh.position = Vector3(0, 0, size.z / 2)

app/content/ui/components/button/button.tscn

@@ -43,7 +43,7 @@ text = "Example Text"
 font_size = 10
 outline_size = 0
 autowrap_mode = 3
-width = 50.0
+width = 40.0
 
 [node name="FingerArea" type="Area3D" parent="."]
 transform = Transform3D(1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, -0.015)

app/content/ui/components/flex_container/flex_container.gd

@@ -27,21 +27,9 @@ enum Justification {
 func _ready():
 	_update()
 
-	child_entered_tree.connect(func(_arg):
-		_update()
-	)
-
-	child_exiting_tree.connect(func(_arg):
-		_update()
-	)
-
-	child_order_changed.connect(func():
-		_update()
-	)
-
 func _update():
 	var width = size.y if vertical else size.x
-	var child_size := Vector2(0, 0)
+	var children_size := Vector2(0, 0)
 	var child_count = 0
 
 	for child in get_children():
@@ -49,58 +37,64 @@ func _update():
 			continue
 
 		if vertical:
-			child_size.x = max(child.size.x, child_size.x)
+			children_size.x = max(child.size.x, children_size.x)
-			child_size.y += child.size.y + gap
+			children_size.y += child.size.y + gap
 		else:
-			child_size.x += child.size.x + gap
+			children_size.x += child.size.x + gap
-			child_size.y = max(child.size.y, child_size.y)
+			children_size.y = max(child.size.y, children_size.y)
 
 		child_count += 1
 
 	if child_count == 0:
 		return
 
-	var child_scale = Vector2(size.x, size.y) / child_size
+	var children_scale = Vector2(size.x, size.y) / children_size
-	child_size.clamp(Vector2(0, 0), Vector2(size.x, size.y))
+	children_size.clamp(Vector2(0, 0), Vector2(size.x, size.y))
 
-	child_scale = child_scale.clamp(Vector2(0.001, 0.001), Vector2(1, 1))
+	children_scale = children_scale.clamp(Vector2(0.001, 0.001), Vector2(1, 1))
 
 	var offset = 0.0
 
+	var children_width = children_size.y if vertical else children_size.x
+
 	match justification:
 		Justification.START:
 			offset = 0.0
 		Justification.CENTER:
-			offset = (width - child_size) / 2
+			offset = (width - children_width) / 2.0
 		Justification.END:
-			offset = width - child_size
+			offset = width - children_width
 		Justification.SPACE_BETWEEN:
 			offset = 0.0
 		Justification.SPACE_AROUND:
-			offset = (width - child_size) / child_count / 2
+			offset = (width - children_width) / child_count / 2.0
 		Justification.SPACE_EVENLY:
-			offset = (width - child_size) / (child_count + 1)
+			offset = (width - children_width) / (child_count + 1)
 
 	for child in get_children():
 		if child is Container3D == false:
 			continue
 
-		child.scale = Vector3(child_scale.x, child_scale.y, 1)
+		child.scale = Vector3(children_scale.x, children_scale.y, 1)
 
 		if vertical:
-			child.position = Vector3(0, -offset, 0)
+			var child_width = child.size.y * children_scale.y
-			offset += child.size.y * child_scale.y
+			
+			child.position = Vector3(0, -offset - child_width / 2.0, 0)
+			offset += child.size.y * children_scale.y
 		else:
-			child.position = Vector3(offset, 0, 0)
+			var child_width = child.size.x * children_scale.x
-			offset += child.size.x * child_scale.x
+
+			child.position = Vector3(offset + child_width / 2.0, 0, 0)
+			offset += child.size.x * children_scale.x
 
 		match justification:
 			Justification.START, Justification.CENTER, Justification.END:
 				offset += gap
 			Justification.SPACE_BETWEEN:
-				offset += (width - child_size) / (child_count - 1)
+				offset += (width - children_width) / (child_count - 1)
 			Justification.SPACE_AROUND:
-				offset += (width - child_size) / child_count
+				offset += (width - children_width) / child_count
 			Justification.SPACE_EVENLY:
-				offset += (width - child_size) / (child_count + 1)
+				offset += (width - children_width) / (child_count + 1)
 			

app/content/ui/components/label_container/label_container.gd

@@ -14,11 +14,20 @@ const FontTools = preload ("res://lib/utils/font_tools.gd")
 
 		_update_text()
 
+@export var font_size: int = 18:
+	set(value):
+		font_size = value
+		
+		if !is_inside_tree(): return
+
+		_update_text()
+
 func _ready():
 	print("label %s enter tree" % text)
 	_update_text()
 
 func _update_text():
+	label.font_size = font_size
 	label.text = text
 	var text_size = FontTools.get_font_size(label)
 	size = Vector3(text_size.x, text_size.y, 0.1)

app/content/ui/components/label_container/label_container.tscn

@@ -9,6 +9,8 @@ size = Vector3(0.08, 0.023, 0.1)
 
 [node name="Label3D" type="Label3D" parent="."]
 pixel_size = 0.001
+render_priority = 15
+outline_render_priority = 14
 text = "Example"
 font = ExtResource("2_6y3jl")
 font_size = 18

app/content/ui/components/pagination/pagination.gd

@@ -35,6 +35,16 @@ const ButtonActiveMaterial = preload ("button_active.material")
 func _ready():
 	_update()
 
+	prev_button.on_button_up.connect(func():
+		page -= 1
+		on_page_changed.emit(page)
+	)
+
+	next_button.on_button_up.connect(func():
+		page += 1
+		on_page_changed.emit(page)
+	)
+
 func _update():
 	print("update %s %s %s %s" % [page, pages, visible_pages, get_parent()])
 	if !is_node_ready(): return
@@ -42,11 +52,7 @@ func _update():
 	for child in get_children():
 		if child != prev_button&&child != next_button:
 			remove_child(child)
-			child.free()
+			child.queue_free()
-			# child.queue_free()
-			# print("queue free", child)
-			# await child.tree_exited
-			# print("exited", child)
 
 	var display_pages = min(pages, visible_pages)
 	var center_pos = floor(display_pages / 2)
@@ -55,11 +61,11 @@ func _update():
 
 	var at_start = page == 0
 	prev_button.disabled = at_start
-	prev_button.mesh.visible = !at_start
+	prev_button.visible = !at_start
 
 	var at_end = page == pages - 1
 	next_button.disabled = at_end
-	next_button.mesh.visible = !at_end
+	next_button.visible = !at_end
 
 	prev_button.size = Vector3(size.y, size.y, size.z)
 	next_button.size = Vector3(size.y, size.y, size.z)
@@ -92,7 +98,7 @@ func _update():
 		else:
 			button.label = str(clamp(page + 1, 3, pages - 3) - center_pos + i + 1)
 
-		button.on_button_up.connect(func(_arg):
+		button.on_button_up.connect(func():
 			page=int(button.label) - 1
 			on_page_changed.emit(page)
 		)

app/content/ui/menu/edit/devices.gd

@@ -39,6 +39,7 @@ func _ready():
 
 			var button_instance=ButtonScene.instantiate()
 			button_instance.label=info["name"]
+			button_instance.font_size=8
 			button_instance.on_button_down.connect(func():
 				on_select_device.emit(device.keys()[0])
 			)

app/content/ui/menu/edit/edit_menu.tscn

@@ -1,4 +1,4 @@
-[gd_scene load_steps=10 format=3 uid="uid://crrb0l3ekuotj"]
+[gd_scene load_steps=11 format=3 uid="uid://crrb0l3ekuotj"]
 
 [ext_resource type="Script" path="res://content/ui/menu/edit/edit_menu.gd" id="1_34cbn"]
 [ext_resource type="Script" path="res://content/ui/menu/edit/devices.gd" id="2_rkvf4"]
@@ -7,6 +7,7 @@
 [ext_resource type="PackedScene" uid="uid://bsjqdvkt0u87c" path="res://content/ui/components/button/button.tscn" id="4_lpv7m"]
 [ext_resource type="Shader" path="res://assets/materials/glass.gdshader" id="4_xunmy"]
 [ext_resource type="Script" path="res://content/ui/menu/edit/entities.gd" id="5_t34xe"]
+[ext_resource type="Script" path="res://content/ui/components/flex_container/flex_container.gd" id="6_cr6p6"]
 
 [sub_resource type="ShaderMaterial" id="ShaderMaterial_hstwo"]
 render_priority = -3
@@ -50,21 +51,23 @@ outline_size = 0
 horizontal_alignment = 0
 
 [node name="Pagination3D" parent="Devices" instance=ExtResource("4_4jiu6")]
-transform = Transform3D(1, 0, 0, 0, 1, 0, 0, 0, 1, 0.03, -0.29, 0)
+transform = Transform3D(1, 0, 0, 0, 1, 0, 0, 0, 1, 0.02, -0.29, 0)
+pages = 10
 size = Vector3(9.92, 0.03, 0.01)
 
 [node name="Entities" type="Node3D" parent="."]
 script = ExtResource("5_t34xe")
 
-[node name="GridContainer3D" type="Node3D" parent="Entities"]
+[node name="FlexContainer3D" type="Node3D" parent="Entities"]
-transform = Transform3D(1, 0, 0, 0, 1, 0, 0, 0, 1, 0.05, -0.08, 0)
+transform = Transform3D(1, 0, 0, 0, 1, 0, 0, 0, 1, 0.03, -0.06, 0)
-script = ExtResource("3_0xvyw")
+script = ExtResource("6_cr6p6")
-columns = 7
+vertical = true
-gaps = Vector2(0.01, 0.01)
+gap = 0.01
-size = Vector3(0.28, 0.1, 0.1)
+size = Vector3(1, 0.2, 1)
 
 [node name="Pagination3D" parent="Entities" instance=ExtResource("4_4jiu6")]
-transform = Transform3D(1, 0, 0, 0, 1, 0, 0, 0, 1, 0.03, -0.29, 0)
+transform = Transform3D(1, 0, 0, 0, 1, 0, 0, 0, 1, 0.02, -0.29, 0)
+pages = 10
 size = Vector3(9.92, 0.03, 0.01)
 
 [node name="Label3D" type="Label3D" parent="Entities"]

app/content/ui/menu/edit/entities.gd

@@ -3,14 +3,14 @@ extends Node3D
 signal on_select_entity(entity_id)
 signal on_back()
 
-const ButtonScene = preload ("res://content/ui/components/button/button.tscn")
+const EntityScene = preload ("entity.tscn")
 
-@onready var grid_container = $GridContainer3D
+@onready var entity_container = $FlexContainer3D
 @onready var pagination = $Pagination3D
 @onready var back_button = $Button
 
 var page = R.state(0)
-var page_size = 28.0
+var page_size = 5.0
 var selected_device = R.state(null)
 
 func _ready():
@@ -40,16 +40,19 @@ func _ready():
 	)
 
 	R.effect(func(_arg):
-		for child in grid_container.get_children():
+		for child in entity_container.get_children():
-			grid_container.remove_child(child)
+			entity_container.remove_child(child)
-			child.free()
+			child.queue_free()
 
 		for entity in visible_entities.value:
-			var button_instance=ButtonScene.instantiate()
+			var entity_node=EntityScene.instantiate()
-			button_instance.label=entity
+			entity_node.icon=EntityFactory.get_entity_icon(entity.split(".")[0])
-			button_instance.on_button_down.connect(func():
+			entity_node.text=entity
+			entity_node.on_select.connect(func():
 				on_select_entity.emit(entity)
 			)
-			grid_container.add_child(button_instance)
+			entity_container.add_child(entity_node)
+
+		entity_container._update()
 
 	)

app/content/ui/menu/edit/entity.gd

@@ -0,0 +1,32 @@
+@tool
+extends FlexContainer3D
+
+signal on_select()
+
+@onready var button = $Button
+@onready var label = $LabelContainer
+
+@export var icon: String = "question_mark":
+	set(value):
+		icon = value
+		_update()
+
+@export var text: String = "Button":
+	set(value):
+		text = value
+		_update()
+
+func _ready():
+	super._ready()
+
+	button.on_button_up.connect(func():
+		on_select.emit()
+	)
+
+func _update():
+	if !is_node_ready(): return
+
+	button.label = icon
+	label.text = text
+
+	super._update()

app/content/ui/menu/edit/entity.tscn

@@ -0,0 +1,22 @@
+[gd_scene load_steps=4 format=3 uid="uid://uogsamyglyw5"]
+
+[ext_resource type="Script" path="res://content/ui/menu/edit/entity.gd" id="1_d4c6l"]
+[ext_resource type="PackedScene" uid="uid://bsjqdvkt0u87c" path="res://content/ui/components/button/button.tscn" id="2_gi1de"]
+[ext_resource type="PackedScene" uid="uid://blkfqa3ttk0d2" path="res://content/ui/components/label_container/label_container.tscn" id="3_vva3t"]
+
+[node name="Entity" type="Node3D"]
+script = ExtResource("1_d4c6l")
+gap = 0.01
+size = Vector3(0.35, 0.03, 1)
+
+[node name="Button" parent="." instance=ExtResource("2_gi1de")]
+transform = Transform3D(1, 0, 0, 0, 1, 0, 0, 0, 1, 0.015, 0, 0)
+label = "question_mark"
+icon = true
+size = Vector3(0.03, 0.03, 0.01)
+
+[node name="LabelContainer" parent="." instance=ExtResource("3_vva3t")]
+transform = Transform3D(1, 0, 0, 0, 1, 0, 0, 0, 1, 0.0615, 0, 0)
+text = "Button"
+font_size = 12
+size = Vector3(0.043, 0.015, 0.1)

app/content/ui/menu/menu.tscn

@@ -221,7 +221,7 @@ mesh = SubResource("QuadMesh_7q1en")
 skeleton = NodePath("../..")
 
 [node name="Tabs" type="Node3D" parent="AnimationContainer" node_paths=PackedStringArray("initial_selected")]
-transform = Transform3D(1, 0, 0, 0, 1, 0, 0, 0, 1, -0.02, -0.03, 0)
+transform = Transform3D(1, 0, 0, 0, 1, 0, 0, 0, 1, -0.02, -0.005, 0)
 script = ExtResource("4_eavfx")
 initial_selected = NodePath("View")
 vertical = true
@@ -229,6 +229,7 @@ gap = 0.01
 size = Vector3(0.05, 0.4, 1)
 
 [node name="View" parent="AnimationContainer/Tabs" instance=ExtResource("5_w4i01")]
+transform = Transform3D(1, 0, 0, 0, 1, 0, 0, 0, 1, 0, -0.025, 0)
 label = "visibility"
 icon = true
 toggleable = true
@@ -236,28 +237,28 @@ disabled = true
 size = Vector3(0.05, 0.05, 0.01)
 
 [node name="Edit" parent="AnimationContainer/Tabs" instance=ExtResource("5_w4i01")]
-transform = Transform3D(1, 0, 0, 0, 1, 0, 0, 0, 1, 0, -0.06, 0)
+transform = Transform3D(1, 0, 0, 0, 1, 0, 0, 0, 1, 0, -0.085, 0)
 label = "widgets"
 icon = true
 toggleable = true
 size = Vector3(0.05, 0.05, 0.01)
 
 [node name="Room" parent="AnimationContainer/Tabs" instance=ExtResource("5_w4i01")]
-transform = Transform3D(1, 0, 0, 0, 1, 0, 0, 0, 1, 0, -0.12, 0)
+transform = Transform3D(1, 0, 0, 0, 1, 0, 0, 0, 1, 0, -0.145, 0)
 label = "view_in_ar"
 icon = true
 toggleable = true
 size = Vector3(0.05, 0.05, 0.01)
 
 [node name="Automate" parent="AnimationContainer/Tabs" instance=ExtResource("5_w4i01")]
-transform = Transform3D(1, 0, 0, 0, 1, 0, 0, 0, 1, 0, -0.18, 0)
+transform = Transform3D(1, 0, 0, 0, 1, 0, 0, 0, 1, 0, -0.205, 0)
 label = "schema"
 icon = true
 toggleable = true
 size = Vector3(0.05, 0.05, 0.01)
 
 [node name="Settings" parent="AnimationContainer/Tabs" instance=ExtResource("5_w4i01")]
-transform = Transform3D(1, 0, 0, 0, 1, 0, 0, 0, 1, 0, -0.24, 0)
+transform = Transform3D(1, 0, 0, 0, 1, 0, 0, 0, 1, 0, -0.265, 0)
 label = "settings"
 icon = true
 toggleable = true

app/content/ui/menu/room/room_menu.tscn

@@ -31,17 +31,20 @@ script = ExtResource("1_ch4jb")
 [node name="Interface" type="Node3D" parent="."]
 
 [node name="Tabs3D" type="Node3D" parent="Interface" node_paths=PackedStringArray("initial_selected")]
-transform = Transform3D(1, 0, 0, 0, 1, 0, 0, 0, 1, 0.04, -0.04, 0)
+transform = Transform3D(1, 0, 0, 0, 1, 0, 0, 0, 1, 0.02, -0.04, 0)
 script = ExtResource("5_ddrep")
 initial_selected = NodePath("Overview")
 gap = 0.01
 
 [node name="Overview" parent="Interface/Tabs3D" instance=ExtResource("4_cghmp")]
+transform = Transform3D(1, 0, 0, 0, 1, 0, 0, 0, 1, 0.03, 0, 0)
 label = "Overview"
+size = Vector3(0.06, 0.04, 0.01)
 
 [node name="Rooms" parent="Interface/Tabs3D" instance=ExtResource("4_cghmp")]
-transform = Transform3D(1, 0, 0, 0, 1, 0, 0, 0, 1, 0.05, 0, 0)
+transform = Transform3D(1, 0, 0, 0, 1, 0, 0, 0, 1, 0.1, 0, 0)
 label = "Rooms"
+size = Vector3(0.06, 0.04, 0.01)
 
 [node name="TabsContent3D" type="Node3D" parent="Interface" node_paths=PackedStringArray("tabs")]
 script = ExtResource("6_ba00g")

app/lib/utils/entity_factory.gd

@@ -38,4 +38,25 @@ static func create_entity(id: String, type=null):
 			return null
 			
 	entity.entity_id = id
-	return entity
+	return entity
+
+static func get_entity_icon(type: String) -> String:
+	match type:
+		"switch":
+			return "toggle_on"
+		"light":
+			return "lightbulb"
+		"sensor":
+			return "sensors"
+		"media_player":
+			return "play_circle"
+		"camera":
+			return "photo_camera"
+		"button":
+			return "radio_button_checked"
+		"number":
+			return "sliders"
+		"line_chart":
+			return "finance"
+		_:
+			return "question_mark"