nodered_cfg/node_modules/node-red-dashboard/config-fields.md

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