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

92 lines
5.9 KiB
Markdown
Raw Normal View History

2023-02-22 17:26:41 +01:00
## 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](https://github.com/toorshia/justgage/blob/master/justgage.js#L42) 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](http://bl.ocks.org/brattonc/5e5ce9beee483220e2f6) options for example:
{options:{circleColor:"#FF7777", textColor:"#FF4444", waveTextColor:"#FFAAAA", waveColor:"#FFDDDD", circleThickness:0.3, textVertPosition:0.2, waveHeight:0.05, waveCount:8}}