Find file Copy path
a807978 Oct 27, 2017
1 contributor

Users who have contributed to this file

73 lines (62 sloc) 4.62 KB

UI Widget configuration via msg.ui_control

The following configuration properties of ui widget nodes can be set by using a msg.ui_control property on a msg. Multiple properties of the node can be set at the same time. eg { "min":10, "max":50 }

Note: It is still recommended that nodes are configured via the editor in order to preset the default values.

widget property type notes / example
ui_button color string not needed
bgcolor string not needed
icon string on refresh
format string not needed
ui_chart look string "line","bar","horizontalBar","pie","polar-area","radar"
legend boolean  
interpolate string "linear","step","bezier"
nodata string  
ymin number  
ymax number  
dot boolean  
xformat string "HH:mm:ss"
cutout number  
colors object n/a
useOneColor boolean n/a
spanGaps boolean n/a
animation string (Note 1), {duration:1000, easing:"easeInOutSine"}
ui_colour_picker format string on refresh
showPicker boolean on refresh
showSwatch boolean on refresh
showValue boolean on refresh
showAlpha boolean on refresh
showLightness boolean on refresh
ui_dropdown place string "placeholder text"
options array [{"label":"foo","value":"0","type":"str"}]
ui_gauge gtype string "gage", "donut", "compass", "wave"
min number  
seg1 number segment 1 limit
seg2 number segment 2 limit
max number  
colors array ["blue","#00ff00","#f00"]
options object (see Note 2 below)
ui_numeric min number  
max number  
step number  
format string "{{value}}"
ui_slider min number  
max number  
step number  
ui_switch onicon string all or nothing
officon string all or nothing
oncolor string all or nothing
offcolor string all or nothing
ui_template format string the script
templateScope string "local" or "global"
ui_text format string "{{value}}"
layout string "row-left", "row-right", etc
ui_text_input mode string "text", "email", "password", "color"
delay number  


  1. See for examples of easings for chart animation.

  2. The gauge options can accept any of the Justgage parameters for example:


Likewise the Wave type gauge can accept liquidfillgauge config options for example:

    {options:{circleColor:"#FF7777", textColor:"#FF4444", waveTextColor:"#FFAAAA", waveColor:"#FFDDDD", circleThickness:0.3, textVertPosition:0.2, waveHeight:0.05, waveCount:8}}