Skip to content

Commit e2c9a7d

Browse files
InsalityInsality
committed
Update README
1 parent 34be767 commit e2c9a7d

File tree

4 files changed

+66
-33
lines changed

4 files changed

+66
-33
lines changed

‎README.md‎

Lines changed: 24 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ https://github.com/Insality/druid/archive/refs/tags/1.0.zip
3939
**[Defold Event](https://github.com/Insality/defold-event)**
4040

4141
```
42-
https://github.com/Insality/defold-event/archive/refs/tags/10.zip
42+
https://github.com/Insality/defold-event/archive/refs/tags/11.zip
4343
```
4444

4545
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.
8787

8888
| Name | Description | Example | <div style="width:200px">Preview</div> |
8989
|------|-------------|---------|---------|
90-
| **[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"> |
91-
| **[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"> |
92-
| **[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"> |
93-
| **[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"> |
94-
| **[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"> |
95-
| **[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"> |
96-
| **[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"> |
97-
| **[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"> |
98-
| **[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"> |
99-
| **[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"> |
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"> |
101-
| **[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"> |
102-
| **[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"> |
103-
| **[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"> |
104-
| **[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"> |
105-
| **[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"> |
106-
| **[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"> |
107-
| **[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"> |
108-
| **[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"> |
90+
| **[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"> |
91+
| **[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"> |
92+
| **[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"> |
93+
| **[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"> |
94+
| **[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"> |
95+
| **[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"> |
96+
| **[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"> |
97+
| **[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"> |
98+
| **[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"> |
99+
| **[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"> |
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"> |
101+
| **[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"> |
102+
| **[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"> |
103+
| **[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"> |
104+
| **[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"> |
105+
| **[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"> |
106+
| **[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"> |
107+
| **[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"> |
108+
| **[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"> |
109109

110110

111111
## Druid Events
@@ -134,6 +134,7 @@ input.on_input_unselect:subscribe(function(self, text)
134134
end)
135135
```
136136

137+
137138
## Details
138139

139140
- **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
150151

151152
Or refer directly to the [**example folder**](https://github.com/Insality/druid/tree/develop/example) for code examples demonstrating how to use **Druid**.
152153

154+
153155
## Documentation
154156

155157
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
178180

179181
## 👏 Contributors
180182

183+
Original idea by [AGulev](https://github.com/AGulev)
184+
181185
Special thanks to all the contributors who have helped make **Druid** better!
182186

183187
<a href="https://github.com/Insality/druid/graphs/contributors">

‎api/druid_instance_api.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ The Druid Factory used to create components
77

88
## Functions
99
- [create_druid_instance](#create_druid_instance)
10-
1110
- [new](#new)
1211
- [final](#final)
1312
- [remove](#remove)

‎wiki/changelog.md‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -586,26 +586,35 @@ Hello! Druid 1.1 is here! It's brings a lot of new features and improvements. Le
586586

587587
**Changelog 1.1**
588588
- Remove external annotations, remove old HTML API page
589-
- Fully annotated code and new API README page (hope more comfortable to use)
589+
- Fully annotated code and new API README page
590590
- Widgets here!
591591
- A replacement for `custom_components`. Basically it's the same, but `widgets` contains no boilerplate code and more convinient to use.
592592
- Now I can include a kind of `widgets` with Druid and you can use it almost instantly in your project.
593-
- Removed `druid.register()`. Now all components are available by default and available with `self.druid:new_*` functions
593+
- Deprecated `druid.register()`. Now all Druid's components are available by default and available with `self.druid:new_*` functions
594594
- This means the Druid will be bigger in size, but it's much comfortable to use
595-
- In case you want to delete components you not using, you can do it in fork in `druid.lua` file
595+
- In case you want to delete components you are not using, you can do it in fork in `druid.lua` file
596+
- Read [optimize_druid_size.md](optimize_druid_size.md) to learn how to reduce the size of the Druid library if you need
596597
- Any additional widgets, color library will be not included until you use it
597-
- Remove `druid.event`, replaced with `defold-event` library. Now it required to double dependency to use Druid.
598-
- Add Druid UI kit, contains atlas so now you can use Druid GUI files in your projects.
598+
- Remove `druid.event`, replaced with `defold-event` library. Now it required to two dependencies to use Druid.
599+
- This allow to make more flexible features, like shaders and sync init between script and gui_script in various cases.
600+
- Use 11+ version of `defold-event` library: `https://github.com/Insality/defold-event/archive/refs/tags/11.zip`
601+
- Add Druid UI Kit, contains atlas so now you can use Druid GUI files in your projects.
599602
- 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.
603+
- A long waited feature which allows try or just use some Druid GUI features almost instantly.
604+
- [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.
605+
- Add [CONTRIBUTING.md](/CONTRIBUTING.md) file with various information to help people to contribute to the Druid.
606+
- All Druid Examples was migrated to use Widgets instead of Custom Components.
600607
- [Text]: Add `trim_left` and `scale_then_trim_left` text adjust modes
601-
- [Text]: Add `set_text` function instead `set_to` (now it deprecated)
608+
- [Text]: Add `set_text` function instead `set_to` (the `set_to` now deprecated)
602609
- Add `druid.color` module to work with colors and palettes
603610
- Add `container` component to handle more complex adaptive layouts
611+
- The container component is still in a development and I expected the various changes in the future
604612
- [Shaders] Add repeat, hard image stencil and world gui materials
605613
- [Widget] Add widget `mini_graph`
606614
- [Widget] Add widget `memory_panel`
607615
- [Widget] Add widget `fps_panel`
608616
- [Widget] Add widget `properties_panel`
617+
- A widget where you can add different properties to the panel to make easy edit/debug panels
609618
- Include `property_button` widget
610619
- Include `property_checkbox` widget
611620
- Include `property_input` widget

‎wiki/widgets.md‎

Lines changed: 27 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,20 @@ local component = require("druid.component")
1414
---@class my_component: druid.component
1515
local M = component.create("my_component")
1616

17-
function M:init(template, nodes, output_string)
17+
function M:init(template, nodes)
1818
self:set_template(template)
1919
self:set_nodes(nodes)
2020
self.druid = self:get_druid()
2121

22-
self.druid:new_button("button_node_name", print, output_string)
22+
self.druid:new_button("button_node_name", self.on_click)
23+
end
24+
25+
function M:on_click()
26+
print("Current output string: " .. self.output_string)
27+
end
28+
29+
function M:set_output_string(output_string)
30+
self.output_string = output_string
2331
end
2432
```
2533

@@ -29,7 +37,8 @@ Basic components are created with the `druid:new()` function:
2937
local template = "my_component" -- The template name on GUI scene, if nil will take nodes directly by gui.get_node()
3038
local nodes = gui.clone_tree(gui.get_node("my_component/root")) -- We can clone component nodes and init over cloned nodes
3139

32-
local my_component = druid:new("my_component", template, nodes, "Hello world!")
40+
local my_component = druid:new("my_component", template, nodes)
41+
my_component:set_output_string("Hello world!")
3342
```
3443

3544
Now, let's see how to do it with widgets:
@@ -38,8 +47,17 @@ Now, let's see how to do it with widgets:
3847
---@type my_widget: druid.widget
3948
local M = {}
4049

41-
function M:init(output_string)
42-
self.druid:new_button("button_node_name", print, output_string)
50+
function M:init()
51+
self.druid:new_button("button_node_name", self.on_click)
52+
self.output_string = ""
53+
end
54+
55+
function M:on_click()
56+
print("Current output string: " .. self.output_string)
57+
end
58+
59+
function M:set_output_string(output_string)
60+
self.output_string = output_string
4361
end
4462

4563
return M
@@ -55,7 +73,10 @@ local my_widget = require("widgets.my_widget.my_widget")
5573

5674
function init(self)
5775
self.druid = druid.new(self)
58-
self.my_widget = self.druid:new_widget(my_widget, template, nodes, "Hello world!")
76+
local template_id = "my_widget" -- If using a GUI template, set a template id, otherwise set nil
77+
local nodes = nil -- If nodes are cloned with gui.clone_tree(), set a nodes table, otherwise set nil
78+
self.my_widget = self.druid:new_widget(my_widget, template_id, nodes)
79+
self.my_widget:set_output_string("Hello world!")
5980
end
6081
```
6182

0 commit comments

Comments
 (0)