dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improved examples

Browse Source
This commit is contained in:
Andrii Shvaika 2024-09-25 18:09:50 +03:00
parent 45d30cfa92
commit b179b301cd
2 changed files with 38 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
ui-ngx/src/assets/help/en_US/scada/symbol_state_render_fn.md
View File

@ -20,36 +20,44 @@ A JavaScript function used to render SCADA symbol state.
##### Examples
* Change colors for many tags on the value of the “active, value, minValue, maxValue”
This JavaScript snippet manages the enablement and appearance of SVG buttons used to control volume settings based on device connectivity and value thresholds.
The 'Up' button is disabled when the volume reaches its maximum allowable value (`maxValue`), and the 'Down' button is disabled when the volume is at its minimum allowable value (`minValue`).
Both buttons are disabled when the device is offline. The visual cues for enabled/disabled states are represented by color changes.
```javascript
var levelUpButton = ctx.tags.levelUpButton;
var levelDownButton = ctx.tags.levelDownButton;
var levelArrowUp = ctx.tags.levelArrowUp;
var levelArrowDown = ctx.tags.levelArrowDown;
var active = ctx.values.active;
var value = ctx.values.value;
var minValue = ctx.properties.minValue;
var maxValue = ctx.properties.maxValue;
var levelUpButton = ctx.tags.levelUpButton; // Button for increasing volume
var levelDownButton = ctx.tags.levelDownButton; // Button for decreasing volume
var levelArrowUp = ctx.tags.levelArrowUp; // Visual arrow for 'Up' button
var levelArrowDown = ctx.tags.levelArrowDown; // Visual arrow for 'Down' button
var active = ctx.values.active; // Device connectivity status
var value = ctx.values.value; // Current volume level
var minValue = ctx.properties.minValue; // Minimum volume level
var maxValue = ctx.properties.maxValue; // Maximum volume level
var enabledColor = '#4CAF50'; // Color for enabled state
var disabledColor = '#A1ADB1'; // Color for disabled state
// Determine if the 'Up' button should be enabled
var levelUpEnabled = active && value < maxValue;
var levelDownEnabled = active && value > minValue;
if (levelUpEnabled) {
ctx.api.enable(levelUpButton);
levelArrowUp[0].attr({fill: '#647484'});
ctx.api.enable(levelUpButton); // Enable 'Up' button
levelArrowUp[0].attr({fill: enabledColor}); // Set arrow color to indicate enabled state
} else {
ctx.api.disable(levelUpButton);
levelArrowUp[0].attr({fill: '#777'});
ctx.api.disable(levelUpButton); // Disable 'Up' button
levelArrowUp[0].attr({fill: disabledColor}); // Set arrow color to indicate disabled state
}
// Determine if the 'Down' button should be enabled
var levelDownEnabled = active && value > minValue;
if (levelDownEnabled) {
ctx.api.enable(levelDownButton);
levelArrowDown[0].attr({fill: '#647484'});
ctx.api.enable(levelDownButton); // Enable 'Down' button
levelArrowDown[0].attr({fill: enabledColor}); // Set arrow color to indicate enabled state
} else {
ctx.api.disable(levelDownButton);
levelArrowDown[0].attr({fill: '#777'});
ctx.api.disable(levelDownButton); // Disable 'Down' button
levelArrowDown[0].attr({fill: disabledColor}); // Set arrow color to indicate disabled state
}
{:copy-code}
```

21
ui-ngx/src/assets/help/en_US/scada/tag_click_action_fn.md
View File

@ -23,27 +23,28 @@ A JavaScript function invoked when user clicks on SVG element with specific tag.
##### Examples
* Set new value action
The example demonstrates how to dynamically call the 'turnOn' or 'turnOff' actions based on the 'active' status from the context. The actions are implemented using the following methods from the <a href="${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/scada/scada-symbols-dev-guide/#scadasymbolapi" target="_blank">Scada Symbol API</a>:
*callAction: (event: Event, behaviorId: string, value?: any, observer?: Partial\<Observer\<void\>\>): void*
- **callAction**: *(event: Event, behaviorId: string, value?: any, observer?: Partial\<Observer\<void\>\>): void* - Triggers a specific behavior action identified by its ID, allowing for the optional passing of values and observer callbacks.
*setValue: (valueId: string, value: any): void*
- **setValue**: *(valueId: string, value: any): void* - Updates a specific value within the `ctx.values` object and initiates all related rendering functions.
Avoid manually setting behavior values, as shown in the example, see <a href="${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/scada/scada-symbols-dev-guide/#best-practices" target="_blank">best practice</a> for Device Interaction
For more detailed guidelines on device interaction, consider reviewing the <a href="${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/scada/scada-symbols-dev-guide/#best-practices" target="_blank">best practices</a>.
```javascript
var active = ctx.values.active;
var action = active ? 'turnOn' : 'turnOff';
var active = ctx.values.active; // Current active status from context
var action = active ? 'turnOn' : 'turnOff'; // Determine action based on active status
var parameter = "any object or primitive"; // Parameter to pass with the action
ctx.api.callAction(event, action, active, {
// Call the action with observer callbacks for next and error handling
ctx.api.callAction(event, action, parameter, {
next: () => {
// To simplify debugging in preview mode
// Action succeeded; toggle the 'activate' status for debugging
ctx.api.setValue('activate', !active);
},
error: () => {
// To simplify debugging in preview mode
// Action failed; reset the 'activate' status for debugging
ctx.api.setValue('activate', active);
}
});
{:copy-code}
```