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

Merge pull request #11739 from ArtemDzhereleiko/AD/scada/help

Browse Source 
Help for Scada system
This commit is contained in:
Andrew Shvayka 2024-09-25 17:46:26 +03:00 committed by GitHub
commit 45d30cfa92
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 103 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,9 +10,9 @@ A JavaScript function used to render SCADA symbol state.
**Parameters:**
<ul>
<li><b>ctx:</b> <code>ScadaSymbolContext</code> - Context of the SCADA symbol.
<li><b>ctx:</b> <code>ScadaSymbolContext</code> - <a href="${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/scada/scada-symbols-dev-guide/#scadasymbolcontext" target="_blank">Context</a> of the SCADA symbol.
</li>
<li><b>svg:</b> <code><a href="https://svgjs.dev/docs/3.2/container-elements/#svg-svg">SVG.Svg</a></code> - A root svg node. Instance of <a href="https://svgjs.dev/docs/3.2/container-elements/#svg-svg">SVG.Svg</a>.
<li><b>svg:</b> <code><a href="https://svgjs.dev/docs/3.2/container-elements/#svg-svg">SVG.Svg</a></code> - A root svg node. Instance of <a href="https://svgjs.dev/docs/3.2/container-elements/#svg-svg" target="_blank">SVG.Svg</a>.
</li>
</ul>
@ -20,8 +20,36 @@ A JavaScript function used to render SCADA symbol state.
##### Examples
<br>
* Change colors for many tags on the value of the “active, value, minValue, maxValue”
TODO
```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 levelUpEnabled = active && value < maxValue;
var levelDownEnabled = active && value > minValue;
if (levelUpEnabled) {
ctx.api.enable(levelUpButton);
levelArrowUp[0].attr({fill: '#647484'});
} else {
ctx.api.disable(levelUpButton);
levelArrowUp[0].attr({fill: '#777'});
}
if (levelDownEnabled) {
ctx.api.enable(levelDownButton);
levelArrowDown[0].attr({fill: '#647484'});
} else {
ctx.api.disable(levelDownButton);
levelArrowDown[0].attr({fill: '#777'});
}
{:copy-code}
```

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

@ -10,11 +10,10 @@ A JavaScript function invoked when user clicks on SVG element with specific tag.
**Parameters:**
<ul>
<li><b>ctx:</b> <code>ScadaSymbolContext</code> - Context of the SCADA symbol.
<li><b>ctx:</b> <code>ScadaSymbolContext</code> - <a href="${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/scada/scada-symbols-dev-guide/#scadasymbolcontext" target="_blank">Context</a> of the SCADA symbol.
</li>
<li><b>element:</b> <code>Element</code> - SVG element.<br>
See <a href="https://svgjs.dev/docs/3.2/manipulating/">Manipulating</a> section to manipulate the element.<br>
See <a href="https://svgjs.dev/docs/3.2/animating/">Animating</a> section to animate the element.
<li><b>element:</b> <code>Element</code> - <a href="https://svgjs.dev/docs/3.2/getting-started/" target="_blank">SVG.js</a> element.<br>
See the examples below to learn how to <a href="https://svgjs.dev/docs/3.2/manipulating/" target="_blank">manipulate</a> and <a href="${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/scada/scada-symbols-dev-guide/#scadasymbolanimation" target="_blank">animate</a> elements.<br>
</li>
<li><b>event:</b> <code>Event</code> - DOM event.
</li>
@ -24,6 +23,27 @@ A JavaScript function invoked when user clicks on SVG element with specific tag.
##### Examples
<br>
* Set new value action
TODO
*callAction: (event: Event, behaviorId: string, value?: any, observer?: Partial\<Observer\<void\>\>): void*
*setValue: (valueId: string, value: any): void*
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
```javascript
var active = ctx.values.active;
var action = active ? 'turnOn' : 'turnOff';
ctx.api.callAction(event, action, active, {
next: () => {
// To simplify debugging in preview mode
ctx.api.setValue('activate', !active);
},
error: () => {
// To simplify debugging in preview mode
ctx.api.setValue('activate', active);
}
});
{:copy-code}
```

51
ui-ngx/src/assets/help/en_US/scada/tag_state_render_fn.md
View File

@ -10,11 +10,10 @@ A JavaScript function used to render SCADA symbol element with specific tag.
**Parameters:**
<ul>
<li><b>ctx:</b> <code>ScadaSymbolContext</code> - Context of the SCADA symbol.
<li><b>ctx:</b> <code>ScadaSymbolContext</code> - <a href="${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/scada/scada-symbols-dev-guide/#scadasymbolcontext" target="_blank">Context</a> of the SCADA symbol.
</li>
<li><b>element:</b> <code>Element</code> - SVG element.<br>
See <a href="https://svgjs.dev/docs/3.2/manipulating/">Manipulating</a> section to manipulate the element.<br>
See <a href="https://svgjs.dev/docs/3.2/animating/">Animating</a> section to animate the element.
<li><b>element:</b> <code>Element</code> - <a href="https://svgjs.dev/docs/3.2/getting-started/" target="_blank">SVG.js</a> element.<br>
See the examples below to learn how to <a href="https://svgjs.dev/docs/3.2/manipulating/" target="_blank">manipulate</a> and <a href="${siteBaseUrl}/docs${docPlatformPrefix}/user-guide/scada/scada-symbols-dev-guide/#scadasymbolanimation" target="_blank">animate</a> elements.<br>
</li>
</ul>
@ -22,6 +21,46 @@ A JavaScript function used to render SCADA symbol element with specific tag.
##### Examples
<br>
* Change the background of the element based on the value of the “active”
TODO
```javascript
if(ctx.values.active){
element.attr({fill: ctx.properties.activeColor});
} else {
element.attr({fill: ctx.properties.inactiveColor});
}
{:copy-code}
```
* Enable and disable the “On” button based on the state of the "active" (avoid or prevent click action)
```javascript
if (ctx.values.active) {
ctx.api.disable(element);
} else {
ctx.api.enable(element);
}
{:copy-code}
```
* Smooth infinite rotation animation based on the value of the “active” with speed based on the value of the “speed”
```javascript
var on = ctx.values.active;
var speed = ctx.values.speed ? ctx.values.speed / 60 : 1;
var animation = ctx.api.cssAnimation(element);
if (on) {
if (!animation) {
animation = ctx.api.cssAnimate(element, 2000)
.rotate(360).loop().speed(speed);
} else {
animation.speed(speed).play();
}
} else {
if (animation) {
animation.pause();
}
}
{:copy-code}
```