This widget allows displaying some buttons triggering commands on the remote Thing.
When a button is pressed, the server will run the command to the remote Thing by sending all the parameters configured within the Command Definition.
If the feedback has been enabled the button will be highlighted in green or in red for a while depending on whether the command execution succeeds or fails.
code_blocksDesign View
In the template editor, you can find the Commands icon under the Controls component palette group.
You can drag the control into the grid and then configure the following sub-elements according to your needs:
Command: the sub-element referencing a thing command.
Below are references to the properties that can be configured for this widget.
code_blocksCode View
Template Syntax
Below you can find some examples of how to use the component within a template.
<commands-widget title="Commands" class="vertical-buttons"> <command name="Reset"></command> <command name="Update"></command> ...... <command name="...."></command> </commands-widget>
Component Reference
Here is a comprehensive list of all the elements and properties that can be used to configure the component.
Commands <commands-widget> | |
---|---|
PROPERTIES | |
CSS Class | The name(s) of the CSS class used to customize the widget layout. Type: STRING | Optional class="my-custom-class" |
Feedback Enabled | The flag indicating whether to enable the execution feedback. Type: BOOLEAN | Optional | Values: true
false
[enableFeedback]="true" |
Feedback Timeout | The number of seconds after that the widget shows an error in case no feedback has been received. Type: INTEGER | Optional [timeout]="120" |
Title | The title displayed on the top part of the widget box. Type: STRING | Optional [title]="'Details'" |
Visibility Condition | The expression that allows you to reduce the visibility of the element. Type: STRING | Optional *ngIf="getUser().organizationId != null" |
SUB-ELEMENTS | |
Command | The sub-element referencing a thing command. Multiple | Required <command></command> |
Command <command> | |
---|---|
PROPERTIES | |
Confirm Execution | The flag prompting the user to confirm the command execution. Type: BOOLEAN | Optional | Values: true
false
[confirmExecution]="true" |
Name | The thing-definition command to invoke. Type: COMMAND | Optional name="COMMAND" |
Off Color | The colore of the button when the status is OFF. Type: STRING | Optional [offStatus]="{color: '#28A745'}" |
Off Icon | The icon displayed within the button when the status is OFF (eg. fa-power-on). Type: STRING | Optional [offStatus]="{icon: 'fa-start'}" |
Off Label | The label displayed within the button when the status is OFF (eg. TURN ON). Type: STRING | Optional [offStatus]="{label: 'TURN ON'}" |
On Color | The colore of the button when the status is ON. Type: STRING | Optional [onStatus]="{color: '#DC3545'}" |
On Icon | The icon displayed within the button when the status is ON (eg. fa-power-off). Type: STRING | Optional [onStatus]="{icon: 'power-off'}" |
On Label | The label displayed within the button when the status is ON (eg. TURN OFF). Type: STRING | Optional [onStatus]="{label: 'TURN OFF'}" |
Running Color | The colore of the button when the status is RUNNING. Type: STRING | Optional [runningStatus]="{color: '#007bff'}" |
Running Icon | The icon displayed within the button when the status is RUNNING (eg. fa-running). Type: STRING | Optional [runningStatus]="{icon: 'fa-running'}" |
Running Label | The label displayed within the button when the status is RUNNING (eg. HEATING). Type: STRING | Optional [runningStatus]="{label: 'HEATING'}" |
Comments
0 comments
Please sign in to leave a comment.