UI definitions

UI elements can be both loaded from Lua definitions or created on the fly.

-- some_name.ui.lua

register_ui "mywindow"
{
  element "window" { -- id will be mywindow.window
    position  = { 10, 10 },
    dimension = { 400, 100 },
    class     = "mywindow", -- style class
    element { -- unnamed element (mywindow.window.1)
      position = { 10, 10 }, -- relative, dimension auto
      text = "Hello world! Fine day?",
    },
    button "yes" { -- subelement, will be mywindow.window.yes
      rposition  = { 0.1, 0.8 }, -- relative positioning
      rdimension = { 0.3, nil }, -- just one value, other is nil
      dimension  = { nil, 20 }, -- other value not relative
      text       = "Yes!",
    },
    button "no" { -- 
      rposition  = { 0.1, 0.8 }, -- relative positioning
      rdimension = { 0.3 }, -- just one value, other is nil hence can be ommited
      dimension  = { nil, 20 }, -- other value not relative
      text       = "No :(",
    },
  },
}

-- some_script.lua

ui_element = ui.create( "mywindow" );
local result
ui_element:find("yes").on_click = function(self) result = true;  self:destroy() end
ui_element:find("no").on_click  = function(self) result = false; self:destroy() end
ui:run_modal( ui_element )

UI styles

Modeled after CSS but using pure lua.

Each UI element has:

• id value, might not be set
• type value, set by type database
• class value, might be set by user
• special modifier (selected, hover, etc)

-- some_name.style.lua
["default"] = {
  text_color         = { 0.3, 0.3, 0.3, 1.0 },
  background_color   = { 0.0, 0.0, 0.0, 1.0 },
  background_image   = "source:path/name/file.png",
  background_stretch = 
}

-- class definition
[".redclass"] = {
  text_color         = { 1.0, 0.3, 0.3, 1.0 },
}

-- type definition
["button"] = {
  border_color = SILVER, -- constant colors
}

-- modifier definition, with class
["button:hover"] = {
  border_color = RED, -- constant colors
}

-- id definition (no need for additional because unique!
["#mybutton"] = {
  border_width = 3,
}