GUI for ankulua 

A simple graphical user interface (GUI) made for ankulua, inspired by the most known style processor (CSS)

Download Version 1.0 + demo

Future version (Standby)

• Element properties
  • margin
  • font_size (better calculation)
  • text_align
  • background and color (RGB converter)
    
    
• Functions Reference
  • timer arg for show,showAll,hide,hideAll
  
  
• Widgets
  
  • progress bar (new syntax)
  • menus
  • buttons 
  • console log (new)
  
  
• Effects
  
  • fadeIn, fadeOut
  • Slide
  
  
• Others
  • Custom colors
  • Custom icons

Installation

include UI.luac on the very top of your main file

dofile(scriptPath() .. 'UI.luac')

Edit the UIConfig.luar

UIConfig = {

    SCRIPT_DIMENSION_WIDTH = 1280,<-- IMPORTANT
    colors = {

        ...
        ...
    },



}

Quick Look

dofile(scriptPath() .. 'UI.luac')

local style = {
    width = "55%",
    height = "20%",
    position = "centerY|centerX",
    background = "black",
    color = "white",
    font_size = 20,
}

local container = UI:new(style)

container:add("welcome_msg")
container.welcome_msg.text = "Welcome to GUI for Ankulua"

container:showAll()
wait(2)

container:add("version")
container.version.text = "Version X.X"

container.welcome_ms:hide()
container.version:show()
wait(2)

container:hideAll()

Element properties

on each element property we can set a new value or get the current value

local style = {
    width = "55%",
    height = "20%",
    position = "centerY|centerX",
    background = "black", 
    color = "white",
    font_size = 20,
}

local container = UI:new(style)

print(container.background)

container.background = "white"
container:show()

print(container.background)

Output:

0xFF000000
0xFFFFFFFF

Width

- Sets the width of an element in px or %

Property Values
% - Defines the width in percent of the containing element
px - Defines the width in px

element.width = "10"
-- or
element.width = "5%"

Height

- Sets the Height of an element in px or %

Property Values
% - Defines the Height in percent of the containing element
px - Defines the Height in px

element.height = "10"
-- or
element.height = "5%"

Position

- Sets the position of an element.

Property Values
top - The top of the element is aligned with the top of the the parent element in px or %
bottom - The bottom of the element is aligned with the bottom of the the parent element in px or %
left - The left of the element is aligned with the left of the the parent element in px or %
right - The right of the element is aligned with the right of the the parent element in px or %
centerY -This simulate the vertical middle and is aligned with the centerY of the the parent element in px or %
centerX - The element is placed in the middle of the parent element in px or %

element.position = "top"
-- or
element.position = "top|left"
-- or
element.position = "left|bottom=10%"

using a table

element.position = {x="23%",y="-15"}
-- or
element.position = {x="left",y=-15}

Dont use the same axies, it will give you an error

element.position = "top|bottom" -- error

Background & font color

- Sets the background or font color of an element

Property Values
hexadecimal - A hexadecimal color is specified with: 0xAARRGGBB
colorname - Default colors : green,blue,orange,red,purple,green_dark,blue_dark,orange_dark,red_dark,purple_dark,white,black,gray,gray_light
transparent - Specifies that the background or font_color should be transparent.

element.background = "red"
element.color = "red"
-- or
element.background = "0xFF709E00"
element.color = "0xFF709E00"
-- or
element.background = "transparent"
element.color = "transparent"

Font_size

- Set the font size of an element

Property Values
px - Sets the font-size to a fixed size in px
%- Sets the font-size to a percent of the parent element s height

element.font_size = "10"
-- or
element.font_size = "20%"

text

- Sets the text of an element to be show
- The text will always align to center

Property Values
String - text parameter

element.text = "Hello world!"

Functions Reference

add(string name , table style)

Append a new element with string name and table style, if no style defined , it will inherit from his parent

element:add("child")

don't try to append to a child, this will throw a error

element:add("child")

element.child:add("2_lvl_child") -- error

show()

show the selected element, this works on the parent or child element

element:show()
-- or
element:add("child")
element.child:show()

hide()

Hide the selected element ,this works on the parent or child element

element:hide()
-- or
element:add("child")
element.child:show()
wait(2)

element.child:hide()

showAll()

Show the parent and all child
don't use directly on child elements, the result will be the same of show()

local element = UI:new(style)

element:add("child")
element:add("child2")

element:showAll()

hideAll()

Hide all the elements (parent and child)
don't use directly on child elements, the result will be the same of hide()

local element = UI:new(style)

element:add("child")
element:add("child2")
element:showAll()
wait(2)

element:hideAll()

getStyle()

This will return the style calculated from a element, child or parent

local style = {
    width = "55%";
    height = "20%";
    position = "centerY|centerX";
    background = "black";
    color = "white";
    font_size = 20;
}

local element = UI:new(style)

print_r(element:getStyle())

Output:

table{
    width = 650;
    height = 120;
    position = {
        x = 40,
        y = 20,
    }
    background = 0xFF000000;
    color = 0xFFFFFFFF;
    font_size = 20;
}

Widgets

addProgress(style , percentage)

Progress bar widget still in beta state but stable, the syntax will change so dont use to much

local style = {
    width = "55%";
    height = "20%";
    position = "centerY|centerX";
    background = "black";
    color = "white";
    font_size = 20;
}

local element = UI:new(style)
element:add("pro_container")
element.pro_container.height = "10%"

element:showAll()

-- clone pro_container style
local proBar = element:addProgress("pro_container",true) 

local files = 20 -- just to simulate

for i = 0, files do
    proBar:show(i,files,"blue")
end