69 Commits
0.1.0 ... 0.3.0

Author SHA1 Message Date
Insality
fd6b06c7c5 Merge branch 'develop' 2020-04-18 18:38:53 +03:00
Insality
eeabd85b5b Increase version 2020-04-18 18:38:34 +03:00
Insality
8f3aca3b96 Merge branch 'develop' 2020-04-18 18:37:49 +03:00
Insality
e0f8e435fa Update live example 2020-04-18 18:37:15 +03:00
Maxim Tuprikov
cb5c035a3d Merge pull request #46 from Insality/feature/15-input-component
Feature/15 input component
2020-04-18 14:42:23 +03:00
Insality
dd2627c4d2 Update ldoc 2020-04-18 14:39:27 +03:00
Insality
668ecff090 Update documentation 2020-04-18 14:39:12 +03:00
Insality
866e8727fc Correct events and changelog 2020-04-18 14:17:25 +03:00
Insality
67038b5c77 Add increase/reset input priority. Input field now increase self prioirty 2020-04-18 13:44:23 +03:00
Insality
97509ca30b Add marked_text support. Add input example page 2020-04-18 12:10:00 +03:00
Insality
36d7bcee5a Update docs and changelogs 2020-04-18 02:31:52 +03:00
Insality
56795363f8 Add esc button to unselect input field 2020-04-18 02:08:56 +03:00
Insality
6d84f06c32 Add on_input_wrong, add allowerd_characters, add simple wrong animation 2020-04-18 02:01:45 +03:00
Insality
f02c68242a Add list of druid instances, add global events: on_window_callback, on_layout_change and on_language_change 2020-04-18 01:41:28 +03:00
Insality
b9b67c55d6 Renamed interests 2020-04-18 01:40:38 +03:00
Insality
49e915d78b Clear input field on long tap. Unselect on focus lost 2020-04-18 01:39:09 +03:00
Insality
be26478c21 Input implementation progress 2020-04-18 00:45:18 +03:00
Insality
08e93c7423 Start implementation of input component 2020-04-17 23:27:18 +03:00
Insality
1e213a5f30 Add text:get_text_width function 2020-04-17 23:26:59 +03:00
Insality
e06337fdee Changed back on back and backspace. Update backhandler 2020-04-17 23:26:39 +03:00
Insality
b1ccdf9110 Add key events for input component 2020-04-17 23:26:17 +03:00
Insality
6ce2c8f85b Add button click_outside event 2020-04-17 23:25:56 +03:00
Maxim Tuprikov
4d8cc6d3a4 Merge pull request #45 from Insality/feature/42-druid-swipe-component
Feature/42 druid swipe component
2020-04-17 20:18:24 +03:00
Insality
8f2faa7156 Correct swipe fields 2020-04-17 20:17:33 +03:00
Insality
48aa2b3d71 Update ldoc 2020-04-17 20:14:06 +03:00
Insality
fbfd18547a Update swipe docs 2020-04-17 20:13:49 +03:00
Insality
3339b00071 Add simple swipe component 2020-04-17 20:04:45 +03:00
Insality
14a70964c8 Add two more Druid logo 2020-04-14 20:50:32 +03:00
Insality
5688707b62 Merge branch 'develop' 2020-04-13 19:39:57 +03:00
Insality
133e07704b Increase druid version 2020-04-13 19:39:44 +03:00
Insality
f9a46c167f Remove alpha_todo file 2020-04-13 19:38:53 +03:00
Insality
cd2315bb0a Merge branch 'develop' 2020-04-13 19:37:51 +03:00
Insality
7b381f1708 Update example app 2020-04-13 19:37:32 +03:00
Insality
2cfc6e477e Update docs 2020-04-13 19:36:32 +03:00
Insality
0539746519 Scale up button in default style (instead of scale down). Faster animation 2020-04-13 19:35:32 +03:00
Insality
8815ca8896 Add simple slider example page 2020-04-13 19:32:13 +03:00
Insality
55bcea7878 Add scroll with scrolls in example 2020-04-13 19:18:45 +03:00
Insality
07e847497c Update docs md 2020-04-09 22:33:13 +03:00
Insality
8ff7cd1015 Update README 2020-04-09 22:26:48 +03:00
Insality
4f9274c359 Merge branch 'develop' 2020-04-09 22:15:24 +03:00
Insality
0ab794f86c Update README 2020-04-09 22:15:08 +03:00
Insality
4cd5c55155 Update docs 2020-04-09 22:11:59 +03:00
Insality
179ac5c068 Update docs md 2020-04-09 22:11:51 +03:00
Insality
48bd0da429 Update annotations 2020-04-09 22:07:56 +03:00
Insality
9dd3a029ad Update documentation 2020-03-28 23:10:30 +03:00
Insality
d24107550a Update docs 2020-03-28 16:48:30 +03:00
Insality
7821c031dd Resolve #36: Get default druid text value from node 2020-03-28 16:46:50 +03:00
Insality
017138b5ff Update READMES 2020-03-22 15:56:05 +03:00
Insality
7c22032004 Clean up todo, more docs 2020-03-22 15:32:00 +03:00
Insality
696622b42b Rename back hold_click -> hold_callback 2020-03-22 15:24:47 +03:00
Insality
959f367dd7 Remove done stuff from alpha todo 2020-03-22 15:24:04 +03:00
Insality
a451c3b117 Merge branch 'develop' 2020-03-22 15:19:28 +03:00
Insality
a0e5abeffd Update README and docs 2020-03-22 15:19:10 +03:00
Insality
ed39091a8e Update media path in readme 2020-03-22 12:59:44 +03:00
Insality
d650c2393b Update ldoc 2020-03-22 12:55:17 +03:00
Insality
7b2578c0ef Update README 2020-03-22 12:54:56 +03:00
Insality
6367e66203 Update README 2020-03-22 12:17:06 +03:00
Insality
59d7635cf8 Change game.project settings autofocus -> no_auto_input 2020-03-22 12:16:59 +03:00
Insality
a86d826ae1 Change default style setter 2020-03-22 11:56:07 +03:00
Insality
bdf9de239d Fix template nodes path 2020-03-22 11:55:52 +03:00
Insality
d2d4ffcad4 All template node schema now without "/" character 2020-03-22 11:46:16 +03:00
Insality
278a61b99d Default style as druid default style (ha-ha) 2020-03-22 11:45:54 +03:00
Insality
f769f80b10 Merge branch 'develop' 2020-03-22 02:24:25 +03:00
Insality
21d61a60e0 Update docs 2020-03-22 02:24:10 +03:00
Insality
05af3801d7 Add set_steps to the slider component 2020-03-22 00:37:28 +03:00
Insality
d67ab56d51 Merge branch 'develop' 2020-03-22 00:12:26 +03:00
Insality
84d2f3bf17 Update html demo 2020-03-22 00:11:59 +03:00
Insality
672d221019 Add link to release on README badge 2020-03-22 00:09:59 +03:00
Insality
a7e62e3df0 Add release budge 2020-03-22 00:08:52 +03:00
88 changed files with 7292 additions and 525 deletions

191
README.md
View File

@@ -1,101 +1,203 @@
[![](media/druid_logo.png)](https://insality.github.io/druid/)
**Druid** - powerful defold component UI library. Use basic druid components or make your own game-specific components to make amazing GUI in your games.
[![GitHub release (latest by date)](https://img.shields.io/github/v/release/insality/druid)](https://github.com/Insality/druid/releases)
**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:
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/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/Insality/druid/releases).
### Input bindings
### Code
For **Druid** to work requires next input bindings:
Adjust druid settings, if needed:
- Mouse trigger - `Button 1` -> `touch` _For basic input components_
- Key trigger - `Backspace` -> `key_backspace` _For back_handler component, input component_
- Key trigger - `Back` -> `key_back` _For back_handler component, Android back button, input component_
- Key trigger - `Enter` -> `key_enter` _For input component, optional_
- Key trigger - `Esc` -> `key_esc` _For input component, optional_
![](media/input_binding_2.png)
![](media/input_binding_1.png)
### Input capturing [optional]
By default, **Druid** will auto-capture input focus, if any input component will be created. So you don't need to call `msg.post(".", "acquire_input_focus)"`
If you not need this behaviour, you can disable it by settings `druid.no_auto_input` field in _game.project_:
```
[druid]
no_auto_input = 1
```
### Code [optional]
Adjust **Druid** settings, if needed:
```lua
local druid = require("druid.druid")
-- Used for button component and custom components
-- Callback should play sound by name
druid.set_sound_function(callback)
-- Used for lang_text component
-- Callback should return localized string by locale id
druid.set_text_function(callback)
-- Used for change default druid style
druid.set_default_style(your_style)
-- Call this function on language changing in the game,
-- to retranslate all lang_text components:
druid.on_languge_change()
-- Call this function on layout changing in the game,
-- to reapply layouts
druid.on_layout_change()
-- Call this function inside window.set_listener
-- to catch game focus lost/gained callbacks:
druid.on_window_callback(event)
```
## Components
Druid provides next basic components:
- **Button** - Basic game button
**Druid** provides next basic components:
- **Text** - Wrap on text node with text size adjusting
- **[Button](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#button)** - Basic Druid input component
- **Blocker** - Block input in node zone
- **[Text](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#text)** - Basic Druid text component
- **Back Handler** - Handle back button (Android, backspace)
- **[Lang text](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#lang-text)** - Wrap on Text component to handle localization
- **Lang text** - Text component with handle localization system
- **[Scroll](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#scroll)** - Basic Druid scroll component
- **Timer** - Run timer on text node
- **[Progress](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#progress)** - Basic Druid progress bar component
- **Progress** - Basic progress bar
- **[Slider](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#slider)** - Basic Druid slider component
- **Scroll** - Basic scroll component
- **[Input](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#input)** - Basic Druid text input component (unimplemented)
- **Grid** - Component for manage node positions
- **[Checkbox](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#checkbox)** - Basic Druid checkbox component
- **Slider** - Basic slider component
- **[Checkbox group](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#checkbox-group)** - Several checkboxes in one group
- **Checkbox** - Basic checkbox component
- **[Radio group](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#radio-group)** - Several checkboxes in one group with single choice
- **Checkbox group** - Several checkboxes in one group
- **[Blocker](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#blocker)** - Block input in node zone component
- **Radio group** - Several checkboxes in one group with single choice
- **[Back Handler](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#back-handler)** - Handle back button (Android back, backspace)
- **Hover** - Trigger component for check node hover state
- **[Timer](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#timer)** - Handle timer work on gui text node
- **Input** - Component to process user text input
- **[Grid](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#grid)** - Component for manage node positions
Full info see on _components.md_
- **[Hover](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#hover)** - System Druid component, handle hover node state
- **[Swipe](https://github.com/Insality/druid/blob/master/docs_md/01-components.md#swipe)** - System Druid component, handle swipe gestures on node
Full info see on _[components.md](https://github.com/Insality/druid/blob/master/docs_md/01-components.md)_
## Creating components
## Basic usage
For using **Druid**, first you should create Druid instance to spawn components. Pass to new Druid instance main engine functions: *update*, *on_message* and *on_input*
All **Druid** components as arguments can apply node name string, you can don't do `gui.get_node()` before
All **Druid** and component methods calling with `:` like `self.druid:new_button()`
Any components creating via druid:
```lua
local druid = require("druid.druid")
local function init(self)
local function button_callback(self)
print("Button was clicked!")
end
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)
self.druid:new_button("button_node_name", button_callback)
end
function final(self)
self.druid:final()
end
function on_input(self, action_id, action)
return self.druid:on_input(action_id, action)
end
```
## Druid Events
Any **Druid** components as callbacks uses [Druid Events](https://insality.github.io/druid/modules/druid_event.html). In component API ([button example](https://insality.github.io/druid/modules/druid.button.html#Events)) pointed list of component events. You can manually subscribe on this events by next API:
- **event:subscribe**(callback)
- **event:unsubscribe**(callback)
- **event:clear**()
Any events can handle several callbacks, if needed.
## Druid lifecycle
Here is full druid lifecycle setup in your ***.gui_script** file:
```lua
local druid = require("druid.druid")
function init(self)
self.druid = druid.new(self)
end
function final(self)
self.druid:final()
end
function update(self, dt)
self.druid:update(dt)
end
function on_input(self, action_id, action)
return self.druid:on_input(action_id, action)
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
```
- *on_input* used for almost all basic druid components
- *update* used for progress bar, scroll and timer base components
- *on_message* used for specific druid events, like language change or layout change (TODO: in future)
- *final* used for custom components, what have to do several action before destroy
Recommended is fully integrate al druid lifecycles functions
## Features
- Druid input goes as stack. Last created button will checked first. So create your GUI from back
- Don't forget about `return` in `on_input`: `return self.druid:on_input()`. It need, if you have more than 1 acquire inputs (several druid, other input system, etc)
## Examples
See the [example folder](https://github.com/insality/druid/tree/develop/example/kenney) for examples of how to use Druid
See the [example folder](https://github.com/Insality/druid/tree/develop/example) 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
@@ -104,13 +206,13 @@ Try the [HTML5 version](https://insality.github.io/druid/druid/) of the example
## Documentation
To learn druid better, read next documentation:
- Druid components
- Create custom components
- Druid asset store
- Druid Styles
To learn **Druid** better, read next documentation:
- [Druid components](https://github.com/Insality/druid/blob/master/docs_md/01-components.md)
- [Create custom components](https://github.com/Insality/druid/blob/master/docs_md/02-creating_custom_components.md)
- [Druid styles](https://github.com/Insality/druid/blob/master/docs_md/03-styles.md)
- [Druid asset store](https://github.com/Insality/druid/blob/master/docs_md/04-druid_assets.md)
Full druid documentation you can find here:
Full **Druid** documentation you can find here:
https://insality.github.io/druid/
@@ -119,25 +221,14 @@ https://insality.github.io/druid/
_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
Original created by [AGulev](https://github.com/AGulev)
Developed and supporting by [Insality](https://github.com/Insality)
Assets from [Kenney](http://www.kenney.nl/)
MIT License

View File

@@ -1,38 +0,0 @@
Simple to-do for Druid Alpha 0.2.0
-- High
+ remove button event and match_event from druid
+ add hover component
+ add druid events/triggers? better callback system
+ better name for locale component? lang? lang_text?
+ better name for slider component? Slider is ok
+ Druid store assets - separate repository with rich components (progress_rich migrate)
+ refactor on_swipe. To on_scroll? Add input priority
+ separate custom data and predefined fields in components? Every component have their fields and events
+ How to set custom sprites for button states?
+ add druid settings (add auto_focus input and other stuff) (to game.project)
+ button add key trigger
+ button and hover click restriction zone?
+ button polish, actions
+ better scroll size management, check different cases. So implicit now
+ better callbacks for every components
- unify component api (get/set/to and other general stuff)
- better grid + scroll management
- better default style, add template for custom style
- compare with gooey
- add docs for all components
- add docs folder for every component with gifs? Solutions
- remove component autoremove all children component
-- Low
- add input_text component for alpha release
- add code template and example for user components
- custom input settings (name of touch, text, etc)
- add good examples with template and/or nodes (basic component no use any of them)
- try use final druid in real project (FI uses custom druid) (use in 4321?)
- ability to relocalize all locale text nodes
- ability to control buttons via controller. Select it by cursor (d-pad)

View File

@@ -1 +1 @@
{"content":[{"name":"game.projectc","size":2584,"pieces":[{"name":"game.projectc0","offset":0}]},{"name":"game.arci","size":4608,"pieces":[{"name":"game.arci0","offset":0}]},{"name":"game.arcd","size":274093,"pieces":[{"name":"game.arcd0","offset":0}]},{"name":"game.dmanifest","size":9895,"pieces":[{"name":"game.dmanifest0","offset":0}]},{"name":"game.public.der","size":162,"pieces":[{"name":"game.public.der0","offset":0}]}]}
{"content":[{"name":"game.projectc","size":2725,"pieces":[{"name":"game.projectc0","offset":0}]},{"name":"game.arci","size":4928,"pieces":[{"name":"game.arci0","offset":0}]},{"name":"game.arcd","size":276790,"pieces":[{"name":"game.arcd0","offset":0}]},{"name":"game.dmanifest","size":10701,"pieces":[{"name":"game.dmanifest0","offset":0}]},{"name":"game.public.der","size":162,"pieces":[{"name":"game.public.der0","offset":0}]}]}

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@@ -1,6 +1,6 @@
[project]
title = druid
version = 1.0
version = 0.2.0
write_log = 0
compress_archive = 1
@@ -43,7 +43,7 @@ default_texture_mag_filter = linear
max_draw_calls = 1024
max_characters = 8192
max_debug_vertices = 10000
texture_profiles = /builtins/graphics/default.texture_profiles
texture_profiles = /example/custom.texture_profiles
[sound]
gain = 1
@@ -61,7 +61,7 @@ repeat_delay = 0.5
repeat_interval = 0.2
gamepads = /builtins/input/default.gamepadsc
game_binding = /input/game.input_bindingc
use_accelerometer = 1
use_accelerometer = 0
[sprite]
max_count = 128
@@ -99,10 +99,10 @@ infoplist = /builtins/manifests/ios/Info.plist
version_code = 1
minimum_sdk_version = 16
target_sdk_version = 28
package = com.example.todo
package = com.insality.druid
manifest = /builtins/manifests/android/AndroidManifest.xml
iap_provider = GooglePlay
input_method = KeyEvent
input_method = HiddenInputField
immersive_mode = 0
debuggable = 0
@@ -114,13 +114,15 @@ bundle_identifier = example.unnamed
[html5]
custom_heap_size = 0
heap_size = 256
heap_size = 64
htmlfile = /builtins/manifests/web/engine_template.html
cssfile = /builtins/manifests/web/light_theme.css
archive_location_prefix = archive
show_fullscreen_button = 1
show_made_with_defold = 1
scale_mode = downscale_fit
show_fullscreen_button = 0
show_made_with_defold = 0
scale_mode = fit
engine_arguments = --verify-graphics-calls=false
splash_image = /media/druid_logo.png
[particle_fx]
max_count = 64
@@ -153,5 +155,8 @@ max_count = 16
max_tile_count = 2048
[druid]
autofocus = 1
no_auto_input = 0
[native_extension]
app_manifest = /example/game.appmanifest

Binary file not shown.

File diff suppressed because one or more lines are too long

BIN
docs/druid/druid_logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

File diff suppressed because one or more lines are too long

View File

@@ -7,7 +7,7 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- The above 4 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>druid 1.0</title>
<title>druid 0.2.0</title>
<style type='text/css'>
/* Disable user selection to avoid strange bug in Chrome on Windows:
* Selecting a text outside the canvas, then clicking+draging would
@@ -76,29 +76,6 @@
text-align: center;
line-height: 20px;
}
.button {
background-image: url("data:image/svg+xml,%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg xmlns='http://www.w3.org/2000/svg' baseProfile='full' width='16' height='16' viewBox='0 0 16 16' version='1.1' xml:space='preserve'%3E%3Ctitle%3Eic-16-fullscreen%3C/title%3E%3Cg id='ic-16-fullscreen' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cpath d='M3,11.5 C3,11.776 3.224,12 3.5,12 L12.5,12 C12.776,12 13,11.776 13,11.5 L13,4.5 C13,4.224 12.776,4 12.5,4 L3.5,4 C3.224,4 3,4.224 3,4.5 L3,11.5 Z M14,11 L14,13 L12,13 C11.724,13 11.5,13.224 11.5,13.5 C11.5,13.776 11.724,14 12,14 L14.5,14 C14.776,14 15,13.776 15,13.5 L15,11 C15,10.724 14.776,10.5 14.5,10.5 C14.224,10.5 14,10.724 14,11 Z M12,2 C11.724,2 11.5,2.224 11.5,2.5 C11.5,2.776 11.724,3 12,3 L14,3 L14,5 C14,5.276 14.224,5.5 14.5,5.5 C14.776,5.5 15,5.276 15,5 L15,2.5 C15,2.224 14.776,2 14.5,2 L12,2 Z M2,13 L2,11 C2,10.724 1.776,10.5 1.5,10.5 C1.224,10.5 1,10.724 1,11 L1,13.5 C1,13.776 1.224,14 1.5,14 L4,14 C4.276,14 4.5,13.776 4.5,13.5 C4.5,13.224 4.276,13 4,13 L2,13 Z M1,2.5 C1,2.224 1.224,2 1.5,2 L4,2 C4.276,2 4.5,2.224 4.5,2.5 C4.5,2.776 4.276,3 4,3 L2,3 L2,5 C2,5.276 1.776,5.5 1.5,5.5 C1.224,5.5 1,5.276 1,5 L1,2.5 Z ' id='fill_1' fill='%23006fff'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat;
border-color: transparent;
float: left;
color: #006fff;
padding-left: 50%;
padding: 0px 0px 0px 20px;
cursor:pointer;
background-position: left bottom;
margin-left: 2px;
}
.link {
text-align: right;
color: #4e5258;
margin-right: 2px;
}
a {
font-weight: 600;
color: #006fff;
text-decoration: none;
}
.link, .button {
font-family: sans-serif;
font-size: 14px;
@@ -144,8 +121,6 @@
<div id="app-container" class="canvas-app-container">
<canvas id="canvas" class="canvas-app-canvas" tabindex="1" width="600" height="900"></canvas>
<div class="buttons-background">
<div class="button" onclick="Module.toggleFullscreen();">Fullscreen</div>
<div class="link">Made with <a href="https://defold.com/" target="_blank">Defold</a></div>
</div>
</div>
<!-- -->
@@ -156,8 +131,8 @@
archive_location_filter: function( path ) {
return ("archive" + path + "");
},
engine_arguments: [],
custom_heap_size: 268435456,
engine_arguments: ["--verify-graphics-calls=false",],
custom_heap_size: 67108864,
disable_context_menu: true
}
@@ -177,8 +152,6 @@
var is_iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
var buttonHeight = 0;
buttonHeight = 42;
buttonHeight = 42;
// Resize on init, screen resize and orientation change
function resize_game_canvas() {
// Hack for iOS when exit from Fullscreen mode
@@ -195,29 +168,23 @@
var targetRatio = width / height;
var actualRatio = innerWidth / innerHeight;
//Downscale fit
if (innerWidth < width || innerHeight < height) {
if (actualRatio > targetRatio) {
width = innerHeight * targetRatio;
height = innerHeight;
app_container.style.marginLeft = ((innerWidth - width) / 2) + "px";
app_container.style.marginTop = "0px";
}
else {
width = innerWidth;
height = innerWidth / targetRatio;
app_container.style.marginLeft = "0px";
app_container.style.marginTop = ((innerHeight - height) / 2) + "px";
}
//Fit
if (actualRatio > targetRatio) {
width = innerHeight * targetRatio;
height = innerHeight;
app_container.style.marginLeft = ((innerWidth - width) / 2) + "px";
app_container.style.marginTop = "0px";
}
else {
app_container.style.marginLeft = ((innerWidth - width) / 2) + "px";
width = innerWidth;
height = innerWidth / targetRatio;
app_container.style.marginLeft = "0px";
app_container.style.marginTop = ((innerHeight - height) / 2) + "px";
}
app_container.style.width = width + "px";
app_container.style.height = height + buttonHeight + "px";
game_canvas.width = width;

View File

@@ -44,6 +44,7 @@
<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.swipe.html">druid.swipe</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>
@@ -54,11 +55,12 @@
</ul>
<h2>Topics</h2>
<ul class="">
<li><a href="topics/01-components.md.html">Druid components</a></li>
<li><a href="topics/01-components.md.html">01-components</a></li>
<li><a href="topics/02-creating_custom_components.md.html">Creating custom components</a></li>
<li><a href="topics/03-styles.md.html">Styles</a></li>
<li><a href="topics/04-druid_assets.md.html">Druid assets</a></li>
<li><a href="topics/05-examples.md.html">Examples</a></li>
<li><a href="topics/changelog.md.html">changelog</a></li>
<li><a href="topics/README.md.html">README</a></li>
</ul>
@@ -124,6 +126,10 @@
<td class="name" nowrap><a href="modules/druid.slider.html">druid.slider</a></td>
<td class="summary">Druid slider component</td>
</tr>
<tr>
<td class="name" nowrap><a href="modules/druid.swipe.html">druid.swipe</a></td>
<td class="summary">Component to handle swipe gestures on node.</td>
</tr>
<tr>
<td class="name" nowrap><a href="modules/druid.text.html">druid.text</a></td>
<td class="summary">Component to handle all GUI texts.</td>
@@ -175,6 +181,10 @@
<td class="name" nowrap><a href="topics/05-examples.md.html">05-examples.md</a></td>
<td class="summary"></td>
</tr>
<tr>
<td class="name" nowrap><a href="topics/changelog.md.html">changelog.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>
@@ -185,7 +195,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 23:23:01 </i>
<i style="float:right;">Last updated 2020-04-18 14:39:17 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@@ -51,6 +51,7 @@
<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.swipe.html">druid.swipe</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><strong>component</strong></li>
@@ -61,11 +62,12 @@
</ul>
<h2>Topics</h2>
<ul class="">
<li><a href="../topics/01-components.md.html">Druid components</a></li>
<li><a href="../topics/01-components.md.html">01-components</a></li>
<li><a href="../topics/02-creating_custom_components.md.html">Creating custom components</a></li>
<li><a href="../topics/03-styles.md.html">Styles</a></li>
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/05-examples.md.html">Examples</a></li>
<li><a href="../topics/changelog.md.html">changelog</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
@@ -117,6 +119,18 @@
<td class="summary">Get current component interests</td>
</tr>
<tr>
<td class="name" nowrap><a href="#increase_input_priority">increase_input_priority()</a></td>
<td class="summary">Increase input priority in current input stack</td>
</tr>
<tr>
<td class="name" nowrap><a href="#reset_input_priority">reset_input_priority()</a></td>
<td class="summary">Reset input priority in current input stack</td>
</tr>
<tr>
<td class="name" nowrap><a href="#get_node">get_node(node_or_name)</a></td>
<td class="summary">Get node for component by name.</td>
</tr>
<tr>
<td class="name" nowrap><a href="#get_druid">get_druid()</a></td>
<td class="summary">Return druid with context of calling component.</td>
</tr>
@@ -320,6 +334,64 @@
</dd>
<dt>
<a name = "increase_input_priority"></a>
<strong>increase_input_priority()</strong>
</dt>
<dd>
Increase input priority in current input stack
</dd>
<dt>
<a name = "reset_input_priority"></a>
<strong>reset_input_priority()</strong>
</dt>
<dd>
Reset input priority in current input stack
</dd>
<dt>
<a name = "get_node"></a>
<strong>get_node(node_or_name)</strong>
</dt>
<dd>
Get node for component by name.
If component has nodes, node<em>or</em>name should be string
It auto pick node by template name or from nodes by clone<em>tree
if they was setup via component:set</em>nodes, component:set_template
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">node_or_name</span>
<span class="types"><a class="type" href="https://www.lua.org/manual/5.3/manual.html#6.4">string</a> or <span class="type">node</span></span>
Node name or node itself
</li>
</ul>
<h3>Returns:</h3>
<ol>
<span class="types"><span class="type">node</span></span>
Gui node
</ol>
</dd>
<dt>
<a name = "get_druid"></a>
@@ -406,7 +478,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 23:23:01 </i>
<i style="float:right;">Last updated 2020-04-18 14:39:17 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@@ -52,6 +52,7 @@
<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.swipe.html">druid.swipe</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>
@@ -62,11 +63,12 @@
</ul>
<h2>Topics</h2>
<ul class="">
<li><a href="../topics/01-components.md.html">Druid components</a></li>
<li><a href="../topics/01-components.md.html">01-components</a></li>
<li><a href="../topics/02-creating_custom_components.md.html">Creating custom components</a></li>
<li><a href="../topics/03-styles.md.html">Styles</a></li>
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/05-examples.md.html">Examples</a></li>
<li><a href="../topics/changelog.md.html">changelog</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
@@ -215,7 +217,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 23:23:01 </i>
<i style="float:right;">Last updated 2020-04-18 14:39:17 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@@ -52,6 +52,7 @@
<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.swipe.html">druid.swipe</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>
@@ -62,11 +63,12 @@
</ul>
<h2>Topics</h2>
<ul class="">
<li><a href="../topics/01-components.md.html">Druid components</a></li>
<li><a href="../topics/01-components.md.html">01-components</a></li>
<li><a href="../topics/02-creating_custom_components.md.html">Creating custom components</a></li>
<li><a href="../topics/03-styles.md.html">Styles</a></li>
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/05-examples.md.html">Examples</a></li>
<li><a href="../topics/changelog.md.html">changelog</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
@@ -234,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 23:23:01 </i>
<i style="float:right;">Last updated 2020-04-18 14:39:17 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@@ -52,6 +52,7 @@
<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.swipe.html">druid.swipe</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>
@@ -62,11 +63,12 @@
</ul>
<h2>Topics</h2>
<ul class="">
<li><a href="../topics/01-components.md.html">Druid components</a></li>
<li><a href="../topics/01-components.md.html">01-components</a></li>
<li><a href="../topics/02-creating_custom_components.md.html">Creating custom components</a></li>
<li><a href="../topics/03-styles.md.html">Styles</a></li>
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/05-examples.md.html">Examples</a></li>
<li><a href="../topics/changelog.md.html">changelog</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
@@ -84,7 +86,7 @@
<h2><a href="#Functions">Functions</a></h2>
<table class="function_list">
<tr>
<td class="name" nowrap><a href="#init">init(node, callback[, params[, anim_node[, event]]])</a></td>
<td class="name" nowrap><a href="#init">init(node, callback[, params[, anim_node]])</a></td>
<td class="summary">Component init function</td>
</tr>
<tr>
@@ -96,11 +98,11 @@
<td class="summary">Return button enabled state</td>
</tr>
<tr>
<td class="name" nowrap><a href="#set_click_zone">set_click_zone(zone)</a></td>
<td class="name" nowrap><a href="#set_click_zone">set_click_zone(zone, Self)</a></td>
<td class="summary">Strict button click area.</td>
</tr>
<tr>
<td class="name" nowrap><a href="#set_key_trigger">set_key_trigger(key)</a></td>
<td class="name" nowrap><a href="#set_key_trigger">set_key_trigger(key, Self)</a></td>
<td class="summary">Set key-code to trigger this button</td>
</tr>
<tr>
@@ -133,7 +135,7 @@
<dl class="function">
<dt>
<a name = "init"></a>
<strong>init(node, callback[, params[, anim_node[, event]]])</strong>
<strong>init(node, callback[, params[, anim_node]])</strong>
</dt>
<dd>
Component init function
@@ -159,11 +161,6 @@
Button anim node (node, if not provided)
(<em>optional</em>)
</li>
<li><span class="parameter">event</span>
<span class="types"><a class="type" href="https://www.lua.org/manual/5.3/manual.html#6.4">string</a></span>
Button react event, const.ACTION_TOUCH by default
(<em>optional</em>)
</li>
</ul>
@@ -214,7 +211,7 @@
</dd>
<dt>
<a name = "set_click_zone"></a>
<strong>set_click_zone(zone)</strong>
<strong>set_click_zone(zone, Self)</strong>
</dt>
<dd>
Strict button click area. Useful for
@@ -227,6 +224,10 @@
<span class="types"><span class="type">node</span></span>
Gui node
</li>
<li><span class="parameter">Self</span>
<span class="types"><span class="type">druid.button</span></span>
instance to make chain calls
</li>
</ul>
@@ -236,7 +237,7 @@
</dd>
<dt>
<a name = "set_key_trigger"></a>
<strong>set_key_trigger(key)</strong>
<strong>set_key_trigger(key, Self)</strong>
</dt>
<dd>
Set key-code to trigger this button
@@ -248,6 +249,10 @@
<span class="types"><span class="type">hash</span></span>
The action_id of the key
</li>
<li><span class="parameter">Self</span>
<span class="types"><span class="type">druid.button</span></span>
instance to make chain calls
</li>
</ul>
@@ -291,19 +296,27 @@
<ul>
<li><span class="parameter">on_click</span>
<span class="types"><span class="type">druid_event</span></span>
On release button callback
(self, params, button_instance) On release button callback
</li>
<li><span class="parameter">on_repeated_click</span>
<span class="types"><span class="type">druid_event</span></span>
On repeated action button callback
(self, params, button<em>instance, click</em>amount) On repeated action button callback
</li>
<li><span class="parameter">on_long_click</span>
<span class="types"><span class="type">druid_event</span></span>
On long tap button callback
(self, params, button_instance, time) On long tap button callback
</li>
<li><span class="parameter">on_double_click</span>
<span class="types"><span class="type">druid_event</span></span>
On double tap button callback
(self, params, button<em>instance, click</em>amount) On double tap button callback
</li>
<li><span class="parameter">on_hold_callback</span>
<span class="types"><span class="type">druid_event</span></span>
(self, params, button<em>instance, time) On button hold before long</em>click callback
</li>
<li><span class="parameter">on_click_outside</span>
<span class="types"><span class="type">druid_event</span></span>
(self, params, button_instance) On click outside of button
</li>
</ul>
@@ -331,10 +344,14 @@
Animation node
(<em>default</em> node)
</li>
<li><span class="parameter">scale_from</span>
<li><span class="parameter">start_scale</span>
<span class="types"><span class="type">vector3</span></span>
Initial scale of anim_node
</li>
<li><span class="parameter">start_pos</span>
<span class="types"><span class="type">vector3</span></span>
Initial pos of anim_node
</li>
<li><span class="parameter">pos</span>
<span class="types"><span class="type">vector3</span></span>
Initial pos of anim_node
@@ -384,12 +401,6 @@
<li><span class="parameter">on_set_enabled</span>
<span class="types"><span class="type">function</span></span>
(self, node, enabled_state)
</li>
<li><span class="parameter">IS_HOVER</span>
<span class="types"><span class="type">bool</span></span>
</li>
</ul>
@@ -405,7 +416,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 23:23:01 </i>
<i style="float:right;">Last updated 2020-04-18 14:39:17 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@@ -52,6 +52,7 @@
<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.swipe.html">druid.swipe</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>
@@ -62,11 +63,12 @@
</ul>
<h2>Topics</h2>
<ul class="">
<li><a href="../topics/01-components.md.html">Druid components</a></li>
<li><a href="../topics/01-components.md.html">01-components</a></li>
<li><a href="../topics/02-creating_custom_components.md.html">Creating custom components</a></li>
<li><a href="../topics/03-styles.md.html">Styles</a></li>
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/05-examples.md.html">Examples</a></li>
<li><a href="../topics/changelog.md.html">changelog</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
@@ -277,7 +279,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 23:23:01 </i>
<i style="float:right;">Last updated 2020-04-18 14:39:17 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@@ -52,6 +52,7 @@
<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.swipe.html">druid.swipe</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>
@@ -62,11 +63,12 @@
</ul>
<h2>Topics</h2>
<ul class="">
<li><a href="../topics/01-components.md.html">Druid components</a></li>
<li><a href="../topics/01-components.md.html">01-components</a></li>
<li><a href="../topics/02-creating_custom_components.md.html">Creating custom components</a></li>
<li><a href="../topics/03-styles.md.html">Styles</a></li>
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/05-examples.md.html">Examples</a></li>
<li><a href="../topics/changelog.md.html">changelog</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
@@ -88,7 +90,7 @@
<td class="summary">Component init function</td>
</tr>
<tr>
<td class="name" nowrap><a href="#set_state">set_state(state)</a></td>
<td class="name" nowrap><a href="#set_state">set_state(indexes)</a></td>
<td class="summary">Set checkbox group state</td>
</tr>
<tr>
@@ -147,7 +149,7 @@
</dd>
<dt>
<a name = "set_state"></a>
<strong>set_state(state)</strong>
<strong>set_state(indexes)</strong>
</dt>
<dd>
Set checkbox group state
@@ -155,7 +157,7 @@
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">state</span>
<li><span class="parameter">indexes</span>
<span class="types"><span class="type">bool[]</span></span>
Array of checkbox state
</li>
@@ -239,7 +241,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 23:23:01 </i>
<i style="float:right;">Last updated 2020-04-18 14:39:17 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@@ -52,6 +52,7 @@
<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.swipe.html">druid.swipe</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>
@@ -62,11 +63,12 @@
</ul>
<h2>Topics</h2>
<ul class="">
<li><a href="../topics/01-components.md.html">Druid components</a></li>
<li><a href="../topics/01-components.md.html">01-components</a></li>
<li><a href="../topics/02-creating_custom_components.md.html">Creating custom components</a></li>
<li><a href="../topics/03-styles.md.html">Styles</a></li>
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/05-examples.md.html">Examples</a></li>
<li><a href="../topics/changelog.md.html">changelog</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
@@ -370,7 +372,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 23:23:01 </i>
<i style="float:right;">Last updated 2020-04-18 14:39:17 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@@ -51,6 +51,7 @@
<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.swipe.html">druid.swipe</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>
@@ -61,11 +62,12 @@
</ul>
<h2>Topics</h2>
<ul class="">
<li><a href="../topics/01-components.md.html">Druid components</a></li>
<li><a href="../topics/01-components.md.html">01-components</a></li>
<li><a href="../topics/02-creating_custom_components.md.html">Creating custom components</a></li>
<li><a href="../topics/03-styles.md.html">Styles</a></li>
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/05-examples.md.html">Examples</a></li>
<li><a href="../topics/changelog.md.html">changelog</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
@@ -236,7 +238,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 23:23:01 </i>
<i style="float:right;">Last updated 2020-04-18 14:39:17 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@@ -52,6 +52,7 @@
<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.swipe.html">druid.swipe</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>
@@ -62,11 +63,12 @@
</ul>
<h2>Topics</h2>
<ul class="">
<li><a href="../topics/01-components.md.html">Druid components</a></li>
<li><a href="../topics/01-components.md.html">01-components</a></li>
<li><a href="../topics/02-creating_custom_components.md.html">Creating custom components</a></li>
<li><a href="../topics/03-styles.md.html">Styles</a></li>
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/05-examples.md.html">Examples</a></li>
<li><a href="../topics/changelog.md.html">changelog</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
@@ -93,7 +95,7 @@
</tr>
<tr>
<td class="name" nowrap><a href="#set_click_zone">set_click_zone(zone)</a></td>
<td class="summary">Strict button click area.</td>
<td class="summary">Strict hover click area.</td>
</tr>
</table>
<h2><a href="#Tables">Tables</a></h2>
@@ -162,7 +164,7 @@
<strong>set_click_zone(zone)</strong>
</dt>
<dd>
Strict button click area. Useful for
Strict hover click area. Useful for
no click events outside stencil node
@@ -211,7 +213,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 23:23:01 </i>
<i style="float:right;">Last updated 2020-04-18 14:39:17 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@@ -51,6 +51,7 @@
<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.swipe.html">druid.swipe</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>
@@ -61,11 +62,12 @@
</ul>
<h2>Topics</h2>
<ul class="">
<li><a href="../topics/01-components.md.html">Druid components</a></li>
<li><a href="../topics/01-components.md.html">01-components</a></li>
<li><a href="../topics/02-creating_custom_components.md.html">Creating custom components</a></li>
<li><a href="../topics/03-styles.md.html">Styles</a></li>
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/05-examples.md.html">Examples</a></li>
<li><a href="../topics/changelog.md.html">changelog</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
@@ -106,6 +108,30 @@
<td class="name" nowrap><a href="#new">new(context[, style])</a></td>
<td class="summary">Create Druid instance.</td>
</tr>
<tr>
<td class="name" nowrap><a href="#set_default_style">set_default_style(style)</a></td>
<td class="summary">Set new default style.</td>
</tr>
<tr>
<td class="name" nowrap><a href="#set_text_function">set_text_function(callback)</a></td>
<td class="summary">Set text function.</td>
</tr>
<tr>
<td class="name" nowrap><a href="#set_sound_function">set_sound_function(callback)</a></td>
<td class="summary">Set sound function.</td>
</tr>
<tr>
<td class="name" nowrap><a href="#on_window_callback">on_window_callback(event)</a></td>
<td class="summary">Callback on global window event.</td>
</tr>
<tr>
<td class="name" nowrap><a href="#on_layout_change">on_layout_change()</a></td>
<td class="summary">Callback on global layout change event.</td>
</tr>
<tr>
<td class="name" nowrap><a href="#on_language_change">on_language_change()</a></td>
<td class="summary">Callback on global language change event.</td>
</tr>
</table>
<br/>
@@ -173,6 +199,125 @@
</dd>
<dt>
<a name = "set_default_style"></a>
<strong>set_default_style(style)</strong>
</dt>
<dd>
Set new default style.
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">style</span>
<span class="types"><a class="type" href="https://www.lua.org/manual/5.3/manual.html#6.6">table</a></span>
Druid style module
</li>
</ul>
</dd>
<dt>
<a name = "set_text_function"></a>
<strong>set_text_function(callback)</strong>
</dt>
<dd>
Set text function.
Druid locale component will call this function
to get translated text. After set<em>text</em>funtion
all existing locale component will be updated
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">callback</span>
<span class="types"><span class="type">function</span></span>
Get localized text function
</li>
</ul>
</dd>
<dt>
<a name = "set_sound_function"></a>
<strong>set_sound_function(callback)</strong>
</dt>
<dd>
Set sound function.
Component will call this function to
play sound by sound_id
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">callback</span>
<span class="types"><span class="type">function</span></span>
Sound play callback
</li>
</ul>
</dd>
<dt>
<a name = "on_window_callback"></a>
<strong>on_window_callback(event)</strong>
</dt>
<dd>
Callback on global window event.
Used to trigger on<em>focus</em>lost and on<em>focus</em>gain
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">event</span>
<span class="types"><a class="type" href="https://www.lua.org/manual/5.3/manual.html#6.4">string</a></span>
Event param from window listener
</li>
</ul>
</dd>
<dt>
<a name = "on_layout_change"></a>
<strong>on_layout_change()</strong>
</dt>
<dd>
Callback on global layout change event.
</dd>
<dt>
<a name = "on_language_change"></a>
<strong>on_language_change()</strong>
</dt>
<dd>
Callback on global language change event.
Use to update all lang texts
</dd>
</dl>
@@ -181,7 +326,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 23:23:01 </i>
<i style="float:right;">Last updated 2020-04-18 14:39:17 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@@ -30,6 +30,11 @@
<li><a href="../index.html">Index</a></li>
</ul>
<h2>Contents</h2>
<ul>
<li><a href="#Functions">Functions</a></li>
<li><a href="#Tables">Tables</a></li>
</ul>
<h2>Modules</h2>
@@ -47,6 +52,7 @@
<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.swipe.html">druid.swipe</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>
@@ -57,11 +63,12 @@
</ul>
<h2>Topics</h2>
<ul class="">
<li><a href="../topics/01-components.md.html">Druid components</a></li>
<li><a href="../topics/01-components.md.html">01-components</a></li>
<li><a href="../topics/02-creating_custom_components.md.html">Creating custom components</a></li>
<li><a href="../topics/03-styles.md.html">Styles</a></li>
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/05-examples.md.html">Examples</a></li>
<li><a href="../topics/changelog.md.html">changelog</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
@@ -71,22 +78,312 @@
<h1>Module <code>druid.input</code></h1>
<p>Druid input text component.</p>
<p> Carry on user text input
UNIMPLEMENTED</p>
<p> Carry on user text input</p>
<h3>Info:</h3>
<ul>
<li><strong>Author</strong>: Part of code from Britzl gooey input component</li>
</ul>
<h2><a href="#Functions">Functions</a></h2>
<table class="function_list">
<tr>
<td class="name" nowrap><a href="#set_text">set_text(input_text)</a></td>
<td class="summary">Set text for input field</td>
</tr>
<tr>
<td class="name" nowrap><a href="#get_text">get_text()</a></td>
<td class="summary">Return current input field text</td>
</tr>
<tr>
<td class="name" nowrap><a href="#set_max_length">set_max_length(max_length, Self)</a></td>
<td class="summary">Set maximum length for input field.</td>
</tr>
<tr>
<td class="name" nowrap><a href="#set_allowerd_characters">set_allowerd_characters(characters, Self)</a></td>
<td class="summary">Set allowed charaters for input field.</td>
</tr>
<tr>
<td class="name" nowrap><a href="#reset_changes">reset_changes()</a></td>
<td class="summary">Reset current input selection and return previous value</td>
</tr>
</table>
<h2><a href="#Tables">Tables</a></h2>
<table class="function_list">
<tr>
<td class="name" nowrap><a href="#Events">Events</a></td>
<td class="summary">Component events</td>
</tr>
<tr>
<td class="name" nowrap><a href="#Fields">Fields</a></td>
<td class="summary">Component fields</td>
</tr>
<tr>
<td class="name" nowrap><a href="#Style">Style</a></td>
<td class="summary">Component style params</td>
</tr>
</table>
<br/>
<br/>
<h2 class="section-header "><a name="Functions"></a>Functions</h2>
<dl class="function">
<dt>
<a name = "set_text"></a>
<strong>set_text(input_text)</strong>
</dt>
<dd>
Set text for input field
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">input_text</span>
<span class="types"><a class="type" href="https://www.lua.org/manual/5.3/manual.html#6.4">string</a></span>
The string to apply for input field
</li>
</ul>
</dd>
<dt>
<a name = "get_text"></a>
<strong>get_text()</strong>
</dt>
<dd>
Return current input field text
<h3>Returns:</h3>
<ol>
<span class="types"><a class="type" href="https://www.lua.org/manual/5.3/manual.html#6.4">string</a></span>
The current input field text
</ol>
</dd>
<dt>
<a name = "set_max_length"></a>
<strong>set_max_length(max_length, Self)</strong>
</dt>
<dd>
Set maximum length for input field.
Pass nil to make input field unliminted (by default)
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">max_length</span>
<span class="types"><span class="type">number</span></span>
Maximum length for input text field
</li>
<li><span class="parameter">Self</span>
<span class="types"><span class="type">druid.input</span></span>
instance to make chain calls
</li>
</ul>
</dd>
<dt>
<a name = "set_allowerd_characters"></a>
<strong>set_allowerd_characters(characters, Self)</strong>
</dt>
<dd>
Set allowed charaters for input field.
See: https://defold.com/ref/stable/string/
ex: [%a%d] for alpha and numeric
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">characters</span>
<span class="types"><a class="type" href="https://www.lua.org/manual/5.3/manual.html#6.4">string</a></span>
Regulax exp. for validate user input
</li>
<li><span class="parameter">Self</span>
<span class="types"><span class="type">druid.input</span></span>
instance to make chain calls
</li>
</ul>
</dd>
<dt>
<a name = "reset_changes"></a>
<strong>reset_changes()</strong>
</dt>
<dd>
Reset current input selection and return previous value
</dd>
</dl>
<h2 class="section-header "><a name="Tables"></a>Tables</h2>
<dl class="function">
<dt>
<a name = "Events"></a>
<strong>Events</strong>
</dt>
<dd>
Component events
<h3>Fields:</h3>
<ul>
<li><span class="parameter">on_input_select</span>
<span class="types"><span class="type">druid_event</span></span>
(self, button_node) On input field select callback
</li>
<li><span class="parameter">on_input_unselect</span>
<span class="types"><span class="type">druid_event</span></span>
(self, button_node) On input field unselect callback
</li>
<li><span class="parameter">on_input_text</span>
<span class="types"><span class="type">druid_event</span></span>
(self, input_text) On input field text change callback
</li>
<li><span class="parameter">on_input_empty</span>
<span class="types"><span class="type">druid_event</span></span>
(self, input_text) On input field text change to empty string callback
</li>
<li><span class="parameter">on_input_full</span>
<span class="types"><span class="type">druid_event</span></span>
(self, input_text) On input field text change to max length string callback
</li>
<li><span class="parameter">on_input_wrong</span>
<span class="types"><span class="type">druid_event</span></span>
(self, params, button_instance) On trying user input with not allowed character callback
</li>
</ul>
</dd>
<dt>
<a name = "Fields"></a>
<strong>Fields</strong>
</dt>
<dd>
Component fields
<h3>Fields:</h3>
<ul>
<li><span class="parameter">text</span>
<span class="types"><span class="type">druid.text</span></span>
Text component
</li>
<li><span class="parameter">button</span>
<span class="types"><span class="type">druid.button</span></span>
Button component
</li>
<li><span class="parameter">is_selected</span>
<span class="types"><span class="type">bool</span></span>
Is current input selected now
</li>
<li><span class="parameter">is_empty</span>
<span class="types"><span class="type">bool</span></span>
Is current input is empty now
</li>
<li><span class="parameter">max_length</span>
<span class="types"><span class="type">number</span></span>
Max length for input text
(<em>optional</em>)
</li>
<li><span class="parameter">allowerd_characters</span>
<span class="types"><a class="type" href="https://www.lua.org/manual/5.3/manual.html#6.4">string</a></span>
Pattern matching for user input
(<em>optional</em>)
</li>
<li><span class="parameter">keyboard_type</span>
<span class="types"><span class="type">number</span></span>
Gui keyboard type for input field
</li>
</ul>
</dd>
<dt>
<a name = "Style"></a>
<strong>Style</strong>
</dt>
<dd>
Component style params
<h3>Fields:</h3>
<ul>
<li><span class="parameter">IS_LONGTAP_ERASE</span>
<span class="types"><span class="type">bool</span></span>
Is long tap will erase current input data
</li>
<li><span class="parameter">BUTTON_SELECT_INCREASE</span>
<span class="types"><span class="type">number</span></span>
Button scale multiplier on selecting input field
</li>
<li><span class="parameter">MASK_DEFAULT_CHAR</span>
<span class="types"><a class="type" href="https://www.lua.org/manual/5.3/manual.html#6.4">string</a></span>
Default character mask for password input
</li>
<li><span class="parameter">on_select</span>
<span class="types"><span class="type">function</span></span>
(self, button_node) Callback on input field selecting
</li>
<li><span class="parameter">on_unselect</span>
<span class="types"><span class="type">function</span></span>
(self, button_node) Callback on input field unselecting
</li>
<li><span class="parameter">on_input_wrong</span>
<span class="types"><span class="type">function</span></span>
(self, button_node) Callback on wrong user input
</li>
<li><span class="parameter">button</span>
<span class="types"><a class="type" href="https://www.lua.org/manual/5.3/manual.html#6.6">table</a></span>
Custom button style for input node
</li>
</ul>
</dd>
</dl>
</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 23:23:01 </i>
<i style="float:right;">Last updated 2020-04-18 14:39:17 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@@ -52,6 +52,7 @@
<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.swipe.html">druid.swipe</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>
@@ -62,11 +63,12 @@
</ul>
<h2>Topics</h2>
<ul class="">
<li><a href="../topics/01-components.md.html">Druid components</a></li>
<li><a href="../topics/01-components.md.html">01-components</a></li>
<li><a href="../topics/02-creating_custom_components.md.html">Creating custom components</a></li>
<li><a href="../topics/03-styles.md.html">Styles</a></li>
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/05-examples.md.html">Examples</a></li>
<li><a href="../topics/changelog.md.html">changelog</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
@@ -240,7 +242,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 23:23:01 </i>
<i style="float:right;">Last updated 2020-04-18 14:39:17 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@@ -52,6 +52,7 @@
<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.swipe.html">druid.swipe</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>
@@ -62,11 +63,12 @@
</ul>
<h2>Topics</h2>
<ul class="">
<li><a href="../topics/01-components.md.html">Druid components</a></li>
<li><a href="../topics/01-components.md.html">01-components</a></li>
<li><a href="../topics/02-creating_custom_components.md.html">Creating custom components</a></li>
<li><a href="../topics/03-styles.md.html">Styles</a></li>
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/05-examples.md.html">Examples</a></li>
<li><a href="../topics/changelog.md.html">changelog</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
@@ -82,7 +84,7 @@
<h2><a href="#Functions">Functions</a></h2>
<table class="function_list">
<tr>
<td class="name" nowrap><a href="#init">init(node, key, init_value)</a></td>
<td class="name" nowrap><a href="#init">init(node, key[, init_value=1])</a></td>
<td class="summary">Component init function</td>
</tr>
<tr>
@@ -135,7 +137,7 @@
<dl class="function">
<dt>
<a name = "init"></a>
<strong>init(node, key, init_value)</strong>
<strong>init(node, key[, init_value=1])</strong>
</dt>
<dd>
Component init function
@@ -154,6 +156,7 @@
<li><span class="parameter">init_value</span>
<span class="types"><span class="type">number</span></span>
Initial value of progress bar
(<em>default</em> 1)
</li>
</ul>
@@ -378,7 +381,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 23:23:01 </i>
<i style="float:right;">Last updated 2020-04-18 14:39:17 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@@ -52,6 +52,7 @@
<li><strong>druid.radio_group</strong></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.swipe.html">druid.swipe</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>
@@ -62,11 +63,12 @@
</ul>
<h2>Topics</h2>
<ul class="">
<li><a href="../topics/01-components.md.html">Druid components</a></li>
<li><a href="../topics/01-components.md.html">01-components</a></li>
<li><a href="../topics/02-creating_custom_components.md.html">Creating custom components</a></li>
<li><a href="../topics/03-styles.md.html">Styles</a></li>
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/05-examples.md.html">Examples</a></li>
<li><a href="../topics/changelog.md.html">changelog</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
@@ -88,7 +90,7 @@
<td class="summary">Component init function</td>
</tr>
<tr>
<td class="name" nowrap><a href="#set_state">set_state(state)</a></td>
<td class="name" nowrap><a href="#set_state">set_state(index)</a></td>
<td class="summary">Set radio group state</td>
</tr>
<tr>
@@ -147,7 +149,7 @@
</dd>
<dt>
<a name = "set_state"></a>
<strong>set_state(state)</strong>
<strong>set_state(index)</strong>
</dt>
<dd>
Set radio group state
@@ -155,9 +157,9 @@
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">state</span>
<span class="types"><span class="type">bool[]</span></span>
Array of checkbox state
<li><span class="parameter">index</span>
<span class="types"><span class="type">number</span></span>
Index in radio group
</li>
</ul>
@@ -178,8 +180,8 @@
<h3>Returns:</h3>
<ol>
<span class="types"><span class="type">bool[]</span></span>
Array if checkboxes state
<span class="types"><span class="type">number</span></span>
Index in radio group
</ol>
@@ -239,7 +241,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 23:23:01 </i>
<i style="float:right;">Last updated 2020-04-18 14:39:17 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@@ -52,6 +52,7 @@
<li><a href="../modules/druid.radio_group.html">druid.radio_group</a></li>
<li><strong>druid.scroll</strong></li>
<li><a href="../modules/druid.slider.html">druid.slider</a></li>
<li><a href="../modules/druid.swipe.html">druid.swipe</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>
@@ -62,11 +63,12 @@
</ul>
<h2>Topics</h2>
<ul class="">
<li><a href="../topics/01-components.md.html">Druid components</a></li>
<li><a href="../topics/01-components.md.html">01-components</a></li>
<li><a href="../topics/02-creating_custom_components.md.html">Creating custom components</a></li>
<li><a href="../topics/03-styles.md.html">Styles</a></li>
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/05-examples.md.html">Examples</a></li>
<li><a href="../topics/changelog.md.html">changelog</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
@@ -389,7 +391,7 @@
</li>
<li><span class="parameter">on_point_scroll</span>
<span class="types"><span class="type">druid_event</span></span>
On scroll<em>to</em>index function callbck
On scroll<em>to</em>index function callback
</li>
</ul>
@@ -507,7 +509,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 23:23:01 </i>
<i style="float:right;">Last updated 2020-04-18 14:39:17 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@@ -52,6 +52,7 @@
<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><strong>druid.slider</strong></li>
<li><a href="../modules/druid.swipe.html">druid.swipe</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>
@@ -62,11 +63,12 @@
</ul>
<h2>Topics</h2>
<ul class="">
<li><a href="../topics/01-components.md.html">Druid components</a></li>
<li><a href="../topics/01-components.md.html">01-components</a></li>
<li><a href="../topics/02-creating_custom_components.md.html">Creating custom components</a></li>
<li><a href="../topics/03-styles.md.html">Styles</a></li>
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/05-examples.md.html">Examples</a></li>
<li><a href="../topics/changelog.md.html">changelog</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
@@ -91,6 +93,10 @@
<td class="name" nowrap><a href="#set">set(value[, is_silent])</a></td>
<td class="summary">Set value for slider</td>
</tr>
<tr>
<td class="name" nowrap><a href="#set_steps">set_steps(steps)</a></td>
<td class="summary">Set slider steps.</td>
</tr>
</table>
<h2><a href="#Tables">Tables</a></h2>
<table class="function_list">
@@ -166,6 +172,32 @@
</dd>
<dt>
<a name = "set_steps"></a>
<strong>set_steps(steps)</strong>
</dt>
<dd>
Set slider steps. Pin node will
apply closest step position
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">steps</span>
<span class="types"><span class="type">number[]</span></span>
Array of steps
</li>
</ul>
<h3>Usage:</h3>
<ul>
<pre class="example">slider:set_steps({<span class="number">0</span>, <span class="number">0.2</span>, <span class="number">0.6</span>, <span class="number">1</span>})</pre>
</ul>
</dd>
</dl>
<h2 class="section-header "><a name="Tables"></a>Tables</h2>
@@ -248,7 +280,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 23:23:01 </i>
<i style="float:right;">Last updated 2020-04-18 14:39:17 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@@ -0,0 +1,257 @@
<!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="#Functions">Functions</a></li>
<li><a href="#Tables">Tables</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><strong>druid.swipe</strong></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>
<h2>Topics</h2>
<ul class="">
<li><a href="../topics/01-components.md.html">01-components</a></li>
<li><a href="../topics/02-creating_custom_components.md.html">Creating custom components</a></li>
<li><a href="../topics/03-styles.md.html">Styles</a></li>
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/05-examples.md.html">Examples</a></li>
<li><a href="../topics/changelog.md.html">changelog</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
</div>
<div id="content">
<h1>Module <code>druid.swipe</code></h1>
<p>Component to handle swipe gestures on node.</p>
<p> Swipe will be triggered, if swipe was started and
ended on one node</p>
<h2><a href="#Functions">Functions</a></h2>
<table class="function_list">
<tr>
<td class="name" nowrap><a href="#init">init(node, on_swipe_callback)</a></td>
<td class="summary">Component init function</td>
</tr>
<tr>
<td class="name" nowrap><a href="#set_click_zone">set_click_zone(zone)</a></td>
<td class="summary">Strict swipe click area.</td>
</tr>
</table>
<h2><a href="#Tables">Tables</a></h2>
<table class="function_list">
<tr>
<td class="name" nowrap><a href="#Fields">Fields</a></td>
<td class="summary">Components fields</td>
</tr>
<tr>
<td class="name" nowrap><a href="#Events">Events</a></td>
<td class="summary">Component events</td>
</tr>
<tr>
<td class="name" nowrap><a href="#Style">Style</a></td>
<td class="summary">Component style params</td>
</tr>
</table>
<br/>
<br/>
<h2 class="section-header "><a name="Functions"></a>Functions</h2>
<dl class="function">
<dt>
<a name = "init"></a>
<strong>init(node, on_swipe_callback)</strong>
</dt>
<dd>
Component init function
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">node</span>
<span class="types"><span class="type">node</span></span>
Gui node
</li>
<li><span class="parameter">on_swipe_callback</span>
<span class="types"><span class="type">function</span></span>
Swipe callback for on<em>swipe</em>end event
</li>
</ul>
</dd>
<dt>
<a name = "set_click_zone"></a>
<strong>set_click_zone(zone)</strong>
</dt>
<dd>
Strict swipe click area. Useful for
restrict events outside stencil node
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">zone</span>
<span class="types"><span class="type">node</span></span>
Gui node
</li>
</ul>
</dd>
</dl>
<h2 class="section-header "><a name="Tables"></a>Tables</h2>
<dl class="function">
<dt>
<a name = "Fields"></a>
<strong>Fields</strong>
</dt>
<dd>
Components fields
<h3>Fields:</h3>
<ul>
<li><span class="parameter">node</span>
<span class="types"><span class="type">node</span></span>
Swipe node
</li>
<li><span class="parameter">click_zone</span>
<span class="types"><span class="type">node</span></span>
Restriction zone
(<em>optional</em>)
</li>
</ul>
</dd>
<dt>
<a name = "Events"></a>
<strong>Events</strong>
</dt>
<dd>
Component events
<h3>Fields:</h3>
<ul>
<li><span class="parameter">on_swipe</span>
<span class="types"><span class="type">druid_event</span></span>
Trigger on swipe event
</li>
</ul>
</dd>
<dt>
<a name = "Style"></a>
<strong>Style</strong>
</dt>
<dd>
Component style params
<h3>Fields:</h3>
<ul>
<li><span class="parameter">SWIPE_TIME</span>
<span class="types"><span class="type">number</span></span>
Maximum time for swipe trigger
</li>
<li><span class="parameter">SWIPE_THRESHOLD</span>
<span class="types"><span class="type">number</span></span>
Minimum distance for swipe trigger
</li>
<li><span class="parameter">SWIPE_TRIGGER_ON_MOVE</span>
<span class="types"><span class="type">bool</span></span>
If true, trigger on swipe moving, not only release action
</li>
</ul>
</dd>
</dl>
</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-04-18 14:39:17 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>
</html>

View File

@@ -52,6 +52,7 @@
<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.swipe.html">druid.swipe</a></li>
<li><strong>druid.text</strong></li>
<li><a href="../modules/druid.timer.html">druid.timer</a></li>
<li><a href="../modules/component.html">component</a></li>
@@ -62,11 +63,12 @@
</ul>
<h2>Topics</h2>
<ul class="">
<li><a href="../topics/01-components.md.html">Druid components</a></li>
<li><a href="../topics/01-components.md.html">01-components</a></li>
<li><a href="../topics/02-creating_custom_components.md.html">Creating custom components</a></li>
<li><a href="../topics/03-styles.md.html">Styles</a></li>
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/05-examples.md.html">Examples</a></li>
<li><a href="../topics/changelog.md.html">changelog</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
@@ -87,6 +89,10 @@
<td class="summary">Component init function</td>
</tr>
<tr>
<td class="name" nowrap><a href="#get_text_width">get_text_width([text])</a></td>
<td class="summary">Calculate text width with font with respect to trailing space</td>
</tr>
<tr>
<td class="name" nowrap><a href="#set_to">set_to(set_to)</a></td>
<td class="summary">Set text to text field</td>
</tr>
@@ -106,6 +112,10 @@
<td class="name" nowrap><a href="#set_pivot">set_pivot(pivot)</a></td>
<td class="summary">Set text pivot.</td>
</tr>
<tr>
<td class="name" nowrap><a href="#is_multiline">is_multiline()</a></td>
<td class="summary">Return true, if text with line break</td>
</tr>
</table>
<h2><a href="#Tables">Tables</a></h2>
<table class="function_list">
@@ -142,7 +152,7 @@
</li>
<li><span class="parameter">value</span>
<span class="types"><a class="type" href="https://www.lua.org/manual/5.3/manual.html#6.4">string</a></span>
Initial text
Initial text. Default value is node text from GUI scene.
(<em>optional</em>)
</li>
<li><span class="parameter">no_adjust</span>
@@ -156,6 +166,30 @@
</dd>
<dt>
<a name = "get_text_width"></a>
<strong>get_text_width([text])</strong>
</dt>
<dd>
Calculate text width with font with respect to trailing space
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">text</span>
<span class="types"><a class="type" href="https://www.lua.org/manual/5.3/manual.html#6.4">string</a></span>
(<em>optional</em>)
</li>
</ul>
</dd>
<dt>
<a name = "set_to"></a>
@@ -262,6 +296,26 @@
</dd>
<dt>
<a name = "is_multiline"></a>
<strong>is_multiline()</strong>
</dt>
<dd>
Return true, if text with line break
<h3>Returns:</h3>
<ol>
<span class="types"><span class="type">boolean</span></span>
Is text node with line break
</ol>
</dd>
</dl>
<h2 class="section-header "><a name="Tables"></a>Tables</h2>
@@ -352,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 23:23:01 </i>
<i style="float:right;">Last updated 2020-04-18 14:39:17 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@@ -52,6 +52,7 @@
<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.swipe.html">druid.swipe</a></li>
<li><a href="../modules/druid.text.html">druid.text</a></li>
<li><strong>druid.timer</strong></li>
<li><a href="../modules/component.html">component</a></li>
@@ -62,11 +63,12 @@
</ul>
<h2>Topics</h2>
<ul class="">
<li><a href="../topics/01-components.md.html">Druid components</a></li>
<li><a href="../topics/01-components.md.html">01-components</a></li>
<li><a href="../topics/02-creating_custom_components.md.html">Creating custom components</a></li>
<li><a href="../topics/03-styles.md.html">Styles</a></li>
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/05-examples.md.html">Examples</a></li>
<li><a href="../topics/changelog.md.html">changelog</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
@@ -267,31 +269,17 @@
<span class="types"><span class="type">node</span></span>
Trigger node
</li>
<li><span class="parameter">anim_node</span>
<span class="types"><span class="type">node</span></span>
Animation node
(<em>default</em> node)
<li><span class="parameter">from</span>
<span class="types"><span class="type">number</span></span>
Initial timer value
</li>
<li><span class="parameter">scale_from</span>
<span class="types"><span class="type">vector3</span></span>
Initial scale of anim_node
<li><span class="parameter">target</span>
<span class="types"><span class="type">number</span></span>
Target timer value
</li>
<li><span class="parameter">pos</span>
<span class="types"><span class="type">vector3</span></span>
Initial pos of anim_node
</li>
<li><span class="parameter">params</span>
<span class="types"><span class="type">any</span></span>
Params to click callbacks
</li>
<li><span class="parameter">hover</span>
<span class="types"><span class="type">druid.hover</span></span>
Druid hover logic component
</li>
<li><span class="parameter">click_zone</span>
<span class="types"><span class="type">node</span></span>
Restriction zone
(<em>optional</em>)
<li><span class="parameter">value</span>
<span class="types"><span class="type">number</span></span>
Current timer value
</li>
</ul>
@@ -307,7 +295,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 23:23:01 </i>
<i style="float:right;">Last updated 2020-04-18 14:39:17 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@@ -51,6 +51,7 @@
<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.swipe.html">druid.swipe</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>
@@ -61,11 +62,12 @@
</ul>
<h2>Topics</h2>
<ul class="">
<li><a href="../topics/01-components.md.html">Druid components</a></li>
<li><a href="../topics/01-components.md.html">01-components</a></li>
<li><a href="../topics/02-creating_custom_components.md.html">Creating custom components</a></li>
<li><a href="../topics/03-styles.md.html">Styles</a></li>
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/05-examples.md.html">Examples</a></li>
<li><a href="../topics/changelog.md.html">changelog</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
@@ -239,7 +241,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 23:23:01 </i>
<i style="float:right;">Last updated 2020-04-18 14:39:17 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@@ -51,6 +51,7 @@
<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.swipe.html">druid.swipe</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>
@@ -61,11 +62,12 @@
</ul>
<h2>Topics</h2>
<ul class="">
<li><a href="../topics/01-components.md.html">Druid components</a></li>
<li><a href="../topics/01-components.md.html">01-components</a></li>
<li><a href="../topics/02-creating_custom_components.md.html">Creating custom components</a></li>
<li><a href="../topics/03-styles.md.html">Styles</a></li>
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/05-examples.md.html">Examples</a></li>
<li><a href="../topics/changelog.md.html">changelog</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
@@ -93,6 +95,7 @@
<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.radio_group.html#">druid.radio_group</a></li>
<li><a href="../modules/druid.swipe.html#">druid.swipe</a></li>
</ul>
@@ -107,6 +110,10 @@
<td class="summary">Create new druid component</td>
</tr>
<tr>
<td class="name" nowrap><a href="#druid:final">druid:final()</a></td>
<td class="summary">Call on final function on gui_script.</td>
</tr>
<tr>
<td class="name" nowrap><a href="#druid:remove">druid:remove(component)</a></td>
<td class="summary">Remove component from druid instance.</td>
</tr>
@@ -123,6 +130,22 @@
<td class="summary">Druid on_message function</td>
</tr>
<tr>
<td class="name" nowrap><a href="#druid:on_focus_lost">druid:on_focus_lost()</a></td>
<td class="summary">Druid on focus lost interest function.</td>
</tr>
<tr>
<td class="name" nowrap><a href="#druid:on_focus_gained">druid:on_focus_gained()</a></td>
<td class="summary">Druid on focus gained interest function.</td>
</tr>
<tr>
<td class="name" nowrap><a href="#druid:on_layout_change">druid:on_layout_change()</a></td>
<td class="summary">Druid on layout change function.</td>
</tr>
<tr>
<td class="name" nowrap><a href="#druid.on_language_change">druid.on_language_change()</a></td>
<td class="summary">Druid on language change.</td>
</tr>
<tr>
<td class="name" nowrap><a href="#druid:new_button">druid:new_button(...)</a></td>
<td class="summary">Create button basic component</td>
</tr>
@@ -182,6 +205,10 @@
<td class="name" nowrap><a href="#druid:new_radio_group">druid:new_radio_group(...)</a></td>
<td class="summary">Create radio_group basic component</td>
</tr>
<tr>
<td class="name" nowrap><a href="#druid:new_swipe">druid:new_swipe(...)</a></td>
<td class="summary">Create swipe basic component</td>
</tr>
</table>
<br/>
@@ -240,6 +267,21 @@
</dd>
<dt>
<a name = "druid:final"></a>
<strong>druid:final()</strong>
</dt>
<dd>
Call on final function on gui<em>script. It will call on</em>remove
on all druid components
</dd>
<dt>
<a name = "druid:remove"></a>
@@ -337,6 +379,67 @@
</dd>
<dt>
<a name = "druid:on_focus_lost"></a>
<strong>druid:on_focus_lost()</strong>
</dt>
<dd>
Druid on focus lost interest function.
This one called by on<em>window</em>callback by global window listener
</dd>
<dt>
<a name = "druid:on_focus_gained"></a>
<strong>druid:on_focus_gained()</strong>
</dt>
<dd>
Druid on focus gained interest function.
This one called by on<em>window</em>callback by global window listener
</dd>
<dt>
<a name = "druid:on_layout_change"></a>
<strong>druid:on_layout_change()</strong>
</dt>
<dd>
Druid on layout change function.
Called on update gui layout
</dd>
<dt>
<a name = "druid.on_language_change"></a>
<strong>druid.on_language_change()</strong>
</dt>
<dd>
Druid on language change.
This one called by global gruid.on<em>language</em>change, but can be
call manualy to update all translations
</dd>
<dt>
<a name = "druid:new_button"></a>
@@ -742,6 +845,33 @@
</dd>
<dt>
<a name = "druid:new_swipe"></a>
<strong>druid:new_swipe(...)</strong>
</dt>
<dd>
Create swipe basic component
<h3>Parameters:</h3>
<ul>
<li><span class="parameter">...</span>
<span class="types"><span class="type">args</span></span>
swipe init args
</li>
</ul>
<h3>Returns:</h3>
<ol>
<span class="types"><span class="type">Component</span></span>
swipe component
</ol>
</dd>
</dl>
@@ -750,7 +880,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 23:23:01 </i>
<i style="float:right;">Last updated 2020-04-18 14:39:17 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@@ -36,27 +36,29 @@
<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="#Lang_text">Lang text </a></li>
<li><a href="#Scroll">Scroll </a></li>
<li><a href="#Grid">Grid </a></li>
<li><a href="#Progress">Progress </a></li>
<li><a href="#Slider">Slider </a></li>
<li><a href="#Input">Input </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>
<li><a href="#Timer">Timer </a></li>
<li><a href="#Grid">Grid </a></li>
<li><a href="#Hover">Hover </a></li>
<li><a href="#Input">Input </a></li>
<li><a href="#Swipe">Swipe </a></li>
</ul>
<h2>Topics</h2>
<ul class="">
<li><strong>Druid components</strong></li>
<li><strong>01-components</strong></li>
<li><a href="../topics/02-creating_custom_components.md.html">Creating custom components</a></li>
<li><a href="../topics/03-styles.md.html">Styles</a></li>
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/05-examples.md.html">Examples</a></li>
<li><a href="../topics/changelog.md.html">changelog</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
<h2>Modules</h2>
@@ -74,6 +76,7 @@
<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.swipe.html">druid.swipe</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>
@@ -88,74 +91,328 @@
<div id="content">
<h1>Druid components</h1>
<p><a name="Button"></a></p>
<h2>Button</h2>
<p>Basic game button</p>
<p><a href="https://insality.github.io/druid/modules/druid.button.html">Button API here</a></p>
<h3>Overview</h3>
<p>Basic Druid input component. Handle input on node and provide different callbacks on touch events.</p>
<h3>Setup</h3>
<p>Create button with druid: <code>button = druid:new_button(node_name, callback, [params], [animation_node])</code>
Where node name is name of node from GUI scene. You can use <code>node_name</code> as input trigger zone and point another node for animation via <code>animation_node</code></p>
<h3>Notes</h3>
<p>- Button callback have next params: (self, params, button_instance)</p>
<pre>
- **self** - Druid self context
- **params** - Additional params, specified on button creating
- **button_instance** - button itself
</pre>
<p>- You can set <em>params</em> on button callback on button creating: <code>druid:new_button(&quot;node_name&quot;, callback, params)</code>. This <em>params</em> will pass in callback as second argument
- Button have next events:</p>
<pre>
- **on_click** - basic button callback
- **on_repeated_click** - repeated click callback, <span class="keyword">while</span> holding the button, don<span class="string">'t trigger if callback is empty
- **on_long_click** - callback on long button tap, don'</span>t trigger <span class="keyword">if</span> callback is empty
- **on_hold_click** - hold callback, before long_click trigger, don<span class="string">'t trigger if callback is empty
- **on_double_click** - different callback, if tap button 2+ in row, don'</span>t trigger <span class="keyword">if</span> callback is empty
</pre>
<p>- If button have double click event and it is triggered, usual callback will be not invoked
- If you have stencil on buttons and you don't want trigger them outside of stencil node, you can use <a href="../modules/druid.button.html#set_click_zone">button:set_click_zone</a> to restrict button click zone
- Button can have key trigger to use then by key: <a href="../modules/druid.button.html#set_key_trigger">button:set_key_trigger</a>
- Animation node can be used for example to animate small icon on big panel. Node name of trigger zone will be <code>big panel</code> and animation node will be <code>small icon</code></p>
<p><a name="Text"></a></p>
<h2>Text</h2>
<p>Wrap on text node with text size adjusting</p>
<p><a href="https://insality.github.io/druid/modules/druid.text.html">Text API here</a></p>
<h3>Overview</h3>
<p>Basic Druid text component. Text components by default have the text size adjusting.</p>
<h3>Setup</h3>
<p>Create text node with druid: <code>text = druid:new_text(node_name, [initial_value], [is_disable_size_adjust])</code></p>
<h3>Notes</h3>
<p>- Text component by default have auto adjust text sizing. Text never will be bigger, than text node size, which you can setup in GUI scene. It can be disabled on component creating by settings argument <code>is_no_adjust</code> to <em>true</em></p>
<p><img src="../media/text_autosize.png" alt=""/></p>
<ul>
<li>Text pivot can be changed with <a href="../modules/druid.text.html#set_pivot">text:set_pivot</a>, and text will save their position inside their text size box:</li>
</ul>
<p><img src="../media/text_anchor.gif" alt=""/></p>
<p><a name="Blocker"></a></p>
<h2>Blocker</h2>
<p>Block input in node zone</p>
<p><a href="https://insality.github.io/druid/modules/druid.button.html">Blocker API here</a></p>
<h3>Overview</h3>
<p>Druid component for block input. Use it to block input in special zone.</p>
<h3>Setup</h3>
<p>Create blocker component with druid: <code>druid:new_blocker(node_name)</code></p>
<h3>Notes</h3>
<p>Explanation:
<img src="../media/blocker_scheme.png" alt=""/></p>
<p>Blue zone is <strong>button</strong> with close_window callback</p>
<p>Yellow zone is blocker with window content</p>
<p>So you can do the safe zones, when you have the big buttons</p>
<p><a name="Back_Handler"></a></p>
<h2>Back Handler</h2>
<p>Handle back button (Android, backspace)</p>
<p><a href="https://insality.github.io/druid/modules/druid.back_handler.html">Back handler API here</a></p>
<p><a name="Locale"></a></p>
<h2>Locale</h2>
<p>Text component with handle localization system</p>
<h3>Overview</h3>
<p>Component to handle back button. It handle Android back button and Backspace key. Key triggers in <code>input.binding</code> should be setup for correct working.</p>
<p><a name="Timer"></a></p>
<h2>Timer</h2>
<p>Run timer on text node</p>
<h3>Setup</h3>
<p>Setup callback with <code>druid:new_back_handler(callback)</code></p>
<h3>Notes</h3>
<p><a name="Lang_text"></a></p>
<h2>Lang text</h2>
<p><a href="https://insality.github.io/druid/modules/druid.lang_text.html">Lang text API here</a></p>
<h3>Overview</h3>
<p>Wrap on Text component to handle localization. It uses druid get<em>text</em>function to set text by it's id</p>
<h3>Setup</h3>
<p>Create lang text component with druid <code>text = druid:new_lang_text(node_name, locale_id)</code></p>
<h3>Notes</h3>
<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 href="https://insality.github.io/druid/modules/druid.scroll.html">Scroll API here</a></p>
<p><a name="Grid"></a></p>
<h2>Grid</h2>
<p>Component for manage node positions</p>
<h3>Overview</h3>
<p>Basic Druid scroll component. Handle all scrolling stuff in druid GUI</p>
<h3>Setup</h3>
<p>Create scroll component with druid: <code>scroll = druid:new_scroll(scroll_parent, scroll_input)</code>.</p>
<p><em>Scroll parent</em> - is dynamic part. This node will change position by scroll system</p>
<p><em>Scroll input</em> - is static part. It capturing user input and recognize scrolling touches</p>
<p>Initial scroll size will be equal to <em>scroll parent</em> node size. The initial view box will be equal to <em>scroll input</em> node size</p>
<p>Usually, Place static input zone part, and as children add scroll parent part:
<img src="../media/scroll_scheme.png" alt=""/>
<img src="../media/scroll_outline.png" alt=""/></p>
<p>*Here scroll<em>content</em>zone below input zone, in game content zone be able to scroll left until end*</p>
<h3>Notes</h3>
<p>- Scroll by default style have inertion and "back moving". It can be adjust via scroll <a href="https://insality.github.io/druid/modules/druid.scroll.html#Style">style settings</a>
- You can setup "points of interest". Scroll always will be centered on closes point of interest. It is able to create slider without inertion and points of interest on each scroll element.
- Scroll have next events:</p>
<pre>
- *on_scroll* On scroll move callback
- *on_scroll_to* On scroll_to <span class="keyword">function</span> callback
- *on_point_scroll* On scroll_to_index <span class="keyword">function</span> callback
</pre>
<p>- You can adjust scroll content size by <code>scroll:set_border(node_size)</code>. It will setup new size to content node.</p>
<p><a name="Progress"></a></p>
<h2>Progress</h2>
<p><a href="https://insality.github.io/druid/modules/druid.progress.html">Progress API here</a></p>
<h3>Overview</h3>
<p>Basic Druid progress bar component</p>
<h3>Setup</h3>
<p>Create progress bar component with druid: <code>progress = druid:new_progress(node_name, key, init_value)</code></p>
<p>Node name should have maximum node size, so in GUI scene, node_name should be fully filled.
Key is value from druid const: const.SIDE.X (or just "x") or const.SIDE.Y (or just "y")</p>
<h3>Notes</h3>
<p>- Progress correct working with 9slice nodes, it trying to set size by <em>set</em>size_ first, if it is not possible, it set up sizing via <em>set</em>scale_
- Progress bar can fill only by vertical or horizontal size. If you want make diagonal progress bar, just rotate node in GUI scene
- If you have glitchy or dark texture bug with progress bar, try to disable mipmaps in your texture profiles</p>
<p><a name="Slider"></a></p>
<h2>Slider</h2>
<p>Basic slider component</p>
<p><a href="https://insality.github.io/druid/modules/druid.slider.html">Slider API here</a></p>
<p><a name="Checkbox"></a></p>
<h2>Checkbox</h2>
<p>Basic checkbox component</p>
<h3>Overview</h3>
<p>Basic Druid slider component</p>
<p><a name="Checkbox_group"></a></p>
<h2>Checkbox group</h2>
<p>Several checkboxes in one group</p>
<h3>Setup</h3>
<p>Create slider component with druid: <code>slider = druid:new_slider(node_name, end_pos, callback)</code></p>
<p><a name="Radio_group"></a></p>
<h2>Radio group</h2>
<p>Several checkboxes in one group with single choice</p>
<p>Pin node (node_name in params) should be placed in zero position (initial). It will be available to mode Pin node between start pos and end pos. </p>
<p><a name="Hover"></a></p>
<h2>Hover</h2>
<p>Trigger component for check node hover state</p>
<h3>Notes</h3>
<p>- You can setup points of interests on slider via <a href="../modules/druid.slider.html#set_steps">slider:set_steps</a>. If steps are exist, slider values will be only from this steps (notched slider)
- For now, start pos and end pos should be on vertical or horizontal line (their x or y value should be equal)</p>
<p><a name="Input"></a></p>
<h2>Input</h2>
<p>Component to process user text input</p>
<p><a href="https://insality.github.io/druid/modules/druid.input.html">Input API here</a></p>
<h3>Overview</h3>
<p>Basic Druid text input component (unimplemented)</p>
<h3>Setup</h3>
<p>Create input component with druid: <code>input = druid:new_input(button_node_name, text_node_name, keyboard_type)</code></p>
<h3>Notes</h3>
<p>- Input component handle user text input. Input contains from button and text components. Button needed for selecting/unselecting input field
- Long click on input field for clear and select input field (clearing can be disable via styles)
- Click outside of button to unselect input field
- On focus lost (game minimized) input field will be unselected
- You can setup max length of the text
- You can setup allowed characters. On add not allowed characters <code>on_input_wrong</code> will be called. By default it cause simple shake animation
- The keyboard for input will not show on mobile HTML5. So input field in mobile HTML5 is not working now
- To make work different keyboard type, make sure value in game.project Android:InputMethod set to HidderInputField (https://defold.com/manuals/project-settings/#input-method)</p>
<p><a name="Checkbox"></a></p>
<h2>Checkbox</h2>
<p><a href="https://insality.github.io/druid/modules/druid.checkbox.html">Checkbox API here</a></p>
<h3>Overview</h3>
<p>Basic Druid checkbox component.</p>
<h3>Setup</h3>
<p>Create checkbox component with druid: <code>checkbox = druid:new_checkbox(node, callback)</code></p>
<h3>Notes</h3>
<p>- Checkbox uses button to handle click
- You can setup another node to handle input with click_node arg in component init: <code>druid:new_checkbox(node, callback, [click_node])</code></p>
<p><a name="Checkbox_group"></a></p>
<h2>Checkbox group</h2>
<p><a href="https://insality.github.io/druid/modules/druid.checkbox_group.html">Checkbox group API here</a></p>
<h3>Overview</h3>
<p>Several checkboxes in one group</p>
<h3>Setup</h3>
<p>Create checkbox_group component with druid: <code>group = druid:new_checkbox_group(nodes[], callback)</code></p>
<h3>Notes</h3>
<p>- Callback arguments: <code>function(self, checkbox_index)</code>. Index is equals in <em>nodes[]</em> array in component constructor
- You can get/set checkbox_group state with <code>group:set_state()</code> and <code>group:get_state()</code></p>
<p><a name="Radio_group"></a></p>
<h2>Radio group</h2>
<p><a href="https://insality.github.io/druid/modules/druid.radio_group.html">Radio group API here</a></p>
<h3>Overview</h3>
<p>Several checkboxes in one group with single choice</p>
<h3>Setup</h3>
<p>Create radio_group component with druid: <code>group = druid:new_radio_group(nodes[], callback)</code></p>
<h3>Notes</h3>
<p>- Callback arguments: <code>function(self, checkbox_index)</code>. Index is equals in <em>nodes[]</em> array in component constructor
- You can get/set radio_group state with <code>group:set_state()</code> and <code>group:get_state()</code>
- Only different from checkbox_group: on click another checkboxes in this group will be unchecked</p>
<p><a name="Timer"></a></p>
<h2>Timer</h2>
<p><a href="https://insality.github.io/druid/modules/druid.timer.html">Timer API here</a></p>
<h3>Overview</h3>
<p>Handle timer work on gui text node</p>
<h3>Setup</h3>
<p>Create timer component with druid: <code>timer = druid:new_timer(text_node, from_seconds, to_seconds, callback)</code></p>
<h3>Notes</h3>
<p>- Timer fires callback, when timer value equals to <em>to</em>seconds_
- Timer will setup text node with current timer value
- Timer uses update function to handle time</p>
<p><a name="Grid"></a></p>
<h2>Grid</h2>
<p><a href="https://insality.github.io/druid/modules/druid.grid.html">Grid API here</a></p>
<h3>Overview</h3>
<p>Component for manage node positions. Very simple implementation for nodes with equal size</p>
<h3>Setup</h3>
<p>Create grid component with druid: <code>grid = druid:new_grid(parent_node, prefab_node, max_in_row_elements)</code></p>
<h3>Notes</h3>
<p>- Grid on <em>adding elements</em> will setup parent to <em>parent</em>node_
- You can get array of position of every element for setup points of interest in scroll component
- You can get size of all elements for setup size in scroll component
- You can adjust anchor and border between elements
- <em>Prefab node</em> in component init used to get grid item size</p>
<p><a name="Hover"></a></p>
<h2>Hover</h2>
<p><a href="https://insality.github.io/druid/modules/druid.hover.html">Hover API here</a></p>
<h3>Overview</h3>
<p>System Druid component, handle hover node state.</p>
<h3>Setup</h3>
<p>Create hover component with druid: <code>hover = druid:new_hover(node, callback)</code></p>
<h3>Notes</h3>
<p><a name="Swipe"></a></p>
<h2>Swipe</h2>
<p><a href="https://insality.github.io/druid/modules/druid.swipe.html">Swipe API here</a></p>
<h3>Overview</h3>
<p>System Druid component, handle swipe actions on node</p>
<h3>Setup</h3>
<p>Create hover component with druid: <code>hover = druid:new_swipe(node, swipe_callback)</code></p>
<h3>Notes</h3>
<p>- Swipe callback have next params: (self, swipe_side, distance, time)</p>
<pre>
- **self** - Druid self context
- **swipe_side**: *<span class="global">string</span>* - values from [<span class="string">"up"</span>, <span class="string">"down"</span>, <span class="string">"left"</span>, <span class="string">"right"</span>]
- **distance**: *number* - <span class="keyword">in</span> pixels, distance of swipe
- **time**: *number* - <span class="keyword">in</span> seconds, time of swiping
</pre>
<p>- Swipe trigger only, if all input actions was on swipe node. If action will be outside of node, swipe status will be reseted
- In swipe style table you can adjust minimal distance and maximum time to trigger swipe
- In swipe style table you can toggle type of swipe triggering. if SWIPE<em>TRIGGER</em>ON_MOVE setup to true - swipe will trigger as swipe can be triggered. If setup to false - swipe will trigger only on released action
- If you have stencil on swipe node and you don't want trigger it outside of stencil node, you can use <a href="../modules/druid.swipe.html#set_click_zone">swipe:set_click_zone</a> to restrict swipe zone</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 23:23:01 </i>
<i style="float:right;">Last updated 2020-04-18 14:39:17 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@@ -35,16 +35,18 @@
<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>
<li><a href="#Power_of_using_templates">Power of using templates </a></li>
</ul>
<h2>Topics</h2>
<ul class="">
<li><a href="../topics/01-components.md.html">Druid components</a></li>
<li><a href="../topics/01-components.md.html">01-components</a></li>
<li><strong>Creating custom components</strong></li>
<li><a href="../topics/03-styles.md.html">Styles</a></li>
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/05-examples.md.html">Examples</a></li>
<li><a href="../topics/changelog.md.html">changelog</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
<h2>Modules</h2>
@@ -62,6 +64,7 @@
<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.swipe.html">druid.swipe</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>
@@ -80,18 +83,22 @@
<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>Druid allows you to create your custom components from druid basic components or other custom components.</p>
<p>Every component is the children of Basic Druid component. Read the [basic component API here].(https://insality.github.io/druid/modules/component.html), Methods of basic components you can call via self:{method_name}</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="keyword">local</span> M = component.create(<span class="string">"my_component"</span>)
<span class="comment">-- Component constructor
</span><span class="keyword">function</span> M.init(self, ...)
@@ -109,14 +116,31 @@
</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="comment">-- Call only if component with ON_LANGUAGE_CHANGE interest
</span><span class="keyword">function</span> M.on_language_change(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="comment">-- Call, if input was capturing before this component
</span><span class="comment">-- Example: scroll is start scrolling, so you need unhover button
</span><span class="keyword">function</span> M.on_input_interrupt(self)
<span class="keyword">end</span>
<span class="comment">-- Call, if game lost focus. Need ON_FOCUS_LOST intereset
</span><span class="keyword">function</span> M.on_focus_lost(self)
<span class="keyword">end</span>
<span class="comment">-- Call, if game gained focus. Need ON_FOCUS_GAINED intereset
</span><span class="keyword">function</span> M.on_focus_gained(self)
<span class="keyword">end</span>
<span class="comment">-- Call on component remove or on druid:final
</span><span class="keyword">function</span> M.on_remove(self)
<span class="keyword">end</span>
<span class="keyword">return</span> M
</pre>
@@ -128,12 +152,32 @@
<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)
<span class="keyword">function</span> init(self)
druid.register(<span class="string">"my_component"</span>, my_component)
<span class="keyword">end</span>
</pre>
<p>Registering make new function with "new<em>{component</em>name}". In our example it will be: <code>druid:new_my_component()</code>.</p>
<p>Or you can create component without registering with <code>druid:create(my_component_module)</code></p>
<p>As component registered, you can create your component with next 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_component = <span class="global">require</span>(<span class="string">"my.amazing.component"</span>)
<span class="keyword">function</span> init(self)
self.druid = druid.new(self)
<span class="keyword">local</span> my_component = self.druid:new_my_component(...)
<span class="comment">-- or --
</span> <span class="keyword">local</span> my_component = self.druid:create(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:
@@ -143,14 +187,15 @@ There is next interests in druid:
<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>
<li><p><strong>ON<em>LANGUAGE</em>CHANGE</strong> - will call <em>on</em>language<em>change</em> function on language change trigger</p></li>
<li><p><strong>ON<em>LAYOUT</em>CHANGE</strong> will call <em>on</em>layout<em>change</em> function on layout change trigger</p></li>
<li><p><strong>ON<em>FOCUS</em>LOST</strong> will call <em>on</em>focust<em>lost</em> function in on focus lost event. You need to pass window_callback to global <a href="../modules/druid.html#on_window_callback">druid:on_window_callback</a></p></li>
<li><p><strong>ON<em>FOCUS</em>GAINED</strong> will call <em>on</em>focust<em>gained</em> function in on focus gained event. You need to pass window_callback to global <a href="../modules/druid.html#on_window_callback">druid:on_window_callback</a></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>
<p>On each component recommended describe component scheme in next way:</p>
<pre>
@@ -160,9 +205,9 @@ There is next interests in druid:
<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>
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)
@@ -189,11 +234,17 @@ There is next interests in druid:
<p><a name="Power_of_using_templates"></a></p>
<h2>Power of using templates</h2>
<p>You can use one component, but creating and customizing templates for them. Templates only requires to match the component scheme.</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 23:23:01 </i>
<i style="float:right;">Last updated 2020-04-18 14:39:17 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@@ -34,17 +34,17 @@
<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/01-components.md.html">Druid components</a></li>
<li><a href="../topics/01-components.md.html">01-components</a></li>
<li><a href="../topics/02-creating_custom_components.md.html">Creating custom components</a></li>
<li><strong>Styles</strong></li>
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/05-examples.md.html">Examples</a></li>
<li><a href="../topics/changelog.md.html">changelog</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
<h2>Modules</h2>
@@ -62,6 +62,7 @@
<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.swipe.html">druid.swipe</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>
@@ -88,7 +89,7 @@
<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>
<p>Setup default druid style for all druid instances via <a href="../modules/druid.html#set_default_style">druid.set_default_style</a></p>
<pre>
<span class="keyword">local</span> druid = <span class="global">require</span>(<span class="string">"druid.druid"</span>)
@@ -128,17 +129,12 @@
</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 23:23:01 </i>
<i style="float:right;">Last updated 2020-04-18 14:39:17 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@@ -38,11 +38,12 @@
<h2>Topics</h2>
<ul class="">
<li><a href="../topics/01-components.md.html">Druid components</a></li>
<li><a href="../topics/01-components.md.html">01-components</a></li>
<li><a href="../topics/02-creating_custom_components.md.html">Creating custom components</a></li>
<li><a href="../topics/03-styles.md.html">Styles</a></li>
<li><strong>Druid assets</strong></li>
<li><a href="../topics/05-examples.md.html">Examples</a></li>
<li><a href="../topics/changelog.md.html">changelog</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
<h2>Modules</h2>
@@ -60,6 +61,7 @@
<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.swipe.html">druid.swipe</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>
@@ -80,7 +82,7 @@
<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>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>
@@ -89,7 +91,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 23:23:01 </i>
<i style="float:right;">Last updated 2020-04-18 14:39:17 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@@ -38,11 +38,12 @@
<h2>Topics</h2>
<ul class="">
<li><a href="../topics/01-components.md.html">Druid components</a></li>
<li><a href="../topics/01-components.md.html">01-components</a></li>
<li><a href="../topics/02-creating_custom_components.md.html">Creating custom components</a></li>
<li><a href="../topics/03-styles.md.html">Styles</a></li>
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
<li><strong>Examples</strong></li>
<li><a href="../topics/changelog.md.html">changelog</a></li>
<li><a href="../topics/README.md.html">README</a></li>
</ul>
<h2>Modules</h2>
@@ -60,6 +61,7 @@
<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.swipe.html">druid.swipe</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>
@@ -80,14 +82,14 @@
<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>
<p>Try the <a href="https://insality.github.io/druid/druid/">HTML5 version</a> 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 23:23:01 </i>
<i style="float:right;">Last updated 2020-04-18 14:39:17 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@@ -34,11 +34,13 @@
<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="#Basic_usage">Basic usage </a></li>
<li><a href="#Druid_Events">Druid Events </a></li>
<li><a href="#Druid_lifecycle">Druid lifecycle </a></li>
<li><a href="#Features">Features </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>
@@ -46,11 +48,12 @@
<h2>Topics</h2>
<ul class="">
<li><a href="../topics/01-components.md.html">Druid components</a></li>
<li><a href="../topics/01-components.md.html">01-components</a></li>
<li><a href="../topics/02-creating_custom_components.md.html">Creating custom components</a></li>
<li><a href="../topics/03-styles.md.html">Styles</a></li>
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/05-examples.md.html">Examples</a></li>
<li><a href="../topics/changelog.md.html">changelog</a></li>
<li><strong>README</strong></li>
</ul>
<h2>Modules</h2>
@@ -68,6 +71,7 @@
<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.swipe.html">druid.swipe</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>
@@ -83,7 +87,9 @@
<a href="https://insality.github.io/druid/"><img src="media/druid_logo.png" alt=""/></a></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 href="https://github.com/Insality/druid/releases"><img src="https://img.shields.io/github/v/release/insality/druid" alt="GitHub release (latest by date)"/></a></p>
<p><strong>Druid</strong> - powerful defold component UI library. Use basic <strong>Druid</strong> components or make your own game-specific components to make amazing GUI in your games.</p>
<p><a name="Setup"></a></p>
@@ -91,7 +97,7 @@
<h3>Dependency</h3>
<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>
<p>You can use the <strong>Druid</strong> 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>
@@ -99,22 +105,61 @@
<p>Or point to the ZIP file of a <a href="https://github.com/Insality/druid/releases">specific release</a>.</p>
<h3>Input bindings</h3>
<h3>Code</h3>
<p>For <strong>Druid</strong> to work requires next input bindings:</p>
<p>Adjust druid settings, if needed:</p>
<ul>
<li>Mouse trigger - <code>Button 1</code> -> <code>touch</code> <em>For basic input components</em></li>
<li>Key trigger - <code>Backspace</code> -> <code>key_backspace</code> <em>For back</em>handler component, input component_</li>
<li>Key trigger - <code>Back</code> -> <code>key_back</code> <em>For back</em>handler component, Android back button, input component_</li>
<li>Key trigger - <code>Enter</code> -> <code>key_enter</code> <em>For input component, optional</em></li>
<li>Key trigger - <code>Esc</code> -> <code>key_esc</code> <em>For input component, optional</em></li>
</ul>
<p><img src="media/input_binding_2.png" alt=""/>
<img src="media/input_binding_1.png" alt=""/></p>
<h3>Input capturing [optional]</h3>
<p>By default, <strong>Druid</strong> will auto-capture input focus, if any input component will be created. So you don't need to call <code>msg.post(&quot;.&quot;, &quot;acquire_input_focus)&quot;</code></p>
<p>If you not need this behaviour, you can disable it by settings <code>druid.no_auto_input</code> field in <em>game.project</em>:</p>
<pre><code> [druid]
no_auto_input = 1
</code></pre>
<h3>Code [optional]</h3>
<p>Adjust <strong>Druid</strong> 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><span class="comment">-- Callback should play sound by name
</span>druid.set_sound_function(callback)
<span class="comment">-- Used for lang_text component
</span><span class="comment">-- Callback should return localized string by locale id
</span>druid.set_text_function(callback)
<span class="comment">-- Used for change default druid style
</span>druid.set_default_style(your_style)
<span class="comment">-- Call this function on language changing in the game,
</span><span class="comment">-- to retranslate all lang_text components:
</span>druid.on_languge_change()
<span class="comment">-- Call this function on layout changing in the game,
</span><span class="comment">-- to reapply layouts
</span>druid.on_layout_change()
<span class="comment">-- Call this function inside window.set_listener
</span><span class="comment">-- to catch game focus lost/gained callbacks:
</span>druid.on_window_callback(event)
</pre>
@@ -122,78 +167,145 @@
<p><a name="Components"></a></p>
<h2>Components</h2>
<p>Druid provides next basic components:
- <strong>Button</strong> - Basic game button</p>
<p><strong>Druid</strong> provides next basic components:</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>
<li><p><strong>Hover</strong> - Trigger component for check node hover state</p></li>
<li><p><strong>Input</strong> - Component to process user text input</p></li>
<li><p><strong><a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md#button">Button</a></strong> - Basic Druid input component</p></li>
<li><p><strong><a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md#text">Text</a></strong> - Basic Druid text component</p></li>
<li><p><strong><a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md#lang-text">Lang text</a></strong> - Wrap on Text component to handle localization</p></li>
<li><p><strong><a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md#scroll">Scroll</a></strong> - Basic Druid scroll component</p></li>
<li><p><strong><a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md#progress">Progress</a></strong> - Basic Druid progress bar component</p></li>
<li><p><strong><a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md#slider">Slider</a></strong> - Basic Druid slider component</p></li>
<li><p><strong><a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md#input">Input</a></strong> - Basic Druid text input component (unimplemented)</p></li>
<li><p><strong><a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md#checkbox">Checkbox</a></strong> - Basic Druid checkbox component</p></li>
<li><p><strong><a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md#checkbox-group">Checkbox group</a></strong> - Several checkboxes in one group</p></li>
<li><p><strong><a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md#radio-group">Radio group</a></strong> - Several checkboxes in one group with single choice</p></li>
<li><p><strong><a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md#blocker">Blocker</a></strong> - Block input in node zone component</p></li>
<li><p><strong><a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md#back-handler">Back Handler</a></strong> - Handle back button (Android back, backspace)</p></li>
<li><p><strong><a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md#timer">Timer</a></strong> - Handle timer work on gui text node</p></li>
<li><p><strong><a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md#grid">Grid</a></strong> - Component for manage node positions </p></li>
<li><p><strong><a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md#hover">Hover</a></strong> - System Druid component, handle hover node state</p></li>
<li><p><strong><a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md#swipe">Swipe</a></strong> - System Druid component, handle swipe gestures on node</p></li>
</ul>
<p>Full info see on <em>components.md</em></p>
<p>Full info see on <em><a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md">components.md</a></em></p>
<p><a name="Creating_components"></a></p>
<h2>Creating components</h2>
<p><a name="Basic_usage"></a></p>
<h2>Basic usage</h2>
<p>For using <strong>Druid</strong>, first you should create Druid instance to spawn components. Pass to new Druid instance main engine functions: <em>update</em>, *on<em>message* and *on</em>input*</p>
<p>All <strong>Druid</strong> components as arguments can apply node name string, you can don't do <code>gui.get_node()</code> before</p>
<p>All <strong>Druid</strong> and component methods calling with <code>:</code> like <code>self.druid:new_button()</code></p>
<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)
<span class="keyword">local</span> <span class="keyword">function</span> button_callback(self)
<span class="global">print</span>(<span class="string">"Button was clicked!"</span>)
<span class="keyword">end</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)
self.druid:new_button(<span class="string">"button_node_name"</span>, button_callback)
<span class="keyword">end</span>
<span class="keyword">function</span> final(self)
self.druid:final()
<span class="keyword">end</span>
<span class="keyword">function</span> on_input(self, action_id, action)
<span class="keyword">return</span> self.druid:on_input(action_id, action)
<span class="keyword">end</span>
</pre>
<p><a name="Druid_Events"></a></p>
<h2>Druid Events</h2>
<p>Any <strong>Druid</strong> components as callbacks uses <a href="https://insality.github.io/druid/modules/druid_event.html">Druid Events</a>. In component API (<a href="https://insality.github.io/druid/modules/druid.button.html#Events">button example</a>) pointed list of component events. You can manually subscribe on this events by next API:</p>
<ul>
<li><p><strong>event:subscribe</strong>(callback)</p></li>
<li><p><strong>event:unsubscribe</strong>(callback)</p></li>
<li><p><strong>event:clear</strong>()</p></li>
</ul>
<p>Any events can handle several callbacks, if needed.</p>
<p><a name="Druid_lifecycle"></a></p>
<h2>Druid lifecycle</h2>
<p>Here is full druid lifecycle setup in your <strong>*.gui_script</strong> file:</p>
<pre>
<span class="keyword">local</span> druid = <span class="global">require</span>(<span class="string">"druid.druid"</span>)
<span class="keyword">function</span> init(self)
self.druid = druid.new(self)
<span class="keyword">end</span>
<span class="keyword">function</span> final(self)
self.druid:final()
<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_input(self, action_id, action)
<span class="keyword">return</span> self.druid:on_input(action_id, action)
<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>
<ul>
<li>*on_input* used for almost all basic druid components</li>
<li><em>update</em> used for progress bar, scroll and timer base components</li>
<li>*on_message* used for specific druid events, like language change or layout change (TODO: in future)</li>
<li><em>final</em> used for custom components, what have to do several action before destroy</li>
</ul>
<p>Recommended is fully integrate al druid lifecycles functions</p>
<p><a name="Features"></a></p>
<h2>Features</h2>
<ul>
<li>Druid input goes as stack. Last created button will checked first. So create your GUI from back</li>
<li>Don't forget about <code>return</code> in <code>on_input</code>: <code>return self.druid:on_input()</code>. It need, if you have more than 1 acquire inputs (several druid, other input system, etc)</li>
</ul>
<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</p>
<p>See the <a href="https://github.com/Insality/druid/tree/develop/example">example folder</a> for examples of how to use <strong>Druid</strong></p>
<p>See the <a href="https://github.com/insality/druid-assets">druid-assets repository</a> for examples of how to create custom components and styles</p>
<p>Try the HTML5 version of the example app</p>
<p>Try the <a href="https://insality.github.io/druid/druid/">HTML5 version</a> 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>To learn <strong>Druid</strong> better, read next documentation:
- <a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md">Druid components</a>
- <a href="https://github.com/Insality/druid/blob/master/docs_md/02-creating_custom_components.md">Create custom components</a>
- <a href="https://github.com/Insality/druid/blob/master/docs_md/03-styles.md">Druid styles</a>
- <a href="https://github.com/Insality/druid/blob/master/docs_md/04-druid_assets.md">Druid asset store</a></p>
<p>Full druid documentation you can find here:
<p>Full <strong>Druid</strong> documentation you can find here:
https://insality.github.io/druid/</p>
@@ -203,25 +315,15 @@ https://insality.github.io/druid/</p>
<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></p>
<p>Original created by <a href="https://github.com/AGulev">AGulev</a></p>
<p>Developed and supporting by <a href="https://github.com/Insality">Insality</a></p>
<p>Assets from <a href="http://www.kenney.nl/">Kenney</a></p>
<p>MIT License</p>
@@ -234,7 +336,7 @@ https://insality.github.io/druid/</p>
</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 23:23:01 </i>
<i style="float:right;">Last updated 2020-04-18 14:39:17 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>

View File

@@ -0,0 +1,132 @@
<!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/01-components.md.html">01-components</a></li>
<li><a href="../topics/02-creating_custom_components.md.html">Creating custom components</a></li>
<li><a href="../topics/03-styles.md.html">Styles</a></li>
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
<li><a href="../topics/05-examples.md.html">Examples</a></li>
<li><strong>changelog</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.swipe.html">druid.swipe</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">
<p>Druid 0.3.0:</p>
<ul>
<li><p><code>Druid:final</code> now is important function for correct working</p></li>
<li><p>Add <em>swipe</em> basic component</p>
<pre>
- Swipe component handle simple swipe gestures on node. It has single callback with direction on swipe. You can adjust a several parameters of swipe <span class="keyword">in</span> druid style.
- Swipe can be triggered on action.released <span class="keyword">or</span> <span class="keyword">while</span> user is make swiping (<span class="keyword">in</span> process)
- Add swipe example at main Druid example. Try swipe left/right to switch example pages.
</pre>
</li>
<li><p>Add <em>input</em> basic component</p>
<pre>
- Input component handle user text input. Input contains from button <span class="keyword">and</span> text components. Button needed <span class="keyword">for</span> selecting/unselecting input field
- Long click on input field <span class="keyword">for</span> clear <span class="keyword">and</span> <span class="global">select</span> input field (clearing can be disable via styles)
- Click outside of button to unselect input field
- On focus lost (game minimized) input field will be unselected
- You can setup max length of the text
- You can setup allowed characters. On add <span class="keyword">not</span> allowed characters <span class="backtick"><code>on_input_wrong</code></span> will be called. By default it cause simple shake animation
- The keyboard <span class="keyword">for</span> input will <span class="keyword">not</span> show on mobile HTML5. So input field <span class="keyword">in</span> mobile HTML5 is <span class="keyword">not</span> working now
- To make work different keyboard <span class="global">type</span>, make sure value <span class="keyword">in</span> game.project Android:InputMethod set to HidderInputField (https://defold.com/manuals/project-settings/#input-method)
</pre>
</li>
<li><p>Add button on<em>click</em>outside event. You can subscribe on this event in button. Was needed for Input component (click outside to deselect input field).</p></li>
<li><p>Add start_pos to button component</p></li>
<li><p>Changed input binding settings. Add backspace, enter, text and marked_text. Backspace now is different from android back button.</p></li>
<li><p>Renamed on<em>change</em>language -> on<em>language</em>change component interest</p></li>
<li><p>Add basic component two functions: <code>increase_input_priority</code> and <code>reset_input_priority</code>. It used to process component input first in current input stack (there is two input stacks: INPUT and INPUT_HIGH). Example: on selecting input field, it increase input self priority until it be unselected</p></li>
<li><p>Add two new component interests: <code>on_focus_gain</code> and <code>on_focus_lost</code></p></li>
<li><p>Add global druid events:</p>
<pre>
- on_window_callback: call <span class="backtick"><code>druid.on_window_callback(event)</code></span> <span class="keyword">for</span> on_focus_gain/lost correct work
- on_language_change: call <span class="backtick"><code>druid.on_language_change()</code></span> (#<span class="number">38</span>) <span class="keyword">for</span> update all druid instances lang components
- on_layout_change: call <span class="backtick"><code>druid.on_layout_change()</code></span> (#<span class="number">37</span>) <span class="keyword">for</span> update all gui layouts (unimplemented now)
</pre>
</li>
<li><p>Add several examples to druid-assets respository</p></li>
<li><p>Known issues:</p>
<pre>
- Adjusting text size by height works wrong. Adjusting single line texting works fine
</pre>
</li>
</ul>
</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-04-18 14:39:17 </i>
</div> <!-- id="about" -->
</div> <!-- id="container" -->
</body>
</html>

View File

@@ -1,46 +1,281 @@
# Druid components
## Button
Basic game button
[Button API here](https://insality.github.io/druid/modules/druid.button.html)
### Overview
Basic Druid input component. Handle input on node and provide different callbacks on touch events.
### Setup
Create button with druid: `button = druid:new_button(node_name, callback, [params], [animation_node])`
Where node name is name of node from GUI scene. You can use `node_name` as input trigger zone and point another node for animation via `animation_node`
### Notes
- Button callback have next params: (self, params, button_instance)
- **self** - Druid self context
- **params** - Additional params, specified on button creating
- **button_instance** - button itself
- You can set _params_ on button callback on button creating: `druid:new_button("node_name", callback, params)`. This _params_ will pass in callback as second argument
- Button have next events:
- **on_click** - basic button callback
- **on_repeated_click** - repeated click callback, while holding the button, don't trigger if callback is empty
- **on_long_click** - callback on long button tap, don't trigger if callback is empty
- **on_hold_click** - hold callback, before long_click trigger, don't trigger if callback is empty
- **on_double_click** - different callback, if tap button 2+ in row, don't trigger if callback is empty
- If button have double click event and it is triggered, usual callback will be not invoked
- If you have stencil on buttons and you don't want trigger them outside of stencil node, you can use `button:set_click_zone` to restrict button click zone
- Button can have key trigger to use then by key: `button:set_key_trigger`
- Animation node can be used for example to animate small icon on big panel. Node name of trigger zone will be `big panel` and animation node will be `small icon`
## Text
Wrap on text node with text size adjusting
[Text API here](https://insality.github.io/druid/modules/druid.text.html)
### Overview
Basic Druid text component. Text components by default have the text size adjusting.
### Setup
Create text node with druid: `text = druid:new_text(node_name, [initial_value], [is_disable_size_adjust])`
### Notes
- Text component by default have auto adjust text sizing. Text never will be bigger, than text node size, which you can setup in GUI scene. It can be disabled on component creating by settings argument `is_no_adjust` to _true_
![](../media/text_autosize.png)
- Text pivot can be changed with `text:set_pivot`, and text will save their position inside their text size box:
![](../media/text_anchor.gif)
## Blocker
Block input in node zone
[Blocker API here](https://insality.github.io/druid/modules/druid.button.html)
### Overview
Druid component for block input. Use it to block input in special zone.
### Setup
Create blocker component with druid: `druid:new_blocker(node_name)`
### Notes
Explanation:
![](../media/blocker_scheme.png)
Blue zone is **button** with close_window callback
Yellow zone is blocker with window content
So you can do the safe zones, when you have the big buttons
## Back Handler
Handle back button (Android, backspace)
[Back handler API here](https://insality.github.io/druid/modules/druid.back_handler.html)
## Locale
Text component with handle localization system
### Overview
Component to handle back button. It handle Android back button and Backspace key. Key triggers in `input.binding` should be setup for correct working.
## Timer
Run timer on text node
### Setup
Setup callback with `druid:new_back_handler(callback)`
### Notes
## Lang text
[Lang text API here](https://insality.github.io/druid/modules/druid.lang_text.html)
### Overview
Wrap on Text component to handle localization. It uses druid get_text_function to set text by it's id
### Setup
Create lang text component with druid `text = druid:new_lang_text(node_name, locale_id)`
### Notes
## Progress
Basic progress bar
## Scroll
Basic scroll component
[Scroll API here](https://insality.github.io/druid/modules/druid.scroll.html)
## Grid
Component for manage node positions
### Overview
Basic Druid scroll component. Handle all scrolling stuff in druid GUI
### Setup
Create scroll component with druid: `scroll = druid:new_scroll(scroll_parent, scroll_input)`.
_Scroll parent_ - is dynamic part. This node will change position by scroll system
_Scroll input_ - is static part. It capturing user input and recognize scrolling touches
Initial scroll size will be equal to _scroll parent_ node size. The initial view box will be equal to _scroll input_ node size
Usually, Place static input zone part, and as children add scroll parent part:
![](../media/scroll_scheme.png)
![](../media/scroll_outline.png)
*Here scroll_content_zone below input zone, in game content zone be able to scroll left until end*
### Notes
- Scroll by default style have inertion and "back moving". It can be adjust via scroll [style settings](https://insality.github.io/druid/modules/druid.scroll.html#Style)
- You can setup "points of interest". Scroll always will be centered on closes point of interest. It is able to create slider without inertion and points of interest on each scroll element.
- Scroll have next events:
- *on_scroll* On scroll move callback
- *on_scroll_to* On scroll_to function callback
- *on_point_scroll* On scroll_to_index function callback
- You can adjust scroll content size by `scroll:set_border(node_size)`. It will setup new size to content node.
## Progress
[Progress API here](https://insality.github.io/druid/modules/druid.progress.html)
### Overview
Basic Druid progress bar component
### Setup
Create progress bar component with druid: `progress = druid:new_progress(node_name, key, init_value)`
Node name should have maximum node size, so in GUI scene, node_name should be fully filled.
Key is value from druid const: const.SIDE.X (or just "x") or const.SIDE.Y (or just "y")
### Notes
- Progress correct working with 9slice nodes, it trying to set size by _set_size_ first, if it is not possible, it set up sizing via _set_scale_
- Progress bar can fill only by vertical or horizontal size. If you want make diagonal progress bar, just rotate node in GUI scene
- If you have glitchy or dark texture bug with progress bar, try to disable mipmaps in your texture profiles
## Slider
Basic slider component
[Slider API here](https://insality.github.io/druid/modules/druid.slider.html)
## Checkbox
Basic checkbox component
### Overview
Basic Druid slider component
## Checkbox group
Several checkboxes in one group
### Setup
Create slider component with druid: `slider = druid:new_slider(node_name, end_pos, callback)`
## Radio group
Several checkboxes in one group with single choice
Pin node (node_name in params) should be placed in zero position (initial). It will be available to mode Pin node between start pos and end pos.
## Hover
Trigger component for check node hover state
### Notes
- You can setup points of interests on slider via `slider:set_steps`. If steps are exist, slider values will be only from this steps (notched slider)
- For now, start pos and end pos should be on vertical or horizontal line (their x or y value should be equal)
## Input
Component to process user text input
[Input API here](https://insality.github.io/druid/modules/druid.input.html)
### Overview
Basic Druid text input component (unimplemented)
### Setup
Create input component with druid: `input = druid:new_input(button_node_name, text_node_name, keyboard_type)`
### Notes
- Input component handle user text input. Input contains from button and text components. Button needed for selecting/unselecting input field
- Long click on input field for clear and select input field (clearing can be disable via styles)
- Click outside of button to unselect input field
- On focus lost (game minimized) input field will be unselected
- You can setup max length of the text
- You can setup allowed characters. On add not allowed characters `on_input_wrong` will be called. By default it cause simple shake animation
- The keyboard for input will not show on mobile HTML5. So input field in mobile HTML5 is not working now
- To make work different keyboard type, make sure value in game.project Android:InputMethod set to HidderInputField (https://defold.com/manuals/project-settings/#input-method)
## Checkbox
[Checkbox API here](https://insality.github.io/druid/modules/druid.checkbox.html)
### Overview
Basic Druid checkbox component.
### Setup
Create checkbox component with druid: `checkbox = druid:new_checkbox(node, callback)`
### Notes
- Checkbox uses button to handle click
- You can setup another node to handle input with click_node arg in component init: `druid:new_checkbox(node, callback, [click_node])`
## Checkbox group
[Checkbox group API here](https://insality.github.io/druid/modules/druid.checkbox_group.html)
### Overview
Several checkboxes in one group
### Setup
Create checkbox_group component with druid: `group = druid:new_checkbox_group(nodes[], callback)`
### Notes
- Callback arguments: `function(self, checkbox_index)`. Index is equals in _nodes[]_ array in component constructor
- You can get/set checkbox_group state with `group:set_state()` and `group:get_state()`
## Radio group
[Radio group API here](https://insality.github.io/druid/modules/druid.radio_group.html)
### Overview
Several checkboxes in one group with single choice
### Setup
Create radio_group component with druid: `group = druid:new_radio_group(nodes[], callback)`
### Notes
- Callback arguments: `function(self, checkbox_index)`. Index is equals in _nodes[]_ array in component constructor
- You can get/set radio_group state with `group:set_state()` and `group:get_state()`
- Only different from checkbox_group: on click another checkboxes in this group will be unchecked
## Timer
[Timer API here](https://insality.github.io/druid/modules/druid.timer.html)
### Overview
Handle timer work on gui text node
### Setup
Create timer component with druid: `timer = druid:new_timer(text_node, from_seconds, to_seconds, callback)`
### Notes
- Timer fires callback, when timer value equals to _to_seconds_
- Timer will setup text node with current timer value
- Timer uses update function to handle time
## Grid
[Grid API here](https://insality.github.io/druid/modules/druid.grid.html)
### Overview
Component for manage node positions. Very simple implementation for nodes with equal size
### Setup
Create grid component with druid: `grid = druid:new_grid(parent_node, prefab_node, max_in_row_elements)`
### Notes
- Grid on _adding elements_ will setup parent to _parent_node_
- You can get array of position of every element for setup points of interest in scroll component
- You can get size of all elements for setup size in scroll component
- You can adjust anchor and border between elements
- _Prefab node_ in component init used to get grid item size
## Hover
[Hover API here](https://insality.github.io/druid/modules/druid.hover.html)
### Overview
System Druid component, handle hover node state.
### Setup
Create hover component with druid: `hover = druid:new_hover(node, callback)`
### Notes
## Swipe
[Swipe API here](https://insality.github.io/druid/modules/druid.swipe.html)
### Overview
System Druid component, handle swipe actions on node
### Setup
Create hover component with druid: `hover = druid:new_swipe(node, swipe_callback)`
### Notes
- Swipe callback have next params: (self, swipe_side, distance, time)
- **self** - Druid self context
- **swipe_side**: *string* - values from ["up", "down", "left", "right"]
- **distance**: *number* - in pixels, distance of swipe
- **time**: *number* - in seconds, time of swiping
- Swipe trigger only, if all input actions was on swipe node. If action will be outside of node, swipe status will be reseted
- In swipe style table you can adjust minimal distance and maximum time to trigger swipe
- In swipe style table you can toggle type of swipe triggering. if SWIPE_TRIGGER_ON_MOVE setup to true - swipe will trigger as swipe can be triggered. If setup to false - swipe will trigger only on released action
- If you have stencil on swipe node and you don't want trigger it outside of stencil node, you can use `swipe:set_click_zone` to restrict swipe zone

View File

@@ -1,16 +1,20 @@
# Creating custom components
## Overview
Druid allows you to create your custom components from druid basic components or other custom components
Druid allows you to create your custom components from druid basic components or other custom components.
Every component is the children of Basic Druid component. Read the [basic component API here].(https://insality.github.io/druid/modules/component.html), Methods of basic components you can call via self:{method_name}
## 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")
local M = component.create("my_component")
-- Component constructor
function M.init(self, ...)
@@ -28,14 +32,31 @@ end
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)
-- Call only if component with ON_LANGUAGE_CHANGE interest
function M.on_language_change(self)
end
-- Call only if component with ON_LAYOUT_CHANGE interest
function M.on_layout_change(self)
end
-- Call, if input was capturing before this component
-- Example: scroll is start scrolling, so you need unhover button
function M.on_input_interrupt(self)
end
-- Call, if game lost focus. Need ON_FOCUS_LOST intereset
function M.on_focus_lost(self)
end
-- Call, if game gained focus. Need ON_FOCUS_GAINED intereset
function M.on_focus_gained(self)
end
-- Call on component remove or on druid:final
function M.on_remove(self)
end
return M
```
@@ -45,11 +66,29 @@ 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)
function init(self)
druid.register("my_component", my_component)
end
```
Registering make new function with "new_{component_name}". In our example it will be: `druid:new_my_component()`.
Or you can create component without registering with `druid:create(my_component_module)`
As component registered, you can create your component with next code:
```lua
local druid = require("druid.druid")
local my_component = require("my.amazing.component")
function init(self)
self.druid = druid.new(self)
local my_component = self.druid:new_my_component(...)
-- or --
local my_component = self.druid:create(my_component, ...)
end
```
### Interest
Interest - is a way to indicate what events your component will respond to.
There is next interests in druid:
@@ -61,13 +100,16 @@ There is next interests in druid:
- **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_LANGUAGE_CHANGE** - will call _on_language_change_ function on language change trigger
- **ON_LAYOUT_CHANGED** will call _on_layout_change_ function on layout change trigger
- **ON_LAYOUT_CHANGE** will call _on_layout_change_ function on layout change trigger
- **ON_FOCUS_LOST** will call _on_focust_lost_ function in on focus lost event. You need to pass window_callback to global `druid:on_window_callback`
- **ON_FOCUS_GAINED** will call _on_focust_gained_ function in on focus gained event. You need to pass window_callback to global `druid:on_window_callback`
## Best practice on custom components
On each component recomended describe component scheme in next way:
On each component recommended describe component scheme in next way:
```lua
-- Component module
@@ -76,9 +118,9 @@ local component = require("druid.component")
local M = component.create("your_component")
local SCHEME = {
ROOT = "/root",
ITEM = "/item",
TITLE = "/title"
ROOT = "root",
ITEM = "item",
TITLE = "title"
}
function M.init(self, template_name, node_table)
@@ -102,4 +144,9 @@ function M.init(self, template_name, node_table)
local my_style = self:get_style()
end
```
```
## Power of using templates
You can use one component, but creating and customizing templates for them. Templates only requires to match the component scheme.

View File

@@ -41,7 +41,3 @@ local function init(self)
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__

View File

@@ -3,6 +3,6 @@
## 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
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

40
docs_md/changelog.md Normal file
View File

@@ -0,0 +1,40 @@
Druid 0.3.0:
- `Druid:final` now is important function for correct working
- Add _swipe_ basic component
- Swipe component handle simple swipe gestures on node. It has single callback with direction on swipe. You can adjust a several parameters of swipe in druid style.
- Swipe can be triggered on action.released or while user is make swiping (in process)
- Add swipe example at main Druid example. Try swipe left/right to switch example pages.
- Add _input_ basic component
- Input component handle user text input. Input contains from button and text components. Button needed for selecting/unselecting input field
- Long click on input field for clear and select input field (clearing can be disable via styles)
- Click outside of button to unselect input field
- On focus lost (game minimized) input field will be unselected
- You can setup max length of the text
- You can setup allowed characters. On add not allowed characters `on_input_wrong` will be called. By default it cause simple shake animation
- The keyboard for input will not show on mobile HTML5. So input field in mobile HTML5 is not working now
- To make work different keyboard type, make sure value in game.project Android:InputMethod set to HidderInputField (https://defold.com/manuals/project-settings/#input-method)
- Add button on_click_outside event. You can subscribe on this event in button. Was needed for Input component (click outside to deselect input field).
- Add start_pos to button component
- Changed input binding settings. Add backspace, enter, text and marked_text. Backspace now is different from android back button.
- Renamed on_change_language -> on_language_change component interest
- Add basic component two functions: `increase_input_priority` and `reset_input_priority`. It used to process component input first in current input stack (there is two input stacks: INPUT and INPUT_HIGH). Example: on selecting input field, it increase input self priority until it be unselected
- Add two new component interests: `on_focus_gain` and `on_focus_lost`
- Add global druid events:
- on_window_callback: call `druid.on_window_callback(event)` for on_focus_gain/lost correct work
- on_language_change: call `druid.on_language_change()` (#38) for update all druid instances lang components
- on_layout_change: call `druid.on_layout_change()` (#37) for update all gui layouts (unimplemented now)
- Add several examples to druid-assets respository
- Known issues:
- Adjusting text size by height works wrong. Adjusting single line texting works fine

View File

@@ -32,7 +32,11 @@ end
-- @tparam string action_id on_input action id
-- @tparam table action on_input action
function M.on_input(self, action_id, action)
if action_id == const.ACTION_BACK and action[const.RELEASED] then
if not action[const.RELEASED] then
return false
end
if action_id == const.ACTION_BACK or action_id == const.ACTION_BACKSPACE then
self.on_back:trigger(self:get_context(), self.params)
return true
end
@@ -41,4 +45,4 @@ function M.on_input(self, action_id, action)
end
return M
return M

View File

@@ -3,16 +3,19 @@
--- Component events
-- @table Events
-- @tfield druid_event on_click On release button callback
-- @tfield druid_event on_repeated_click On repeated action button callback
-- @tfield druid_event on_long_click On long tap button callback
-- @tfield druid_event on_double_click On double tap button callback
-- @tfield druid_event on_click (self, params, button_instance) On release button callback
-- @tfield druid_event on_repeated_click (self, params, button_instance, click_amount) On repeated action button callback
-- @tfield druid_event on_long_click (self, params, button_instance, time) On long tap button callback
-- @tfield druid_event on_double_click (self, params, button_instance, click_amount) On double tap button callback
-- @tfield druid_event on_hold_callback (self, params, button_instance, time) On button hold before long_click callback
-- @tfield druid_event on_click_outside (self, params, button_instance) On click outside of button
--- Component fields
-- @table Fields
-- @tfield node node Trigger node
-- @tfield[opt=node] node anim_node Animation node
-- @tfield vector3 scale_from Initial scale of anim_node
-- @tfield vector3 start_scale Initial scale of anim_node
-- @tfield vector3 start_pos Initial pos of anim_node
-- @tfield vector3 pos Initial pos of anim_node
-- @tfield any params Params to click callbacks
-- @tfield druid.hover hover Druid hover logic component
@@ -24,7 +27,6 @@
-- @tfield function on_click_disabled (self, node)
-- @tfield function on_hover (self, node, hover_state)
-- @tfield function on_set_enabled (self, node, enabled_state)
-- @tfield bool IS_HOVER
local Event = require("druid.event")
local const = require("druid.const")
@@ -145,14 +147,13 @@ end
-- @tparam function callback Button callback
-- @tparam[opt] table params Button callback params
-- @tparam[opt] node anim_node Button anim node (node, if not provided)
-- @tparam[opt] string event Button react event, const.ACTION_TOUCH by default
function M.init(self, node, callback, params, anim_node, event)
function M.init(self, node, callback, params, anim_node)
self.druid = self:get_druid()
self.node = self:get_node(node)
self.anim_node = anim_node and helper:get_node(anim_node) or self.node
-- TODO: rename to start_scale
self.scale_from = gui.get_scale(self.anim_node)
self.start_scale = gui.get_scale(self.anim_node)
self.start_pos = gui.get_position(self.anim_node)
self.params = params
self.hover = self.druid:new_hover(node, on_button_hover)
self.click_zone = nil
@@ -168,6 +169,7 @@ function M.init(self, node, callback, params, anim_node, event)
self.on_long_click = Event()
self.on_double_click = Event()
self.on_hold_callback = Event()
self.on_click_outside = Event()
end
@@ -192,6 +194,9 @@ function M.on_input(self, action_id, action)
if not is_pick then
-- Can't interact, if touch outside of button
self.can_action = false
if action.released then
self.on_click_outside:trigger(self:get_context(), self.params, self)
end
return false
end
@@ -265,17 +270,21 @@ end
-- no click events outside stencil node
-- @function button:set_click_zone
-- @tparam node zone Gui node
-- @tparam druid.button Self instance to make chain calls
function M.set_click_zone(self, zone)
self.click_zone = self:get_node(zone)
self.hover:set_click_zone(zone)
return self
end
--- Set key-code to trigger this button
-- @function button:set_key_trigger
-- @tparam hash key The action_id of the key
-- @tparam druid.button Self instance to make chain calls
function M.set_key_trigger(self, key)
self.key_trigger = hash(key)
return self
end

View File

@@ -39,7 +39,7 @@ end
--- Set checkbox group state
-- @function checkbox_group:set_state
-- @tparam bool[] state Array of checkbox state
-- @tparam bool[] indexes Array of checkbox state
function M.set_state(self, indexes)
for i = 1, #indexes do
if self.checkboxes[i] then

View File

@@ -70,7 +70,7 @@ function M.set_hover(self, state)
end
--- Strict button click area. Useful for
--- Strict hover click area. Useful for
-- no click events outside stencil node
-- @function hover:set_click_zone
-- @tparam node zone Gui node

View File

@@ -1,15 +1,300 @@
--- Druid input text component.
-- Carry on user text input
-- UNIMPLEMENTED
-- @author Part of code from Britzl gooey input component
-- @module druid.input
--- Component events
-- @table Events
-- @tfield druid_event on_input_select (self, button_node) On input field select callback
-- @tfield druid_event on_input_unselect (self, button_node) On input field unselect callback
-- @tfield druid_event on_input_text (self, input_text) On input field text change callback
-- @tfield druid_event on_input_empty (self, input_text) On input field text change to empty string callback
-- @tfield druid_event on_input_full (self, input_text) On input field text change to max length string callback
-- @tfield druid_event on_input_wrong (self, params, button_instance) On trying user input with not allowed character callback
--- Component fields
-- @table Fields
-- @tfield druid.text text Text component
-- @tfield druid.button button Button component
-- @tfield bool is_selected Is current input selected now
-- @tfield bool is_empty Is current input is empty now
-- @tfield[opt] number max_length Max length for input text
-- @tfield[opt] string allowerd_characters Pattern matching for user input
-- @tfield number keyboard_type Gui keyboard type for input field
--- Component style params
-- @table Style
-- @tfield bool IS_LONGTAP_ERASE Is long tap will erase current input data
-- @tfield number BUTTON_SELECT_INCREASE Button scale multiplier on selecting input field
-- @tfield string MASK_DEFAULT_CHAR Default character mask for password input
-- @tfield function on_select (self, button_node) Callback on input field selecting
-- @tfield function on_unselect (self, button_node) Callback on input field unselecting
-- @tfield function on_input_wrong (self, button_node) Callback on wrong user input
-- @tfield table button Custom button style for input node
local Event = require("druid.event")
local const = require("druid.const")
local component = require("druid.component")
local utf8 = require("druid.system.utf8")
local M = component.create("input")
local M = component.create("input", { const.ON_INPUT, const.ON_FOCUS_LOST })
function M.init(self, node, callback, click_node)
self.style = self:get_style()
--- Mask text by replacing every character with a mask character
-- @tparam string text
-- @tparam string mask
-- @treturn string Masked text
local function mask_text(text, mask)
mask = mask or "*"
local masked_text = ""
for uchar in utf8.gmatch(text, ".") do
masked_text = masked_text .. mask
end
return masked_text
end
local function select(self)
gui.reset_keyboard()
self.marked_value = ""
if not self.selected then
self:increase_input_priority()
self.button:increase_input_priority()
self.previous_value = self.value
self.selected = true
gui.show_keyboard(self.keyboard_type, false)
self.on_input_select:trigger(self:get_context())
if self.style.on_select then
self.style.on_select(self, self.button.node)
end
end
end
local function unselect(self)
gui.reset_keyboard()
self.marked_value = ""
if self.selected then
self:reset_input_priority()
self.button:reset_input_priority()
self.selected = false
gui.hide_keyboard()
self.on_input_unselect:trigger(self:get_context())
if self.style.on_unselect then
self.style.on_unselect(self, self.button.node)
end
end
end
local function clear_and_select(self)
if self.style.IS_LONGTAP_ERASE then
self:set_text("")
end
select(self)
end
function M.init(self, click_node, text_node, keyboard_type)
self.druid = self:get_druid(self)
self.style = self:get_style(self)
self.text = self.druid:new_text(text_node)
self.selected = false
self.value = self.text.last_value
self.previous_value = self.text.last_value
self.current_value = self.text.last_value
self.marked_value = ""
self.is_empty = true
self.text_width = 0
self.market_text_width = 0
self.total_width = 0
self.max_length = nil
self.allowed_characters = nil
self.keyboard_type = keyboard_type or gui.KEYBOARD_TYPE_DEFAULT
self.button = self.druid:new_button(click_node, select)
self.button:set_style(self.style)
self.button.on_click_outside:subscribe(unselect)
self.button.on_long_click:subscribe(clear_and_select)
self.on_input_select = Event()
self.on_input_unselect = Event()
self.on_input_text = Event()
self.on_input_empty = Event()
self.on_input_full = Event()
self.on_input_wrong = Event()
end
function M.on_input(self, action_id, action)
if self.selected then
local input_text = nil
if action_id == const.ACTION_TEXT then
-- ignore return key
if action.text == "\n" or action.text == "\r" then
return true
end
local hex = string.gsub(action.text,"(.)", function (c)
return string.format("%02X%s",string.byte(c), "")
end)
-- ignore arrow keys
if not string.match(hex, "EF9C8[0-3]") then
if not self.allowed_characters or action.text:match(self.allowed_characters) then
input_text = self.value .. action.text
if self.max_length then
input_text = utf8.sub(input_text, 1, self.max_length)
end
else
self.on_input_wrong:trigger(self:get_context(), action.text)
if self.style.on_input_wrong then
self.style.on_input_wrong(self, self.button.node)
end
end
self.marked_value = ""
end
end
if action_id == const.ACTION_MARKED_TEXT then
self.marked_value = action.text or ""
if self.max_length then
self.marked_value = utf8.sub(self.marked_value, 1, self.max_length)
end
end
if action_id == const.ACTION_BACKSPACE and (action.pressed or action.repeated) then
input_text = utf8.sub(self.value, 1, -2)
end
if action_id == const.ACTION_ENTER and action.released then
unselect(self)
return true
end
if action_id == const.ACTION_BACK and action.released then
unselect(self)
return true
end
if action_id == const.ACTION_ESC and action.released then
unselect(self)
return true
end
if input_text or #self.marked_value > 0 then
self:set_text(input_text)
return true
end
end
return self.selected
end
function M.on_focus_lost(self)
unselect(self)
end
function M.on_input_interrupt(self)
-- unselect(self)
end
--- Set text for input field
-- @function input:set_text
-- @tparam string input_text The string to apply for input field
function M.set_text(self, input_text)
-- Case when update with marked text
if input_text then
self.value = input_text
end
-- Only update the text if it has changed
local current_value = self.value .. self.marked_value
if current_value ~= self.current_value then
self.current_value = current_value
-- mask text if password field
local masked_value, masked_marked_value
if self.keyboard_type == gui.KEYBOARD_TYPE_PASSWORD then
local mask_char = self.style.MASK_DEFAULT_CHAR or "*"
masked_value = mask_text(self.value, mask_char)
masked_marked_value = mask_text(self.marked_value, mask_char)
end
-- text + marked text
local value = masked_value or self.value
local marked_value = masked_marked_value or self.marked_value
self.is_empty = #value == 0 and #marked_value == 0
local final_text = value .. marked_value
self.text:set_to(final_text)
-- measure it
self.text_width = self.text:get_text_width(value)
self.marked_text_width = self.text:get_text_width(marked_value)
self.total_width = self.text_width + self.marked_text_width
self.on_input_text:trigger(self:get_context(), final_text)
if #final_text == 0 then
self.on_input_empty:trigger(self:get_context(), final_text)
end
if self.max_length and #final_text == self.max_length then
self.on_input_full:trigger(self:get_context(), final_text)
end
end
end
--- Return current input field text
-- @function input:get_text
-- @treturn string The current input field text
function M.get_text(self)
return self.value .. self.marked_value
end
--- Set maximum length for input field.
-- Pass nil to make input field unliminted (by default)
-- @function input:set_max_length
-- @tparam number max_length Maximum length for input text field
-- @tparam druid.input Self instance to make chain calls
function M.set_max_length(self, max_length)
self.max_length = max_length
return self
end
--- Set allowed charaters for input field.
-- See: https://defold.com/ref/stable/string/
-- ex: [%a%d] for alpha and numeric
-- @function input:set_allowerd_characters
-- @tparam string characters Regulax exp. for validate user input
-- @tparam druid.input Self instance to make chain calls
function M.set_allowed_characters(self, characters)
self.allowed_characters = characters
return self
end
--- Reset current input selection and return previous value
-- @function input:reset_changes
function M.reset_changes(self)
self:set_text(self.previous_value)
unselect(self)
end

View File

@@ -15,7 +15,7 @@ local const = require("druid.const")
local settings = require("druid.system.settings")
local component = require("druid.component")
local M = component.create("lang_text", { const.ON_CHANGE_LANGUAGE })
local M = component.create("lang_text", { const.ON_LANGUAGE_CHANGE })
--- Component init function
@@ -35,7 +35,7 @@ function M.init(self, node, locale_id, no_adjust)
end
function M.on_change_language(self)
function M.on_language_change(self)
if self.last_locale then
M.translate(self)
end

View File

@@ -74,7 +74,7 @@ end
-- @function progress:init
-- @tparam string|node node Progress bar fill node or node name
-- @tparam string key Progress bar direction: const.SIDE.X or const.SIDE.Y
-- @tparam number init_value Initial value of progress bar
-- @tparam[opt=1] number init_value Initial value of progress bar
function M.init(self, node, key, init_value)
assert(key == const.SIDE.X or const.SIDE.Y, "Progress bar key should be 'x' or 'y'")

View File

@@ -48,7 +48,7 @@ end
--- Set radio group state
-- @function radio_group:set_state
-- @tparam bool[] state Array of checkbox state
-- @tparam number index Index in radio group
function M.set_state(self, index)
on_checkbox_click(self, index)
end
@@ -56,7 +56,7 @@ end
--- Return radio group state
-- @function radio_group:get_state
-- @treturn bool[] Array if checkboxes state
-- @treturn number Index in radio group
function M.get_state(self)
local result = -1

View File

@@ -11,7 +11,7 @@
-- @table Events
-- @tfield druid_event on_scroll On scroll move callback
-- @tfield druid_event on_scroll_to On scroll_to function callback
-- @tfield druid_event on_point_scroll On scroll_to_index function callbck
-- @tfield druid_event on_point_scroll On scroll_to_index function callback
--- Component fields
-- @table Fields

View File

@@ -30,6 +30,12 @@ local function on_change_value(self)
end
local function set_position(self, value)
value = helper.clamp(value, 0, 1)
gui.set_position(self.node, self.start_pos + self.dist * value)
end
--- Component init function
-- @function slider:init
-- @tparam node node Gui pin node
@@ -76,9 +82,8 @@ function M.on_input(self, action_id, action)
self.target_pos.x = helper.clamp(self.pos.x, self.start_pos.x, self.end_pos.x)
self.target_pos.y = helper.clamp(self.pos.y, self.start_pos.y, self.end_pos.y)
gui.set_position(self.node, self.target_pos)
if prev_x ~= self.target_pos.x or prev_y ~= self.target_pos.y then
local prev_value = self.value
if self.dist.x > 0 then
self.value = (self.target_pos.x - self.start_pos.x) / self.dist.x
@@ -88,8 +93,27 @@ function M.on_input(self, action_id, action)
self.value = (self.target_pos.y - self.start_pos.y) / self.dist.y
end
on_change_value(self)
if self.steps then
local closest_dist = 1000
local closest = nil
for i = 1, #self.steps do
local dist = math.abs(self.value - self.steps[i])
if dist < closest_dist then
closest = self.steps[i]
closest_dist = dist
end
end
if closest then
self.value = closest
end
end
if prev_value ~= self.value then
on_change_value(self)
end
end
set_position(self, self.value)
end
if action.released then
@@ -106,8 +130,7 @@ end
-- @tparam[opt] bool is_silent Don't trigger event if true
function M.set(self, value, is_silent)
value = helper.clamp(value, 0, 1)
gui.set_position(self.node, self.start_pos + self.dist * value)
set_position(self, value)
self.value = value
if not is_silent then
on_change_value(self)
@@ -115,4 +138,14 @@ function M.set(self, value, is_silent)
end
--- Set slider steps. Pin node will
-- apply closest step position
-- @function slider:set_steps
-- @tparam number[] steps Array of steps
-- @usage slider:set_steps({0, 0.2, 0.6, 1})
function M.set_steps(self, steps)
self.steps = steps
end
return M

134
druid/base/swipe.lua Normal file
View File

@@ -0,0 +1,134 @@
--- Component to handle swipe gestures on node.
-- Swipe will be triggered, if swipe was started and
-- ended on one node
-- @module druid.swipe
--- Components fields
-- @table Fields
-- @tparam node node Swipe node
-- @tparam[opt] node click_zone Restriction zone
--- Component events
-- @table Events
-- @tfield druid_event on_swipe Trigger on swipe event
--- Component style params
-- @table Style
-- @tfield number SWIPE_TIME Maximum time for swipe trigger
-- @tfield number SWIPE_THRESHOLD Minimum distance for swipe trigger
-- @tfield bool SWIPE_TRIGGER_ON_MOVE If true, trigger on swipe moving, not only release action
local Event = require("druid.event")
local const = require("druid.const")
local helper = require("druid.helper")
local component = require("druid.component")
local M = component.create("swipe", { const.ON_INPUT })
local function start_swipe(self, action)
self._swipe_start_time = socket.gettime()
self._start_pos.x = action.x
self._start_pos.y = action.y
end
local function reset_swipe(self, action)
self._swipe_start_time = false
end
local function check_swipe(self, action)
local dx = action.x - self._start_pos.x
local dy = action.y - self._start_pos.y
local dist = helper.distance(self._start_pos.x, self._start_pos.y, action.x, action.y)
local delta_time = socket.gettime() - self._swipe_start_time
local is_swipe = self.style.SWIPE_THRESHOLD <= dist and delta_time <= self.style.SWIPE_TIME
if is_swipe then
local is_x_swipe = math.abs(dx) >= math.abs(dy)
local swipe_side = false
if is_x_swipe and dx > 0 then
swipe_side = const.SWIPE.RIGHT
end
if is_x_swipe and dx < 0 then
swipe_side = const.SWIPE.LEFT
end
if not is_x_swipe and dy > 0 then
swipe_side = const.SWIPE.UP
end
if not is_x_swipe and dy < 0 then
swipe_side = const.SWIPE.DOWN
end
self.on_swipe:trigger(self:get_context(), swipe_side, dist, delta_time)
reset_swipe(self)
end
end
--- Component init function
-- @function swipe:init
-- @tparam node node Gui node
-- @tparam function on_swipe_callback Swipe callback for on_swipe_end event
function M.init(self, node, on_swipe_callback)
self.style = self:get_style()
self._trigger_on_move = self.style.SWIPE_TRIGGER_ON_MOVE
self.node = self:get_node(node)
self._swipe_start_time = false
self._start_pos = vmath.vector3(0)
self.click_zone = nil
self.on_swipe = Event(on_swipe_callback)
end
function M.on_input(self, action_id, action)
if action_id ~= const.ACTION_TOUCH then
return
end
if not helper.is_enabled(self.node) then
return false
end
local is_pick = gui.pick_node(self.node, action.x, action.y)
if self.click_zone then
is_pick = is_pick and gui.pick_node(self.click_zone, action.x, action.y)
end
if not is_pick then
reset_swipe(self, action)
return false
end
if self._swipe_start_time and (self._trigger_on_move or action.released) then
check_swipe(self, action)
end
if action.pressed then
start_swipe(self, action)
end
if action.released then
reset_swipe(self, action)
end
end
function M.on_input_interrupt(self)
reset_swipe(self)
end
--- Strict swipe click area. Useful for
-- restrict events outside stencil node
-- @function swipe:set_click_zone
-- @tparam node zone Gui node
function M.set_click_zone(self, zone)
self.click_zone = self:get_node(zone)
end
return M

View File

@@ -64,10 +64,22 @@ local function update_text_area_size(self)
end
-- calculate space width with font
local function get_space_width(self, font)
if not self._space_width[font] then
local no_space = gui.get_text_metrics(font, "1", 0, false, 0, 0).width
local with_space = gui.get_text_metrics(font, " 1", 0, false, 0, 0).width
self._space_width[font] = with_space - no_space
end
return self._space_width[font]
end
--- Component init function
-- @function text:init
-- @tparam node node Gui text node
-- @tparam[opt] string value Initial text
-- @tparam[opt] string value Initial text. Default value is node text from GUI scene.
-- @tparam[opt] bool no_adjust If true, text will be not auto-adjust size
function M.init(self, node, value, no_adjust)
self.node = self:get_node(node)
@@ -85,14 +97,37 @@ function M.init(self, node, value, no_adjust)
self.color = gui.get_color(self.node)
self.on_set_text = Event()
self.on_update_text_scale = Event()
self.on_set_pivot = Event()
self.on_update_text_scale = Event()
self:set_to(value or 0)
self._space_width = {}
self:set_to(value or gui.get_text(self.node))
return self
end
--- Calculate text width with font with respect to trailing space
-- @function text:get_text_width
-- @tparam[opt] string text
function M.get_text_width(self, text)
text = text or self.last_value
local font = gui.get_font(self.node)
local scale = gui.get_scale(self.node)
local result = gui.get_text_metrics(font, text, 0, false, 0, 0).width
for i = #text, 1, -1 do
local c = string.sub(text, i, i)
if c ~= ' ' then
break
end
result = result + get_space_width(self, font)
end
return result * scale.x
end
--- Set text to text field
-- @function text:set_to
-- @tparam string set_to Text for node
@@ -159,4 +194,12 @@ function M.set_pivot(self, pivot)
end
--- Return true, if text with line break
-- @function text:is_multiline
-- @treturn boolean Is text node with line break
function M.is_multiline(self)
return gui.get_line_break(self.node)
end
return M

View File

@@ -12,12 +12,9 @@
--- Component fields
-- @table Fields
-- @tfield node node Trigger node
-- @tfield[opt=node] node anim_node Animation node
-- @tfield vector3 scale_from Initial scale of anim_node
-- @tfield vector3 pos Initial pos of anim_node
-- @tfield any params Params to click callbacks
-- @tfield druid.hover hover Druid hover logic component
-- @tfield[opt] node click_zone Restriction zone
-- @tfield number from Initial timer value
-- @tfield number target Target timer value
-- @tfield number value Current timer value
local Event = require("druid.event")
local const = require("druid.const")

View File

@@ -86,14 +86,34 @@ function Component.get_interests(self)
end
-- TODO: Определиться с get_node и node
-- get_node - берет ноду по ноде или строке
-- node - может брать ноду у компонента по схеме (если есть
-- template или таблица нод после gui.clone_tree)
--- Increase input priority in current input stack
-- @function component:increase_input_priority
function Component.increase_input_priority(self)
self._meta.increased_input_priority = true
end
--- Reset input priority in current input stack
-- @function component:reset_input_priority
function Component.reset_input_priority(self)
self._meta.increased_input_priority = false
end
--- Get node for component by name.
-- If component has nodes, node_or_name should be string
-- It auto pick node by template name or from nodes by clone_tree
-- if they was setup via component:set_nodes, component:set_template
-- @function component:get_node
-- @tparam string|node node_or_name Node name or node itself
-- @treturn node Gui node
function Component.get_node(self, node_or_name)
local template_name = self:get_template() or const.EMPTY_STRING
local nodes = self:get_nodes()
if template_name ~= const.EMPTY_STRING then
template_name = template_name .. "/"
end
if nodes then
assert(type(node_or_name) == "strings", "You should pass node name instead of node")
return nodes[template_name .. node_or_name]
@@ -128,6 +148,7 @@ function Component.setup_component(self, context, style)
context = nil,
nodes = nil,
style = nil,
increased_input_priority = false
}
self:set_context(context)

View File

@@ -4,11 +4,17 @@
local M = {}
M.ACTION_TOUCH = hash("touch")
M.ACTION_TEXT = hash("text")
M.ACTION_BACKSPACE = hash("backspace")
M.ACTION_ENTER = hash("enter")
M.ACTION_BACK = hash("back")
M.ACTION_MARKED_TEXT = hash("marked_text")
M.ACTION_BACKSPACE = hash("key_backspace")
M.ACTION_ENTER = hash("key_enter")
M.ACTION_BACK = hash("key_back")
M.ACTION_ESC = hash("key_esc")
M.ACTION_TOUCH = hash("touch")
M.ACTION_SCROLL_UP = hash("scroll_up")
M.ACTION_SCROLL_DOWN = hash("scroll_down")
M.RELEASED = "released"
@@ -20,12 +26,14 @@ M.ALL = "all"
--- Component Interests
M.ON_MESSAGE = hash("on_message")
M.ON_UPDATE = hash("on_update")
M.ON_INPUT_HIGH = hash("on_input_high")
M.ON_INPUT = hash("on_input")
M.ON_CHANGE_LANGUAGE = hash("on_change_language")
M.ON_LAYOUT_CHANGED = hash("on_layout_changed")
M.ON_UPDATE = hash("on_update")
M.ON_MESSAGE = hash("on_message")
M.ON_INPUT_HIGH = hash("on_input_high")
M.ON_FOCUS_LOST = hash("on_focus_lost")
M.ON_FOCUS_GAINED = hash("on_focus_gained")
M.ON_LAYOUT_CHANGE = hash("on_layout_change")
M.ON_LANGUAGE_CHANGE = hash("on_language_change")
M.PIVOTS = {
@@ -42,8 +50,10 @@ M.PIVOTS = {
M.SPECIFIC_UI_MESSAGES = {
[M.ON_CHANGE_LANGUAGE] = "on_change_language",
[M.ON_LAYOUT_CHANGED] = "on_layout_changed"
[M.ON_FOCUS_LOST] = "on_focus_lost",
[M.ON_FOCUS_GAINED] = "on_focus_gained",
[M.ON_LAYOUT_CHANGE] = "on_layout_change",
[M.ON_LANGUAGE_CHANGE] = "on_language_change",
}
@@ -58,10 +68,18 @@ M.SIDE = {
Y = "y"
}
M.SWIPE = {
UP = "up",
DOWN = "down",
LEFT = "left",
RIGHT = "right",
}
M.EMPTY_FUNCTION = function() end
M.EMPTY_STRING = ""
M.SPACE_STRING = " "
M.EMPTY_TABLE = {}
return M
return M

View File

@@ -18,8 +18,21 @@ local const = require("druid.const")
local druid_instance = require("druid.system.druid_instance")
local settings = require("druid.system.settings")
local default_style = require("druid.styles.default.style")
local M = {}
local _instances = {}
local function get_druid_instances()
for i = #_instances, 1, -1 do
if _instances[i]._deleted then
table.remove(_instances, i)
end
end
return _instances
end
--- Register external druid component.
-- After register you can create the component with
@@ -29,13 +42,10 @@ local M = {}
-- @tparam table module lua table with component
function M.register(name, module)
-- TODO: Find better solution to creating elements?
-- Possibly: druid.new(druid.BUTTON, etc?)
-- Current way is very implicit
druid_instance["new_" .. name] = function(self, ...)
return druid_instance.create(self, module, ...)
end
-- print("Register component", name)
end
@@ -45,11 +55,17 @@ end
-- @tparam[opt] table style Druid style module
-- @treturn druid_instance Druid instance
function M.new(context, style)
return druid_instance(context, style)
if settings.default_style == nil then
M.set_default_style(default_style)
end
local new_instance = druid_instance(context, style)
table.insert(_instances, new_instance)
return new_instance
end
-- Set new default style.
--- Set new default style.
-- @function druid.set_default_style
-- @tparam table style Druid style module
function M.set_default_style(style)
@@ -57,7 +73,7 @@ function M.set_default_style(style)
end
-- Set text function.
--- Set text function.
-- Druid locale component will call this function
-- to get translated text. After set_text_funtion
-- all existing locale component will be updated
@@ -70,7 +86,7 @@ function M.set_text_function(callback)
end
-- Set sound function.
--- Set sound function.
-- Component will call this function to
-- play sound by sound_id
-- @function druid.set_sound_function
@@ -80,4 +96,48 @@ function M.set_sound_function(callback)
end
--- Callback on global window event.
-- Used to trigger on_focus_lost and on_focus_gain
-- @function druid.on_window_callback
-- @tparam string event Event param from window listener
function M.on_window_callback(event)
local instances = get_druid_instances()
if event == window.WINDOW_EVENT_FOCUS_LOST then
for i = 1, #instances do
msg.post(instances[i].url, const.ON_FOCUS_LOST)
end
end
if event == window.WINDOW_EVENT_FOCUS_GAINED then
for i = 1, #instances do
msg.post(instances[i].url, const.ON_FOCUS_GAINED)
end
end
end
--- Callback on global layout change event.
-- @function druid.on_layout_change
function M.on_layout_change()
local instances = get_druid_instances()
for i = 1, #instances do
msg.post(instances[i].url, const.ON_LAYOUT_CHANGE)
end
end
--- Callback on global language change event.
-- Use to update all lang texts
-- @function druid.on_language_change
function M.on_language_change()
local instances = get_druid_instances()
for i = 1, #instances do
msg.post(instances[i].url, const.ON_LANGUAGE_CHANGE)
end
end
return M

View File

@@ -5,7 +5,7 @@ local function scale_to(self, node, to, callback, time, delay, easing)
easing = easing or gui.EASING_INSINE
time = time or M.SCALE_ANIMATION_TIME
delay = delay or 0
time = time or 0.25
time = time or 0.10
gui.animate(node, gui.PROP_SCALE, to, easing, time, delay,
function()
if callback then
@@ -24,7 +24,7 @@ end
function M.tap_scale_animation(self, node, target_scale)
scale_to(self, node, target_scale,
function()
M.back_scale_animation(self, node, self.scale_from)
M.back_scale_animation(self, node, self.start_scale)
end
)
end

View File

@@ -5,9 +5,9 @@ local M = {}
M["button"] = {
HOVER_SCALE = vmath.vector3(-0.025, -0.025, 1),
HOVER_TIME = 0.05,
SCALE_CHANGE = vmath.vector3(-0.05, -0.05, 1),
HOVER_SCALE = vmath.vector3(0.02, 0.02, 1),
HOVER_TIME = 0.04,
SCALE_CHANGE = vmath.vector3(0.035, 0.035, 1),
BTN_SOUND = "click",
BTN_SOUND_DISABLED = "click",
DISABLED_COLOR = vmath.vector4(0, 0, 0, 1),
@@ -15,17 +15,16 @@ M["button"] = {
LONGTAP_TIME = 0.4,
AUTOHOLD_TRIGGER = 0.8,
DOUBLETAP_TIME = 0.4,
IS_HOVER = true,
on_hover = function(self, node, state)
local scale_to = self.scale_from + M.button.HOVER_SCALE
local scale_to = self.start_scale + M.button.HOVER_SCALE
local target_scale = state and scale_to or self.scale_from
local target_scale = state and scale_to or self.start_scale
anims.hover_scale(self, target_scale, M.button.HOVER_TIME)
end,
on_click = function(self, node)
local scale_to = self.scale_from + M.button.SCALE_CHANGE
local scale_to = self.start_scale + M.button.SCALE_CHANGE
anims.tap_scale_animation(self, node, scale_to)
settings.play_sound(M.button.BTN_SOUND)
end,
@@ -51,6 +50,7 @@ M["scroll"] = {
INERT_SPEED = 25, -- koef. of inert speed
DEADZONE = 6, -- in px
SOFT_ZONE_SIZE = 160, -- size of outside zone (back move)
SCROLL_WHEEL_SPEED = 10,
BACK_SPEED = 0.2, -- lerp speed
ANIM_SPEED = 0.3, -- gui.animation speed to point
}
@@ -75,4 +75,47 @@ M["checkbox"] = {
}
M["swipe"] = {
SWIPE_THRESHOLD = 50,
SWIPE_TIME = 0.4,
SWIPE_TRIGGER_ON_MOVE = true
}
M["input"] = {
IS_LONGTAP_ERASE = true,
BUTTON_SELECT_INCREASE = 1.1,
MASK_DEFAULT_CHAR = "*",
on_select = function(self, button_node)
local target_scale = self.button.start_scale
gui.animate(button_node, "scale", target_scale * M.input.BUTTON_SELECT_INCREASE, gui.EASING_OUTSINE, 0.15)
end,
on_unselect = function(self, button_node)
local start_scale = self.button.start_scale
gui.animate(button_node, "scale", start_scale, gui.EASING_OUTSINE, 0.15)
end,
on_input_wrong = function(self, button_node)
local start_pos = self.button.start_pos
gui.animate(button_node, "position.x", start_pos.x - 3, gui.EASING_OUTSINE, 0.05, 0, function()
gui.animate(button_node, "position.x", start_pos.x + 3, gui.EASING_OUTSINE, 0.1, 0, function()
gui.animate(button_node, "position.x", start_pos.x, gui.EASING_OUTSINE, 0.05)
end)
end)
end,
button = {
BTN_SOUND = "click",
BTN_SOUND_DISABLED = "click",
DISABLED_COLOR = vmath.vector4(0, 0, 0, 1),
ENABLED_COLOR = vmath.vector4(1),
LONGTAP_TIME = 0.4,
AUTOHOLD_TRIGGER = 0.8,
DOUBLETAP_TIME = 0.4,
}
}
return M

View File

@@ -8,7 +8,6 @@ M["button"] = {
ENABLED_COLOR = vmath.vector4(1),
LONGTAP_TIME = 0.4,
DOUBLETAP_TIME = 0.4,
IS_HOVER = false,
}
@@ -42,4 +41,11 @@ M["checkbox"] = {
}
M["swipe"] = {
SWIPE_THRESHOLD = 50,
SWIPE_TIME = 0.4,
SWIPE_TRIGGER_ON_MOVE = false
}
return M

View File

@@ -49,4 +49,11 @@ M["checkbox"] = {
}
M["swipe"] = {
SWIPE_THRESHOLD = 50,
SWIPE_TIME = 0.4,
SWIPE_TRIGGER_ON_MOVE = false
}
return M

View File

@@ -15,6 +15,7 @@
-- @see druid.checkbox
-- @see druid.checkbox_group
-- @see druid.radio_group
-- @see druid.swipe
local const = require("druid.const")
local druid_input = require("druid.helper.druid_input")
@@ -36,6 +37,7 @@ local checkbox = require("druid.base.checkbox")
local checkbox_group = require("druid.base.checkbox_group")
local radio_group = require("druid.base.radio_group")
local input = require("druid.base.input")
local swipe = require("druid.base.swipe")
-- local infinity_scroll = require("druid.base.infinity_scroll")
-- @classmod Druid
@@ -43,7 +45,7 @@ local Druid = class("druid.druid_instance")
local function input_init(self)
if not sys.get_config("druid.auto_focus") == "1" then
if sys.get_config("druid.no_auto_input") == "1" then
return
end
@@ -88,12 +90,27 @@ local function process_input(action_id, action, components, is_input_consumed)
for i = #components, 1, -1 do
local component = components[i]
-- Process increased input priority first
if component._meta.increased_input_priority then
if not is_input_consumed then
is_input_consumed = component:on_input(action_id, action)
else
if component.on_input_interrupt then
component:on_input_interrupt()
end
end
end
end
if not is_input_consumed then
is_input_consumed = component:on_input(action_id, action)
else
if component.on_input_interrupt then
component:on_input_interrupt()
for i = #components, 1, -1 do
local component = components[i]
if not component._meta.increased_input_priority then
if not is_input_consumed then
is_input_consumed = component:on_input(action_id, action)
else
if component.on_input_interrupt then
component:on_input_interrupt()
end
end
end
end
@@ -109,6 +126,8 @@ end
function Druid.initialize(self, context, style)
self._context = context
self._style = style or settings.default_style
self._deleted = false
self.url = msg.url()
self.components = {}
end
@@ -128,12 +147,29 @@ function Druid.create(self, component, ...)
end
--- Call on final function on gui_script. It will call on_remove
-- on all druid components
-- @function druid:final
function Druid.final(self)
local components = self.components[const.ALL]
for i = #components, 1, -1 do
if components[i].on_remove then
components[i]:on_remove()
end
end
self._deleted = true
end
--- Remove component from druid instance.
-- Component `on_remove` function will be invoked, if exist.
-- @function druid:remove
-- @tparam Component component Component instance
function Druid.remove(self, component)
local all_components = self.components[const.ALL]
for i = #all_components, 1, -1 do
if all_components[i] == component then
if component.on_remove then
@@ -204,9 +240,64 @@ function Druid.on_message(self, message_id, message, sender)
end
end
else
local components = self.components[const.ON_MESSAGE] or const.EMPTY_TABLE
local components = self.components[const.ON_MESSAGE]
if components then
for i = 1, #components do
components[i]:on_message(message_id, message, sender)
end
end
end
end
--- Druid on focus lost interest function.
-- This one called by on_window_callback by global window listener
-- @function druid:on_focus_lost
function Druid.on_focus_lost(self)
local components = self.components[const.ON_FOCUS_LOST]
if components then
for i = 1, #components do
components[i]:on_message(message_id, message, sender)
components[i]:on_focus_lost()
end
end
end
--- Druid on focus gained interest function.
-- This one called by on_window_callback by global window listener
-- @function druid:on_focus_gained
function Druid.on_focus_gained(self)
local components = self.components[const.ON_FOCUS_GAINED]
if components then
for i = 1, #components do
components[i]:on_focus_gained()
end
end
end
--- Druid on layout change function.
-- Called on update gui layout
-- @function druid:on_layout_change
function Druid.on_layout_change(self)
local components = self.components[const.ON_LAYOUT_CHANGE]
if components then
for i = 1, #components do
components[i]:on_layout_change()
end
end
end
--- Druid on language change.
-- This one called by global gruid.on_language_change, but can be
-- call manualy to update all translations
-- @function druid.on_language_change
function Druid.on_language_change(self)
local components = self.components[const.ON_LANGUAGE_CHANGE]
if components then
for i = 1, #components do
components[i]:on_language_change()
end
end
end
@@ -347,4 +438,13 @@ function Druid.new_radio_group(self, ...)
end
--- Create swipe basic component
-- @function druid:new_swipe
-- @tparam args ... swipe init args
-- @treturn Component swipe component
function Druid.new_swipe(self, ...)
return Druid.create(self, swipe, ...)
end
return Druid

1045
druid/system/utf8.lua Normal file

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@@ -7,12 +7,16 @@ local main_page = require("example.page.main")
local text_page = require("example.page.texts")
local button_page = require("example.page.button")
local scroll_page = require("example.page.scroll")
local slider_page = require("example.page.slider")
local input_page = require("example.page.input")
local pages = {
"main_page",
"texts_page",
"button_page",
"scroll_page",
"slider_page",
"input_page",
}
local function on_control_button(self, delta)
@@ -37,16 +41,38 @@ local function init_top_panel(self)
end
local function init_swipe_control(self)
self.druid:new_swipe("root", function(_, side)
if side == "left" then
on_control_button(self, 1)
end
if side == "right" then
on_control_button(self, -1)
end
end)
end
local function on_window_callback(self, event, data)
druid.on_window_callback(event, data)
end
function init(self)
druid.set_default_style(default_style)
self.druid = druid.new(self)
window.set_listener(on_window_callback)
init_top_panel(self)
init_swipe_control(self)
self.page = 1
main_page.setup_page(self)
text_page.setup_page(self)
button_page.setup_page(self)
scroll_page.setup_page(self)
slider_page.setup_page(self)
input_page.setup_page(self)
-- Refresh state
on_control_button(self, 0)

View File

@@ -1,5 +1,4 @@
local druid = require("druid.druid")
local const = require("druid.const")
local lang = require("example.lang")
@@ -12,9 +11,7 @@ local function setup_druid()
return lang.get_locale(lang_id)
end)
-- TODO: Call druid.finish_setup?
-- Need to update all gui, in case, when gui init was befure this init
msg.post("/gui#main", const.ON_CHANGE_LANGUAGE)
druid.on_language_change()
end

View File

@@ -1,4 +1,4 @@
local const = require("druid.const")
local druid = require("druid.druid")
local M = {}
@@ -7,6 +7,8 @@ local en = {
texts_page = "Text page",
button_page = "Button page",
scroll_page = "Scroll page",
slider_page = "Slider page",
input_page = "Input page",
ui_section_button = "Button",
ui_section_text = "Text",
ui_section_timer = "Timer",
@@ -23,6 +25,8 @@ local ru = {
texts_page = "Текст",
button_page = "Кнопки",
scroll_page = "Скролл",
slider_page = "Слайдеры",
input_page = "Текст. ввод",
ui_section_button = "Кнопка",
ui_section_text = "Текст",
ui_section_timer = "Таймер",
@@ -45,7 +49,7 @@ end
function M.toggle_locale()
data = data == en and ru or en
msg.post("/gui#main", const.ON_CHANGE_LANGUAGE)
druid.on_language_change()
end
return M
return M

13
example/page/input.lua Normal file
View File

@@ -0,0 +1,13 @@
local M = {}
function M.setup_page(self)
self.druid:new_input("input_box_usual", "input_text_usual")
self.druid:new_input("input_box_password", "input_text_password", gui.KEYBOARD_TYPE_PASSWORD)
self.druid:new_input("input_box_email", "input_text_email", gui.KEYBOARD_TYPE_EMAIL)
self.druid:new_input("input_box_numpad", "input_text_numpad", gui.KEYBOARD_TYPE_NUMBER_PAD)
:set_allowed_characters("[%d,.]")
end
return M

View File

@@ -106,6 +106,11 @@ local function setup_back_handler(self)
end
local function setup_input(self)
local input = self.druid:new_input("input_box", "input_text")
input:set_text("hello!")
end
function M.setup_page(self)
setup_texts(self)
@@ -118,6 +123,7 @@ function M.setup_page(self)
setup_scroll(self)
setup_slider(self)
setup_back_handler(self)
setup_input(self)
end

View File

@@ -39,6 +39,15 @@ end
function M.setup_page(self)
self.druid:new_scroll("scroll_page_content", "scroll_page")
self.druid:new_scroll("simple_scroll_content", "simple_scroll_input")
-- scroll contain scrolls:
-- parent first
self.druid:new_scroll("children_scroll_content", "children_scroll")
-- chilren next
self.druid:new_scroll("children_scroll_content_1", "children_scroll_1")
self.druid:new_scroll("children_scroll_content_2", "children_scroll_2")
self.druid:new_scroll("children_scroll_content_3", "children_scroll_3")
init_grid(self)
end

20
example/page/slider.lua Normal file
View File

@@ -0,0 +1,20 @@
local M = {}
function M.setup_page(self)
local slider = self.druid:new_slider("slider_simple_pin", vmath.vector3(95, 0, 0), function(_, value)
gui.set_text(gui.get_node("slider_simple_text"), math.ceil(value * 100) .. "%")
end)
slider:set(0.2)
local slider_notched = self.druid:new_slider("slider_notched_pin", vmath.vector3(95, 0, 0), function(_, value)
gui.set_text(gui.get_node("slider_notched_text"), math.ceil(value * 100) .. "%")
end)
slider_notched:set_steps({0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1})
slider_notched:set(0.2)
end
return M

View File

@@ -13,9 +13,9 @@ local pivots = {
}
local function setup_texts(self)
self.druid:new_text("text_inline", "Simple inline text")
self.druid:new_text("text_multiline", "Simple multiline text with smth")
local anchoring = self.druid:new_text("text_anchoring", "Anchoring")
self.druid:new_text("text_inline")
self.druid:new_text("text_multiline")
local anchoring = self.druid:new_text("text_anchoring")
self.druid:new_text("text_no_adjust", "Without adjust size", true)
self.druid:new_lang_text("text_locale", "ui_text_example")

View File

@@ -10,6 +10,7 @@ height = 900
[project]
title = druid
version = 0.3.0
[library]
include_dirs = druid
@@ -19,7 +20,7 @@ gamepads = /builtins/input/default.gamepadsc
use_accelerometer = 0
[druid]
autofocus = 1
no_auto_input = 0
[html5]
engine_arguments = --verify-graphics-calls=false
@@ -35,3 +36,7 @@ app_manifest = /example/game.appmanifest
[graphics]
texture_profiles = /example/custom.texture_profiles
[android]
package = com.insality.druid
input_method = HiddenInputField

View File

@@ -1,16 +1,40 @@
key_trigger {
input: KEY_BACKSPACE
action: "back"
action: "key_backspace"
}
key_trigger {
input: KEY_BACK
action: "back"
action: "key_back"
}
key_trigger {
input: KEY_SPACE
action: "key_space"
}
key_trigger {
input: KEY_ENTER
action: "key_enter"
}
key_trigger {
input: KEY_ESC
action: "key_esc"
}
mouse_trigger {
input: MOUSE_BUTTON_1
action: "touch"
}
mouse_trigger {
input: MOUSE_WHEEL_UP
action: "scroll_up"
}
mouse_trigger {
input: MOUSE_WHEEL_DOWN
action: "scroll_down"
}
text_trigger {
input: TEXT
action: "text"
}
text_trigger {
input: MARKED_TEXT
action: "marked_text"
}

BIN
media/blocker_scheme.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 KiB

BIN
media/druid_thumb_logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
media/input_binding_1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

BIN
media/input_binding_2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

BIN
media/scroll_outline.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

BIN
media/scroll_scheme.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

BIN
media/text_anchor.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 59 KiB

BIN
media/text_autosize.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB