Progress

Derived from Element -> Widget

"progress" is a Bootstrap progress-bar.

The "value" of the progress bar must be a number between 0 and 100.

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

	"id": "print_progress",
	"type": "progress",

	"classes": "bg-success",
	"style": {
		"width": "70ch"
		"height": "3ch"
	},

	/*
	 * You can set the min and max to anything you want but for something like
	 * print progress you probably want to express it as a percentage.
	 */
	"min": 0,
	"max": 100,
	
	/*
	 * Make sure your formula doesn't result in a "divide by zero".
	 * That's what the " || 1 " does. :)
	 */
	"value": "${((status.job.file.printTime / ((status.job.timesLeft.filament + status.job.file.printTime) || 1)) * 100)}",
	
	"position": {
		"my": "left top",
		"at": "left bottom+10",
		"of": "#print_progress_label"
	}
},

Want to have a vertical progress bar, maybe for a thermometer style temerature display? Use style transforms.

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

	"id": "some_temp",
	"type": "progress",

	"classes": "bg-success",
	"style": {
		"width": "70ch"
		"height": "3ch"
		"transform": "rotate(-90deg)",
		"transform-origin": "50% 50%"
	},

	"min": 0,
	"max": 300,
	
	"value": "${status.heat.heaters[2].current}",
	
	"position": {
		"my": "left top",
		"at": "left bottom+10",
		"of": "#print_progress_label"
	}
},