Skip to content

components.md

Latest commit

 

History

History
136 lines (94 loc) · 2.75 KB

components.md

File metadata and controls

136 lines (94 loc) · 2.75 KB

Components

Add components to the app

/app.lua:

-- create and add components directly
App:AddElement(Components.Base.Rectangle:new()) -- base components
App:AddElement(Components.Custom.HelloWorld:new()) -- custom components

-- OR
-- customize components before registering
hello_world_component = Components.Base.TextField:new()
hello_world_component.Label = "Hello World"
hello_world_component.PosX = 10
hello_world_component.PosY = 10
App:AddElement(hello_world_component)

Default components and their keys

Canvas

Canvas component is a work in progress

Components.Base.Canvas

A canvas to draw on.

  • PosX
  • PosY
  • Width
  • Height

InputField

Text input box (with blinking cursor).

Components.Base.InputField

  • PosX
  • PosY
  • Width
  • Value (updated as you type)
  • Type (string/number)
  • Label (optional)
  • LabelWidth (optional, 0 means auto)
  • Color (as three-value-array or library reference (Lib.Colors.*))

Rectangle

Just a rectangle.

Components.Base.Rectangle

  • PosX
  • PosY
  • Width
  • Height
  • Fill (boolean, whether to fill the rectangle)
  • Color (as three-value-array or library reference (Lib.Colors.*))

TextField

Text box, can be used as a button as well.

Components.Base.Rectangle

  • PosX
  • PosY
  • Label (actual text)
  • Border (boolean, whether to draw a border)
  • FontSize (7, 9, 10, 11, 12, 16, or 24)
  • Color (as three-value-array or library reference (Lib.Colors.*))

Defining / Overwriting draw and update functions

The Update() function should return a boolean. The screen is only redrawn on update if at least one component's Update() function returns true.

Example:

Update: |
    if self.Label == "Hello" then
        self.Label = "Hello World"
    end
    return true

Defining own keys in custom components

Supported data types: string, int, function, array, bool

You can access all keys in your functions using self.<key>.

Example:

MyKey1: "MyValue"
MyKey2: 30
MyFunc1: |
    if self.MyKey2 == 30 then
        self.MyKey1 = "Hello World"
    end

Data types behaviour

If a key is detected to be int, bool or array, it is translated to the same type in Lua.

If you want to keep it a string (e. g. "0"), you have to define a *PreserveString key.

Example:

MyKey: "0"
MyKeyPreserveString: true

Writing custom components

Inherit: Base.InputField # which component to base on, either base or custom

Value: "0" # default values
Coordinate: "X1" # custom fields
Update: | # custom update function
    App.Data.Var[self.Coordinate] = Value
    return true

Useful resources