diff --git a/README.md b/README.md index 62f5343..91035ac 100644 --- a/README.md +++ b/README.md @@ -1,33 +1,85 @@ ![alt text](https://i.imgur.com/ZQBQfsa.png "Helium") # 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) +The idea is to build custom and build simple. ## Getting started: Load helium with `local helium = require 'helium'` +or check out the pre-configured demo repository: -The basic structure for an element is: +The structure of an element's function is: ```lua -return function(param,state,view) - --Setup zone +function(param, view) + --State/setup/load return function() --Rendering zone end end ``` -[The documentation outgrew this readme, see the github wiki](https://github.com/qfluxstudio/helium/wiki/) \ No newline at end of file +and you can make that function in to an element 'factory' like this: +```lua +elementCreator = helium(function(param, view) + + return function() + + end +end) +``` + +then you call the element factory with parameters and optionally width and height: + +```lua +element = elementCreator({text = 'foo-bar'}, 100, 20) +``` + +this will create a new instance of the element, and then you can draw it to whatever position you wish (x, y): + +```lua +element:draw(100, 100) +``` + +Let's draw a rectangle with text with the previous skeleton and functions: + +```lua +local helium = require 'helium' + +local elementCreator = helium(function(param, view) + + return function() + love.graphics.setColor(0.3, 0.3, 0.3) + love.graphics.rectangle('fill', 0, 0, view.w, view.h) + love.graphics.setColor(1, 1, 1) + love.graphics.print('hello world') + end +end) + +local element = elementCreator({text = 'foo-bar'}, 100, 20) +--Needs to be called only once, to draw and then :undraw to stop drawing it onscreen +element:draw(100, 100) +``` + +As you can see, you can use regular love.graphics functions inside the element's rendering function, furthermore you don't have to worry about coordinates, as x:0,y:0 inside the element's rendering function will always be the element's onscreen x,y, and the element's dimensions are passed in the view table. + +Also whatever you pass to the factory here +```lua +local element = elementCreator({text = 'foo-bar'}, 100, 20) +``` +is accessible in the param table like so: +```lua +local elementCreator = helium(function(param, view) + return function() + love.graphics.setColor(0.3, 0.3, 0.3) + love.graphics.rectangle('fill', 0, 0, view.w, view.h) + love.graphics.setColor(1, 1, 1) + love.graphics.print(param.text) + end +end) +``` + +View the resulting hello world repository here: ~~link + +Or continue on to the advanced guide: ~~link \ No newline at end of file diff --git a/init.lua b/init.lua index 6a82aac..7f0b99a 100644 --- a/init.lua +++ b/init.lua @@ -5,7 +5,17 @@ ----------------------------------------------------]] local path = ... local helium = require(path..".dummy") -helium.conf = require(path..".conf") + +local defaultConf = require(path..".conf") +helium.conf = {} +if HELIUM_CONFIG then + for i, e in pairs(defaultConf) do + helium.conf[i] = HELIUM_CONFIG[i] or e + end +else + helium.conf = defaultConf +end + helium.utils = require(path..".utils") helium.element = require(path..".core.element") helium.input = require(path..".core.input") @@ -34,6 +44,8 @@ function helium.load() helium.atlas.load() end +helium.load() + function helium.unload() helium.atlas.unassignAll() helium.elementBuffer = {} @@ -41,6 +53,7 @@ end function helium.draw() + helium.stack.newFrame() if skipframes == 0 then local startTime = love.timer.getTime() @@ -110,7 +123,6 @@ if helium.conf.AUTO_RUN then -- Main loop time. return function() -- Process events. - helium.stack.newFrame() if love.event then love.event.pump() for name, a,b,c,d,e,f in love.event.poll() do @@ -126,27 +138,21 @@ if helium.conf.AUTO_RUN then end end - -- Update dt, as we'll be passing it to update if love.timer then dt = love.timer.step() end -- Call update and draw if love.update then love.update(dt) end -- will pass 0 if love.timer is disabled - local st = love.timer.getTime() helium.update(dt) - heliumTime = love.timer.getTime()-st if love.graphics and love.graphics.isActive() then love.graphics.origin() love.graphics.clear(love.graphics.getBackgroundColor()) - st = love.timer.getTime() helium.draw() - heliumTime=heliumTime+love.timer.getTime()-st if love.draw then love.draw() end - love.graphics.present() end diff --git a/shell/checkbox.lua b/shell/checkbox.lua new file mode 100644 index 0000000..e69de29 diff --git a/shell/input.lua b/shell/input.lua new file mode 100644 index 0000000..e69de29 diff --git a/shell/slider.lua b/shell/slider.lua new file mode 100644 index 0000000..e69de29