Progress with widget examples

druid/editor_scripts/widget.lua_template

@@ -7,6 +7,12 @@ local M = {}
 
 
 function M:init()
+	-- Now we have next functions to use here:
+	-- self:get_node([node_id]) -- Get node inside widget by id
+	-- self.druid to access Druid Instance API, like:
+	-- self.druid:new_button([node_id], [callback])
+	-- self.druid:new_text([node_id], [text])
+	-- And all functions from component.lua file
 	self.root = self:get_node("root")
 	self.button = self.druid:new_button("button", self.on_button, self)
 end

example/druid.gui_script

@@ -89,7 +89,7 @@ local function setup_components(self)
 	self.examples_list_view = self.druid:new(examples_list_view, "examples_list_view") --[[@as examples_list_view]]
 	self.container_examples:add_container(self.examples_list_view.root)
 
-	self.properties_panel = self.druid:new(properties_panel, "properties_panel") --[[@as properties_panel]]
+	self.properties_panel = self.druid:new(properties_panel, "example_properties_panel") --[[@as properties_panel]]
 	self.container_settings:add_container(self.properties_panel.root)
 
 	self.output_list = self.druid:new(output_list, "output_list") --[[@as output_list]]

example/examples/basic/rich_text/rich_text_tags.lua

@@ -25,7 +25,7 @@ function M:init(template, nodes)
 	self.rich_text_breaks:set_text("Hello, I'm Rich Text<br/>With \"<color=E6DF9F>Line Breaks</color>\"\nEnabled in GUI")
 
 	self.rich_text_image = self.druid:new_rich_text("rich_text_image") --[[@as druid.rich_text]]
-	self.rich_text_image:set_text("Hello, I'm<img=druid:icon_cross,32/>Rich Text <img=druid_logo:icon_druid,48/> <color=8ED59E><img=druid_logo:icon_druid,48/></color> <color=F49B9B><img=druid_logo:icon_druid,48/></color>")
+	self.rich_text_image:set_text("Hello, I'm<img=druid_example:icon_cross,32/>Rich Text <img=druid_logo:icon_druid,48/> <color=8ED59E><img=druid_logo:icon_druid,48/></color> <color=F49B9B><img=druid_logo:icon_druid,48/></color>")
 
 	self.position = {
 		[self.rich_text_color] = gui.get_position(self.rich_text_color.root),

example/examples/intro/examples_list.lua

@@ -12,6 +12,14 @@ function M.get_examples()
 			code_url = "example/examples/intro/intro/intro.lua",
 			component_class = require("example.examples.intro.intro.intro"),
 		},
+		--{
+		--	name_id = "ui_example_how_to_use_example",
+		--	information_text_id = "ui_example_how_to_use_example_description",
+		--	template = "how_to_use_example",
+		--	root = "how_to_use_example/root",
+		--	code_url = "example/examples/intro/how_to_use_example/how_to_use_example.lua",
+		--	component_class = require("example.examples.intro.how_to_use_example.how_to_use_example"),
+		--}
 	}
 end
 

example/examples/intro/how_to_use_example/how_to_use_example.gui

@@ -0,0 +1,257 @@
+fonts {
+  name: "text_bold"
+  font: "/example/assets/fonts/text_bold.font"
+}
+fonts {
+  name: "text_regular"
+  font: "/example/assets/fonts/text_regular.font"
+}
+textures {
+  name: "druid_example"
+  texture: "/example/assets/druid_example.atlas"
+}
+textures {
+  name: "druid_logo"
+  texture: "/example/assets/druid_logo.atlas"
+}
+nodes {
+  size {
+    x: 600.0
+    y: 1000.0
+  }
+  color {
+    x: 0.173
+    y: 0.184
+    z: 0.204
+  }
+  type: TYPE_BOX
+  texture: "druid_example/ui_circle_64"
+  id: "root"
+  inherit_alpha: true
+  slice9 {
+    x: 32.0
+    y: 32.0
+    z: 32.0
+    w: 32.0
+  }
+}
+nodes {
+  position {
+    x: -180.0
+    y: 375.0
+  }
+  type: TYPE_BOX
+  texture: "druid_logo/icon_druid"
+  id: "icon_druid_left"
+  parent: "root"
+  layer: "druid_logo"
+  inherit_alpha: true
+  alpha: 0.75
+  size_mode: SIZE_MODE_AUTO
+}
+nodes {
+  position {
+    x: 180.0
+    y: 375.0
+  }
+  type: TYPE_BOX
+  texture: "druid_logo/icon_druid"
+  id: "icon_druid_right"
+  parent: "root"
+  layer: "druid_logo"
+  inherit_alpha: true
+  alpha: 0.75
+  size_mode: SIZE_MODE_AUTO
+}
+nodes {
+  position {
+    y: 255.0
+  }
+  scale {
+    x: 2.0
+    y: 2.0
+  }
+  size {
+    x: 200.0
+    y: 40.0
+  }
+  color {
+    x: 0.941
+    y: 0.984
+  }
+  type: TYPE_TEXT
+  text: "Hello!"
+  font: "text_bold"
+  id: "text_hello"
+  parent: "root"
+  inherit_alpha: true
+  outline_alpha: 0.0
+  shadow_alpha: 0.0
+}
+nodes {
+  position {
+    x: -210.0
+    y: 191.0
+  }
+  scale {
+    x: 0.7
+    y: 0.7
+  }
+  size {
+    x: 600.0
+    y: 400.0
+  }
+  color {
+    x: 0.525
+    y: 0.525
+    z: 0.525
+  }
+  type: TYPE_TEXT
+  text: "Welcome to Druid Example Page\n"
+  "\n"
+  "Navigate over examples on the left\n"
+  "\n"
+  "Check example info on the right"
+  font: "text_bold"
+  id: "text_description"
+  pivot: PIVOT_NW
+  line_break: true
+  parent: "root"
+  inherit_alpha: true
+  outline_alpha: 0.0
+  shadow_alpha: 0.0
+}
+nodes {
+  position {
+    x: -210.0
+    y: -189.0
+  }
+  scale {
+    x: 0.7
+    y: 0.7
+  }
+  size {
+    x: 600.0
+    y: 300.0
+  }
+  color {
+    x: 0.525
+    y: 0.525
+    z: 0.525
+  }
+  type: TYPE_TEXT
+  text: "Your donation helps me stay engaged in creating valuable projects for Defold.\n"
+  "\n"
+  "If you appreciate what I\'m doing, please consider supporting me!"
+  font: "text_bold"
+  id: "text_support"
+  pivot: PIVOT_W
+  line_break: true
+  parent: "root"
+  inherit_alpha: true
+  outline_alpha: 0.0
+  shadow_alpha: 0.0
+}
+nodes {
+  position {
+    x: -170.0
+    y: -364.0
+  }
+  type: TYPE_BOX
+  texture: "druid_example/icon_heart"
+  id: "icon_heart1"
+  parent: "root"
+  inherit_alpha: true
+  alpha: 0.75
+  size_mode: SIZE_MODE_AUTO
+}
+nodes {
+  position {
+    y: -364.0
+  }
+  type: TYPE_BOX
+  texture: "druid_example/icon_heart"
+  id: "icon_heart2"
+  parent: "root"
+  inherit_alpha: true
+  alpha: 0.75
+  size_mode: SIZE_MODE_AUTO
+}
+nodes {
+  position {
+    x: 170.0
+    y: -364.0
+  }
+  type: TYPE_BOX
+  texture: "druid_example/icon_heart"
+  id: "icon_heart3"
+  parent: "root"
+  inherit_alpha: true
+  alpha: 0.75
+  size_mode: SIZE_MODE_AUTO
+}
+nodes {
+  position {
+    y: -450.0
+  }
+  size {
+    x: 500.0
+    y: 80.0
+  }
+  type: TYPE_BOX
+  id: "sponsor"
+  parent: "root"
+  inherit_alpha: true
+  size_mode: SIZE_MODE_AUTO
+  visible: false
+}
+nodes {
+  position {
+    x: -196.0
+    y: -3.0
+  }
+  type: TYPE_BOX
+  texture: "druid_logo/sponsor_github"
+  id: "sponsor_github"
+  parent: "sponsor"
+  layer: "druid_logo"
+  inherit_alpha: true
+  alpha: 0.75
+  size_mode: SIZE_MODE_AUTO
+}
+nodes {
+  position {
+    x: 21.0
+    y: -3.0
+  }
+  type: TYPE_BOX
+  texture: "druid_logo/sponsor_coffee"
+  id: "sponsor_coffee"
+  parent: "sponsor"
+  layer: "druid_logo"
+  inherit_alpha: true
+  alpha: 0.75
+  size_mode: SIZE_MODE_AUTO
+}
+nodes {
+  position {
+    x: 217.0
+    y: -3.0
+  }
+  type: TYPE_BOX
+  texture: "druid_logo/sponsor_kofi"
+  id: "sponsor_kofi"
+  parent: "sponsor"
+  layer: "druid_logo"
+  inherit_alpha: true
+  alpha: 0.75
+  size_mode: SIZE_MODE_AUTO
+}
+layers {
+  name: "druid_logo"
+}
+layers {
+  name: "text_regular"
+}
+material: "/builtins/materials/gui.material"
+adjust_reference: ADJUST_REFERENCE_PARENT

example/examples/intro/how_to_use_example/how_to_use_example.lua

@@ -0,0 +1,33 @@
+local component = require("druid.component")
+local panthera = require("panthera.panthera")
+
+---@class how_to_use_example: druid.base_component
+---@field root node
+local M = component.create("how_to_use_example")
+
+---@param template string
+---@param nodes table<hash, node>
+function M:init(template, nodes)
+	self.druid = self:get_druid(template, nodes)
+	self.root = self:get_node("root")
+
+	self.druid:new_rich_text("text_hello", "He<color=#E48155>ll</color>o!")
+
+	self.druid:new_button("sponsor_github", self.open_link, "https://github.com/sponsors/insality")
+	self.druid:new_button("sponsor_coffee", self.open_link, "https://www.buymeacoffee.com/insality")
+	self.druid:new_button("sponsor_kofi", self.open_link, "https://ko-fi.com/insality")
+
+	self.druid:new_layout("sponsor")
+		:add("sponsor_github")
+		:add("sponsor_coffee")
+		:add("sponsor_kofi")
+		:set_margin(8, 0)
+end
+
+
+function M:open_link(link)
+	sys.open_url(link, { target = "_blank" })
+end
+
+
+return M

example/examples/intro/intro/intro.lua

@@ -3,7 +3,6 @@ local panthera = require("panthera.panthera")
 local intro_panthera = require("example.examples.intro.intro.intro_panthera")
 
 ---@class intro: druid.base_component
----@field druid druid_instance
 ---@field root node
 local M = component.create("intro")
 
@@ -35,4 +34,9 @@ function M:open_link(link)
 end
 
 
+function M:on_remove()
+	panthera.stop(self.animation)
+end
+
+
 return M

example/examples/widgets/examples_list.lua

@@ -11,6 +11,72 @@ function M.get_examples()
 			code_url = "example/examples/widgets/hover_hint/hover_hint_example.lua",
 			component_class = require("example.examples.widgets.hover_hint.hover_hint_example"),
 		},
+		{
+			name_id = "ui_example_widget_properties_panel",
+			information_text_id = "ui_example_widget_properties_panel_description",
+			template = "properties_panel",
+			root = "properties_panel/root",
+			code_url = "example/examples/widgets/properties_panel/properties_panel.lua",
+			widget_class = require("druid.widget.properties_panel.properties_panel"),
+			on_create = function(instance, output_list)
+				---@cast instance widget.properties_panel
+
+				instance:add_button(function(button)
+					button:set_text_button("Button")
+					button.button.on_click:subscribe(function()
+						print("Button clicked")
+					end)
+				end)
+
+				instance:add_checkbox(function(checkbox)
+					--print("Checkbox clicked", value)
+					checkbox:set_text_property("Checkbox")
+					checkbox.on_change_value:subscribe(function(value)
+						print("Checkbox clicked", value)
+					end)
+					checkbox:set_value(false)
+				end)
+
+				instance:add_input(function(input)
+					input:set_text_property("Input")
+					input:set_text_value("Initial")
+					input:on_change(function(text)
+						print("Input changed", text)
+					end)
+				end)
+
+				instance:add_left_right_selector(function(selector)
+					selector:set_template("Arrows Number")
+					selector.on_change_value:subscribe(function(value)
+						print("Left Right Selector changed", value)
+					end)
+					selector:set_number_type(0, 42, true, 1)
+					selector:set_value(0)
+				end)
+
+				instance:add_left_right_selector(function(selector)
+					selector:set_template("Arrows Array")
+					selector.on_change_value:subscribe(function(value)
+						print("Left Right Array value", value)
+					end)
+					selector:set_array_type({"Zero", "One", "Two", "Three", "Four", "Five"}, false, 1)
+					selector:set_value("Zero")
+				end)
+
+				instance:add_slider(function(slider)
+					slider:set_text_property("Slider")
+					slider:set_value(0.5)
+					slider:on_change(function(value)
+						print("Slider changed", value)
+					end)
+				end)
+
+				instance:add_text(function(text)
+					text:set_text_property("Text")
+					text:set_text_value("Hello, World!")
+				end)
+			end,
+		},
 		{
 			name_id = "ui_example_widget_property_button",
 			information_text_id = "ui_example_widget_property_button_description",
@@ -25,6 +91,14 @@ function M.get_examples()
 				end)
 			end,
 		},
+		{
+			name_id = "ui_example_widget_property_input",
+			information_text_id = "ui_example_widget_property_input_description",
+			template = "property_input",
+			root = "property_input/root",
+			code_url = "druid/widget/properties_panel/properties/property_input.lua",
+			widget_class = require("druid.widget.properties_panel.properties.property_input"),
+		},
 		{
 			name_id = "ui_example_widget_property_slider",
 			information_text_id = "ui_example_widget_property_slider_description",
@@ -56,27 +130,54 @@ function M.get_examples()
 		{
 			name_id = "ui_example_widget_memory_panel",
 			information_text_id = "ui_example_widget_memory_panel_description",
-			template = "example_memory_panel",
-			root = "example_memory_panel/root",
-			code_url = "example/examples/widgets/memory_panel/example_memory_panel.lua",
-			widget_class = require("example.examples.widgets.memory_panel.example_memory_panel"),
+			template = "memory_panel",
+			root = "memory_panel/root",
+			code_url = "druid.widget.memory_panel.memory_panel.lua",
+			widget_class = require("druid.widget.memory_panel.memory_panel"),
+			on_create = function(instance, output_list)
+				---@cast instance widget.memory_panel
+				print("Memory panel created")
+			end,
 		},
 		{
 			name_id = "ui_example_widget_fps_panel",
 			information_text_id = "ui_example_widget_fps_panel_description",
-			template = "example_fps_panel",
-			root = "example_fps_panel/root",
-			code_url = "example/examples/widgets/fps_panel/example_fps_panel.lua",
-			widget_class = require("example.examples.widgets.fps_panel.example_fps_panel"),
+			template = "fps_panel",
+			root = "fps_panel/root",
+			code_url = "druid.widget.fps_panel.fps_panel.lua",
+			widget_class = require("druid.widget.fps_panel.fps_panel"),
+			on_create = function(instance, output_list)
+				---@cast instance widget.fps_panel
+				print("FPS panel created")
+			end,
 		},
 		{
-			name_id = "ui_example_widget_properties_panel",
-			information_text_id = "ui_example_widget_properties_panel_description",
-			template = "example_properties_panel",
-			root = "example_properties_panel/root",
-			code_url = "example/examples/widgets/properties_panel/example_properties_panel.lua",
-			widget_class = require("example.examples.widgets.properties_panel.example_properties_panel"),
-		},
+			name_id = "ui_example_widget_mini_graph",
+			information_text_id = "ui_example_widget_mini_graph_description",
+			template = "mini_graph",
+			root = "mini_graph/root",
+			code_url = "druid.widget.mini_graph.mini_graph.lua",
+			widget_class = require("druid.widget.mini_graph.mini_graph"),
+			on_create = function(instance, output_list)
+				---@cast instance widget.mini_graph
+				instance:set_samples(50)
+			end,
+			properties_control = function(instance, properties_panel)
+				---@cast instance widget.mini_graph
+				properties_panel:add_slider("value", 0.5, function(value)
+					-- Remap to -1, 2
+					value = value * 3 - 1
+					for index = 1, 50 do
+						-- Take value each 0.1 step, the higher value at argument value
+						local x = index * (1 / 50)
+						local distance = math.abs(x - value)
+						local line_v = 1 - distance^2
+
+						instance:set_line_value(index, line_v)
+					end
+				end)
+			end,
+		}
 	}
 end