Generic Latching Button

Generic Latching Button is an input and output widget. It is used for a two-state button. The state changes when the button is pressed. The widget’s state can be altered by other widgets or other registers bound by user-defined program.

Generic Latching Button is efficient and resource-thrifty. It only provides limited style selections on the English fonts, gradient colors, border lines and few other design elements. For saving resources, this widget does not allow any image operations.

An educational vidoe is availble to get users started:

Educational Video

Property	Description	Operation
Widget Name	Widget displayed name	Name
Link to User Manual	Link to IOT’s website for User Manual

Visibility Control

Property	Description	Operation
Binding Hidden Control Register	Select a binding register to control the visibility of this widget	Checkbox
Hidden Control Register	Choose a binding regsiter	Register Selector

Show OFF/ON State

Property	Description	Operation
State	Select the state for preview	Dropdown List

Text Setting

Property	Description	Operation
Text on Release	Enter the released-state text	Plain Text
Text Color	Select the text color	Color Selector
Text Opacity %	Select the text opacity (1-100%)	Number Editor
Enable Pressed State Style	Enable the pressed-state text and its releated settings	Checkbox
Text on Press	Enter the pressed-state text	Plain Text
Text Color	Select the text color	Color Selector
Text Opacity %	Select the text opacity (1-100%)	Number Editor

Body Setting

Property	Description	Operation
Main Color	Select the main color for this widget	Color Selector
Gradient Color	Select the gradient color	Color Selector
Button Opacity %	Select this widget’s opacity (0-100%)	Number Editor
Corner Raidus	Select the corner raidus of this widget. The maximum value changes according to the size of the widget.	Number Editor
Enable Pressed State Style	Enable the pressed state and its related style settings.	Checkbox
Main Color	Select the color of the pressed state	Color Selector
Gradient	Select the gradient color of the pressed state	Color Selector
Button Opacity %	Select the pressed-state button opacity (0-100%)	Number Editor
Corner Radius	設定按鈕按下時的圓角半徑，最大值隨元件大小而變動	Number Editor

Border Setting

Property	Description	Operation
Border Color	Select the border color	Color Selector
Border Width	Select the board line width	Number Editor
Enable Pressed State Style	Enable the pressed state and its related style settings	Checkbox
Border Color	Select the border color for the pressed state	Color Selector
Border Width	Select the border line width for the pressed state	Number Editor

Shadow Setting

Property	Description	Operation
Shadow Color	Select the shadow color	Color Selector
Shadow Width	Select the shadow width	Number Editor
Enable Pressed State Style	Enable the pressed state and its related style settings	Checkbox
Shadow Color	Select the shadow color for the pressed state	Color Selector
Shadow Width	Select the shadow width for the pressed state	Number Editor

Switch on Event Setting

Property	Description	Operation
Enable Page Selector	Switching to ON state triggers to the target page	Checkbox
Select Target Page	The target page selector	Page Selector
Enable Register Operation	Switching to ON state triggers a register operation	Checkbox
Binding Register	Select which register for the operation	Register Selector
Operation Mode	Select which operation to be performed. Please refer to Register Operation Setting	Register Operation Setting
Enable Callback Function	Switching to OFF state tirggers a Blockly callback function	Checkbox
Behavior Programming	Blockly Editor	Blockly Editor

Switch Off Event Setting

Property	Description	Operation
Enable Page Selector	Switching to OFF state triggers to the target page	Checkbox
Select Target Page	The target page selector	Page Selector
Enable Register Operation	Switching to OFF state triggers a register operation	Checkbox
Binding Register	Select which register for the operation	Register Selector
Operation Mode	Select which operation to be performed. Please refer to Register Operation Setting	Register Operation Setting
Enable Callback Function	Switching to OFF state tirggers a Blockly callback function	Checkbox
Behavior Programming	Blockly Editor	Blockly Editor

State Binding Register

Property	Description	Operation
Enable State Binding Register	Whether to enable a binding register to this widget	Checkbox
Binding Register	Select a register for binding	Register Selector

Preview

Property	Description	Operation
Animate	The widget automatically goes through two states.

Property	Description	Operation
Preview Press Animation	Preview the widget action when pressed
Link to User Manual…	Connect to the education video and play it

Widget Property