92 lines
5.9 KiB
Markdown
92 lines
5.9 KiB
Markdown
|
|
||
|
|
## 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}}
|