Boolean Manipulation

Common Attributes

Attribute	Description	Default	Possible Values
label	This label will be a child of the button.	none	String, HTML
class	These classes added to this attribute will be located in the parent element.	none	css classes
data-var-name	The plc variable that will be data bound to the visual representation	not optional	‘MyTask:Myvar.member’, ‘gMyGlobal.var’
buttonVarName	The plc variable that will be data bound to the press of the button	data-var-name	‘MyTask:Myvar.member’, ‘gMyGlobal.var’
data-set-value	When the PLC variable equals this value it will ad the led-on class.	true
data-reset-value	When the PLC variable equals this value it will ad the led-off class.	false
side	Alignment	left	left,middle,right
buttonType	Button function	none	set, momentary, toggle

LEDs

LED elements toggle state based on the value of a machine variable. The state toggle is accomplished by adding and removing classes to the element. If the machine value does not match a defined state, then no class will be added to the element. This allows for a total of three states for each LED element, on, off, and undefined. The Loupe UX library also provides default implementations of LED classes in lux.css.

Attribute	Description	Default
error	This is a boolean argument that allows you to use the ’led-red’ class as the data-var-true element.	false
warning	This is a boolean argument that allows you to use the ’led-orange’ class as the data-var-true element.	false

Example

     {{tmplit 'Led' '<label>' data-var-name='<var>' error='true' data-set-value='false' data-reset-value='true' }}

Checkbox

Checkboxes function similarly to toggle buttons. They will set the value of a machine variable to one of two values and update their display based on the current machine value.

Example

    {{tmplit 'CheckBox' <label> data-var-name='<var>'}}