diff --git a/README.md b/README.md index 60931e1..21a78bd 100644 --- a/README.md +++ b/README.md @@ -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) diff --git a/config.ld b/config.ld index 6da4f05..273a754 100644 --- a/config.ld +++ b/config.ld @@ -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 \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index c7d2383..d3f743d 100644 --- a/docs/index.html +++ b/docs/index.html @@ -52,6 +52,15 @@
  • druid.helper
  • druid_instance
  • +

    Topics

    + @@ -144,12 +153,39 @@ Druid main class. +

    Topics

    + + + + + + + + + + + + + + + + + + + + + + + + + +
    components.md
    creating_custom_components.md
    druid_assets.md
    examples.md
    styles.md
    README.md
    generated by LDoc 1.4.6 -Last updated 2020-03-21 21:42:52 +Last updated 2020-03-21 22:53:41
    diff --git a/docs/modules/component.html b/docs/modules/component.html index a145600..e6dac59 100644 --- a/docs/modules/component.html +++ b/docs/modules/component.html @@ -59,6 +59,15 @@
  • druid.helper
  • druid_instance
  • +

    Topics

    + @@ -397,7 +406,7 @@
    generated by LDoc 1.4.6 -Last updated 2020-03-21 21:42:52 +Last updated 2020-03-21 22:53:41
    diff --git a/docs/modules/druid.back_handler.html b/docs/modules/druid.back_handler.html index 19bd134..005e084 100644 --- a/docs/modules/druid.back_handler.html +++ b/docs/modules/druid.back_handler.html @@ -60,6 +60,15 @@
  • druid.helper
  • druid_instance
  • +

    Topics

    + @@ -206,7 +215,7 @@
    generated by LDoc 1.4.6 -Last updated 2020-03-21 21:42:52 +Last updated 2020-03-21 22:53:41
    diff --git a/docs/modules/druid.blocker.html b/docs/modules/druid.blocker.html index 1c9d698..3bc14f0 100644 --- a/docs/modules/druid.blocker.html +++ b/docs/modules/druid.blocker.html @@ -60,6 +60,15 @@
  • druid.helper
  • druid_instance
  • +

    Topics

    + @@ -225,7 +234,7 @@
    generated by LDoc 1.4.6 -Last updated 2020-03-21 21:42:52 +Last updated 2020-03-21 22:53:41
    diff --git a/docs/modules/druid.button.html b/docs/modules/druid.button.html index a7097f9..1efe781 100644 --- a/docs/modules/druid.button.html +++ b/docs/modules/druid.button.html @@ -60,6 +60,15 @@
  • druid.helper
  • druid_instance
  • +

    Topics

    + @@ -396,7 +405,7 @@
    generated by LDoc 1.4.6 -Last updated 2020-03-21 21:42:52 +Last updated 2020-03-21 22:53:41
    diff --git a/docs/modules/druid.checkbox.html b/docs/modules/druid.checkbox.html index cb9ad9f..2aa1d8d 100644 --- a/docs/modules/druid.checkbox.html +++ b/docs/modules/druid.checkbox.html @@ -60,6 +60,15 @@
  • druid.helper
  • druid_instance
  • +

    Topics

    + @@ -268,7 +277,7 @@
    generated by LDoc 1.4.6 -Last updated 2020-03-21 21:42:52 +Last updated 2020-03-21 22:53:41
    diff --git a/docs/modules/druid.checkbox_group.html b/docs/modules/druid.checkbox_group.html index 920762e..dbce218 100644 --- a/docs/modules/druid.checkbox_group.html +++ b/docs/modules/druid.checkbox_group.html @@ -60,6 +60,15 @@
  • druid.helper
  • druid_instance
  • +

    Topics

    + @@ -230,7 +239,7 @@
    generated by LDoc 1.4.6 -Last updated 2020-03-21 21:42:52 +Last updated 2020-03-21 22:53:41
    diff --git a/docs/modules/druid.grid.html b/docs/modules/druid.grid.html index 3df4a00..3936ae6 100644 --- a/docs/modules/druid.grid.html +++ b/docs/modules/druid.grid.html @@ -60,6 +60,15 @@
  • druid.helper
  • druid_instance
  • +

    Topics

    + @@ -361,7 +370,7 @@
    generated by LDoc 1.4.6 -Last updated 2020-03-21 21:42:52 +Last updated 2020-03-21 22:53:41
    diff --git a/docs/modules/druid.helper.html b/docs/modules/druid.helper.html index 5091943..a5266ee 100644 --- a/docs/modules/druid.helper.html +++ b/docs/modules/druid.helper.html @@ -59,6 +59,15 @@
  • druid.helper
  • druid_instance
  • +

    Topics

    + @@ -227,7 +236,7 @@
    generated by LDoc 1.4.6 -Last updated 2020-03-21 21:42:52 +Last updated 2020-03-21 22:53:41
    diff --git a/docs/modules/druid.hover.html b/docs/modules/druid.hover.html index da05a4d..24d095f 100644 --- a/docs/modules/druid.hover.html +++ b/docs/modules/druid.hover.html @@ -60,6 +60,15 @@
  • druid.helper
  • druid_instance
  • +

    Topics

    + @@ -202,7 +211,7 @@
    generated by LDoc 1.4.6 -Last updated 2020-03-21 21:42:52 +Last updated 2020-03-21 22:53:41
    diff --git a/docs/modules/druid.html b/docs/modules/druid.html index 7e40457..9f684f4 100644 --- a/docs/modules/druid.html +++ b/docs/modules/druid.html @@ -59,6 +59,15 @@
  • druid.helper
  • druid_instance
  • +

    Topics

    + @@ -172,7 +181,7 @@
    generated by LDoc 1.4.6 -Last updated 2020-03-21 21:42:52 +Last updated 2020-03-21 22:53:41
    diff --git a/docs/modules/druid.input.html b/docs/modules/druid.input.html index b453a81..b68341f 100644 --- a/docs/modules/druid.input.html +++ b/docs/modules/druid.input.html @@ -55,6 +55,15 @@
  • druid.helper
  • druid_instance
  • +

    Topics

    + @@ -77,7 +86,7 @@
    generated by LDoc 1.4.6 -Last updated 2020-03-21 21:42:52 +Last updated 2020-03-21 22:53:41
    diff --git a/docs/modules/druid.lang_text.html b/docs/modules/druid.lang_text.html index 9c5f2f6..e30116f 100644 --- a/docs/modules/druid.lang_text.html +++ b/docs/modules/druid.lang_text.html @@ -60,6 +60,15 @@
  • druid.helper
  • druid_instance
  • +

    Topics

    + @@ -231,7 +240,7 @@
    generated by LDoc 1.4.6 -Last updated 2020-03-21 21:42:52 +Last updated 2020-03-21 22:53:41
    diff --git a/docs/modules/druid.progress.html b/docs/modules/druid.progress.html index 14ca013..418969f 100644 --- a/docs/modules/druid.progress.html +++ b/docs/modules/druid.progress.html @@ -60,6 +60,15 @@
  • druid.helper
  • druid_instance
  • +

    Topics

    + @@ -369,7 +378,7 @@
    generated by LDoc 1.4.6 -Last updated 2020-03-21 21:42:52 +Last updated 2020-03-21 22:53:41
    diff --git a/docs/modules/druid.radio_group.html b/docs/modules/druid.radio_group.html index e14bc76..bf332db 100644 --- a/docs/modules/druid.radio_group.html +++ b/docs/modules/druid.radio_group.html @@ -60,6 +60,15 @@
  • druid.helper
  • druid_instance
  • +

    Topics

    + @@ -230,7 +239,7 @@
    generated by LDoc 1.4.6 -Last updated 2020-03-21 21:42:52 +Last updated 2020-03-21 22:53:41
    diff --git a/docs/modules/druid.scroll.html b/docs/modules/druid.scroll.html index 38a41bb..58ba8dc 100644 --- a/docs/modules/druid.scroll.html +++ b/docs/modules/druid.scroll.html @@ -60,6 +60,15 @@
  • druid.helper
  • druid_instance
  • +

    Topics

    + @@ -498,7 +507,7 @@
    generated by LDoc 1.4.6 -Last updated 2020-03-21 21:42:52 +Last updated 2020-03-21 22:53:41
    diff --git a/docs/modules/druid.slider.html b/docs/modules/druid.slider.html index 2f2e11e..4226c9b 100644 --- a/docs/modules/druid.slider.html +++ b/docs/modules/druid.slider.html @@ -60,6 +60,15 @@
  • druid.helper
  • druid_instance
  • +

    Topics

    + @@ -239,7 +248,7 @@
    generated by LDoc 1.4.6 -Last updated 2020-03-21 21:42:52 +Last updated 2020-03-21 22:53:41
    diff --git a/docs/modules/druid.text.html b/docs/modules/druid.text.html index 7796639..0743aa4 100644 --- a/docs/modules/druid.text.html +++ b/docs/modules/druid.text.html @@ -60,6 +60,15 @@
  • druid.helper
  • druid_instance
  • +

    Topics

    + @@ -343,7 +352,7 @@
    generated by LDoc 1.4.6 -Last updated 2020-03-21 21:42:52 +Last updated 2020-03-21 22:53:41
    diff --git a/docs/modules/druid.timer.html b/docs/modules/druid.timer.html index a45db3f..77e1e15 100644 --- a/docs/modules/druid.timer.html +++ b/docs/modules/druid.timer.html @@ -60,6 +60,15 @@
  • druid.helper
  • druid_instance
  • +

    Topics

    + @@ -298,7 +307,7 @@
    generated by LDoc 1.4.6 -Last updated 2020-03-21 21:42:52 +Last updated 2020-03-21 22:53:41
    diff --git a/docs/modules/druid_event.html b/docs/modules/druid_event.html index b665666..3438627 100644 --- a/docs/modules/druid_event.html +++ b/docs/modules/druid_event.html @@ -59,6 +59,15 @@
  • druid.helper
  • druid_instance
  • +

    Topics

    + @@ -230,7 +239,7 @@
    generated by LDoc 1.4.6 -Last updated 2020-03-21 21:42:52 +Last updated 2020-03-21 22:53:41
    diff --git a/docs/modules/druid_instance.html b/docs/modules/druid_instance.html index d4f8c21..5d26240 100644 --- a/docs/modules/druid_instance.html +++ b/docs/modules/druid_instance.html @@ -59,6 +59,15 @@
  • druid.helper
  • druid_instance
  • +

    Topics

    + @@ -741,7 +750,7 @@
    generated by LDoc 1.4.6 -Last updated 2020-03-21 21:42:52 +Last updated 2020-03-21 22:53:41
    diff --git a/docs/topics/README.md.html b/docs/topics/README.md.html new file mode 100644 index 0000000..39777e6 --- /dev/null +++ b/docs/topics/README.md.html @@ -0,0 +1,217 @@ + + + + + Defold Druid UI Library + + + + +
    + +
    + +
    +
    +
    + + +
    + + + + + + +
    + +

    + +

    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. Open your game.project file and in the dependencies field under project add:

    + +
    +

    https://github.com/Insality/druid/archive/master.zip

    +
    + +

    Or point to the ZIP file of a specific release.

    + + +

    Code

    +

    Adjust druid settings, if needed:

    + +
    +local druid = require("druid.druid")
    +
    +-- Used for button component and custom components
    +druid.set_sound_function(callback)
    +
    +-- Used for lang_text component
    +druid.set_text_function(callback)
    +
    +-- Used for change default druid style
    +druid.set_default_style(your_style)
    +
    + + +

    +

    Components

    +

    Druid provides next basic 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)

    • +
    • 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:

    + +
    +local druid = require("druid.druid")
    +
    +local function init(self)
    +    self.druid = druid.new(self)
    +    local button = self.druid:new_button(node_name, callback)
    +    local text = self.druid:new_text(node_text_name)
    +end
    +
    +function update(self, dt)
    +    self.druid:update(dt)
    +end
    +
    +function on_message(self, message_id, message, sender)
    +    self.druid:on_message(message_id, message, sender)
    +end
    +
    +function on_input(self, action_id, action)
    +    self.druid:on_input(action_id, action)
    +end
    +
    + + +

    +

    Examples

    +

    See the example folder for examples of how to use Druid +See the druid-assets repository for examples of how to create custom components and styles +Try the HTML5 version of the example app

    + +

    +

    Documentation

    +

    To learn druid better, read next documentation: +- Druid components +- Create custom components +- Druid asset store +- Druid Styles

    + +

    Full druid documentation you can find here: +https://insality.github.io/druid/

    + +

    +

    Games powered by Druid:

    +

    Will fill later

    + +

    +

    Future plans

    + +
      +
    • Basic input component

    • +
    • Add onlayoutchange support (to keep gui data between layout change)

    • +
    • Add onchangelanguage 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

    +

    Original idea by AGulev +Developed and supporting by Insality +MIT License

    + + +

    +

    Issues and suggestions

    +

    If you have any issues, questions or suggestions please create an issue or contact me: insality@gmail.com + +

    +
    +
    +generated by LDoc 1.4.6 +Last updated 2020-03-21 22:53:41 +
    +
    + + diff --git a/docs/topics/components.md.html b/docs/topics/components.md.html new file mode 100644 index 0000000..7ba3381 --- /dev/null +++ b/docs/topics/components.md.html @@ -0,0 +1,152 @@ + + + + + Defold Druid UI Library + + + + +
    + +
    + +
    +
    +
    + + +
    + + + + + + +
    + + +

    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

    + + +
    +
    +
    +generated by LDoc 1.4.6 +Last updated 2020-03-21 22:53:41 +
    +
    + + diff --git a/docs/topics/create_custom_components.md.html b/docs/topics/create_custom_components.md.html new file mode 100644 index 0000000..758f9c9 --- /dev/null +++ b/docs/topics/create_custom_components.md.html @@ -0,0 +1,172 @@ + + + + + Defold Druid UI Library + + + + +
    + +
    + +
    +
    +
    + + +
    + + + + + + +
    + + +

    Custom components

    + +

    Add your custom components via druid.register

    + +
    +local druid = require("druid.druid")
    +local my_component = require("my.amazing.component")
    +
    +local function init(self)
    +    druid.register("my_component", my_component)
    +end
    +
    + + +

    Basic custom component template looks like this:

    + +
    +local const = require("druid.const")
    +
    +local M = {}
    +M.interest = { 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_SWIPE
    +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 swipe was started on another component (ex. scroll)
    +function M.on_swipe(self)
    +
    +end
    +
    +return M
    +
    + + + +

    Best practice on custom components

    +

    On each component recomended describe component schema in next way:

    + + +
    +-- Component module
    +local helper = require("druid.helper")
    +
    +local M = {}
    +
    +local SCHEME = {
    +    ROOT = "/root",
    +    ITEM = "/item",
    +    TITLE = "/title"
    +}
    +
    +-- TODO: Rework self.template/self.nodes
    +-- Make self._inner_data? { component_name, template, nodes }
    +function M.init(self, template_name, node_table)
    +    -- If component use template, setup it:
    + self.template = template_name
    +
    +    -- If component was cloned with gui.clone_tree, pass his nodes
    + self.nodes = node_table
    +
    +    -- helper can get node from gui/template/table
    + local root = helper.node(self, SCHEME.ROOT)
    +
    +    -- This component can spawn another druid components:
    + local druid = helper.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 = helper.get_style(self, "component_name")
    +end
    +
    + + + +
    +
    +
    +generated by LDoc 1.4.6 +Last updated 2020-03-21 22:00:04 +
    +
    + + diff --git a/docs/topics/creating_custom_components.md.html b/docs/topics/creating_custom_components.md.html new file mode 100644 index 0000000..95f9872 --- /dev/null +++ b/docs/topics/creating_custom_components.md.html @@ -0,0 +1,200 @@ + + + + + Defold Druid UI Library + + + + +
    + +
    + +
    +
    +
    + + +
    + + + + + + +
    + + +

    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:

    + +
    +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

    + +
    +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

    • +
    • ONINPUTHIGH - component will receive input from oninput, before other components with ONINPUT

    • +
    • ON_INPUT - component will receive input from oninput, after other components with ONINPUT_HIGH

    • +
    • ONCHANGELANGUAGE - will call onchangelanguage function on language change trigger

    • +
    • ONLAYOUTCHANGED will call onlayoutchange function on layout change trigger

    • +
    + + +

    +

    Best practice on custom components

    +

    On each component recomended describe component scheme in next way:

    + + +
    +-- 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
    +
    + + + +
    +
    +
    +generated by LDoc 1.4.6 +Last updated 2020-03-21 22:53:41 +
    +
    + + diff --git a/docs/topics/druid_assets.md.html b/docs/topics/druid_assets.md.html new file mode 100644 index 0000000..3debc03 --- /dev/null +++ b/docs/topics/druid_assets.md.html @@ -0,0 +1,96 @@ + + + + + Defold Druid UI Library + + + + +
    + +
    + +
    +
    +
    + + +
    + + + + + + +
    + + +

    Druid assets

    + +

    +

    Overview

    +

    I've created druid-assets repository 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

    + + +
    +
    +
    +generated by LDoc 1.4.6 +Last updated 2020-03-21 22:53:41 +
    +
    + + diff --git a/docs/topics/examples.md.html b/docs/topics/examples.md.html new file mode 100644 index 0000000..af12fe9 --- /dev/null +++ b/docs/topics/examples.md.html @@ -0,0 +1,94 @@ + + + + + Defold Druid UI Library + + + + +
    + +
    + +
    +
    +
    + + +
    + + + + + + +
    + + +

    Examples

    + +

    +

    Overview

    +

    See the example folder for examples of how to use Druid

    + +

    Try the HTML5 version of the example app

    + + +
    +
    +
    +generated by LDoc 1.4.6 +Last updated 2020-03-21 22:53:41 +
    +
    + + diff --git a/docs/topics/online_example.md.html b/docs/topics/online_example.md.html new file mode 100644 index 0000000..b057b31 --- /dev/null +++ b/docs/topics/online_example.md.html @@ -0,0 +1,86 @@ + + + + + Defold Druid UI Library + + + + +
    + +
    + +
    +
    +
    + + +
    + + + + + + +
    + + +

    Online example

    + +

    Check druid --here-- (link)

    + + +
    +
    +
    +generated by LDoc 1.4.6 +Last updated 2020-03-21 22:00:04 +
    +
    + + diff --git a/docs/topics/styles.md.html b/docs/topics/styles.md.html new file mode 100644 index 0000000..d5e4639 --- /dev/null +++ b/docs/topics/styles.md.html @@ -0,0 +1,145 @@ + + + + + Defold Druid UI Library + + + + +
    + +
    + +
    +
    +
    + + +
    + + + + + + +
    + + +

    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

    + +
    +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:

    + +
    +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 setstyle_ function

    + +
    +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

    + + +
    +
    +
    +generated by LDoc 1.4.6 +Last updated 2020-03-21 22:53:41 +
    +
    + + diff --git a/docs_md/components.md b/docs_md/components.md new file mode 100644 index 0000000..dec3186 --- /dev/null +++ b/docs_md/components.md @@ -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 diff --git a/docs_md/creating_custom_components.md b/docs_md/creating_custom_components.md new file mode 100644 index 0000000..197a2f3 --- /dev/null +++ b/docs_md/creating_custom_components.md @@ -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 + +``` \ No newline at end of file diff --git a/docs_md/druid_assets.md b/docs_md/druid_assets.md new file mode 100644 index 0000000..8a2c992 --- /dev/null +++ b/docs_md/druid_assets.md @@ -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 \ No newline at end of file diff --git a/docs_md/examples.md b/docs_md/examples.md new file mode 100644 index 0000000..84a9c86 --- /dev/null +++ b/docs_md/examples.md @@ -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 \ No newline at end of file diff --git a/docs_md/styles.md b/docs_md/styles.md new file mode 100644 index 0000000..a018c43 --- /dev/null +++ b/docs_md/styles.md @@ -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__