Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 2 commits into from
Feb 17, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
995296a
Weather Element: The image does not display on the player
maurofmferrao Feb 13, 2025
9a1cce1
Weather: incorrect path for asset, relates to xibosignage/xibo#3524
dasgarner Feb 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions lib/Controller/Widget.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}
}

Expand Down
6 changes: 5 additions & 1 deletion lib/Xmds/Soap.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
Expand Down
0 ...tio/elements/vector_backgrounds/windy.png → ...ments/vector_backgrounds/vector-windy.png
View file
Open in desktop
File renamed without changes
8 changes: 4 additions & 4 deletions modules/src/xibo-player.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
);
Expand Down Expand Up @@ -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,
);
Expand Down
4 changes: 3 additions & 1 deletion modules/src/xibo-text-scaler.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ jQuery.fn.extend({
// Default options
const defaults = {
fitTarget: '',
fontFamily: '',
fitScaleAxis: 'x',
isIcon: false,
};
Expand Down Expand Up @@ -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;

Expand Down
103 changes: 82 additions & 21 deletions modules/templates/forecast-elements.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}};
Expand All @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
9 changes: 8 additions & 1 deletion ui/src/editor-core/widget.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
});
}

Expand Down
4 changes: 2 additions & 2 deletions ui/src/helpers/player-helper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
);
Expand Down