Tool Bar UI v0.6

Hello everyone, I’m here to present to you my Tool Bar UI. It comes with over 10 different ‘tools’ you can use in your games and your apps, I’ve made it quite performance friendly, about a 4-5 FPS drop. On an iPad 3 it is still over 55FPS though with all UI elements on the screen. Here is the code: if you spot anything that could be more efficient then don’t hesitate to tell.

For every UI object add to draw and touched, probably should make a controller class and add touch propagation.

The documentation is as follows:

--For all UI objects you can use the obj:isVisible(bool) to set the visibility of the each individual object
--Also use obj:visible() to get a boolean stating whether it is visible or not.
--If you see ... in a function brackets it means you can add a string to be set as the header of that UI object.

--Frame command: 
Frame(Position,Size,Text,Grey(single value color))

Frame:isCloseable(bool) --sets the frame so it can be minimised.   Experimental!
Frame:isMoveable(bool) --sets the top bar for the window to be moved or not.
Frame:getPos() --returns vec2 with the frames CENTER position.
Frame:isHolding() --returns a boolean stating whether the frame top bar is being touched
Frame:addChild(child) --adds a child to be parented to the frame.
Frame:getChildren() --returns a table of all the children.

--Button command: 

Button:strokeCol(col) --sets the colour of the border.
Button:setAlpha(alpha) --sets the alpha of the button, including the border.
Button:addParent(frame) --item must be a frame, I wouldn't try it on other UI objects.
Button:setDrawPos(pos) --set draw position of the button, for use in games with translate for scrolling etc
Button:setPos(pos) --set position of the button

--RoundButton command:

RoundButton:strokeCol(col) --sets the colour of the border.
RoundButton:setAlpha(alpha) --sets the alpha of the button, including the border.
RoundButton:addParent(frame) --item must be a frame, I wouldn't try it on other UI objects.
RoundButton:setDrawPos(pos) --set draw position of the button, for use in games with translate for scrolling etc
RoundButton:setPos(pos) --set position of the button

--ImageButton command:

ImageButton:setAlpha(alpha) --sets the alpha of the button, including the border.
ImageButton:addParent(frame) --item must be a frame, I wouldn't try it on other UI objects.
ImageButton:setDrawPos(pos) --set draw position of the button, for use in games with translate for scrolling etc
ImageButton:setPos(pos) --set position of the button

--Slider command:

Slider:setLabel(txt) --sets the header of the slider.
Slider:showValue(bool) --show the current value of the slider, displayed as text in the middle.
Slider:setColour(col) --sets the colour of the slider.
Slider:setPos(pos) --sets the position of the slider.
Slider:addParent(frame) --item must be a frame.

--Text Box command:

Textbox:setMode(mode) --sets draw mode, CORNER or CENTER.
Textbox:setDimensions(pos,size) --set the position and size of the textbox after init.
Textbox:getDimensions() --returns a table, getDimensions().size and getDimensions().pos is the way I use it.
Textbox:setFont(fontsize) --sets the font size of the text.
Textbox:startTyping() --opens up the keyboard and focusses on textbox.
Textbox:isTyping() --returns a boolean stating whether the textbox is focussed on or not.
Textbox:isFinished() --returns a boolean for one frame when the textbox is closed.
Textbox:setAlpha(alpha) --sets the alpha of the textbox.
Textbox:strokeCol(col) --sets the border colour of the textbox.
Textbox:addParent(frame) --item must be a frame.
Textbox:setText(txt) --sets the text of the text box.
Textbox:getText() --returns a string of the text inside the textbox.
--Textbox also needs to be included in the main keyboard(key) function as Textbox:keyboard(key).

--Toggle command:

Toggle:strokeCol(col) --sets the stroke col.
Toggle:addParent(frame) --item must be a frame.
Toggle:getValue() --returns a value, 1 or 0.

--Dial command:

Dial:addParent(frame) --item must be a frame.
Dial:setFloat(n) -- n must be 1 or 0, sets the return value as an integer (whole number) or a float (decimal).
Dial:getValue() --returns a value, default is an integer.

--Drop down menu command:

DMenu:strokeCol(col) --sets the colour of the border.
DMenu:addItem(name,callback) --adds an item to the menu and a callback for when it is pressed.
DMenu:addParent(frame) --item must be a frame.

--Combo box command:

Combox:setSelected(name) --sets the selected box in the combo box
Combox:strokeCol(col) --sets the colour of the border.
Combox:addParent(frame) --item must be a frame.
Combox:addItem(name,callback) --adds an item to the combo box and callback when pressed.

--Combo box for images command:

ComboxImg:strokeCol(col) --sets the colour of the border.
ComboxImg:addParent(frame) --item must be a frame.
ComboxImg:addItem(name,callback) --adds an item to the combo box and callback when pressed.

--Radio toggle command:
Radio(Position,Size,Label,Value (1 or 0))

Radio:addParent(frame) --item must be a frame.
Radio:getValue() --returns a value, 1 or 0.

--Colour picker command:
Colour(Position) --a different one I know, I haven't really needed to use it with a different size so I didn't add it.

Colour:strokeCol(col) --sets the colour of the border for each box.
Colour:isMoving() --returns a boolean stating whether the alpha is being changed.
Colour:isTouchingAlpha() --returns a boolean stating whether the alpha box is being touched.
Colour:addParent(frame) --item must be a frame.
Colour:getValue() --returns a colour with r,g,b,a.
Colour:getAlpha() --returns the alpha value of the alpha box.
Colour:isTouching() --returns a bool whether the gradient box has been touched or the colour box.

--Progress bar command:

Progbar:addParent(frame) --item must be a frame.
Progbar:setStart(n) --sets the start value.
Progbar:setEnd(n) --sets the end value.
Progbar:setValue(n) --sets the value of the progress bar.

If you would like stuff to be added then comment with what you would like to see and if it is reasonable it will be added, Im open to making new objects aswell.

Hope this can be used by many!

Screenshot (V0.5):


Added Image Buttons and Rounded Buttons with a changeable roundness of course.
Also added ability to set images either side of the slider. Updates are in the documentation above.


You must copy the specfuncs tab if you want to use them individually.
The way I use it is copy it in to a project and add a dependency from my projects to it.

I should know this, but is it iOS 7 style? Why would someone use it rather than Cider? (Just asking because I’m sure this is what people will be wondering).

But as always, thanks for sharing. This is such a great forum.

I don’t think it will compete with Cider just yet, I haven’t really gone for an iOS 7 look more of a flat look which I suppose iOS 7 is… Thanks.

Personally, I would say this isnt very iOS 7 style-like, but I do like the look of it. As far as competing with Cider, I would probably still use Cider over this because of the easy-to-use ui designer that cider has. (Unless yours has that too, I just looked at the screenshot). That being said, its still great work by @Luatee

Well I’m going to brush the code up when I get home, add some different type of sliders, toggles, buttons, make it faster, drop out some global s and replace with locals to get an FPS boost. I might add the ui objects to a basic controller class to control all of the UI objects, it should be easier to add zLevels to touching aswell with this.

Could you share the code via github? Or just split it in 2 files (but not more!)? The current version is so big i just cant copy it from safari from my ipad

Never mind! I downloaded that via the the download button.
This library is EXCELLENT! Thanks for sharing.
If you think you can improve it go ahead!

Is it simple enough to use and implement? I had a fear it wouldn’t be easy to integrate as I didn’t really try the classes in every possible scenario but I think it’s alright, if there’s any improvements you’d like to see such as images on the slider or different style buttons just say, I’m going to add what I think is necessary.

Update added image buttons, rounded buttons and slider images for either side, link is in the first post.

There is a bug at startup: i think you use personnal images which are not found. Could you use std images for the link so it works without corrections? use these images as they are needed for a few ui elements

These images seem rather easy to recreate. If you could generate them procedurally in the code, and save them in documents to have then available, that would surely make your library easier to use.

I’ll look in to this, I know they are quite easy