iot-backend/software/flow/node_modules/node-red-dashboard/config-fields.md

5.9 KiB

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. For example you can use a change node to set msg.ui_control to JSON { "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
tooltip string on refresh
className string (Note 4)
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"}
options object (Note 2), {scales: {yAxes: [{ticks: {fontSize: 20}}]}}
className string (Note 4)
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
className string (Note 4)
ui_dropdown place string "placeholder text"
options array [{"label":"foo","value":"0","type":"str"}]
className string (Note 4)
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 3 below)
className string (Note 4)
ui_numeric min number  
max number  
step number  
format string "{{value}}"
className string (Note 4)
ui_slider min number  
max number  
step number  
className string (Note 4)
ui_switch onicon string all or nothing
officon string all or nothing
oncolor string all or nothing
offcolor string all or nothing
className string (Note 4)
ui_template format string the script
templateScope string "local" or "global"
className string (Note 4)
ui_text format string "{{value}}"
layout string "row-left", "row-right", etc
className string (Note 4)
ui_text_input mode string "text", "email", "password", "color"
delay number  
className string (Note 4)

Notes:

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

  2. The chart can take many of the angular-chartjs options for changing axes label, scales etc

  3. 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}}
    
  4. when a className is specified, it is added to the parent element. E.g for a button, the class is added to the md-card This permits overriding of styles in all sub elements e.g. md-card.my-button button { color: red }

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