Button

Derived from Element -> Widget

A "button" that can simply trigger a GCode command or perform more complex actions. Buttons can also alter their styling and take different actions based on some condition.

{
	/*
	 * All attributes of Element and Widget apply here.
	 */

	"type": "button",

	/*
	 * The text to display in the button.
	 * You're not limited to static text here.  You can display
	 * values from status messages as well.
	 */

	/* Simple static text */
	"value": "STOP",

	/* Dynamic text: The current Z axis position prefixed with "Z: " */
	"value": "Z: ${status.move.axes[2].machinePosition.toFixed(3)}",

	/*
	 * If you're using a dynamic value, you can set the text to display
	 * before the first event is received.
	 */
	initial_value: "Z: ???", 

	/* 
	 * A button can have an icon as well as a display value.
	 * The icons are from Google's Material Icon set
	 * https://material.io/tools/icons/?style=baseline.
	 * You can use any icon on that page.
	 */
	"icon": "report",
	
	/*
	 * The icon can go either to the left or right of the text value.
	 * If the width of the button is too small to display both the icon
	 * and text on the same line, they'll wrap.  The default is "left".
	 */
	 "icon_position": "left",
}

Here's a simple "Reset" button:

{
	"id": "restart",
	"type": "button",
	"enabled": true,
	"style": {
		"width": "96px",
	},
	"classes": "btn btn-warning",
	"icon": "replay",
	"value": "Restart",
	"actions": {"type": "gcode", "gcode": "M999"}
}

This is a button that sends an event to another widget:

{
	"id": "submit_button,
	"type": "button",
	"value": "Submit",
	"actions": {"type": "event", "event": DUEUI.EVENTS.SUBMIT, "target": "#some_other_widget"}
}

Here's a more complex example. A button that displays the current Z baby steps, resets the baby steps when clicked, and changes color based on the amount of baby steps applied.

{
	"id": "babystep_button",
	"type": "button",
	"value": "Zbaby: ${status.move.babystepZ.toFixed(3)}",
	"tolerance": {
		"tolerances": [
			/* If it's 000, the button is green */
			{ "limit": 0.000, "classes": "btn-success"},
			/* If it's >000 but <= 0.100, the button is orange */
			{ "limit": 0.100, "classes": "btn-warning"},
			/* If it's >0.100, the button is red */
			{ "limit": 999.0, "classes": "btn-danger"}
		],
		"field": "${status.move.babystepZ}"
	},
	"style": {"width": "15ch", "height": "2.5em"},
	"position": {
		"my": "left top",
		"at": "left bottom",
		"of": "#movement_position"
	},
	/* When clicked, reset baby steps to 0, then run M290 to report the results */
	"actions": {"type": "gcode", "gcode": "M290 R0 S0;M290", "get_reply": true}
},