From e2c9a7d9d66b10b11f16a02ee0d32b4f12d25d12 Mon Sep 17 00:00:00 2001 From: Insality Date: Thu, 10 Apr 2025 01:07:12 +0300 Subject: [PATCH] Update README --- README.md | 44 +++++++++++++++++++++------------------ api/druid_instance_api.md | 1 - wiki/changelog.md | 21 +++++++++++++------ wiki/widgets.md | 33 +++++++++++++++++++++++------ 4 files changed, 66 insertions(+), 33 deletions(-) diff --git a/README.md b/README.md index b6718c8..57276f7 100644 --- a/README.md +++ b/README.md @@ -39,7 +39,7 @@ https://github.com/Insality/druid/archive/refs/tags/1.0.zip **[Defold Event](https://github.com/Insality/defold-event)** ``` -https://github.com/Insality/defold-event/archive/refs/tags/10.zip +https://github.com/Insality/defold-event/archive/refs/tags/11.zip ``` After that, select `Project ▸ Fetch Libraries` to update [library dependencies]((https://defold.com/manuals/libraries/#setting-up-library-dependencies)). This happens automatically whenever you open a project so you will only need to do this if the dependencies change without re-opening the project. @@ -87,25 +87,25 @@ Here is full **Druid** components list. | Name | Description | Example |
Preview
| |------|-------------|---------|---------| -| **[Button](https://insality.github.io/druid/modules/Button.html)** | Logic over GUI Node. Handle the user click interactions: click, long click, double click, etc. | [Button Example](https://insality.github.io/druid/?example=ui_example_basic_button) | | -| **[Text](https://insality.github.io/druid/modules/Text.html)** | Logic over GUI Text. By default Text component fit the text inside text node size area with different adjust modes. | [Text Example](https://insality.github.io/druid/?example=ui_example_basic_text) | | -| **[Scroll](https://insality.github.io/druid/modules/Scroll.html)** | Logic over two GUI Nodes: input and content. Provides basic behaviour for scrollable content. | [Scroll Example](https://insality.github.io/druid/?example=ui_example_basic_scroll) | | -| **[Blocker](https://insality.github.io/druid/modules/Blocker.html)** | Logic over GUI Node. Don't pass any user input below node area size. | [Blocker Example](https://insality.github.io/druid/?example=ui_example_basic_blocker) | | -| **[Back Handler](https://insality.github.io/druid/modules/BackHandler.html)** | Call callback on user "Back" action. It's a Android back button or keyboard backspace key | [Back Handler Example](https://insality.github.io/druid/?example=ui_example_basic_back_handler) | | -| **[Static Grid](https://insality.github.io/druid/modules/StaticGrid.html)** | Logic over GUI Node. Component to manage node positions with all equal node sizes. | [Static Gid Example](https://insality.github.io/druid/?example=ui_example_basic_grid) | | -| **[Hover](https://insality.github.io/druid/modules/Hover.html)** | Logic over GUI Node. Handle hover action over node. For both: mobile touch and mouse cursor. | [Hover Example](https://insality.github.io/druid/?example=ui_example_basic_hover) | | -| **[Swipe](https://insality.github.io/druid/modules/Swipe.html)** | Logic over GUI Node. Handle swipe gestures over node. | [Swipe Example](https://insality.github.io/druid/?example=ui_example_basic_swipe) | | -| **[Drag](https://insality.github.io/druid/modules/Drag.html)** | Logic over GUI Node. Handle drag input actions. Can be useful to make on screen controlls. | [Drag Example](https://insality.github.io/druid/?example=ui_example_basic_drag) | | -| **[Data List](https://insality.github.io/druid/modules/DataList.html)** | Logic over Scroll and Grid components. Create only visible GUI nodes or components to make "infinity" scroll befaviour | [Data List Example](https://insality.github.io/druid/?example=ui_example_data_list_basic) | | -| **[Input](https://insality.github.io/druid/modules/Input.html)** | Logic over GUI Node and GUI Text (or Text component). Provides basic user text input. | [Input Example](https://insality.github.io/druid/?example=ui_example_basic_input) | | -| **[Lang text](https://insality.github.io/druid/modules/LangText.html)** | Logic over Text component to handle localization. Can be translated in real-time with `druid.on_language_change` | [Lang Text Example](https://insality.github.io/druid/?example=ui_example_window_language) | | -| **[Progress](https://insality.github.io/druid/modules/Progress.html)** | Logic over GUI Node. Handle node size and scale to handle progress node size. | [Progress Example](https://insality.github.io/druid/?example=ui_example_basic_progress_bar) | | -| **[Slider](https://insality.github.io/druid/modules/Slider.html)** | Logic over GUI Node. Handle draggable node with position restrictions. | [Slider Example](https://insality.github.io/druid/?example=ui_example_basic_slider) | | -| **[Timer](https://insality.github.io/druid/modules/Timer.html)** | Logic over GUI Text. Handle basic timer functions. | [Timer Example](https://insality.github.io/druid/?example=ui_example_basic_timer) | | -| **[Hotkey](https://insality.github.io/druid/modules/Hotkey.html)** | Allow to set callbacks for keyboard hotkeys with key modificators. | [Hotkey Example](https://insality.github.io/druid/?example=ui_example_basic_hotkey) | | -| **[Layout](https://insality.github.io/druid/modules/Layout.html)** | Logic over GUI Node. Arrange nodes inside layout node with margin/paddings settings. | [Layout Example](https://insality.github.io/druid/?example=ui_example_layout_basic) | | -| **[Rich Input](https://insality.github.io/druid/modules/RichInput.html)** | Logic over GUI Node and GUI Text (or Text component). Provides rich text input with different styles and text formatting. | [Rich Input Example](https://insality.github.io/druid/?example=ui_example_basic_rich_input) | | -| **[Rich Text](https://insality.github.io/druid/modules/RichText.html)** | Logic over GUI Text. Provides rich text formatting with different styles and text formatting. | [Rich Text Example](https://insality.github.io/druid/?example=ui_example_basic_rich_text) | | +| **[Button](/api/components/base/button_api.md)** | Logic over GUI Node. Handle the user click interactions: click, long click, double click, etc. | [Button Example](https://insality.github.io/druid/?example=ui_example_basic_button) | | +| **[Text](/api/components/base/text_api.md)** | Logic over GUI Text. By default Text component fit the text inside text node size area with different adjust modes. | [Text Example](https://insality.github.io/druid/?example=ui_example_basic_text) | | +| **[Scroll](/api/components/base/scroll_api.md)** | Logic over two GUI Nodes: input and content. Provides basic behaviour for scrollable content. | [Scroll Example](https://insality.github.io/druid/?example=ui_example_basic_scroll) | | +| **[Blocker](/api/components/base/blocker_api.md)** | Logic over GUI Node. Don't pass any user input below node area size. | [Blocker Example](https://insality.github.io/druid/?example=ui_example_basic_blocker) | | +| **[Back Handler](/api/components/base/back_handler_api.md)** | Call callback on user "Back" action. It's a Android back button or keyboard backspace key | [Back Handler Example](https://insality.github.io/druid/?example=ui_example_basic_back_handler) | | +| **[Static Grid](/api/components/base/static_grid_api.md)** | Logic over GUI Node. Component to manage node positions with all equal node sizes. | [Static Gid Example](https://insality.github.io/druid/?example=ui_example_basic_grid) | | +| **[Hover](/api/components/base/hover_api.md)** | Logic over GUI Node. Handle hover action over node. For both: mobile touch and mouse cursor. | [Hover Example](https://insality.github.io/druid/?example=ui_example_basic_hover) | | +| **[Swipe](/api/components/base/swipe_api.md)** | Logic over GUI Node. Handle swipe gestures over node. | [Swipe Example](https://insality.github.io/druid/?example=ui_example_basic_swipe) | | +| **[Drag](/api/components/base/drag_api.md)** | Logic over GUI Node. Handle drag input actions. Can be useful to make on screen controlls. | [Drag Example](https://insality.github.io/druid/?example=ui_example_basic_drag) | | +| **[Data List](/api/components/extended/data_list_api.md)** | Logic over Scroll and Grid components. Create only visible GUI nodes or components to make "infinity" scroll befaviour | [Data List Example](https://insality.github.io/druid/?example=ui_example_data_list_basic) | | +| **[Input](/api/components/extended/input_api.md)** | Logic over GUI Node and GUI Text (or Text component). Provides basic user text input. | [Input Example](https://insality.github.io/druid/?example=ui_example_basic_input) | | +| **[Lang text](/api/components/extended/lang_text_api.md)** | Logic over Text component to handle localization. Can be translated in real-time with `druid.on_language_change` | [Lang Text Example](https://insality.github.io/druid/?example=ui_example_window_language) | | +| **[Progress](/api/components/extended/progress_api.md)** | Logic over GUI Node. Handle node size and scale to handle progress node size. | [Progress Example](https://insality.github.io/druid/?example=ui_example_basic_progress_bar) | | +| **[Slider](/api/components/extended/slider_api.md)** | Logic over GUI Node. Handle draggable node with position restrictions. | [Slider Example](https://insality.github.io/druid/?example=ui_example_basic_slider) | | +| **[Timer](/api/components/extended/timer_api.md)** | Logic over GUI Text. Handle basic timer functions. | [Timer Example](https://insality.github.io/druid/?example=ui_example_basic_timer) | | +| **[Hotkey](/api/components/extended/hotkey_api.md)** | Allow to set callbacks for keyboard hotkeys with key modificators. | [Hotkey Example](https://insality.github.io/druid/?example=ui_example_basic_hotkey) | | +| **[Layout](/api/components/extended/layout_api.md)** | Logic over GUI Node. Arrange nodes inside layout node with margin/paddings settings. | [Layout Example](https://insality.github.io/druid/?example=ui_example_layout_basic) | | +| **[Rich Input](/api/components/custom/rich_input_api.md)** | Logic over GUI Node and GUI Text (or Text component). Provides rich text input with different styles and text formatting. | [Rich Input Example](https://insality.github.io/druid/?example=ui_example_basic_rich_input) | | +| **[Rich Text](/api/components/custom/rich_text_api.md)** | Logic over GUI Text. Provides rich text formatting with different styles and text formatting. | [Rich Text Example](https://insality.github.io/druid/?example=ui_example_basic_rich_text) | | ## Druid Events @@ -134,6 +134,7 @@ input.on_input_unselect:subscribe(function(self, text) end) ``` + ## Details - **Druid** processes input in a stack-based manner. The most recently created button will be checked first. Create your input GUI components from back to front. @@ -150,6 +151,7 @@ Each example page provides a direct link to the corresponding example code, maki Or refer directly to the [**example folder**](https://github.com/Insality/druid/tree/develop/example) for code examples demonstrating how to use **Druid**. + ## Documentation You can find the full **Druid** functions at [Quick API Reference](api/quick_api_reference.md) @@ -178,6 +180,8 @@ For a complete history of the development of **Druid**, please check the [change ## 👏 Contributors +Original idea by [AGulev](https://github.com/AGulev) + Special thanks to all the contributors who have helped make **Druid** better! diff --git a/api/druid_instance_api.md b/api/druid_instance_api.md index 6055c93..5979f00 100644 --- a/api/druid_instance_api.md +++ b/api/druid_instance_api.md @@ -7,7 +7,6 @@ The Druid Factory used to create components ## Functions - [create_druid_instance](#create_druid_instance) - - [new](#new) - [final](#final) - [remove](#remove) diff --git a/wiki/changelog.md b/wiki/changelog.md index 39ff472..8288b6f 100644 --- a/wiki/changelog.md +++ b/wiki/changelog.md @@ -586,26 +586,35 @@ Hello! Druid 1.1 is here! It's brings a lot of new features and improvements. Le **Changelog 1.1** - Remove external annotations, remove old HTML API page -- Fully annotated code and new API README page (hope more comfortable to use) +- Fully annotated code and new API README page - Widgets here! - A replacement for `custom_components`. Basically it's the same, but `widgets` contains no boilerplate code and more convinient to use. - Now I can include a kind of `widgets` with Druid and you can use it almost instantly in your project. -- Removed `druid.register()`. Now all components are available by default and available with `self.druid:new_*` functions +- Deprecated `druid.register()`. Now all Druid's components are available by default and available with `self.druid:new_*` functions - This means the Druid will be bigger in size, but it's much comfortable to use - - In case you want to delete components you not using, you can do it in fork in `druid.lua` file + - In case you want to delete components you are not using, you can do it in fork in `druid.lua` file + - Read [optimize_druid_size.md](optimize_druid_size.md) to learn how to reduce the size of the Druid library if you need - Any additional widgets, color library will be not included until you use it -- Remove `druid.event`, replaced with `defold-event` library. Now it required to double dependency to use Druid. -- Add Druid UI kit, contains atlas so now you can use Druid GUI files in your projects. +- Remove `druid.event`, replaced with `defold-event` library. Now it required to two dependencies to use Druid. + - This allow to make more flexible features, like shaders and sync init between script and gui_script in various cases. + - Use 11+ version of `defold-event` library: `https://github.com/Insality/defold-event/archive/refs/tags/11.zip` +- Add Druid UI Kit, contains atlas so now you can use Druid GUI files in your projects. - Contains mostly basic shapes for the UI and can contains several icons. Atlas is a small, only `128x128` size and will be included in build only if you use it. + - A long waited feature which allows try or just use some Druid GUI features almost instantly. +- [System]: Huge code refactoring and improvements. The goal is to raise maintainability and readability of the code to help people to contribute to the Druid. + - Add [CONTRIBUTING.md](/CONTRIBUTING.md) file with various information to help people to contribute to the Druid. + - All Druid Examples was migrated to use Widgets instead of Custom Components. - [Text]: Add `trim_left` and `scale_then_trim_left` text adjust modes -- [Text]: Add `set_text` function instead `set_to` (now it deprecated) +- [Text]: Add `set_text` function instead `set_to` (the `set_to` now deprecated) - Add `druid.color` module to work with colors and palettes - Add `container` component to handle more complex adaptive layouts + - The container component is still in a development and I expected the various changes in the future - [Shaders] Add repeat, hard image stencil and world gui materials - [Widget] Add widget `mini_graph` - [Widget] Add widget `memory_panel` - [Widget] Add widget `fps_panel` - [Widget] Add widget `properties_panel` + - A widget where you can add different properties to the panel to make easy edit/debug panels - Include `property_button` widget - Include `property_checkbox` widget - Include `property_input` widget diff --git a/wiki/widgets.md b/wiki/widgets.md index f19a6e3..a51c387 100644 --- a/wiki/widgets.md +++ b/wiki/widgets.md @@ -14,12 +14,20 @@ local component = require("druid.component") ---@class my_component: druid.component local M = component.create("my_component") -function M:init(template, nodes, output_string) +function M:init(template, nodes) self:set_template(template) self:set_nodes(nodes) self.druid = self:get_druid() - self.druid:new_button("button_node_name", print, output_string) + self.druid:new_button("button_node_name", self.on_click) +end + +function M:on_click() + print("Current output string: " .. self.output_string) +end + +function M:set_output_string(output_string) + self.output_string = output_string end ``` @@ -29,7 +37,8 @@ Basic components are created with the `druid:new()` function: local template = "my_component" -- The template name on GUI scene, if nil will take nodes directly by gui.get_node() local nodes = gui.clone_tree(gui.get_node("my_component/root")) -- We can clone component nodes and init over cloned nodes -local my_component = druid:new("my_component", template, nodes, "Hello world!") +local my_component = druid:new("my_component", template, nodes) +my_component:set_output_string("Hello world!") ``` Now, let's see how to do it with widgets: @@ -38,8 +47,17 @@ Now, let's see how to do it with widgets: ---@type my_widget: druid.widget local M = {} -function M:init(output_string) - self.druid:new_button("button_node_name", print, output_string) +function M:init() + self.druid:new_button("button_node_name", self.on_click) + self.output_string = "" +end + +function M:on_click() + print("Current output string: " .. self.output_string) +end + +function M:set_output_string(output_string) + self.output_string = output_string end return M @@ -55,7 +73,10 @@ local my_widget = require("widgets.my_widget.my_widget") function init(self) self.druid = druid.new(self) - self.my_widget = self.druid:new_widget(my_widget, template, nodes, "Hello world!") + local template_id = "my_widget" -- If using a GUI template, set a template id, otherwise set nil + local nodes = nil -- If nodes are cloned with gui.clone_tree(), set a nodes table, otherwise set nil + self.my_widget = self.druid:new_widget(my_widget, template_id, nodes) + self.my_widget:set_output_string("Hello world!") end ```