Partydeck/Extension-Druid
3
0
Fork 0
mirror of https://github.com/Insality/druid.git synced 2025-06-27 02:17:52 +02:00
Code Issues Packages Projects Releases Wiki Activity

Update README

Browse Source
This commit is contained in:
Insality 2025-04-10 01:07:12 +03:00
parent 34be76777b
commit e2c9a7d9d6
4 changed files with 66 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
README.md
View File

@ -39,7 +39,7 @@ https://github.com/Insality/druid/archive/refs/tags/1.0.zip
**[Defold Event](https://github.com/Insality/defold-event)** **[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. 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 | <div style="width:200px">Preview</div> | | Name | Description | Example | <div style="width:200px">Preview</div> |
|------|-------------|---------|---------| |------|-------------|---------|---------|
| **[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) | <img src="media/preview/button.gif" width="200" height="100"> | | **[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) | <img src="media/preview/button.gif" width="200" height="100"> |
| **[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) | <img src="media/preview/text.gif" width="200" height="100"> | | **[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) | <img src="media/preview/text.gif" width="200" height="100"> |
| **[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) | <img src="media/preview/scroll.gif" width="200" height="100"> | | **[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) | <img src="media/preview/scroll.gif" width="200" height="100"> |
| **[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) | <img src="media/preview/blocker.gif" width="200" height="100"> | | **[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) | <img src="media/preview/blocker.gif" width="200" height="100"> |
| **[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) | <img src="media/preview/back_handler.gif" width="200" height="100"> | | **[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) | <img src="media/preview/back_handler.gif" width="200" height="100"> |
| **[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) | <img src="media/preview/static_grid.gif" width="200" height="100"> | | **[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) | <img src="media/preview/static_grid.gif" width="200" height="100"> |
| **[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) | <img src="media/preview/hover.gif" width="200" height="100"> | | **[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) | <img src="media/preview/hover.gif" width="200" height="100"> |
| **[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) | <img src="media/preview/swipe.gif" width="200" height="100"> | | **[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) | <img src="media/preview/swipe.gif" width="200" height="100"> |
| **[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) | <img src="media/preview/drag.gif" width="200" height="100"> | | **[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) | <img src="media/preview/drag.gif" width="200" height="100"> |
| **[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) | <img src="media/preview/data_list.gif" width="200" height="100"> | | **[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) | <img src="media/preview/data_list.gif" width="200" height="100"> |
| **[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) | <img src="media/preview/input.gif" width="200" height="100"> | | **[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) | <img src="media/preview/input.gif" width="200" height="100"> |
| **[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) | <img src="media/preview/lang_text.gif" width="200" height="100"> | | **[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) | <img src="media/preview/lang_text.gif" width="200" height="100"> |
| **[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) | <img src="media/preview/progress.gif" width="200" height="100"> | | **[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) | <img src="media/preview/progress.gif" width="200" height="100"> |
| **[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) | <img src="media/preview/slider.gif" width="200" height="100"> | | **[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) | <img src="media/preview/slider.gif" width="200" height="100"> |
| **[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) | <img src="media/preview/timer.gif" width="200" height="100"> | | **[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) | <img src="media/preview/timer.gif" width="200" height="100"> |
| **[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) | <img src="media/preview/hotkey.gif" width="200" height="100"> | | **[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) | <img src="media/preview/hotkey.gif" width="200" height="100"> |
| **[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) | <img src="media/preview/layout.gif" width="200" height="100"> | | **[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) | <img src="media/preview/layout.gif" width="200" height="100"> |
| **[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) | <img src="media/preview/rich_input.gif" width="200" height="100"> | | **[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) | <img src="media/preview/rich_input.gif" width="200" height="100"> |
| **[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) | <img src="media/preview/rich_text.gif" width="200" height="100"> | | **[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) | <img src="media/preview/rich_text.gif" width="200" height="100"> |
## Druid Events ## Druid Events
@ -134,6 +134,7 @@ input.on_input_unselect:subscribe(function(self, text)
end) end)
``` ```
## Details ## 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. - **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**. Or refer directly to the [**example folder**](https://github.com/Insality/druid/tree/develop/example) for code examples demonstrating how to use **Druid**.
## Documentation ## Documentation
You can find the full **Druid** functions at [Quick API Reference](api/quick_api_reference.md) 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 ## 👏 Contributors
Original idea by [AGulev](https://github.com/AGulev)
Special thanks to all the contributors who have helped make **Druid** better! Special thanks to all the contributors who have helped make **Druid** better!
<a href="https://github.com/Insality/druid/graphs/contributors"> <a href="https://github.com/Insality/druid/graphs/contributors">

1
api/druid_instance_api.md
View File

@ -7,7 +7,6 @@ The Druid Factory used to create components
## Functions ## Functions
- [create_druid_instance](#create_druid_instance) - [create_druid_instance](#create_druid_instance)
- [new](#new) - [new](#new)
- [final](#final) - [final](#final)
- [remove](#remove) - [remove](#remove)

21
wiki/changelog.md
View File

@ -586,26 +586,35 @@ Hello! Druid 1.1 is here! It's brings a lot of new features and improvements. Le
**Changelog 1.1** **Changelog 1.1**
- Remove external annotations, remove old HTML API page - 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! - Widgets here!
- A replacement for `custom_components`. Basically it's the same, but `widgets` contains no boilerplate code and more convinient to use. - 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. - 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 - 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 - 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. - Remove `druid.event`, replaced with `defold-event` library. Now it required to two dependencies to use Druid.
- Add Druid UI kit, contains atlas so now you can use Druid GUI files in your projects. - 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. - 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 `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 `druid.color` module to work with colors and palettes
- Add `container` component to handle more complex adaptive layouts - 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 - [Shaders] Add repeat, hard image stencil and world gui materials
- [Widget] Add widget `mini_graph` - [Widget] Add widget `mini_graph`
- [Widget] Add widget `memory_panel` - [Widget] Add widget `memory_panel`
- [Widget] Add widget `fps_panel` - [Widget] Add widget `fps_panel`
- [Widget] Add widget `properties_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_button` widget
- Include `property_checkbox` widget - Include `property_checkbox` widget
- Include `property_input` widget - Include `property_input` widget

33
wiki/widgets.md
View File

@ -14,12 +14,20 @@ local component = require("druid.component")
---@class my_component: druid.component ---@class my_component: druid.component
local M = component.create("my_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_template(template)
self:set_nodes(nodes) self:set_nodes(nodes)
self.druid = self:get_druid() 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 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 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 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: 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 ---@type my_widget: druid.widget
local M = {} local M = {}
function M:init(output_string) function M:init()
self.druid:new_button("button_node_name", print, output_string) 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 end
return M return M
@ -55,7 +73,10 @@ local my_widget = require("widgets.my_widget.my_widget")
function init(self) function init(self)
self.druid = druid.new(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 end
``` ```