Permalink
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  

Notes:

  1. See http://easings.net/ for examples of easings for chart animation.

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

     {"options":{"pointer":false,"gaugeWidthScale":1.5}}
     {"options":{"pointer":true,"gaugeWidthScale":0.4,"reverse":true}}
    

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}}