Buttons

Tmplit supports several types of button behaviors. To specify the behavior, add the buttonType="[toggle|set|momentary]" to the tmplit.

See Loupe UX’s Buttons for more information.

Common Attributes

Attribute	Description	Default	Possible Values
label	This label will be a child of the button.	none	String, HTML
button type	This set the behavior of the button	not optional	set, momentary, toggle
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 main function of the tmplit	not optional	‘MyTask:Myvar.member’, ‘gMyGlobal.var’
date-set-value	This is the value the plc variable will be set to when the button is pressed.	true	boolean, number, string

Set Button

This type of button sets the plc variable to a specific value. By default, this button will set the plc variable to true.

Attribute	Description	Default	Possible Values
button type	This set the behavior of the button	not optional	set

Example

    {{tmplit 'Button' '<label>' buttonType='set' data-var-name="<var>" style="color:red"}}

Toggle Button

Toggle buttons toggle a variable value between two possible values. The value written depends on the current value of the variable as read from the machine. When the value is equal to data-set-value, the toggle-active class is added to the element.

Attribute	Description	Default	Possible Values
button type	This set the behavior of the button	not optional	toggle
data-reset-value	This is the value the HMI will set the plc variable to when the ’toggle-active’ class not present.	false	boolean, number, string

Example

    {{tmplit 'Button' '<label>' buttonType='toggle' data-var-name="<var>" style="color:green"}}

Momentary Button

Momentary buttons write one value to a variable when they are pressed and another value when they are released (like a jog button).

Attribute	Description	Default	Possible Values
button type	This set the behavior of the button	not optional	momentary
data-reset-value	This is the value the HMI will set the plc variable to when the ’toggle-active’ class not present.	false	boolean, number, string

Example

    {{tmplit 'Button' '<label>' buttonType='momentary' data-var-name="<var>" class='btn-primary' }}