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

Update README and add topics

Browse Source
This commit is contained in:
Insality 2020-03-21 22:54:18 +03:00
parent b7e58950aa
commit c0320d9f1b
36 changed files with 1671 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

218
README.md
View File

@ -1,65 +1,60 @@
[![](media/druid_logo.png)](https://AGulev.github.io/druid/)
_travis/release bages_
![](druid_logo.png)
**Druid** - powerful defold component UI library. Use standart components or make your own game-specific to make amazing GUI in your games.
**Druid** - powerful defold component UI library. Use basic druid components or make your own game-specific components to make amazing GUI in your games.
## Setup
#### Dependency
You can use the druid extension in your own project by adding this project as a [Defold library dependency](https://www.defold.com/manuals/libraries/). Open your game.project file and in the dependencies field under project add:
> [https://github.com/AGulev/druid/archive/master.zip](https://github.com/AGulev/druid/archive/master.zip)
> [https://github.com/Insality/druid/archive/master.zip](https://github.com/Insality/druid/archive/master.zip)
Or point to the ZIP file of a [specific release](https://github.com/AGulev/druid/releases).
Or point to the ZIP file of a [specific release](https://github.com/Insality/druid/releases).
#### Code
Adjust druid settings:
Adjust druid settings, if needed:
```lua
local druid = require("druid.druid")
--- Function should return localized string by lang_id
druid.set_text_function(function(lang_id)
...
end)
-- Used for button component and custom components
druid.set_sound_function(callback)
-- Function should play sound by name
druid.set_sound_function(function(name)
...
end)
-- Used for lang_text component
druid.set_text_function(callback)
-- Used for change default druid style
druid.set_default_style(your_style)
```
## Usage
## Components
Druid provides next basic components:
_insert simple gif of each?_
_separate .md for each base component?_
- **Button** - basic game button
- **Text** - wrap on gui text node
- **Blocker** - block input in node zone
- **Back** Handler - handle back button (Android, backspace)
- **Locale** - localized text node
- **Timer** - run timer on defined time
- **Progress** - simple progress bar
- **Scroll** - general scroll component
- **Grid** - manage node positions
- **Slider** - simple slider (ex. volume adjust)
- **Checkbox** - simple checkbox
- **Checkbox group** - many checkbox
- **Radio group** - many checkbox with single choice
- **Button** - Basic game button
## Styles
You can setup default style for all druid module, for druid instance or any base druid component.
Setup default druid style via `druid.set_default_style`
```lua
local druid = require("druid.druid")
local my_style = require("my.amazing.style")
- **Text** - Wrap on text node with text size adjusting
local function init(self)
druid.set_default_style(my_style)
end
```
_TODO_
- **Blocker** - Block input in node zone
- **Back Handler** - Handle back button (Android, backspace)
- **Lang text** - Text component with handle localization system
- **Timer** - Run timer on text node
- **Progress** - Basic progress bar
- **Scroll** - Basic scroll component
- **Grid** - Component for manage node positions
- **Slider** - Basic slider component
- **Checkbox** - Basic checkbox component
- **Checkbox group** - Several checkboxes in one group
- **Radio group** - Several checkboxes in one group with single choice
Full info see on _components.md_
## Creating components
Any components creating via druid:
@ -81,128 +76,45 @@ function on_message(self, message_id, message, sender)
end
function on_input(self, action_id, action)
return self.druid:on_input(action_id, action)
self.druid:on_input(action_id, action)
end
```
## Custom components
## Examples
See the [example folder](https://github.com/Insality/druid/tree/develop/example/kenney) for examples of how to use Druid
See the [druid-assets repository](https://github.com/Insality/druid-assets) for examples of how to create custom components and styles
Try the HTML5 version of the example app
Add your custom components via `druid.register`
```lua
local druid = require("druid.druid")
local my_component = require("my.amazing.component")
## Documentation
To learn druid better, read next documentation:
- Druid components
- Create custom components
- Druid asset store
- Druid Styles
local function init(self)
druid.register("my_component", my_component)
end
```
Basic custom component template looks like this:
```lua
local const = require("druid.const")
local component = require("druid.component")
local M = component.create("amazing_component", { const.ON_INPUT })
function M.init(self, ...)
-- Component constructor
end
-- Call only if exist interest: const.ON_UPDATE
function M.update(self, dt)
end
-- Call only if exist interest: const.ON_INPUT or const.ON_INPUT_HIGH
function M.on_input(self, action_id, action)
end
-- Call only if exist interest: const.ON_MESSAGE
function M.on_message(self, message_id, message, sender)
end
-- Call if input was interrupt by previous components (ex. scroll)
function M.on_input_interrupt(self)
end
return M
```
## Best practice on custom components
On each component recomended describe component schema in next way:
```lua
-- Component module
local helper = require("druid.helper")
local component = require("druid.component")
local M = component.create("new_component")
local SCHEME = {
ROOT = "/root",
ITEM = "/item",
TITLE = "/title"
}
function M.init(self, template_name, node_table)
-- If component use template, setup it:
self:set_template(template_name)
-- If component was cloned with gui.clone_tree, pass his nodes
self:set_nodes(node_table)
-- Component can get node from gui/template/table
local root = self:get_node(self, SCHEME.ROOT)
-- This component can spawn another druid components:
local druid = self:get_druid(self)
-- Button self on callback is self of _this_ component
local button = druid:new_button(...)
-- helper can return you the component style
local my_style = self:get_style()
end
```
## Example
You can check our example here
_TODO_
## Reserver componeney keywords
- initialize
- init
- update
- on_input
- on_message
- on_input_interrupt
- setup_component
- get_style
- set_style
- set_template
- set_nodes
- get_context
- set_context
- get_druid
## API
_Link to ldoc_
[API](https://AGulev.github.io/druid/)
## Internal
Generate with `ldoc .` with `config.ld` file. [Instructions](https://github.com/stevedonovan/LDoc)
Full druid documentation you can find here:
https://insality.github.io/druid/
## Games powered by Druid:
_TODO_
_Will fill later_
## Future plans
- Basic input component
- Add on_layout_change support (to keep gui data between layout change)
- Add on_change_language support (call single function to update all druid instance)
- Better documentation and examples
- Add more comfortable gamepad support for GUI (ability to select button with DPAD and other stuff)
## License
Using [middleclass by kikito](https://github.com/kikito/middleclass)
Original idea by [AGulev](https://github.com/AGulev)
Developed and supporting by [Insality](https://github.com/Insality)
MIT License
## Issues and suggestions
If you have any issues, questions or suggestions please [create an issue](https://github.com/AGulev/druid/issues) or contact me: [insality@gmail.com](mailto:insality@gmail.com)
If you have any issues, questions or suggestions please [create an issue](https://github.com/Insality/druid/issues) or contact me: [insality@gmail.com](mailto:insality@gmail.com)

1
config.ld
View File

@ -12,5 +12,6 @@ sort=false
dir='./docs'
style='!fixed'
format='discount'
topics={"./docs_md", "README.md"}
use_markdown_titles=true
no_space_before_args=true

38
docs/index.html
View File

@ -52,6 +52,15 @@
<li><a href="modules/druid.helper.html">druid.helper</a></li>
<li><a href="modules/druid_instance.html">druid_instance</a></li>
</ul>
<h2>Topics</h2>
<ul class="">
<li><a href="topics/components.md.html">Druid components</a></li>
<li><a href="topics/creating_custom_components.md.html">Creating custom components</a></li>
<li><a href="topics/druid_assets.md.html">Druid assets</a></li>
<li><a href="topics/examples.md.html">Examples</a></li>
<li><a href="topics/styles.md.html">Styles</a></li>
<li><a href="topics/README.md.html">README</a></li>
</ul>
</div>
@ -144,12 +153,39 @@
<td class="summary">Druid main class.</td>
</tr>
</table>
<h2>Topics</h2>
<table class="module_list">
<tr>
<td class="name" nowrap><a href="topics/components.md.html">components.md</a></td>
<td class="summary"></td>
</tr>
<tr>
<td class="name" nowrap><a href="topics/creating_custom_components.md.html">creating_custom_components.md</a></td>
<td class="summary"></td>
</tr>
<tr>
<td class="name" nowrap><a href="topics/druid_assets.md.html">druid_assets.md</a></td>
<td class="summary"></td>
</tr>
<tr>
<td class="name" nowrap><a href="topics/examples.md.html">examples.md</a></td>
<td class="summary"></td>
</tr>
<tr>
<td class="name" nowrap><a href="topics/styles.md.html">styles.md</a></td>
<td class="summary"></td>
</tr>
<tr>
<td class="name" nowrap><a href="topics/README.md.html">README.md</a></td>
<td class="summary"></td>
</tr>
</table>
</div> <!-- id="content" -->
</div> <!-- id="main" -->
<div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-03-21 21:42:52 </i>
<i style="float:right;">Last updated 2020-03-21 22:53:41 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

11
docs/modules/component.html
View File

@ -59,6 +59,15 @@
<li><a href="../modules/druid.helper.html">druid.helper</a></li>
<li><a href="../modules/druid_instance.html">druid_instance</a></li>
</ul>
<h2>Topics</h2>
<ul class="">
<li><a href="../topics/components.md.html">Druid components</a></li>
<li><a href="../topics/creating_custom_components.md.html">Creating custom components</a></li>
<li><a href="../topics/druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/examples.md.html">Examples</a></li>
<li><a href="../topics/styles.md.html">Styles</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
</div>
@ -397,7 +406,7 @@
</div> <!-- id="main" -->
<div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-03-21 21:42:52 </i>
<i style="float:right;">Last updated 2020-03-21 22:53:41 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

11
docs/modules/druid.back_handler.html
View File

@ -60,6 +60,15 @@
<li><a href="../modules/druid.helper.html">druid.helper</a></li>
<li><a href="../modules/druid_instance.html">druid_instance</a></li>
</ul>
<h2>Topics</h2>
<ul class="">
<li><a href="../topics/components.md.html">Druid components</a></li>
<li><a href="../topics/creating_custom_components.md.html">Creating custom components</a></li>
<li><a href="../topics/druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/examples.md.html">Examples</a></li>
<li><a href="../topics/styles.md.html">Styles</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
</div>
@ -206,7 +215,7 @@
</div> <!-- id="main" -->
<div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-03-21 21:42:52 </i>
<i style="float:right;">Last updated 2020-03-21 22:53:41 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

11
docs/modules/druid.blocker.html
View File

@ -60,6 +60,15 @@
<li><a href="../modules/druid.helper.html">druid.helper</a></li>
<li><a href="../modules/druid_instance.html">druid_instance</a></li>
</ul>
<h2>Topics</h2>
<ul class="">
<li><a href="../topics/components.md.html">Druid components</a></li>
<li><a href="../topics/creating_custom_components.md.html">Creating custom components</a></li>
<li><a href="../topics/druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/examples.md.html">Examples</a></li>
<li><a href="../topics/styles.md.html">Styles</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
</div>
@ -225,7 +234,7 @@
</div> <!-- id="main" -->
<div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-03-21 21:42:52 </i>
<i style="float:right;">Last updated 2020-03-21 22:53:41 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

11
docs/modules/druid.button.html
View File

@ -60,6 +60,15 @@
<li><a href="../modules/druid.helper.html">druid.helper</a></li>
<li><a href="../modules/druid_instance.html">druid_instance</a></li>
</ul>
<h2>Topics</h2>
<ul class="">
<li><a href="../topics/components.md.html">Druid components</a></li>
<li><a href="../topics/creating_custom_components.md.html">Creating custom components</a></li>
<li><a href="../topics/druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/examples.md.html">Examples</a></li>
<li><a href="../topics/styles.md.html">Styles</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
</div>
@ -396,7 +405,7 @@
</div> <!-- id="main" -->
<div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-03-21 21:42:52 </i>
<i style="float:right;">Last updated 2020-03-21 22:53:41 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

11
docs/modules/druid.checkbox.html
View File

@ -60,6 +60,15 @@
<li><a href="../modules/druid.helper.html">druid.helper</a></li>
<li><a href="../modules/druid_instance.html">druid_instance</a></li>
</ul>
<h2>Topics</h2>
<ul class="">
<li><a href="../topics/components.md.html">Druid components</a></li>
<li><a href="../topics/creating_custom_components.md.html">Creating custom components</a></li>
<li><a href="../topics/druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/examples.md.html">Examples</a></li>
<li><a href="../topics/styles.md.html">Styles</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
</div>
@ -268,7 +277,7 @@
</div> <!-- id="main" -->
<div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-03-21 21:42:52 </i>
<i style="float:right;">Last updated 2020-03-21 22:53:41 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

11
docs/modules/druid.checkbox_group.html
View File

@ -60,6 +60,15 @@
<li><a href="../modules/druid.helper.html">druid.helper</a></li>
<li><a href="../modules/druid_instance.html">druid_instance</a></li>
</ul>
<h2>Topics</h2>
<ul class="">
<li><a href="../topics/components.md.html">Druid components</a></li>
<li><a href="../topics/creating_custom_components.md.html">Creating custom components</a></li>
<li><a href="../topics/druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/examples.md.html">Examples</a></li>
<li><a href="../topics/styles.md.html">Styles</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
</div>
@ -230,7 +239,7 @@
</div> <!-- id="main" -->
<div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-03-21 21:42:52 </i>
<i style="float:right;">Last updated 2020-03-21 22:53:41 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

11
docs/modules/druid.grid.html
View File

@ -60,6 +60,15 @@
<li><a href="../modules/druid.helper.html">druid.helper</a></li>
<li><a href="../modules/druid_instance.html">druid_instance</a></li>
</ul>
<h2>Topics</h2>
<ul class="">
<li><a href="../topics/components.md.html">Druid components</a></li>
<li><a href="../topics/creating_custom_components.md.html">Creating custom components</a></li>
<li><a href="../topics/druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/examples.md.html">Examples</a></li>
<li><a href="../topics/styles.md.html">Styles</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
</div>
@ -361,7 +370,7 @@
</div> <!-- id="main" -->
<div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-03-21 21:42:52 </i>
<i style="float:right;">Last updated 2020-03-21 22:53:41 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

11
docs/modules/druid.helper.html
View File

@ -59,6 +59,15 @@
<li><strong>druid.helper</strong></li>
<li><a href="../modules/druid_instance.html">druid_instance</a></li>
</ul>
<h2>Topics</h2>
<ul class="">
<li><a href="../topics/components.md.html">Druid components</a></li>
<li><a href="../topics/creating_custom_components.md.html">Creating custom components</a></li>
<li><a href="../topics/druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/examples.md.html">Examples</a></li>
<li><a href="../topics/styles.md.html">Styles</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
</div>
@ -227,7 +236,7 @@
</div> <!-- id="main" -->
<div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-03-21 21:42:52 </i>
<i style="float:right;">Last updated 2020-03-21 22:53:41 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

11
docs/modules/druid.hover.html
View File

@ -60,6 +60,15 @@
<li><a href="../modules/druid.helper.html">druid.helper</a></li>
<li><a href="../modules/druid_instance.html">druid_instance</a></li>
</ul>
<h2>Topics</h2>
<ul class="">
<li><a href="../topics/components.md.html">Druid components</a></li>
<li><a href="../topics/creating_custom_components.md.html">Creating custom components</a></li>
<li><a href="../topics/druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/examples.md.html">Examples</a></li>
<li><a href="../topics/styles.md.html">Styles</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
</div>
@ -202,7 +211,7 @@
</div> <!-- id="main" -->
<div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-03-21 21:42:52 </i>
<i style="float:right;">Last updated 2020-03-21 22:53:41 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

11
docs/modules/druid.html
View File

@ -59,6 +59,15 @@
<li><a href="../modules/druid.helper.html">druid.helper</a></li>
<li><a href="../modules/druid_instance.html">druid_instance</a></li>
</ul>
<h2>Topics</h2>
<ul class="">
<li><a href="../topics/components.md.html">Druid components</a></li>
<li><a href="../topics/creating_custom_components.md.html">Creating custom components</a></li>
<li><a href="../topics/druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/examples.md.html">Examples</a></li>
<li><a href="../topics/styles.md.html">Styles</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
</div>
@ -172,7 +181,7 @@
</div> <!-- id="main" -->
<div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-03-21 21:42:52 </i>
<i style="float:right;">Last updated 2020-03-21 22:53:41 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

11
docs/modules/druid.input.html
View File

@ -55,6 +55,15 @@
<li><a href="../modules/druid.helper.html">druid.helper</a></li>
<li><a href="../modules/druid_instance.html">druid_instance</a></li>
</ul>
<h2>Topics</h2>
<ul class="">
<li><a href="../topics/components.md.html">Druid components</a></li>
<li><a href="../topics/creating_custom_components.md.html">Creating custom components</a></li>
<li><a href="../topics/druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/examples.md.html">Examples</a></li>
<li><a href="../topics/styles.md.html">Styles</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
</div>
@ -77,7 +86,7 @@
</div> <!-- id="main" -->
<div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-03-21 21:42:52 </i>
<i style="float:right;">Last updated 2020-03-21 22:53:41 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

11
docs/modules/druid.lang_text.html
View File

@ -60,6 +60,15 @@
<li><a href="../modules/druid.helper.html">druid.helper</a></li>
<li><a href="../modules/druid_instance.html">druid_instance</a></li>
</ul>
<h2>Topics</h2>
<ul class="">
<li><a href="../topics/components.md.html">Druid components</a></li>
<li><a href="../topics/creating_custom_components.md.html">Creating custom components</a></li>
<li><a href="../topics/druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/examples.md.html">Examples</a></li>
<li><a href="../topics/styles.md.html">Styles</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
</div>
@ -231,7 +240,7 @@
</div> <!-- id="main" -->
<div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-03-21 21:42:52 </i>
<i style="float:right;">Last updated 2020-03-21 22:53:41 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

11
docs/modules/druid.progress.html
View File

@ -60,6 +60,15 @@
<li><a href="../modules/druid.helper.html">druid.helper</a></li>
<li><a href="../modules/druid_instance.html">druid_instance</a></li>
</ul>
<h2>Topics</h2>
<ul class="">
<li><a href="../topics/components.md.html">Druid components</a></li>
<li><a href="../topics/creating_custom_components.md.html">Creating custom components</a></li>
<li><a href="../topics/druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/examples.md.html">Examples</a></li>
<li><a href="../topics/styles.md.html">Styles</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
</div>
@ -369,7 +378,7 @@
</div> <!-- id="main" -->
<div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-03-21 21:42:52 </i>
<i style="float:right;">Last updated 2020-03-21 22:53:41 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

11
docs/modules/druid.radio_group.html
View File

@ -60,6 +60,15 @@
<li><a href="../modules/druid.helper.html">druid.helper</a></li>
<li><a href="../modules/druid_instance.html">druid_instance</a></li>
</ul>
<h2>Topics</h2>
<ul class="">
<li><a href="../topics/components.md.html">Druid components</a></li>
<li><a href="../topics/creating_custom_components.md.html">Creating custom components</a></li>
<li><a href="../topics/druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/examples.md.html">Examples</a></li>
<li><a href="../topics/styles.md.html">Styles</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
</div>
@ -230,7 +239,7 @@
</div> <!-- id="main" -->
<div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-03-21 21:42:52 </i>
<i style="float:right;">Last updated 2020-03-21 22:53:41 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

11
docs/modules/druid.scroll.html
View File

@ -60,6 +60,15 @@
<li><a href="../modules/druid.helper.html">druid.helper</a></li>
<li><a href="../modules/druid_instance.html">druid_instance</a></li>
</ul>
<h2>Topics</h2>
<ul class="">
<li><a href="../topics/components.md.html">Druid components</a></li>
<li><a href="../topics/creating_custom_components.md.html">Creating custom components</a></li>
<li><a href="../topics/druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/examples.md.html">Examples</a></li>
<li><a href="../topics/styles.md.html">Styles</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
</div>
@ -498,7 +507,7 @@
</div> <!-- id="main" -->
<div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-03-21 21:42:52 </i>
<i style="float:right;">Last updated 2020-03-21 22:53:41 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

11
docs/modules/druid.slider.html
View File

@ -60,6 +60,15 @@
<li><a href="../modules/druid.helper.html">druid.helper</a></li>
<li><a href="../modules/druid_instance.html">druid_instance</a></li>
</ul>
<h2>Topics</h2>
<ul class="">
<li><a href="../topics/components.md.html">Druid components</a></li>
<li><a href="../topics/creating_custom_components.md.html">Creating custom components</a></li>
<li><a href="../topics/druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/examples.md.html">Examples</a></li>
<li><a href="../topics/styles.md.html">Styles</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
</div>
@ -239,7 +248,7 @@
</div> <!-- id="main" -->
<div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-03-21 21:42:52 </i>
<i style="float:right;">Last updated 2020-03-21 22:53:41 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

11
docs/modules/druid.text.html
View File

@ -60,6 +60,15 @@
<li><a href="../modules/druid.helper.html">druid.helper</a></li>
<li><a href="../modules/druid_instance.html">druid_instance</a></li>
</ul>
<h2>Topics</h2>
<ul class="">
<li><a href="../topics/components.md.html">Druid components</a></li>
<li><a href="../topics/creating_custom_components.md.html">Creating custom components</a></li>
<li><a href="../topics/druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/examples.md.html">Examples</a></li>
<li><a href="../topics/styles.md.html">Styles</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
</div>
@ -343,7 +352,7 @@
</div> <!-- id="main" -->
<div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-03-21 21:42:52 </i>
<i style="float:right;">Last updated 2020-03-21 22:53:41 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

11
docs/modules/druid.timer.html
View File

@ -60,6 +60,15 @@
<li><a href="../modules/druid.helper.html">druid.helper</a></li>
<li><a href="../modules/druid_instance.html">druid_instance</a></li>
</ul>
<h2>Topics</h2>
<ul class="">
<li><a href="../topics/components.md.html">Druid components</a></li>
<li><a href="../topics/creating_custom_components.md.html">Creating custom components</a></li>
<li><a href="../topics/druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/examples.md.html">Examples</a></li>
<li><a href="../topics/styles.md.html">Styles</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
</div>
@ -298,7 +307,7 @@
</div> <!-- id="main" -->
<div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-03-21 21:42:52 </i>
<i style="float:right;">Last updated 2020-03-21 22:53:41 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

11
docs/modules/druid_event.html
View File

@ -59,6 +59,15 @@
<li><a href="../modules/druid.helper.html">druid.helper</a></li>
<li><a href="../modules/druid_instance.html">druid_instance</a></li>
</ul>
<h2>Topics</h2>
<ul class="">
<li><a href="../topics/components.md.html">Druid components</a></li>
<li><a href="../topics/creating_custom_components.md.html">Creating custom components</a></li>
<li><a href="../topics/druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/examples.md.html">Examples</a></li>
<li><a href="../topics/styles.md.html">Styles</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
</div>
@ -230,7 +239,7 @@
</div> <!-- id="main" -->
<div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-03-21 21:42:52 </i>
<i style="float:right;">Last updated 2020-03-21 22:53:41 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

11
docs/modules/druid_instance.html
View File

@ -59,6 +59,15 @@
<li><a href="../modules/druid.helper.html">druid.helper</a></li>
<li><strong>druid_instance</strong></li>
</ul>
<h2>Topics</h2>
<ul class="">
<li><a href="../topics/components.md.html">Druid components</a></li>
<li><a href="../topics/creating_custom_components.md.html">Creating custom components</a></li>
<li><a href="../topics/druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/examples.md.html">Examples</a></li>
<li><a href="../topics/styles.md.html">Styles</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
</div>
@ -741,7 +750,7 @@
</div> <!-- id="main" -->
<div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-03-21 21:42:52 </i>
<i style="float:right;">Last updated 2020-03-21 22:53:41 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

217
docs/topics/README.md.html Normal file
View File

@ -0,0 +1,217 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<head>
<title>Defold Druid UI Library</title>
<link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="product">
<div id="product_logo"></div>
<div id="product_name"><big><b></b></big></div>
<div id="product_description"></div>
</div> <!-- id="product" -->
<div id="main">
<!-- Menu -->
<div id="navigation">
<br/>
<h1>Druid</h1>
<ul>
<li><a href="../index.html">Index</a></li>
</ul>
<h2>Contents</h2>
<ul>
<li><a href="#Setup">Setup </a></li>
<li><a href="#Components">Components </a></li>
<li><a href="#Creating_components">Creating components </a></li>
<li><a href="#Examples">Examples </a></li>
<li><a href="#Documentation">Documentation </a></li>
<li><a href="#Games_powered_by_Druid_">Games powered by Druid: </a></li>
<li><a href="#Future_plans">Future plans </a></li>
<li><a href="#License">License </a></li>
<li><a href="#Issues_and_suggestions">Issues and suggestions </a></li>
</ul>
<h2>Topics</h2>
<ul class="">
<li><a href="../topics/components.md.html">Druid components</a></li>
<li><a href="../topics/creating_custom_components.md.html">Creating custom components</a></li>
<li><a href="../topics/druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/examples.md.html">Examples</a></li>
<li><a href="../topics/styles.md.html">Styles</a></li>
<li><strong>README</strong></li>
</ul>
<h2>Modules</h2>
<ul class="nowrap">
<li><a href="../modules/druid.back_handler.html">druid.back_handler</a></li>
<li><a href="../modules/druid.blocker.html">druid.blocker</a></li>
<li><a href="../modules/druid.button.html">druid.button</a></li>
<li><a href="../modules/druid.checkbox.html">druid.checkbox</a></li>
<li><a href="../modules/druid.checkbox_group.html">druid.checkbox_group</a></li>
<li><a href="../modules/druid.grid.html">druid.grid</a></li>
<li><a href="../modules/druid.hover.html">druid.hover</a></li>
<li><a href="../modules/druid.input.html">druid.input</a></li>
<li><a href="../modules/druid.lang_text.html">druid.lang_text</a></li>
<li><a href="../modules/druid.progress.html">druid.progress</a></li>
<li><a href="../modules/druid.radio_group.html">druid.radio_group</a></li>
<li><a href="../modules/druid.scroll.html">druid.scroll</a></li>
<li><a href="../modules/druid.slider.html">druid.slider</a></li>
<li><a href="../modules/druid.text.html">druid.text</a></li>
<li><a href="../modules/druid.timer.html">druid.timer</a></li>
<li><a href="../modules/component.html">component</a></li>
<li><a href="../modules/druid.html">druid</a></li>
<li><a href="../modules/druid_event.html">druid_event</a></li>
<li><a href="../modules/druid.helper.html">druid.helper</a></li>
<li><a href="../modules/druid_instance.html">druid_instance</a></li>
</ul>
</div>
<div id="content">
<img src="druid_logo.png" alt=""/></p>
<p><strong>Druid</strong> - powerful defold component UI library. Use basic druid components or make your own game-specific components to make amazing GUI in your games.</p>
<p><a name="Setup"></a></p>
<h2>Setup</h2>
<h4>Dependency</h4>
<p>You can use the druid extension in your own project by adding this project as a <a href="https://www.defold.com/manuals/libraries/">Defold library dependency</a>. Open your game.project file and in the dependencies field under project add:</p>
<blockquote>
<p><a href="https://github.com/Insality/druid/archive/master.zip">https://github.com/Insality/druid/archive/master.zip</a></p>
</blockquote>
<p>Or point to the ZIP file of a <a href="https://github.com/Insality/druid/releases">specific release</a>.</p>
<h4>Code</h4>
<p>Adjust druid settings, if needed:</p>
<pre>
<span class="keyword">local</span> druid = <span class="global">require</span>(<span class="string">"druid.druid"</span>)
<span class="comment">-- Used for button component and custom components
</span>druid.set_sound_function(callback)
<span class="comment">-- Used for lang_text component
</span>druid.set_text_function(callback)
<span class="comment">-- Used for change default druid style
</span>druid.set_default_style(your_style)
</pre>
<p><a name="Components"></a></p>
<h2>Components</h2>
<p>Druid provides next basic components:
- <strong>Button</strong> - Basic game button</p>
<ul>
<li><p><strong>Text</strong> - Wrap on text node with text size adjusting</p></li>
<li><p><strong>Blocker</strong> - Block input in node zone</p></li>
<li><p><strong>Back Handler</strong> - Handle back button (Android, backspace)</p></li>
<li><p><strong>Lang text</strong> - Text component with handle localization system</p></li>
<li><p><strong>Timer</strong> - Run timer on text node</p></li>
<li><p><strong>Progress</strong> - Basic progress bar</p></li>
<li><p><strong>Scroll</strong> - Basic scroll component</p></li>
<li><p><strong>Grid</strong> - Component for manage node positions</p></li>
<li><p><strong>Slider</strong> - Basic slider component</p></li>
<li><p><strong>Checkbox</strong> - Basic checkbox component</p></li>
<li><p><strong>Checkbox group</strong> - Several checkboxes in one group</p></li>
<li><p><strong>Radio group</strong> - Several checkboxes in one group with single choice</p></li>
</ul>
<p>Full info see on <em>components.md</em></p>
<p><a name="Creating_components"></a></p>
<h2>Creating components</h2>
<p>Any components creating via druid:</p>
<pre>
<span class="keyword">local</span> druid = <span class="global">require</span>(<span class="string">"druid.druid"</span>)
<span class="keyword">local</span> <span class="keyword">function</span> init(self)
self.druid = druid.new(self)
<span class="keyword">local</span> button = self.druid:new_button(node_name, callback)
<span class="keyword">local</span> text = self.druid:new_text(node_text_name)
<span class="keyword">end</span>
<span class="keyword">function</span> update(self, dt)
self.druid:update(dt)
<span class="keyword">end</span>
<span class="keyword">function</span> on_message(self, message_id, message, sender)
self.druid:on_message(message_id, message, sender)
<span class="keyword">end</span>
<span class="keyword">function</span> on_input(self, action_id, action)
self.druid:on_input(action_id, action)
<span class="keyword">end</span>
</pre>
<p><a name="Examples"></a></p>
<h2>Examples</h2>
<p>See the <a href="https://github.com/Insality/druid/tree/develop/example/kenney">example folder</a> for examples of how to use Druid
See the <a href="https://github.com/Insality/druid-assets">druid-assets repository</a> for examples of how to create custom components and styles
Try the HTML5 version of the example app</p>
<p><a name="Documentation"></a></p>
<h2>Documentation</h2>
<p>To learn druid better, read next documentation:
- Druid components
- Create custom components
- Druid asset store
- Druid Styles</p>
<p>Full druid documentation you can find here:
https://insality.github.io/druid/</p>
<p><a name="Games_powered_by_Druid_"></a></p>
<h2>Games powered by Druid:</h2>
<p><em>Will fill later</em></p>
<p><a name="Future_plans"></a></p>
<h2>Future plans</h2>
<ul>
<li><p>Basic input component</p></li>
<li><p>Add on<em>layout</em>change support (to keep gui data between layout change)</p></li>
<li><p>Add on<em>change</em>language support (call single function to update all druid instance)</p></li>
<li><p>Better documentation and examples</p></li>
<li><p>Add more comfortable gamepad support for GUI (ability to select button with DPAD and other stuff)</p></li>
</ul>
<p><a name="License"></a></p>
<h2>License</h2>
<p>Original idea by <a href="https://github.com/AGulev">AGulev</a>
Developed and supporting by <a href="https://github.com/Insality">Insality</a>
MIT License</p>
<p><a name="Issues_and_suggestions"></a></p>
<h2>Issues and suggestions</h2>
<p>If you have any issues, questions or suggestions please <a href="https://github.com/Insality/druid/issues">create an issue</a> or contact me: <a href="mailto:insality@gmail.com">insality@gmail.com</a>
</div> <!-- id="content" -->
</div> <!-- id="main" -->
<div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-03-21 22:53:41 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>
</html>

152
docs/topics/components.md.html Normal file
View File

@ -0,0 +1,152 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<head>
<title>Defold Druid UI Library</title>
<link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="product">
<div id="product_logo"></div>
<div id="product_name"><big><b></b></big></div>
<div id="product_description"></div>
</div> <!-- id="product" -->
<div id="main">
<!-- Menu -->
<div id="navigation">
<br/>
<h1>Druid</h1>
<ul>
<li><a href="../index.html">Index</a></li>
</ul>
<h2>Contents</h2>
<ul>
<li><a href="#Button">Button </a></li>
<li><a href="#Text">Text </a></li>
<li><a href="#Blocker">Blocker </a></li>
<li><a href="#Back_Handler">Back Handler </a></li>
<li><a href="#Locale">Locale </a></li>
<li><a href="#Timer">Timer </a></li>
<li><a href="#Progress">Progress </a></li>
<li><a href="#Scroll">Scroll </a></li>
<li><a href="#Grid">Grid </a></li>
<li><a href="#Slider">Slider </a></li>
<li><a href="#Checkbox">Checkbox </a></li>
<li><a href="#Checkbox_group">Checkbox group </a></li>
<li><a href="#Radio_group">Radio group </a></li>
</ul>
<h2>Topics</h2>
<ul class="">
<li><strong>Druid components</strong></li>
<li><a href="../topics/creating_custom_components.md.html">Creating custom components</a></li>
<li><a href="../topics/druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/examples.md.html">Examples</a></li>
<li><a href="../topics/styles.md.html">Styles</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
<h2>Modules</h2>
<ul class="nowrap">
<li><a href="../modules/druid.back_handler.html">druid.back_handler</a></li>
<li><a href="../modules/druid.blocker.html">druid.blocker</a></li>
<li><a href="../modules/druid.button.html">druid.button</a></li>
<li><a href="../modules/druid.checkbox.html">druid.checkbox</a></li>
<li><a href="../modules/druid.checkbox_group.html">druid.checkbox_group</a></li>
<li><a href="../modules/druid.grid.html">druid.grid</a></li>
<li><a href="../modules/druid.hover.html">druid.hover</a></li>
<li><a href="../modules/druid.input.html">druid.input</a></li>
<li><a href="../modules/druid.lang_text.html">druid.lang_text</a></li>
<li><a href="../modules/druid.progress.html">druid.progress</a></li>
<li><a href="../modules/druid.radio_group.html">druid.radio_group</a></li>
<li><a href="../modules/druid.scroll.html">druid.scroll</a></li>
<li><a href="../modules/druid.slider.html">druid.slider</a></li>
<li><a href="../modules/druid.text.html">druid.text</a></li>
<li><a href="../modules/druid.timer.html">druid.timer</a></li>
<li><a href="../modules/component.html">component</a></li>
<li><a href="../modules/druid.html">druid</a></li>
<li><a href="../modules/druid_event.html">druid_event</a></li>
<li><a href="../modules/druid.helper.html">druid.helper</a></li>
<li><a href="../modules/druid_instance.html">druid_instance</a></li>
</ul>
</div>
<div id="content">
<h1>Druid components</h1>
<p><a name="Button"></a></p>
<h2>Button</h2>
<p>Basic game button</p>
<p><a name="Text"></a></p>
<h2>Text</h2>
<p>Wrap on text node with text size adjusting</p>
<p><a name="Blocker"></a></p>
<h2>Blocker</h2>
<p>Block input in node zone</p>
<p><a name="Back_Handler"></a></p>
<h2>Back Handler</h2>
<p>Handle back button (Android, backspace)</p>
<p><a name="Locale"></a></p>
<h2>Locale</h2>
<p>Text component with handle localization system</p>
<p><a name="Timer"></a></p>
<h2>Timer</h2>
<p>Run timer on text node</p>
<p><a name="Progress"></a></p>
<h2>Progress</h2>
<p>Basic progress bar</p>
<p><a name="Scroll"></a></p>
<h2>Scroll</h2>
<p>Basic scroll component</p>
<p><a name="Grid"></a></p>
<h2>Grid</h2>
<p>Component for manage node positions</p>
<p><a name="Slider"></a></p>
<h2>Slider</h2>
<p>Basic slider component</p>
<p><a name="Checkbox"></a></p>
<h2>Checkbox</h2>
<p>Basic checkbox component</p>
<p><a name="Checkbox_group"></a></p>
<h2>Checkbox group</h2>
<p>Several checkboxes in one group</p>
<p><a name="Radio_group"></a></p>
<h2>Radio group</h2>
<p>Several checkboxes in one group with single choice</p>
</div> <!-- id="content" -->
</div> <!-- id="main" -->
<div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-03-21 22:53:41 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>
</html>

172
docs/topics/create_custom_components.md.html Normal file
View File

@ -0,0 +1,172 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<head>
<title>Defold Druid UI Library</title>
<link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="product">
<div id="product_logo"></div>
<div id="product_name"><big><b></b></big></div>
<div id="product_description"></div>
</div> <!-- id="product" -->
<div id="main">
<!-- Menu -->
<div id="navigation">
<br/>
<h1>Druid</h1>
<ul>
<li><a href="../index.html">Index</a></li>
</ul>
<h2>Topics</h2>
<ul class="">
<li><a href="../topics/components.md.html">Druid components</a></li>
<li><strong>Custom components</strong></li>
<li><a href="../topics/druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/online_example.md.html">Online example</a></li>
<li><a href="../topics/styles.md.html">Styles</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
<h2>Modules</h2>
<ul class="nowrap">
<li><a href="../modules/druid.back_handler.html">druid.back_handler</a></li>
<li><a href="../modules/druid.blocker.html">druid.blocker</a></li>
<li><a href="../modules/druid.button.html">druid.button</a></li>
<li><a href="../modules/druid.checkbox.html">druid.checkbox</a></li>
<li><a href="../modules/druid.checkbox_group.html">druid.checkbox_group</a></li>
<li><a href="../modules/druid.grid.html">druid.grid</a></li>
<li><a href="../modules/druid.hover.html">druid.hover</a></li>
<li><a href="../modules/druid.input.html">druid.input</a></li>
<li><a href="../modules/druid.lang_text.html">druid.lang_text</a></li>
<li><a href="../modules/druid.progress.html">druid.progress</a></li>
<li><a href="../modules/druid.radio_group.html">druid.radio_group</a></li>
<li><a href="../modules/druid.scroll.html">druid.scroll</a></li>
<li><a href="../modules/druid.slider.html">druid.slider</a></li>
<li><a href="../modules/druid.text.html">druid.text</a></li>
<li><a href="../modules/druid.timer.html">druid.timer</a></li>
<li><a href="../modules/component.html">component</a></li>
<li><a href="../modules/druid.html">druid</a></li>
<li><a href="../modules/druid_event.html">druid_event</a></li>
<li><a href="../modules/druid.helper.html">druid.helper</a></li>
<li><a href="../modules/druid_instance.html">druid_instance</a></li>
</ul>
</div>
<div id="content">
<h2>Custom components</h2>
<p>Add your custom components via <a href="../modules/druid.html#register">druid.register</a></p>
<pre>
<span class="keyword">local</span> druid = <span class="global">require</span>(<span class="string">"druid.druid"</span>)
<span class="keyword">local</span> my_component = <span class="global">require</span>(<span class="string">"my.amazing.component"</span>)
<span class="keyword">local</span> <span class="keyword">function</span> init(self)
druid.register(<span class="string">"my_component"</span>, my_component)
<span class="keyword">end</span>
</pre>
<p>Basic custom component template looks like this:</p>
<pre>
<span class="keyword">local</span> const = <span class="global">require</span>(<span class="string">"druid.const"</span>)
<span class="keyword">local</span> M = {}
M.interest = { const.ON_INPUT }
<span class="keyword">function</span> M.init(self, ...)
<span class="comment">-- Component constructor
</span><span class="keyword">end</span>
<span class="comment">-- Call only if exist interest: const.ON_UPDATE
</span><span class="keyword">function</span> M.update(self, dt)
<span class="keyword">end</span>
<span class="comment">-- Call only if exist interest: const.ON_INPUT or const.ON_SWIPE
</span><span class="keyword">function</span> M.on_input(self, action_id, action)
<span class="keyword">end</span>
<span class="comment">-- Call only if exist interest: const.ON_MESSAGE
</span><span class="keyword">function</span> M.on_message(self, message_id, message, sender)
<span class="keyword">end</span>
<span class="comment">-- Call only if swipe was started on another component (ex. scroll)
</span><span class="keyword">function</span> M.on_swipe(self)
<span class="keyword">end</span>
<span class="keyword">return</span> M
</pre>
<h2>Best practice on custom components</h2>
<p>On each component recomended describe component schema in next way:</p>
<pre>
<span class="comment">-- Component module
</span><span class="keyword">local</span> helper = <span class="global">require</span>(<span class="string">"druid.helper"</span>)
<span class="keyword">local</span> M = {}
<span class="keyword">local</span> SCHEME = {
ROOT = <span class="string">"/root"</span>,
ITEM = <span class="string">"/item"</span>,
TITLE = <span class="string">"/title"</span>
}
<span class="comment">-- TODO: Rework self.template/self.nodes
</span><span class="comment">-- Make self._inner_data? { component_name, template, nodes }
</span><span class="keyword">function</span> M.init(self, template_name, node_table)
<span class="comment">-- If component use template, setup it:
</span> self.template = template_name
<span class="comment">-- If component was cloned with gui.clone_tree, pass his nodes
</span> self.nodes = node_table
<span class="comment">-- helper can get node from gui/template/table
</span> <span class="keyword">local</span> root = helper.node(self, SCHEME.ROOT)
<span class="comment">-- This component can spawn another druid components:
</span> <span class="keyword">local</span> druid = helper.get_druid(self)
<span class="comment">-- Button self on callback is self of _this_ component
</span> <span class="keyword">local</span> button = druid:new_button(...)
<span class="comment">-- helper can return you the component style
</span> <span class="keyword">local</span> my_style = helper.get_style(self, <span class="string">"component_name"</span>)
<span class="keyword">end</span>
</pre>
</div> <!-- id="content" -->
</div> <!-- id="main" -->
<div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-03-21 22:00:04 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>
</html>

200
docs/topics/creating_custom_components.md.html Normal file
View File

@ -0,0 +1,200 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<head>
<title>Defold Druid UI Library</title>
<link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="product">
<div id="product_logo"></div>
<div id="product_name"><big><b></b></big></div>
<div id="product_description"></div>
</div> <!-- id="product" -->
<div id="main">
<!-- Menu -->
<div id="navigation">
<br/>
<h1>Druid</h1>
<ul>
<li><a href="../index.html">Index</a></li>
</ul>
<h2>Contents</h2>
<ul>
<li><a href="#Overview">Overview </a></li>
<li><a href="#Custom_components">Custom components </a></li>
<li><a href="#Best_practice_on_custom_components">Best practice on custom components </a></li>
</ul>
<h2>Topics</h2>
<ul class="">
<li><a href="../topics/components.md.html">Druid components</a></li>
<li><strong>Creating custom components</strong></li>
<li><a href="../topics/druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/examples.md.html">Examples</a></li>
<li><a href="../topics/styles.md.html">Styles</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
<h2>Modules</h2>
<ul class="nowrap">
<li><a href="../modules/druid.back_handler.html">druid.back_handler</a></li>
<li><a href="../modules/druid.blocker.html">druid.blocker</a></li>
<li><a href="../modules/druid.button.html">druid.button</a></li>
<li><a href="../modules/druid.checkbox.html">druid.checkbox</a></li>
<li><a href="../modules/druid.checkbox_group.html">druid.checkbox_group</a></li>
<li><a href="../modules/druid.grid.html">druid.grid</a></li>
<li><a href="../modules/druid.hover.html">druid.hover</a></li>
<li><a href="../modules/druid.input.html">druid.input</a></li>
<li><a href="../modules/druid.lang_text.html">druid.lang_text</a></li>
<li><a href="../modules/druid.progress.html">druid.progress</a></li>
<li><a href="../modules/druid.radio_group.html">druid.radio_group</a></li>
<li><a href="../modules/druid.scroll.html">druid.scroll</a></li>
<li><a href="../modules/druid.slider.html">druid.slider</a></li>
<li><a href="../modules/druid.text.html">druid.text</a></li>
<li><a href="../modules/druid.timer.html">druid.timer</a></li>
<li><a href="../modules/component.html">component</a></li>
<li><a href="../modules/druid.html">druid</a></li>
<li><a href="../modules/druid_event.html">druid_event</a></li>
<li><a href="../modules/druid.helper.html">druid.helper</a></li>
<li><a href="../modules/druid_instance.html">druid_instance</a></li>
</ul>
</div>
<div id="content">
<h1>Creating custom components</h1>
<p><a name="Overview"></a></p>
<h2>Overview</h2>
<p>Druid allows you to create your custom components from druid basic components or other custom components</p>
<p><a name="Custom_components"></a></p>
<h2>Custom components</h2>
<p>Basic custom component template looks like this:</p>
<pre>
<span class="keyword">local</span> const = <span class="global">require</span>(<span class="string">"druid.const"</span>)
<span class="keyword">local</span> component = <span class="global">require</span>(<span class="string">"druid.component"</span>)
<span class="keyword">local</span> M = component.create(<span class="string">"your_component"</span>)
<span class="comment">-- Component constructor
</span><span class="keyword">function</span> M.init(self, ...)
<span class="keyword">end</span>
<span class="comment">-- Call only if exist interest: const.ON_UPDATE
</span><span class="keyword">function</span> M.update(self, dt)
<span class="keyword">end</span>
<span class="comment">-- Call only if exist interest: const.ON_INPUT or const.ON_INPUT_HIGH
</span><span class="keyword">function</span> M.on_input(self, action_id, action)
<span class="keyword">end</span>
<span class="comment">-- Call only if exist interest: const.ON_MESSAGE
</span><span class="keyword">function</span> M.on_message(self, message_id, message, sender)
<span class="keyword">end</span>
<span class="comment">-- Call only if component with ON_CHANGE_LANGUAGE interest
</span><span class="keyword">function</span> M.on_change_language(self)
<span class="keyword">end</span>
<span class="comment">-- Call only if component with ON_LAYOUT_CHANGE interest
</span><span class="keyword">function</span> M.on_layout_change(self)
<span class="keyword">end</span>
<span class="keyword">return</span> M
</pre>
<p>Add your custom component to druid via <a href="../modules/druid.html#register">druid.register</a></p>
<pre>
<span class="keyword">local</span> druid = <span class="global">require</span>(<span class="string">"druid.druid"</span>)
<span class="keyword">local</span> my_component = <span class="global">require</span>(<span class="string">"my.amazing.component"</span>)
<span class="keyword">local</span> <span class="keyword">function</span> init(self)
druid.register(<span class="string">"my_component"</span>, my_component)
<span class="keyword">end</span>
</pre>
<h3>Interest</h3>
<p>Interest - is a way to indicate what events your component will respond to.
There is next interests in druid:
- <strong>ON_MESSAGE</strong> - component will receive messages from on_message</p>
<ul>
<li><p><strong>ON_UPDATE</strong> - component will be updated from update</p></li>
<li><p><strong>ON<em>INPUT</em>HIGH</strong> - component will receive input from on<em>input, before other components with ON</em>INPUT</p></li>
<li><p><strong>ON_INPUT</strong> - component will receive input from on<em>input, after other components with ON</em>INPUT_HIGH</p></li>
<li><p><strong>ON<em>CHANGE</em>LANGUAGE</strong> - will call <em>on</em>change<em>language</em> function on language change trigger</p></li>
<li><p><strong>ON<em>LAYOUT</em>CHANGED</strong> will call <em>on</em>layout<em>change</em> function on layout change trigger</p></li>
</ul>
<p><a name="Best_practice_on_custom_components"></a></p>
<h2>Best practice on custom components</h2>
<p>On each component recomended describe component scheme in next way:</p>
<pre>
<span class="comment">-- Component module
</span><span class="keyword">local</span> component = <span class="global">require</span>(<span class="string">"druid.component"</span>)
<span class="keyword">local</span> M = component.create(<span class="string">"your_component"</span>)
<span class="keyword">local</span> SCHEME = {
ROOT = <span class="string">"/root"</span>,
ITEM = <span class="string">"/item"</span>,
TITLE = <span class="string">"/title"</span>
}
<span class="keyword">function</span> M.init(self, template_name, node_table)
<span class="comment">-- If component use template, setup it:
</span> self:set_template(template_name)
<span class="comment">-- If component was cloned with gui.clone_tree, pass his nodes
</span> self:set_nodes(node_table)
<span class="comment">-- helper can get node from gui/template/table
</span> <span class="keyword">local</span> root = self:get_node(SCHEME.ROOT)
<span class="comment">-- This component can spawn another druid components:
</span> <span class="keyword">local</span> druid = self:get_druid()
<span class="comment">-- Button self on callback is self of _this_ component
</span> <span class="keyword">local</span> button = druid:new_button(...)
<span class="comment">-- helper can return you the component style for current component
</span> <span class="comment">-- It return by component name from
</span> <span class="keyword">local</span> my_style = self:get_style()
<span class="keyword">end</span>
</pre>
</div> <!-- id="content" -->
</div> <!-- id="main" -->
<div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-03-21 22:53:41 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>
</html>

96
docs/topics/druid_assets.md.html Normal file
View File

@ -0,0 +1,96 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<head>
<title>Defold Druid UI Library</title>
<link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="product">
<div id="product_logo"></div>
<div id="product_name"><big><b></b></big></div>
<div id="product_description"></div>
</div> <!-- id="product" -->
<div id="main">
<!-- Menu -->
<div id="navigation">
<br/>
<h1>Druid</h1>
<ul>
<li><a href="../index.html">Index</a></li>
</ul>
<h2>Contents</h2>
<ul>
<li><a href="#Overview">Overview </a></li>
</ul>
<h2>Topics</h2>
<ul class="">
<li><a href="../topics/components.md.html">Druid components</a></li>
<li><a href="../topics/creating_custom_components.md.html">Creating custom components</a></li>
<li><strong>Druid assets</strong></li>
<li><a href="../topics/examples.md.html">Examples</a></li>
<li><a href="../topics/styles.md.html">Styles</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
<h2>Modules</h2>
<ul class="nowrap">
<li><a href="../modules/druid.back_handler.html">druid.back_handler</a></li>
<li><a href="../modules/druid.blocker.html">druid.blocker</a></li>
<li><a href="../modules/druid.button.html">druid.button</a></li>
<li><a href="../modules/druid.checkbox.html">druid.checkbox</a></li>
<li><a href="../modules/druid.checkbox_group.html">druid.checkbox_group</a></li>
<li><a href="../modules/druid.grid.html">druid.grid</a></li>
<li><a href="../modules/druid.hover.html">druid.hover</a></li>
<li><a href="../modules/druid.input.html">druid.input</a></li>
<li><a href="../modules/druid.lang_text.html">druid.lang_text</a></li>
<li><a href="../modules/druid.progress.html">druid.progress</a></li>
<li><a href="../modules/druid.radio_group.html">druid.radio_group</a></li>
<li><a href="../modules/druid.scroll.html">druid.scroll</a></li>
<li><a href="../modules/druid.slider.html">druid.slider</a></li>
<li><a href="../modules/druid.text.html">druid.text</a></li>
<li><a href="../modules/druid.timer.html">druid.timer</a></li>
<li><a href="../modules/component.html">component</a></li>
<li><a href="../modules/druid.html">druid</a></li>
<li><a href="../modules/druid_event.html">druid_event</a></li>
<li><a href="../modules/druid.helper.html">druid.helper</a></li>
<li><a href="../modules/druid_instance.html">druid_instance</a></li>
</ul>
</div>
<div id="content">
<h1>Druid assets</h1>
<p><a name="Overview"></a></p>
<h2>Overview</h2>
<p>I've created <a href="https://github.com/Insality/druid-assets">druid-assets repository</a> to make a <em>marketplace</em> with custom styles and components.</p>
<p>Any of druid users can push their own components and styles to share it with the other users</p>
<p>Also, this marketplace is great example to how you can create your custom components</p>
</div> <!-- id="content" -->
</div> <!-- id="main" -->
<div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-03-21 22:53:41 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>
</html>

94
docs/topics/examples.md.html Normal file
View File

@ -0,0 +1,94 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<head>
<title>Defold Druid UI Library</title>
<link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="product">
<div id="product_logo"></div>
<div id="product_name"><big><b></b></big></div>
<div id="product_description"></div>
</div> <!-- id="product" -->
<div id="main">
<!-- Menu -->
<div id="navigation">
<br/>
<h1>Druid</h1>
<ul>
<li><a href="../index.html">Index</a></li>
</ul>
<h2>Contents</h2>
<ul>
<li><a href="#Overview">Overview </a></li>
</ul>
<h2>Topics</h2>
<ul class="">
<li><a href="../topics/components.md.html">Druid components</a></li>
<li><a href="../topics/creating_custom_components.md.html">Creating custom components</a></li>
<li><a href="../topics/druid_assets.md.html">Druid assets</a></li>
<li><strong>Examples</strong></li>
<li><a href="../topics/styles.md.html">Styles</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
<h2>Modules</h2>
<ul class="nowrap">
<li><a href="../modules/druid.back_handler.html">druid.back_handler</a></li>
<li><a href="../modules/druid.blocker.html">druid.blocker</a></li>
<li><a href="../modules/druid.button.html">druid.button</a></li>
<li><a href="../modules/druid.checkbox.html">druid.checkbox</a></li>
<li><a href="../modules/druid.checkbox_group.html">druid.checkbox_group</a></li>
<li><a href="../modules/druid.grid.html">druid.grid</a></li>
<li><a href="../modules/druid.hover.html">druid.hover</a></li>
<li><a href="../modules/druid.input.html">druid.input</a></li>
<li><a href="../modules/druid.lang_text.html">druid.lang_text</a></li>
<li><a href="../modules/druid.progress.html">druid.progress</a></li>
<li><a href="../modules/druid.radio_group.html">druid.radio_group</a></li>
<li><a href="../modules/druid.scroll.html">druid.scroll</a></li>
<li><a href="../modules/druid.slider.html">druid.slider</a></li>
<li><a href="../modules/druid.text.html">druid.text</a></li>
<li><a href="../modules/druid.timer.html">druid.timer</a></li>
<li><a href="../modules/component.html">component</a></li>
<li><a href="../modules/druid.html">druid</a></li>
<li><a href="../modules/druid_event.html">druid_event</a></li>
<li><a href="../modules/druid.helper.html">druid.helper</a></li>
<li><a href="../modules/druid_instance.html">druid_instance</a></li>
</ul>
</div>
<div id="content">
<h1>Examples</h1>
<p><a name="Overview"></a></p>
<h2>Overview</h2>
<p>See the <a href="https://github.com/Insality/druid/tree/develop/example/kenney">example folder</a> for examples of how to use Druid</p>
<p>Try the HTML5 version of the example app</p>
</div> <!-- id="content" -->
</div> <!-- id="main" -->
<div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-03-21 22:53:41 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>
</html>

86
docs/topics/online_example.md.html Normal file
View File

@ -0,0 +1,86 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<head>
<title>Defold Druid UI Library</title>
<link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="product">
<div id="product_logo"></div>
<div id="product_name"><big><b></b></big></div>
<div id="product_description"></div>
</div> <!-- id="product" -->
<div id="main">
<!-- Menu -->
<div id="navigation">
<br/>
<h1>Druid</h1>
<ul>
<li><a href="../index.html">Index</a></li>
</ul>
<h2>Topics</h2>
<ul class="">
<li><a href="../topics/components.md.html">Druid components</a></li>
<li><a href="../topics/create_custom_components.md.html">Custom components</a></li>
<li><a href="../topics/druid_assets.md.html">Druid assets</a></li>
<li><strong>Online example</strong></li>
<li><a href="../topics/styles.md.html">Styles</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
<h2>Modules</h2>
<ul class="nowrap">
<li><a href="../modules/druid.back_handler.html">druid.back_handler</a></li>
<li><a href="../modules/druid.blocker.html">druid.blocker</a></li>
<li><a href="../modules/druid.button.html">druid.button</a></li>
<li><a href="../modules/druid.checkbox.html">druid.checkbox</a></li>
<li><a href="../modules/druid.checkbox_group.html">druid.checkbox_group</a></li>
<li><a href="../modules/druid.grid.html">druid.grid</a></li>
<li><a href="../modules/druid.hover.html">druid.hover</a></li>
<li><a href="../modules/druid.input.html">druid.input</a></li>
<li><a href="../modules/druid.lang_text.html">druid.lang_text</a></li>
<li><a href="../modules/druid.progress.html">druid.progress</a></li>
<li><a href="../modules/druid.radio_group.html">druid.radio_group</a></li>
<li><a href="../modules/druid.scroll.html">druid.scroll</a></li>
<li><a href="../modules/druid.slider.html">druid.slider</a></li>
<li><a href="../modules/druid.text.html">druid.text</a></li>
<li><a href="../modules/druid.timer.html">druid.timer</a></li>
<li><a href="../modules/component.html">component</a></li>
<li><a href="../modules/druid.html">druid</a></li>
<li><a href="../modules/druid_event.html">druid_event</a></li>
<li><a href="../modules/druid.helper.html">druid.helper</a></li>
<li><a href="../modules/druid_instance.html">druid_instance</a></li>
</ul>
</div>
<div id="content">
<h1>Online example</h1>
<p>Check druid --here-- (link)</p>
</div> <!-- id="content" -->
</div> <!-- id="main" -->
<div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-03-21 22:00:04 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>
</html>

145
docs/topics/styles.md.html Normal file
View File

@ -0,0 +1,145 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<head>
<title>Defold Druid UI Library</title>
<link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="product">
<div id="product_logo"></div>
<div id="product_name"><big><b></b></big></div>
<div id="product_description"></div>
</div> <!-- id="product" -->
<div id="main">
<!-- Menu -->
<div id="navigation">
<br/>
<h1>Druid</h1>
<ul>
<li><a href="../index.html">Index</a></li>
</ul>
<h2>Contents</h2>
<ul>
<li><a href="#Overview">Overview </a></li>
<li><a href="#Usage">Usage </a></li>
<li><a href="#Create_custom_components">Create custom components </a></li>
</ul>
<h2>Topics</h2>
<ul class="">
<li><a href="../topics/components.md.html">Druid components</a></li>
<li><a href="../topics/creating_custom_components.md.html">Creating custom components</a></li>
<li><a href="../topics/druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/examples.md.html">Examples</a></li>
<li><strong>Styles</strong></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
<h2>Modules</h2>
<ul class="nowrap">
<li><a href="../modules/druid.back_handler.html">druid.back_handler</a></li>
<li><a href="../modules/druid.blocker.html">druid.blocker</a></li>
<li><a href="../modules/druid.button.html">druid.button</a></li>
<li><a href="../modules/druid.checkbox.html">druid.checkbox</a></li>
<li><a href="../modules/druid.checkbox_group.html">druid.checkbox_group</a></li>
<li><a href="../modules/druid.grid.html">druid.grid</a></li>
<li><a href="../modules/druid.hover.html">druid.hover</a></li>
<li><a href="../modules/druid.input.html">druid.input</a></li>
<li><a href="../modules/druid.lang_text.html">druid.lang_text</a></li>
<li><a href="../modules/druid.progress.html">druid.progress</a></li>
<li><a href="../modules/druid.radio_group.html">druid.radio_group</a></li>
<li><a href="../modules/druid.scroll.html">druid.scroll</a></li>
<li><a href="../modules/druid.slider.html">druid.slider</a></li>
<li><a href="../modules/druid.text.html">druid.text</a></li>
<li><a href="../modules/druid.timer.html">druid.timer</a></li>
<li><a href="../modules/component.html">component</a></li>
<li><a href="../modules/druid.html">druid</a></li>
<li><a href="../modules/druid_event.html">druid_event</a></li>
<li><a href="../modules/druid.helper.html">druid.helper</a></li>
<li><a href="../modules/druid_instance.html">druid_instance</a></li>
</ul>
</div>
<div id="content">
<h1>Styles</h1>
<p><a name="Overview"></a></p>
<h2>Overview</h2>
<p>Styles - set of functions and parameters for components to customize their behavior.</p>
<p>Styles is a table, where key is name of component, and value is style table for this component.</p>
<p>In component API documentation, you can find the style API for this component. Or just lookup for existing styles and modify them.</p>
<p><a name="Usage"></a></p>
<h2>Usage</h2>
<p>Setup default druid style for all druid instances via <code>druid.set_default_style</code></p>
<pre>
<span class="keyword">local</span> druid = <span class="global">require</span>(<span class="string">"druid.druid"</span>)
<span class="keyword">local</span> my_style = <span class="global">require</span>(<span class="string">"my.amazing.style"</span>)
<span class="keyword">local</span> <span class="keyword">function</span> init(self)
druid.set_default_style(my_style)
<span class="keyword">end</span>
</pre>
<p>Setup custom style to specific druid instance:</p>
<pre>
<span class="keyword">local</span> druid = <span class="global">require</span>(<span class="string">"druid.druid"</span>)
<span class="keyword">local</span> my_style = <span class="global">require</span>(<span class="string">"my.amazing.style"</span>)
<span class="keyword">local</span> <span class="keyword">function</span> init(self)
<span class="comment">-- This druid instance will be use my_style as default
</span> self.druid = druid.new(self, my_style)
<span class="keyword">end</span>
</pre>
<p>Change component style with <em>set</em>style_ function</p>
<pre>
<span class="keyword">local</span> druid = <span class="global">require</span>(<span class="string">"druid.druid"</span>)
<span class="keyword">local</span> my_style = <span class="global">require</span>(<span class="string">"my.amazing.style"</span>)
<span class="keyword">local</span> <span class="keyword">function</span> init(self)
self.druid = druid.new(self)
self.button = self.druid:new_button(self, <span class="string">"node"</span>)
<span class="comment">-- Setup custom style for specific component
</span> self.button:set_style(my_style)
<span class="keyword">end</span>
</pre>
<p><a name="Create_custom_components"></a></p>
<h2>Create custom components</h2>
<p>Styles is just lua table, so it can be described in just one single file
<strong>TODO</strong></p>
</div> <!-- id="content" -->
</div> <!-- id="main" -->
<div id="about">
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
<i style="float:right;">Last updated 2020-03-21 22:53:41 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>
</html>

40
docs_md/components.md Normal file
View File

@ -0,0 +1,40 @@
# Druid components
## Button
Basic game button
## Text
Wrap on text node with text size adjusting
## Blocker
Block input in node zone
## Back Handler
Handle back button (Android, backspace)
## Locale
Text component with handle localization system
## Timer
Run timer on text node
## Progress
Basic progress bar
## Scroll
Basic scroll component
## Grid
Component for manage node positions
## Slider
Basic slider component
## Checkbox
Basic checkbox component
## Checkbox group
Several checkboxes in one group
## Radio group
Several checkboxes in one group with single choice

105
docs_md/creating_custom_components.md Normal file
View File

@ -0,0 +1,105 @@
# Creating custom components
## Overview
Druid allows you to create your custom components from druid basic components or other custom components
## Custom components
Basic custom component template looks like this:
```lua
local const = require("druid.const")
local component = require("druid.component")
local M = component.create("your_component")
-- Component constructor
function M.init(self, ...)
end
-- Call only if exist interest: const.ON_UPDATE
function M.update(self, dt)
end
-- Call only if exist interest: const.ON_INPUT or const.ON_INPUT_HIGH
function M.on_input(self, action_id, action)
end
-- Call only if exist interest: const.ON_MESSAGE
function M.on_message(self, message_id, message, sender)
end
-- Call only if component with ON_CHANGE_LANGUAGE interest
function M.on_change_language(self)
end
-- Call only if component with ON_LAYOUT_CHANGE interest
function M.on_layout_change(self)
end
return M
```
Add your custom component to druid via `druid.register`
```lua
local druid = require("druid.druid")
local my_component = require("my.amazing.component")
local function init(self)
druid.register("my_component", my_component)
end
```
### Interest
Interest - is a way to indicate what events your component will respond to.
There is next interests in druid:
- **ON_MESSAGE** - component will receive messages from on_message
- **ON_UPDATE** - component will be updated from update
- **ON_INPUT_HIGH** - component will receive input from on_input, before other components with ON_INPUT
- **ON_INPUT** - component will receive input from on_input, after other components with ON_INPUT_HIGH
- **ON_CHANGE_LANGUAGE** - will call _on_change_language_ function on language change trigger
- **ON_LAYOUT_CHANGED** will call _on_layout_change_ function on layout change trigger
## Best practice on custom components
On each component recomended describe component scheme in next way:
```lua
-- Component module
local component = require("druid.component")
local M = component.create("your_component")
local SCHEME = {
ROOT = "/root",
ITEM = "/item",
TITLE = "/title"
}
function M.init(self, template_name, node_table)
-- If component use template, setup it:
self:set_template(template_name)
-- If component was cloned with gui.clone_tree, pass his nodes
self:set_nodes(node_table)
-- helper can get node from gui/template/table
local root = self:get_node(SCHEME.ROOT)
-- This component can spawn another druid components:
local druid = self:get_druid()
-- Button self on callback is self of _this_ component
local button = druid:new_button(...)
-- helper can return you the component style for current component
-- It return by component name from
local my_style = self:get_style()
end
```

8
docs_md/druid_assets.md Normal file
View File

@ -0,0 +1,8 @@
# Druid assets
## Overview
I've created [druid-assets repository](https://github.com/Insality/druid-assets) to make a _marketplace_ with custom styles and components.
Any of druid users can push their own components and styles to share it with the other users
Also, this marketplace is great example to how you can create your custom components

6
docs_md/examples.md Normal file
View File

@ -0,0 +1,6 @@
# Examples
## Overview
See the [example folder](https://github.com/Insality/druid/tree/develop/example/kenney) for examples of how to use Druid
Try the HTML5 version of the example app

47
docs_md/styles.md Normal file
View File

@ -0,0 +1,47 @@
# Styles
## Overview
Styles - set of functions and parameters for components to customize their behavior.
Styles is a table, where key is name of component, and value is style table for this component.
In component API documentation, you can find the style API for this component. Or just lookup for existing styles and modify them.
## Usage
Setup default druid style for all druid instances via `druid.set_default_style`
```lua
local druid = require("druid.druid")
local my_style = require("my.amazing.style")
local function init(self)
druid.set_default_style(my_style)
end
```
Setup custom style to specific druid instance:
```lua
local druid = require("druid.druid")
local my_style = require("my.amazing.style")
local function init(self)
-- This druid instance will be use my_style as default
self.druid = druid.new(self, my_style)
end
```
Change component style with _set_style_ function
```lua
local druid = require("druid.druid")
local my_style = require("my.amazing.style")
local function init(self)
self.druid = druid.new(self)
self.button = self.druid:new_button(self, "node")
-- Setup custom style for specific component
self.button:set_style(my_style)
end
```
## Create custom components
Styles is just lua table, so it can be described in just one single file
__TODO__