From 677aaa386e74e68f08b1d879a65cb0276484b02b Mon Sep 17 00:00:00 2001
From: Artem Dzhereleiko <Dgerik2015@gmail.com>
Date: Wed, 25 Sep 2024 11:56:26 +0300
Subject: [PATCH 1/2] UI: Add help for Scada system

---
 .../en_US/scada/symbol_state_render_fn.md     | 36 +++++++++++--
 .../help/en_US/scada/tag_click_action_fn.md   | 23 +++++++--
 .../help/en_US/scada/tag_state_render_fn.md   | 50 +++++++++++++++++--
 3 files changed, 95 insertions(+), 14 deletions(-)

diff --git a/ui-ngx/src/assets/help/en_US/scada/symbol_state_render_fn.md b/ui-ngx/src/assets/help/en_US/scada/symbol_state_render_fn.md
index bdb0d45234..7270066f80 100644
--- a/ui-ngx/src/assets/help/en_US/scada/symbol_state_render_fn.md
+++ b/ui-ngx/src/assets/help/en_US/scada/symbol_state_render_fn.md
@@ -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}
+```
diff --git a/ui-ngx/src/assets/help/en_US/scada/tag_click_action_fn.md b/ui-ngx/src/assets/help/en_US/scada/tag_click_action_fn.md
index 26ec4f9bb3..54552d9455 100644
--- a/ui-ngx/src/assets/help/en_US/scada/tag_click_action_fn.md
+++ b/ui-ngx/src/assets/help/en_US/scada/tag_click_action_fn.md
@@ -10,11 +10,11 @@ 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.
+        See <a href="https://svgjs.dev/docs/3.2/manipulating/" target="_blank">Manipulating</a> section to manipulate the element.<br>
+        See <a href="https://svgjs.dev/docs/3.2/animating/" target="_blank">Animating</a> section to animate the element.
   </li>
   <li><b>event:</b> <code>Event</code> - DOM event.
   </li>
@@ -24,6 +24,19 @@ A JavaScript function invoked when user clicks on SVG element with specific tag.
 
 ##### Examples
 
-<br>
+* Set new value action
 
-TODO
+```javascript
+var active = ctx.values.active;
+var action = active ? 'inactive' : 'active';
+
+ctx.api.callAction(event, action, undefined, {
+  next: () => {
+    ctx.api.setValue('activate', !active);
+  },
+  error: () => {
+    ctx.api.setValue('activate', active);
+  }
+});
+{:copy-code}
+```
diff --git a/ui-ngx/src/assets/help/en_US/scada/tag_state_render_fn.md b/ui-ngx/src/assets/help/en_US/scada/tag_state_render_fn.md
index caed8060d4..8d356281f4 100644
--- a/ui-ngx/src/assets/help/en_US/scada/tag_state_render_fn.md
+++ b/ui-ngx/src/assets/help/en_US/scada/tag_state_render_fn.md
@@ -10,11 +10,11 @@ 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.
+        See <a href="https://svgjs.dev/docs/3.2/manipulating/" target="_blank">Manipulating</a> section to manipulate the element.<br>
+        See <a href="https://svgjs.dev/docs/3.2/animating/" target="_blank">Animating</a> section to animate the element.
   </li>
 </ul>
 
@@ -22,6 +22,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}
+```

From dd6b8c0c562ba9cfa5c2ea28c75b93fb8b465f79 Mon Sep 17 00:00:00 2001
From: Artem Dzhereleiko <Dgerik2015@gmail.com>
Date: Wed, 25 Sep 2024 16:01:33 +0300
Subject: [PATCH 2/2] UI: Refactoring

---
 .../help/en_US/scada/tag_click_action_fn.md     | 17 ++++++++++++-----
 .../help/en_US/scada/tag_state_render_fn.md     |  5 ++---
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/ui-ngx/src/assets/help/en_US/scada/tag_click_action_fn.md b/ui-ngx/src/assets/help/en_US/scada/tag_click_action_fn.md
index 54552d9455..2ff6b87569 100644
--- a/ui-ngx/src/assets/help/en_US/scada/tag_click_action_fn.md
+++ b/ui-ngx/src/assets/help/en_US/scada/tag_click_action_fn.md
@@ -12,9 +12,8 @@ A JavaScript function invoked when user clicks on SVG element with specific tag.
 <ul>
   <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/" target="_blank">Manipulating</a> section to manipulate the element.<br>
-        See <a href="https://svgjs.dev/docs/3.2/animating/" target="_blank">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>
@@ -26,15 +25,23 @@ A JavaScript function invoked when user clicks on SVG element with specific tag.
 
 * Set new value action
 
+*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 ? 'inactive' : 'active';
+var action = active ? 'turnOn' : 'turnOff';
 
-ctx.api.callAction(event, action, undefined, {
+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);
   }
 });
diff --git a/ui-ngx/src/assets/help/en_US/scada/tag_state_render_fn.md b/ui-ngx/src/assets/help/en_US/scada/tag_state_render_fn.md
index 8d356281f4..c16ad96c58 100644
--- a/ui-ngx/src/assets/help/en_US/scada/tag_state_render_fn.md
+++ b/ui-ngx/src/assets/help/en_US/scada/tag_state_render_fn.md
@@ -12,9 +12,8 @@ A JavaScript function used to render SCADA symbol element with specific tag.
 <ul>
   <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/" target="_blank">Manipulating</a> section to manipulate the element.<br>
-        See <a href="https://svgjs.dev/docs/3.2/animating/" target="_blank">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>