240 lines
9.3 KiB
Markdown
240 lines
9.3 KiB
Markdown
|
|
# Helium
|
|
## Major features:
|
|
### Custom elements
|
|
Write your own elements, and interface with them however you want to,
|
|
Whether you need a generalized button that can have many themes and options or something super specific, it can be done
|
|
### Efficient rendering & updating
|
|
The elements only update&re-render when state changes
|
|
### Code hotswap
|
|
Change and save a file loaded through the helium.loader, and see changes immediately
|
|
|
|
## Basic overview:
|
|
Helium is practically more like a UI framework than a fully fledged UI library.
|
|
The idea is to build custom, build simple and build fast, encapsulate.
|
|
|
|
## Demo's / Practical examples
|
|
[There's a repository of examples here](https://github.com/qfluxstudio/helium_demos)
|
|
|
|
## Getting started:
|
|
Load helium with `local helium = require 'helium'`
|
|
Create a new file for your awesome element, say 'helloWorld.lua'
|
|
|
|
The basic structure for an element file is:
|
|
|
|
```lua
|
|
return function(param,state,view)
|
|
--Setup zone
|
|
return function()
|
|
--Rendering zone
|
|
end
|
|
end
|
|
```
|
|
|
|
That's it, it's now a correct helium element
|
|
|
|
So lets make a simple button!
|
|
|
|
In helloWorld.lua:
|
|
```lua
|
|
local input = require "helium.core.input"
|
|
|
|
return function(param,state,view)
|
|
--Press state
|
|
state.pressed = false
|
|
--The callback for the input subscription
|
|
local callback = function() state.pressed = true end
|
|
--The actual input subscription
|
|
input.subscribe(0,0,view.w,view.h,'clicked',callback)
|
|
|
|
return function()
|
|
if state.pressed then
|
|
love.graphics.setColor(0.3,0.3,0.9)
|
|
else
|
|
love.graphics.setColor(0.3,0.3,0.5)
|
|
end
|
|
love.graphics.rectangle('fill', 0, 0, view.w, view.h)
|
|
love.graphics.setColor(1,1,1)
|
|
love.graphics.printf("Pressed? "..tostring(state.pressed),0,view.h/2-5,view.w,'center')
|
|
end
|
|
end
|
|
```
|
|
And in main.lua:
|
|
```lua
|
|
local helium = require('helium')
|
|
local buttonFactory = helium.loader('helloWorld.lua')
|
|
local button = buttonFactory({}, 200, 100)
|
|
button:draw(10,10)
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
Now theres a lot to explain, but its fairly simple, so lets take it by chunks
|
|
Here we import the input module of Helium, so that we can later subscribe to an event:
|
|
```lua
|
|
local input = require "helium.core.input"
|
|
```
|
|
|
|
---
|
|
Here we create a state field called pressed, think of state as a helium elements self
|
|
It works like a regular table, with the caveat that you shouldnt overwrite it directly like state = {}
|
|
```lua
|
|
state.pressed = false
|
|
```
|
|
|
|
---
|
|
Then we overwrite that state.pressed inside a callback which will be called every time our button is pressed
|
|
```lua
|
|
local callback = function() state.pressed = true end
|
|
```
|
|
|
|
---
|
|
This is creating an input subscription for the event of your choice
|
|
```lua
|
|
input.subscribe(0,0,view.w,view.h,'clicked',callback)
|
|
```
|
|
|
|
---
|
|
Is the rendering code, it works more or less like a mini window of a love.draw()
|
|
```lua
|
|
return function()
|
|
if state.pressed then
|
|
love.graphics.setColor(0.3,0.3,0.9)
|
|
else
|
|
love.graphics.setColor(0.3,0.3,0.5)
|
|
end
|
|
love.graphics.rectangle('fill', 0, 0, view.w, view.h)
|
|
love.graphics.setColor(1,1,1)
|
|
love.graphics.printf("Pressed? "..tostring(state.pressed),0,view.h/2-5,view.w,'center')
|
|
end
|
|
```
|
|
|
|
## Additional details:
|
|
**view** is a table that holds the information about the position and size of an element
|
|
x, y, w, h
|
|
Setting this from inside the element works as expected(so you can dynamically resize and reposition the element from inside)
|
|
|
|
param is the table that you pass in buttonFactory({}, 200, 100), it can be anything you need
|
|
|
|
there's a configuration file (conf.lua) inside of helium, which has a couple of default settings
|
|
AUTO_RUN if true will give you a basic 11.3 version love.run with helium stuff added, if autorun is off then you NEED to place helium.update(dt), helium.render() somewhere
|
|
|
|
and if you need input, hook it up to the eventHandlers in your own love.run:
|
|
```lua
|
|
if not(helium.input.eventHandlers[name]) or not(helium.input.eventHandlers[name](a, b, c, d, e, f)) then
|
|
love.handlers[name](a, b, c, d, e, f)
|
|
end
|
|
```
|
|
## Elements in depth
|
|
An element is the building block of helium, you create it by using the loader available in helium/loader.lua or setting the `PURE_G=false` in helium/conf.lua to have HeliumLoader available globally, and passing in a file path to your UI element.
|
|
|
|
The internals are a very open field, you need to have a function that returns a function:
|
|
```lua
|
|
return function(param,state,view)
|
|
return function()
|
|
|
|
end
|
|
end
|
|
```
|
|
|
|
The outer function will be ran exactly once, so think of this as a 'load'/ 'init' phase, the inner function will be ran whenever state or param change, and is regarded as the 'rendering' phase
|
|
|
|
Element nesting works perfectly, updates get bubbled from children elements, position is relative to the parent's position and to boot, it'll all end up drawn on one canvas, cutting back on drawcalls
|
|
|
|
|
|
### Outside
|
|
The elements aren't just sandboxed inside, there are a few user access intended fields, like Element.parameters, Element.state, Element.view, they are exactly the thing the internal functions get, so change or use them freely.
|
|
(e.g. setting some state from outside, or swapping parameters or getting a buttons status)
|
|
|
|
to summarize:
|
|
```lua
|
|
Element
|
|
:draw(x,y) --Renders the element at a location
|
|
:undraw() --Removes the element from the render buffer
|
|
.state = {} --The current element state, accessible from outside
|
|
.parameters = {} --The current parameters, accessible from outside
|
|
.view = {x=0,y=0,w=0,h=0,locked=false}--The current view state, locked should be set by an element internally, if it's going to change the view table.
|
|
```
|
|
|
|
## Input in depth
|
|
Input is the main intended way of using/catching user input, it's all callback based, there are 2 types of input subscriptions: Basic, Advanced
|
|
|
|
|
|
**the basic events**, named after the ones in love, will pass in the same arguments as the love event handlers will, these are one-off events, that simply execute the callback if it falls within the subscription area.
|
|
|
|
**the advanced events**, are essentially an abstraction layer, to make dragging and clicking and hovering simpler, they all have an optional callback within a callback convention like this
|
|
|
|
```lua
|
|
function(x,y)
|
|
doSomething()
|
|
return function(x,y)
|
|
doSomethingElse()
|
|
end
|
|
end
|
|
```
|
|
|
|
so you could subscribe to the 'clicked' event, change `state.clicked` to true, and in the second function change it back to false
|
|
|
|
the input structure:
|
|
```lua
|
|
helium.input
|
|
.subscribe(x, y, w, h, subType, callback, startOn)
|
|
subType -- Subscription type
|
|
callback -- Subscription callback on event
|
|
startOn -- a bool to disable a subscription by default
|
|
-> Subscription
|
|
:on() --Turns an inactive subscription on
|
|
:off() --Turns an active subscription off
|
|
|
|
subType:
|
|
Advanced:
|
|
"clicked" (x,y,btn)--Gets called whenever the subscribed area is pressed, with an optional return callback
|
|
"dragged" (x,y,deltaX,deltaY)--Gets called whenever the subscribed area is dragged, with an optional 'finish' callback
|
|
"hover" ()--Gets called whenever a mouse enters the element
|
|
Basic events:
|
|
"mousepressed" (x,y,btn)--Gets called whenever the subscribed area gets pressed
|
|
"mousereleased" (x,y,btn)--Gets called whenever mouse is released in the subscription area
|
|
"mousepressed_outside" (x,y,btn)--This type gets called when mouse is pressed outside the subscription area
|
|
"mousereleased_outside" (x,y,btn)--This type gets called when mouse is released outside the sub area
|
|
"keypressed" (key)--Basic keyboard input
|
|
```
|
|
|
|
## All the user intended interfaces, classes and methods
|
|
|
|
## User facing functions
|
|
```lua
|
|
helium.element(function,reloader,w,h,parameters)
|
|
->Element --Creates a new element
|
|
:draw(x,y) --Renders the element at a location
|
|
:undraw() --Removes the element from the render buffer
|
|
.state = {} --The current element state, accessible from outside
|
|
.parameters = {} --The current parameters, accessible from outside
|
|
.view = {x=0,y=0,w=0,h=0,locked=false}--The current view state, locked should be set by an element internally, if it's going to change the view table.
|
|
|
|
--The intended global loader for element files (supports optional live hotswapping)
|
|
HeliumLoader(filepath) -> ElementFactory
|
|
ElementFactory(parameters,w,h) -> Element
|
|
|
|
helium.input
|
|
.subscribe(x, y, w, h, subType, callback, startOn)
|
|
subType -- Subscription type
|
|
callback -- Subscription callback on event
|
|
startOn -- a bool to disable a subscription by default
|
|
-> Subscription
|
|
:on() --Turns an inactive subscription on
|
|
:off() --Turns an active subscription off
|
|
|
|
subType:
|
|
Advanced:
|
|
"clicked" --Gets called whenever the subscribed area is pressed, with an optional return callback
|
|
"dragged" --Gets called whenever the subscribed area is dragged, with an optional 'finish' callback
|
|
"hover" --Gets called whenever a mouse enters the element
|
|
Basic events:
|
|
"mousepressed" --Gets called whenever the subscribed area gets pressed
|
|
"mousereleased" --Gets called whenever mouse is released in the subscription area
|
|
"mousepressed_outside" --This type gets called when mouse is pressed outside the subscription area
|
|
"mousereleased_outside" --This type gets called when mouse is released outside the sub area
|
|
"keypressed" --Basic keyboard input
|
|
``` |