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.x
and 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
andui.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