Weather Element: The image does not display on the player (#2914)

relates to xibosignage/xibo#3524 - Also includes a fix for onTemplateRender, to target the right container and pass the items as data
xibosignage · Feb 17, 2025 · f344c01 · f344c01
1 parent cd8777f
commit f344c01
Show file tree

Hide file tree

Showing 8 changed files with 113 additions and 30 deletions.
diff --git a/lib/Controller/Widget.php b/lib/Controller/Widget.php
@@ -1775,6 +1775,15 @@ public function saveElements(Request $request, Response $response, $id)
                 } else {
                     $isMediaOnlyWidget = false;
                 }
+
+                // Temporary workaround to process properties from the mediaSelector component when used by elements
+                foreach ($element['properties'] ?? [] as $property) {
+                    if (!empty($property['mediaId'])) {
+                        $mediaId = intval($property['mediaId']);
+                        $widget->assignMedia($mediaId);
+                        $newMediaIds[] = $mediaId;
+                    }
+                }
             }
         }
 

diff --git a/lib/Xmds/Soap.php b/lib/Xmds/Soap.php
@@ -1094,8 +1094,12 @@ protected function doRequiredFiles(
 
                 // Add to paths added
                 $pathsAdded[] = $layoutId;
+            } catch (NotFoundException) {
+                $this->getLog()->error('Layout not found - ID: ' . $layoutId . ', skipping');
+                continue;
             } catch (GeneralException $e) {
-                $this->getLog()->error('Layout not found - ID: ' . $layoutId . ', skipping.');
+                $this->getLog()->error('Cannot generate layout - ID: ' . $layoutId
+                    . ', skipping, e = ' . $e->getMessage());
                 continue;
             }
         }

diff --git a/...tio/elements/vector_backgrounds/windy.png → ...ments/vector_backgrounds/vector-windy.png b/...tio/elements/vector_backgrounds/windy.png → ...ments/vector_backgrounds/vector-windy.png
diff --git a/modules/src/xibo-player.js b/modules/src/xibo-player.js
@@ -1469,8 +1469,8 @@ XiboPlayer.prototype.renderGlobalElements = function(currentWidget) {
             (groupItem.onTemplateRender() !== undefined) &&
             groupItem.onTemplateRender()(
               groupItem.elementId,
-              $content.find(`#${itemID}`),
-              $content.find(`.${itemID}--item`),
+              $content.find(`#${itemID}`).parent(),
+              {},
               {groupItem, ...groupItem.templateData, data: {}},
               meta,
             );
@@ -1509,8 +1509,8 @@ XiboPlayer.prototype.renderGlobalElements = function(currentWidget) {
         (elemObj.onTemplateRender() !== undefined) &&
           elemObj.onTemplateRender()(
             elemObj.elementId,
-            $content.find(`#${itemID}`),
-            $content.find(`.${itemID}--item`),
+            $content.find(`#${itemID}`).parent(),
+            {},
             {elemObj, ...elemObj.templateData, data: {}},
             meta,
           );

diff --git a/modules/src/xibo-text-scaler.js b/modules/src/xibo-text-scaler.js
@@ -23,6 +23,7 @@ jQuery.fn.extend({
     // Default options
     const defaults = {
       fitTarget: '',
+      fontFamily: '',
       fitScaleAxis: 'x',
       isIcon: false,
     };
@@ -54,7 +55,8 @@ jQuery.fn.extend({
       };
 
       if (options.isIcon) {
-        const fontFamily = $fitTarget.css('font-family');
+        const fontFamily = (options.fontFamily) ?
+          options.fontFamily : $fitTarget.css('font-family');
         const maxFontSize = 1000;
         let fontSize = 1;
 

diff --git a/modules/templates/forecast-elements.xml b/modules/templates/forecast-elements.xml
@@ -415,9 +415,44 @@ if(properties.fitToArea) {
         <stencil>
             <hbs><![CDATA[
 <div class="global-elements-image img-container forecast-elements-background-image weather-bg--{{data.icon}}"
+    data-asset-bg-cloudy="[[assetId=bg-cloudy]]"
+    data-asset-bg-partly-cloudy-day="[[assetId=bg-partly-cloudy-day]]"
+    data-asset-bg-clear-day="[[assetId=bg-clear-day]]"
+    data-asset-bg-fog="[[assetId=bg-fog]]"
+    data-asset-bg-sleet="[[assetId=bg-sleet]]"
+    data-asset-bg-clear-night="[[assetId=bg-clear-night]]"
+    data-asset-bg-partly-cloudy-night="[[assetId=bg-partly-cloudy-night]]"
+    data-asset-bg-rain="[[assetId=bg-rain]]"
+    data-asset-bg-snow="[[assetId=bg-snow]]"
+    data-asset-bg-wind="[[assetId=bg-wind]]"
+    data-asset-forecast-current-2-cloudy="[[assetId=forecast-current-2-cloudy]]"
+    data-asset-forecast-current-2-partly-cloudy-day="[[assetId=forecast-current-2-partly-cloudy-day]]"
+    data-asset-forecast-current-2-clear-day="[[assetId=forecast-current-2-clear-day]]"
+    data-asset-forecast-current-2-fog="[[assetId=forecast-current-2-fog]]"
+    data-asset-forecast-current-2-sleet="[[assetId=forecast-current-2-sleet]]"
+    data-asset-forecast-current-2-clear-night="[[assetId=forecast-current-2-clear-night]]"
+    data-asset-forecast-current-2-partly-cloudy-night="[[assetId=forecast-current-2-partly-cloudy-night]]"
+    data-asset-forecast-current-2-rain="[[assetId=forecast-current-2-rain]]"
+    data-asset-forecast-current-2-snow="[[assetId=forecast-current-2-snow]]"
+    data-asset-forecast-current-2-wind="[[assetId=forecast-current-2-wind]]"
+    data-asset-forecast-3d-cloudy="[[assetId=forecast-3d-cloudy]]"
+    data-asset-forecast-3d-partly-cloudy-day="[[assetId=forecast-3d-partly-cloudy-day]]"
+    data-asset-forecast-3d-clear-day="[[assetId=forecast-3d-clear-day]]"
+    data-asset-forecast-3d-fog="[[assetId=forecast-3d-fog]]"
+    data-asset-forecast-3d-sleet="[[assetId=forecast-3d-sleet]]"
+    data-asset-forecast-3d-clear-night="[[assetId=forecast-3d-clear-night]]"
+    data-asset-forecast-3d-partly-cloudy-night="[[assetId=forecast-3d-partly-cloudy-night]]"
+    data-asset-forecast-3d-rain="[[assetId=forecast-3d-rain]]"
+    data-asset-forecast-3d-snow="[[assetId=forecast-3d-snow]]"
+    data-asset-forecast-3d-wind="[[assetId=forecast-3d-wind]]"
+    data-icon-id="{{data.icon}}"
+    data-icon-prefix="{{iconPrefix}}"
     style="width:100%; height: 100%; overflow: hidden; position: relative;">
     {{set 'bgImg' (weatherBackgroundImage data.icon cloudyImage dayCloudyImage dayClearImage fogImage hailImage nightClearImage nightPartlyCloudyImage rainImage snowImage windImage)}}
-    <img src="{{#if @root.bgImg}}{{@root.bgImg}}{{else}}[[assetId={{iconPrefix}}{{data.icon}}]]{{/if}}"
+    <img src="{{#if @root.bgImg}}{{@root.bgImg}}{{else}}data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGNiYAAAAAkAAxkR2eQAAAAASUVORK5CYII={{/if}}"
+        {{#unless @root.bgImg}}
+            data-needs-replacement="1"
+        {{/unless}}
         style="width:100%; height: 100%;
         object-fit: {{objectFit}};
         object-position: {{alignId}} {{valignId}};
@@ -431,6 +466,32 @@ if(properties.fitToArea) {
 </div>
             ]]></hbs>
         </stencil>
+        <onTemplateRender><![CDATA[
+// Get respective data image
+let $imageContainer = $(target).find('.global-elements-image');
+
+if($imageContainer.length <= 0) {
+    return;
+}
+
+if ($imageContainer.find('img').data('needs-replacement') == 1) {
+    let iconPrefix = $imageContainer.data('icon-prefix');
+    let iconId = $imageContainer.data('icon-id');
+    let iconAssetURL = $imageContainer.data('asset-' + iconPrefix + iconId);
+
+    // Replace src in image
+    $imageContainer.find('img').attr('src', iconAssetURL);
+}
+
+// Clear attributes
+Object.values($imageContainer[0].attributes).forEach(function(attr) {
+   if(attr.name.startsWith('data-asset-')) {
+       $imageContainer.removeAttr(attr.name);
+   }
+});
+$imageContainer.removeAttr('data-icon-id data-icon-prefix');
+$imageContainer.find('img').removeAttr('data-needs-replacement');
+        ]]></onTemplateRender>
         <assets>
             <asset id="bg-cloudy" type="path" mimeType="image/jpeg" path="/modules/assets/forecastio/wi-cloudy.jpg"></asset>
             <asset id="bg-partly-cloudy-day" type="path" mimeType="image/jpeg" path="/modules/assets/forecastio/wi-day-cloudy.jpg"></asset>
@@ -442,6 +503,26 @@ if(properties.fitToArea) {
             <asset id="bg-rain" type="path" mimeType="image/jpeg" path="/modules/assets/forecastio/wi-rain.jpg"></asset>
             <asset id="bg-snow" type="path" mimeType="image/jpeg" path="/modules/assets/forecastio/wi-snow.jpg"></asset>
             <asset id="bg-wind" type="path" mimeType="image/jpeg" path="/modules/assets/forecastio/wi-windy.jpg"></asset>
+            <asset id="forecast-current-2-cloudy" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/vector_backgrounds/vector-cloudy.png"></asset>
+            <asset id="forecast-current-2-partly-cloudy-day" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/vector_backgrounds/vector-cloudy.png"></asset>
+            <asset id="forecast-current-2-clear-day" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/vector_backgrounds/vector-day-sunny.png"></asset>
+            <asset id="forecast-current-2-fog" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/vector_backgrounds/vector-fog.png"></asset>
+            <asset id="forecast-current-2-sleet" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/vector_backgrounds/vector-hail.png"></asset>
+            <asset id="forecast-current-2-clear-night" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/vector_backgrounds/vector-night-clear.png"></asset>
+            <asset id="forecast-current-2-partly-cloudy-night" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/vector_backgrounds/vector-night-partly-cloudy.png"></asset>
+            <asset id="forecast-current-2-rain" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/vector_backgrounds/vector-rain.png"></asset>
+            <asset id="forecast-current-2-snow" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/vector_backgrounds/vector-snow.png"></asset>
+            <asset id="forecast-current-2-wind" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/vector_backgrounds/vector-windy.png"></asset>
+            <asset id="forecast-3d-cloudy" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/3d_icons/3d-cloudy.png"></asset>
+            <asset id="forecast-3d-partly-cloudy-day" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/3d_icons/3d-cloudy.png"></asset>
+            <asset id="forecast-3d-clear-day" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/3d_icons/3d-day-sunny.png"></asset>
+            <asset id="forecast-3d-fog" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/3d_icons/3d-fog.png"></asset>
+            <asset id="forecast-3d-sleet" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/3d_icons/3d-hail.png"></asset>
+            <asset id="forecast-3d-clear-night" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/3d_icons/3d-night-clear.png"></asset>
+            <asset id="forecast-3d-partly-cloudy-night" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/3d_icons/3d-night-partly-cloudy.png"></asset>
+            <asset id="forecast-3d-rain" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/3d_icons/3d-rain.png"></asset>
+            <asset id="forecast-3d-snow" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/3d_icons/3d-snow.png"></asset>
+            <asset id="forecast-3d-wind" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/3d_icons/3d-windy.png"></asset>
         </assets>
     </template>
     <template>
@@ -970,16 +1051,6 @@ $(target).find('.date').each(function(_idx, dateEl){
         </stencil>
         <assets>
             <asset id="forecast-current-2" type="path" cmsOnly="true" mimeType="image/png" path="/modules/assets/template-thumbnails/forecast/elements/forecast-current-2.png" />
-            <asset id="forecast-current-2-cloudy" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/vector_backgrounds/vector-cloudy.png"></asset>
-            <asset id="forecast-current-2-partly-cloudy-day" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/vector_backgrounds/vector-cloudy.png"></asset>
-            <asset id="forecast-current-2-clear-day" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/vector_backgrounds/vector-day-sunny.png"></asset>
-            <asset id="forecast-current-2-fog" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/vector_backgrounds/vector-fog.png"></asset>
-            <asset id="forecast-current-2-sleet" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/vector_backgrounds/vector-hail.png"></asset>
-            <asset id="forecast-current-2-clear-night" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/vector_backgrounds/vector-night-clear.png"></asset>
-            <asset id="forecast-current-2-partly-cloudy-night" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/vector_backgrounds/vector-night-partly-cloudy.png"></asset>
-            <asset id="forecast-current-2-rain" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/vector_backgrounds/vector-rain.png"></asset>
-            <asset id="forecast-current-2-snow" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/vector_backgrounds/vector-snow.png"></asset>
-            <asset id="forecast-current-2-wind" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/vector_backgrounds/vector-windy.png"></asset>
         </assets>
     </template>
     <template>
@@ -1255,16 +1326,6 @@ $(target).find('.date').each(function(_idx, dateEl){
         </stencil>
         <assets>
             <asset id="forecast-current-4" type="path" cmsOnly="true" mimeType="image/png" path="/modules/assets/template-thumbnails/forecast/elements/forecast-current-4.png" />
-            <asset id="forecast-3d-cloudy" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/3d_icons/3d-cloudy.png"></asset>
-            <asset id="forecast-3d-partly-cloudy-day" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/3d_icons/3d-cloudy.png"></asset>
-            <asset id="forecast-3d-clear-day" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/3d_icons/3d-day-sunny.png"></asset>
-            <asset id="forecast-3d-fog" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/3d_icons/3d-fog.png"></asset>
-            <asset id="forecast-3d-sleet" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/3d_icons/3d-hail.png"></asset>
-            <asset id="forecast-3d-clear-night" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/3d_icons/3d-night-clear.png"></asset>
-            <asset id="forecast-3d-partly-cloudy-night" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/3d_icons/3d-night-partly-cloudy.png"></asset>
-            <asset id="forecast-3d-rain" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/3d_icons/3d-rain.png"></asset>
-            <asset id="forecast-3d-snow" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/3d_icons/3d-snow.png"></asset>
-            <asset id="forecast-3d-wind" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/3d_icons/3d-windy.png"></asset>
         </assets>
     </template>
 </templates>
diff --git a/ui/src/editor-core/widget.js b/ui/src/editor-core/widget.js
@@ -474,10 +474,17 @@ const Widget = function(id, data, regionId = null, layoutObject = null) {
       if (element.properties != undefined) {
         element.properties =
           Object.values(element.properties).map((property) => {
-            return {
+            const propertyToSave = {
               id: property.id,
               value: property.value,
             };
+
+            // For media selector, save value also as mediaId
+            if (property.type === 'mediaSelector' && property.value != '') {
+              propertyToSave.mediaId = property.value;
+            }
+
+            return propertyToSave;
           });
       }
 

diff --git a/ui/src/helpers/player-helper.js b/ui/src/helpers/player-helper.js
@@ -335,8 +335,8 @@ const PlayerHelper = function() {
       // Handle the rendering of the template
       (item.onTemplateRender() !== undefined) && item.onTemplateRender()(
         item.elementId,
-        $itemContainer.find(`.${itemID}--item`),
-        $content.find(`.${itemID}--item`),
+        $itemContainer.find(`.${itemID}--item`).parent(),
+        dataItem,
         {item, ...item.templateData, data: dataItem},
         meta,
       );