Widget

Derived from Element

Widget is the parent for all of the specific purpose elements like Button, Input, Textarea, etc. You can't create an Widget directly but these are the configuration parameters that all other object inherit.

Tolerance

Tolerances allow a widget to change its styling based on whether some value is in or out of tolerance. Usually used for temperature displays, you could also use Tolerances to change styling based on analog probe values, fan speeds, etc.

Here's an example for an analog Z probe.

{
	"tolerance": {
		"tolerances": [
			/* If the value is between 0 and 400, make the button green */
			{"limit": 400, "classes": "btn-success"},
			/* If the value is between 400 and 500, make the button orange */
			{"limit": 500, "classes": "btn-warning"},
			/* If the value is between 500 and 9999, make the button red */
			{"limit": 9999, "classes": "btn-danger"}
		],
		/* You have to identify which field in a status report to test. */
		"field": "${status.sensors.probes[0].value}",
	}
	/*
	 * You can use "style" instead of, or in addition to "classes"
	 * in each of the tolerances.
	 */

State

Another way to alter the styling of a Widget is to examine its "state". For instance, the atxPower status field has states of 0 or 1 depending if the power supply is off or on. The printer itself has states like "Paused", "Printing", "Idle", etc.

You can also use state to execute a command based on its state when the widget is clicked. The available actions are described in the next section but here's how this could be used for an ATX Power button:

	"state": {
		"states": [
			/*
			 * When the power is off (state 0), set the button class to
			 * "btn-danger" (red) and set the button display value to
			 * "ATX is<br>Off" (note that you can use HTML here).
			 *
			 * When in this state and the button clicked, send GCode
			 * command "M80" to turn the power on, and log a message
			 * to that effect.
			 */ 
			{ "state": 0, classes: "btn-danger", "value": "ATX is<br>Off",
				"action": {"type": "gcode", "gcode": "M80", "message": "Power ON"}			 
			},

			/*
			 * When the power is on (state 1), set the button class to
			 * "btn-success" (green) and set the button display value to
			 * "ATX is<br>On".
			 *
			 * When in this state and the button clicked, send GCode
			 * command "M81" to turn the power off, and log a message
			 * to that effect.
			 */ 
			{ "state": 1, classes: "btn-success", "value": "ATX is<br>On",
				"action": {"type": "gcode", "gcode": "M81", "message": "Power OFF"}
			},

			/* You have to identify which field in a status report to test. */
			"field": "${status.state.atxPower}"
		],
	},

Actions

Many widgets can take actions when clicked even when not using "state". They include

• Execute GCode
• Run a macro
• Print a file
• Change a DueUI setting
• Send events to other widgets,
• Log a message

A simple action to send an M81 and log a "Power ON" message:

	 "actions": {"type": "gcode", "gcode": "M81", "message": "Power ON"},

If you need to send more than 1 action at a time, you can use an array. This example sends the M81 then executes 'MyMacro'.

	 "actions": [
	 	{"type": "gcode", "gcode": "M81", "message": "Power ON"},
	 	{"type": "macro", "macro": "MyMacro"}
	 ]

Let's say you have a button but want to choose which of several actions to take when you click the button. You can use "actions_chooser" instead of plain "actions". This example uses an actions_chooser and also executes multiple commands per choice. When you click this button, a little popup menu will appear allowing you to select which actions you want to run. The menu items will be labelled "Power ON" and "Power OFF". Of course, you could just put the M80 and M81 commands inside your macros. :)

	 "actions_chooser": [
	 	[
	 		{"type": "gcode", "gcode": "M81", "label": "Power ON"},
	 		{"type": "macro", "macro": "MyPowerOnMacro"}
	 	],
	 	[
	 		{"type": "macro", "macro": "MyPowerOffMacro"},
	 		{"type": "gcode", "gcode": "M80", "label": "Power OFF"},
	 	],
	 ]

An interesting use of "actions_chooser" would be to just present a confirmation popup for a single action. In this example. when you click the button, the popup would display with a single entry... "Click to confirm"

	 "actions_chooser": {"type": "gcode", "gcode": "M81", "label": "Click to confirm"}

Action Reference

Common attributes:

• "type": Indicates what type of action to take. (required)
• "message": Log this message when the action is complete.
• "label": When used in an "actions_chooser", the label will be used in the drop-down menu for this item.
• "fire_on_startup": When true, this action will also be triggered automatically when you start or refresh DueUI.

gcode

You can send multiple GCode commands at once by separating them with a ';'.

	{"type": "gcode", "gcode": "M81 ; G28", "label": "Power ON and Home"},

macro

Run a macro.

	{"type": "macro", "macro": "/macros/MyMacro"},

print

Print a GCode file.

	{"type": "print", "file": "Some.gcode"},

setting

Change a DueUI Setting. Usually you won't need this but see the Jog widget for more information.

	{"type": "setting", "setting": "jog_z_speed", "fire_on_startup": true},

event

Send an event to another widget. See File List or Jog for information on how this can be used.

	{"type": "event", "event": "jog_speed", "target": "#jog_z", "fire_on_startup": true},

log

Log a message. Severity types are "I" for Info, "W" for Warning and "E" for Error.

	{"type": "log", "severity": "I", "value": "Power ON"},