WebPODS widgets - diirt/diirt GitHub Wiki

WebPODS comes with a small set of widgets. For a quick introduction, look at the examples bundled with your WebPODS installation.

Widget classes

Widget class name	Recommended element	Attributes	Standard CSS	WebPODS CSS classes
text-input	span	data-channel	size, font, text alignment, positioning	alarms
led	span	data-channel	size, positioning	led

Standard CSS

We strive to use standard CSS for common attributes, so that standard web tools can be used for page creation. Each widget may support one or more of these sets:

Set name	Properties included	Comments
size	width, height
font	font, font-*	By default, font is set to inherit
text alignment	text-align
positioning	float, margin	Every widget is a CSS box, unless otherwise indicated

WebPODS CSS classes

As we strive to allow the customization of the widgets with CSS, we provide some classes that allows to customize the appearance given certain conditions.

Set name	Classes included	Comments
alarm	alarm-none, alarm-minor, alarm-major, alarm-invalid, alarm-undefined	When the alarm condition changes, the different class is used on the widget. The different color for each case is set using a stylesheet.
led	on, off, error, value-LABEL	The LED is always in one of the three basic states: on (connected with a non-zero value), off (disconnected or zero value) or error (received an error). If the channel is a VEnum, the label (converted to lowercase) is used to construct the value class (e.g. YES, NO -> value-yes, value-no). Note that alarmOf() retrieves the alarm severity as a VEnum