From b128650ef9415730cc55c527114df90494142fd5 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Wed, 9 Apr 2025 11:01:28 +0300
Subject: [PATCH] UI: Updated shape image fill image function example. Improved
 this example popover style

---
 ...marker-image-settings-panel.component.html |  3 ++-
 ...e-fill-image-settings-panel.component.html |  3 ++-
 .../widget/lib/map/shape_fill_image_fn.md     | 25 +++++++++++++++++--
 3 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/marker-image-settings-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/marker-image-settings-panel.component.html
index ff06899a8b..d889f96ee7 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/marker-image-settings-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/marker-image-settings-panel.component.html
@@ -46,7 +46,8 @@
                   [functionArgs]="['data', 'images', 'dsData']"
                   [globalVariables]="functionScopeVariables"
                   functionTitle="{{ 'widgets.maps.data-layer.marker.marker-image-function' | translate }}"
-                  helpId="widget/lib/map/marker_image_fn">
+                  helpId="widget/lib/map/marker_image_fn"
+                  [helpPopupStyle]="{width: '900px'}">
       </tb-js-func>
       <tb-multiple-gallery-image-input label="{{ 'widgets.maps.data-layer.marker.marker-images' | translate }}"
                                        formControlName="images">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/shape-fill-image-settings-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/shape-fill-image-settings-panel.component.html
index 19c83d1270..660f43a75d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/shape-fill-image-settings-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/shape-fill-image-settings-panel.component.html
@@ -58,7 +58,8 @@
                   [functionArgs]="['data', 'images', 'dsData']"
                   [globalVariables]="functionScopeVariables"
                   functionTitle="{{ 'widgets.maps.data-layer.shape.fill-image-function' | translate }}"
-                  helpId="widget/lib/map/shape_fill_image_fn">
+                  helpId="widget/lib/map/shape_fill_image_fn"
+                  [helpPopupStyle]="{width: '900px'}">
       </tb-js-func>
       <tb-multiple-gallery-image-input label="{{ 'widgets.maps.data-layer.shape.fill-images' | translate }}"
                                        formControlName="images">
diff --git a/ui-ngx/src/assets/help/en_US/widget/lib/map/shape_fill_image_fn.md b/ui-ngx/src/assets/help/en_US/widget/lib/map/shape_fill_image_fn.md
index b13d612c8e..c6ea2e1ae6 100644
--- a/ui-ngx/src/assets/help/en_US/widget/lib/map/shape_fill_image_fn.md
+++ b/ui-ngx/src/assets/help/en_US/widget/lib/map/shape_fill_image_fn.md
@@ -39,12 +39,33 @@ In case no data is returned, default fill image will be used.
 
 <ul>
 <li>
-TODO:
+Calculate image URL and rotation angle depending on <code>windSpeed</code> and <code>windDirection</code> telemetry values for a <code>weather station</code> device type.<br/>
+Let's assume 3 images are defined in the Shape fill images section. Each image corresponds to a particular wind speed level: low (e.g., <5 m/s), medium (e.g., 5-15 m/s), and high (e.g., >15 m/s).
 </li>
 </ul>
 
 ```javascript
-TODO:
+const type = data.Type;
+if (type === 'weather station') {
+  const result = {
+    url: images[0],
+    opacity: 0.8,
+    angle: 0
+  };
+  const windSpeed = data.windSpeed;
+  const windDirection = data.windDirection;
+  if (typeof windSpeed !== 'undefined' && typeof windDirection !== 'undefined') {
+    if (windSpeed < 5) {
+      result.url = images[0];
+    } else if (windSpeed < 15) {
+      result.url = images[1];
+    } else {
+      result.url = images[2];
+    }
+    result.angle = windDirection;
+  }
+  return result;
+}
 {:copy-code}
 ```