Skip to content
Last update: February 6, 2022

ui

please visit the online manual for updates

UI Definitions

value represents
ui.bpx.display.width the with of a BPX display in pixels = 96
ui.bpx.display.height the hight of a BPX display in pixels = 64

ui.draw

Property for the UI Draw, an event can be set on this property to trigger every time the ui is drawn. this is approx 20 times per second.

usually the ui.clear() API is also called in the event to clear the standard Green-GO UI

event ui.draw
    ui.clear
    // write custom ui
end

ui.draw space

the ui.draw event is for the main screen of the device: the only one for BPX or screen one for MCX, his complete screen is part of the ui.draw space

in the case of a tft screen with 6 button functions each button function can have their own ui.draw event and space. in that case `ui.draw[i] is called with an index representing the button function number of the screen

event ui.draw[6]
    ui.clear
    // custom ui for the screen associated with button 6
end

ui.button[x]

Property for ui buttons, an event can be set on this property and override the default Green-GO action for this button. An index needs to be given to indicate which button is used.

// for a bpx
event ui.button[ui.bpx.1]
    //custom behavior for the top left button
end

// for an mcx the "normal" number of the button is used (screen 1 button 1 to 6 ect)
event ui.button[1]
    //custom behavior for the top left button of screen 1
end
definition button
ui.bpx.encoder.left left bpx encoder
ui.bpx.encoder.right right bpx encoder
ui.bpx.1 top left button
ui.bpx.2 bottom left button
ui.bpx.3 top right button
ui.bpx.4 bottom right button

each UI button can be read if pressed or not

value state
ui.button.pressed the button is currently pressed
ui.button.released the button is currently not pressed
if ui.bpx.1 = ui.button.pressed 
    // if statement returns true if the button is pressed when executed 
end

ui.encoder[x]

Property for encoder change, an event can be set ont this property and override the default Green-GO action.

ui.event.value gets the amount of change of the encoder

ui.touch[x]

Property for ui screen touches, an event can be set on this property and override the default Green-GO action for this touch. An index needs to be given to indicate which button is used.

event ui.touch[1]
    //custom behavior for the top left screen touch of screen 1
end

by default a single touch button is available. the mode of the ui.touch of a channel can be set to be double or single.

ui.touch[1] = ui.touch.mode.double

value mode
ui.touch.mode.single a single touch is distinguished
ui.touch.mode.double a left and right side are distinguished

ui.event.value gets the value of the side of the screen-part that is touched

value represents
ui.touch.event.left the left side of the screen part is touched
ui.touch.event.right the right side of the screen part is touched.
event ui.touch[1]
    if ui.event == ui.event.press
        if ui.event.value == ui.touch.left
            // custom behavior for the left side
        end
        if ui.event.value == ui.touch.right
            // custom behavior for the right side
        end
    end
end

ui.event

in the case of aui.button[x] or ui.touch[x] event the ui.event property gets the value of the event type

value event type
ui.event.press the event was triggered by a press
ui.event.release the event was triggered by a release

ui.event.index

ui.event.value

Property that returns the value of the event.

event value
ui.encoder[x] the amount the encoder has changed positive or negative
ui.touch[x] the side of the touch screen that is touched

ui.color

Property for the color of a ui element like a window, led, button or rectangle

value color
ui.color.white White
ui.color.black Black/off
ui.color.red Red
ui.color.green Green
ui.color.blue Blue
ui.color.orange Orange
ui.color.purple Purple
ui.color.yellow Yellow
ui.color.gray Gray
ui.color.darkgrey Dark Gray

ui.font

value font
ui.font.small
ui.font.normal
ui.font.large

ui.fontmode

value mode
ui.fontmode.left
ui.fontmode.right
ui.fontmode.hcenter
ui.fontmode.top
ui.fontmode.bottom
ui.fontmode.vcenter
ui.fontmode.center

ui.xand ui.y

Property for the current X and Y position of the cursor,Can be set and read

//set the cursor
ui.x = 10
ui.y = 10

// draw text at cursor position
ui.draw.text("cursor")

// check value of y and draw text if moved
if ui.y => 10
    ui.draw.text(" moved)
end

UI API's

ui.window(x,y,w,h)

Default values `ui.window(0,0,screen.width,screen.height)

draws a window within the current ui.draw space. this window will have the following properties

  • this window has its own X,Y space, the top left pixel of this window has the coordinates ui.x=0 and ui.y = 0
  • anything drawn within this window will be clipped within its size, *drawing 50 pixels wide in a 40 pixel wide window will not render the last 10 pixels
    // set a window of 30 * 30 pixels starting at 
    ui.window(10, 10, 30, 30)
    // draw a rectangle - that is to big and will be clipped to 30*30
    ui.draw.rectangle(0,0,40,30)

it is not possible to call a window in a window a new ui.window() will end the scope of the previous window and draw a new window from the origin of the ui.draw space.

ui.clear()

clears the default Green-GO content of the current ui.draw space.ui.clear() can also be called inside a window - clearing only the content of that window.

ui.draw.line(x,y,w,h)

Default values `ui.draw.line(0,0,0,0)

draws a single pixel line.

//draw a horizontal line starting at 10,10 with a width of 10
ui.draw.line(10,10,10,0) 

//draw a vertical line starting at 10,0 with a hight of the bpx screen
ui.draw.line(10,0,0,ui.bpx.display.height) 

//draw a diagonal line starting at the top right corner
ui.draw.line(ui.bpx.display.width,0,-20,20)

NOTE the line can either be horizontal, vertical or 45deg diagonal.

allowed:

  • w: x h: 0
  • w: 0 h: x
  • w: x h: x
  • w: x h: -x

not allowed - does not render

  • w: x h: !x
  • w: -x h: !x

ui.draw.rectangle(x,y,w,h)

ui.draw.open.rectangle(x,y,w,h)

ui.draw.text

ui.draw.text.at

ui.draw.level(x,y,volume,enabled)

ui.draw.button

ui.draw.button.small.1

ui.draw.button.small.2


Written by: Henk-Jan Blok, Timo Toups