Files
Cloud-CMS/modules/templates/forecast-elements.xml
Matt Batchelder 05ce0da296 Initial Upload
2025-12-02 10:32:59 -05:00

1335 lines
60 KiB
XML

<!--
~ Copyright (C) 2024 Xibo Signage Ltd
~
~ Xibo - Digital Signage - https://xibosignage.com
~
~ This file is part of Xibo.
~
~ Xibo is free software: you can redistribute it and/or modify
~ it under the terms of the GNU Affero General Public License as published by
~ the Free Software Foundation, either version 3 of the License, or
~ any later version.
~
~ Xibo is distributed in the hope that it will be useful,
~ but WITHOUT ANY WARRANTY; without even the implied warranty of
~ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
~ GNU Affero General Public License for more details.
~
~ You should have received a copy of the GNU Affero General Public License
~ along with Xibo. If not, see <http://www.gnu.org/licenses/>.
-->
<templates>
<template>
<id>weather_summary</id>
<extends override="text" with="data.summary">text</extends>
<title>Summary</title>
<type>element</type>
<dataType>forecast</dataType>
<canRotate>true</canRotate>
<icon>fa fa-font</icon>
<startWidth>360</startWidth>
<startHeight>100</startHeight>
</template>
<template>
<id>weather_location</id>
<extends override="text" with="data.location">text</extends>
<title>Location</title>
<type>element</type>
<dataType>forecast</dataType>
<canRotate>true</canRotate>
<icon>fa fa-map</icon>
<startWidth>360</startWidth>
<startHeight>100</startHeight>
</template>
<template>
<id>weather_temperature</id>
<extends override="text" with="data.temperatureRound" escapeHtml="false">text</extends>
<title>Temperature</title>
<type>element</type>
<dataType>forecast</dataType>
<canRotate>true</canRotate>
<icon>fas fa-thermometer-half</icon>
<startWidth>150</startWidth>
<startHeight>150</startHeight>
<onElementParseData><![CDATA[
// value - element to be parsed
if (String(value).length === 0) {
return '';
}
if (properties.data && properties.data.temperatureUnit) {
var temperatureUnit = properties.data.temperatureUnit;
if (String(value).includes('°' + temperatureUnit)) {
return value;
}
return value + '<sup>°' + temperatureUnit + '</sup>';
}
]]></onElementParseData>
</template>
<template>
<id>weather_min_temperature</id>
<extends override="text" with="data.temperatureMinRound" escapeHtml="false">text</extends>
<title>Min. Temperature</title>
<type>element</type>
<dataType>forecast</dataType>
<canRotate>true</canRotate>
<icon>fas fa-thermometer-empty</icon>
<startWidth>150</startWidth>
<startHeight>150</startHeight>
<onElementParseData><![CDATA[
// value - element to be parsed
if (String(value).length === 0) {
return '';
}
if (properties.data && properties.data.temperatureUnit) {
var temperatureUnit = properties.data.temperatureUnit;
if (String(value).includes('°' + temperatureUnit)) {
return value;
}
return value + '<sup>°' + temperatureUnit + '</sup>';
}
]]></onElementParseData>
</template>
<template>
<id>weather_max_temperature</id>
<extends override="text" with="data.temperatureMaxRound" escapeHtml="false">text</extends>
<title>Max. Temperature</title>
<type>element</type>
<dataType>forecast</dataType>
<canRotate>true</canRotate>
<icon>fas fa-thermometer-full</icon>
<startWidth>150</startWidth>
<startHeight>150</startHeight>
<onElementParseData><![CDATA[
// value - element to be parsed
if (String(value).length === 0) {
return '';
}
if (properties.data && properties.data.temperatureUnit) {
var temperatureUnit = properties.data.temperatureUnit;
if (String(value).includes('°' + temperatureUnit)) {
return value;
}
return value + '<sup>°' + temperatureUnit + '</sup>';
}
]]></onElementParseData>
</template>
<template>
<id>weather_humidity_percent</id>
<extends override="text" with="data.humidityPercent" escapeHtml="false">text</extends>
<title>Humidity Percent</title>
<type>element</type>
<dataType>forecast</dataType>
<canRotate>true</canRotate>
<icon>fas fa-percentage</icon>
<startWidth>150</startWidth>
<startHeight>150</startHeight>
<onElementParseData><![CDATA[
// value - element to be parsed
if (String(value).length === 0) {
return '';
}
if (String(value).includes('%')) {
return value;
}
return value + '%';
]]></onElementParseData>
</template>
<template>
<id>weather_icon</id>
<title>Icon</title>
<type>element</type>
<dataType>forecast</dataType>
<canRotate>true</canRotate>
<icon>fas fa-sun</icon>
<startWidth>100</startWidth>
<startHeight>100</startHeight>
<properties>
<property id="fontColor" type="color">
<title>Font Colour</title>
<default>%THEME_COLOR%</default>
</property>
<property id="fontSize" type="number">
<title>Font Size</title>
<default>40</default>
<visibility>
<test>
<condition field="fitToArea" type="neq">1</condition>
</test>
</visibility>
</property>
<property id="fitToArea" type="checkbox">
<title>Fit to selection</title>
<playerCompatibility tizen=""></playerCompatibility>
<helpText>Fit to selected area instead of using the font size?</helpText>
<default>0</default>
</property>
<property id="fontFamily" type="hidden">
<default>weathericons</default>
</property>
</properties>
<stencil>
<hbs><![CDATA[
<div class="forecast-elements-weather-icon" style="text-align: center; width: 100%; height: 100%;">
<i class="wi {{data.wicon}}" style="
{{#if fontSize}}font-size: {{fontSize}}px;{{/if}}
{{#if fontColor }}color: {{fontColor}};{{/if}}
position: relative;
top: 50%;
transform: translateY(-50%);
"></i>
</div>
]]></hbs>
<onTemplateRender><![CDATA[
if (properties.fitToArea) {
// Set target for the text
properties.fitTarget = 'i.wi';
// Set target for the text
properties.isIcon = true;
// Scale text to container
$(target).find('.forecast-elements-weather-icon').xiboTextScaler(properties);
}
]]></onTemplateRender>
</stencil>
<assets>
<asset id="weather-icons" type="path" mimeType="text/css" path="/modules/assets/forecastio/weather-icons.min.css"></asset>
<asset id="weathericons-regular-webfont.eot" type="path" mimeType="application/vnd.ms-fontobject" path="/modules/assets/forecastio/weathericons-regular-webfont.eot"></asset>
<asset id="weathericons-regular-webfont.svg" type="path" mimeType="image/svg+xml" path="/modules/assets/forecastio/weathericons-regular-webfont.svg"></asset>
<asset id="weathericons-regular-webfont.ttf" type="path" mimeType="application/x-font-ttf" path="/modules/assets/forecastio/weathericons-regular-webfont.ttf"></asset>
<asset id="weathericons-regular-webfont.woff" type="path" mimeType="application/font-woff" path="/modules/assets/forecastio/weathericons-regular-webfont.woff"></asset>
<asset id="weathericons-regular-webfont.woff2" type="path" mimeType="application/font-woff2" path="/modules/assets/forecastio/weathericons-regular-webfont.woff2"></asset>
<asset id="WeatherIcons-Regular.otf" type="path" mimeType="application/x-font-opentype" path="/modules/assets/forecastio/WeatherIcons-Regular.otf"></asset>
<asset id="wi-cloudy" type="path" mimeType="image/jpeg" path="/modules/assets/forecastio/wi-cloudy.jpg"></asset>
<asset id="wi-day-cloudy" type="path" mimeType="image/jpeg" path="/modules/assets/forecastio/wi-day-cloudy.jpg"></asset>
<asset id="wi-day-sunny" type="path" mimeType="image/jpeg" path="/modules/assets/forecastio/wi-day-sunny.jpg"></asset>
<asset id="wi-fog" type="path" mimeType="image/jpeg" path="/modules/assets/forecastio/wi-fog.jpg"></asset>
<asset id="wi-hail" type="path" mimeType="image/jpeg" path="/modules/assets/forecastio/wi-hail.jpg"></asset>
<asset id="wi-night-clear" type="path" mimeType="image/jpeg" path="/modules/assets/forecastio/wi-night-clear.jpg"></asset>
<asset id="wi-night-partly-cloudy" type="path" mimeType="image/jpeg" path="/modules/assets/forecastio/wi-night-partly-cloudy.jpg"></asset>
<asset id="wi-rain" type="path" mimeType="image/jpeg" path="/modules/assets/forecastio/wi-rain.jpg"></asset>
<asset id="wi-snow" type="path" mimeType="image/jpeg" path="/modules/assets/forecastio/wi-snow.jpg"></asset>
<asset id="wi-windy" type="path" mimeType="image/jpeg" path="/modules/assets/forecastio/wi-windy.jpg"></asset>
</assets>
</template>
<template>
<id>weather_wind_direction</id>
<extends override="text" with="data.windDirection">text</extends>
<title>Wind Direction</title>
<type>element</type>
<dataType>forecast</dataType>
<canRotate>true</canRotate>
<icon>fas fa-location-arrow</icon>
<startWidth>100</startWidth>
<startHeight>100</startHeight>
</template>
<template>
<id>weather_wind_speed</id>
<extends override="text" with="data.windSpeed">text</extends>
<title>Wind Speed</title>
<type>element</type>
<dataType>forecast</dataType>
<canRotate>true</canRotate>
<icon>fas fa-tachometer-alt</icon>
<startWidth>100</startWidth>
<startHeight>100</startHeight>
</template>
<template>
<id>weather_wind_speed_unit</id>
<extends override="text" with="data.windSpeedUnit">text</extends>
<title>Wind Speed Unit</title>
<type>element</type>
<dataType>forecast</dataType>
<canRotate>true</canRotate>
<icon>fas fa-wind</icon>
<startWidth>100</startWidth>
<startHeight>100</startHeight>
<properties>
<property id="useSlashForUnits" type="checkbox">
<title>Use Slash for Units</title>
<helpText>Use '/' instead of 'p' to represent units of measure (e.g., m/s instead of mps).</helpText>
<default>0</default>
</property>
</properties>
<onElementParseData><![CDATA[
// return empty string if there's no value
if (String(value).length === 0) {
return '';
}
// check if useSlashForUnits has been checked
if (properties.useSlashForUnits && properties.useSlashForUnits == 1) {
if (String(value) == 'MPH') {
value = value.replace('MPH', 'M/H');
} else if (String(value) == 'MPS') {
value = value.replace('MPS', 'M/S');
} else if (String(value) == 'KPH') {
value = value.replace('KPH', 'K/H');
}
}
return value;
]]></onElementParseData>
</template>
<template>
<id>weather_attribution</id>
<extends override="text" with="meta.Attribution">text</extends>
<title>Attribution</title>
<type>element</type>
<dataType>forecast</dataType>
<canRotate>true</canRotate>
<icon>fa fa-font</icon>
<startWidth>360</startWidth>
<startHeight>100</startHeight>
<onTemplateRender><![CDATA[
if (meta && meta.hasOwnProperty('Attribution')) {
var $childElem = $(target).is('.' + id + '--item') ? '> div:first-child' : '.global-elements-text > div:first-child';
$(target).find($childElem).html(meta.Attribution);
}
if(properties.fitToArea) {
// Set target for the text
properties.fitTarget = 'div';
// Scale text to container
$(target).find('.global-elements-text').xiboTextScaler(properties);
}
]]></onTemplateRender>
</template>
<template>
<id>weather_condition_background_image</id>
<title>Image</title>
<type>element</type>
<dataType>forecast</dataType>
<canRotate>true</canRotate>
<icon>fa fa-image</icon>
<startWidth>480</startWidth>
<startHeight>600</startHeight>
<properties>
<property id="roundBorder" type="checkbox">
<title>Round Border</title>
<default>0</default>
<helpText>Should the square have rounded corners?</helpText>
</property>
<property id="borderRadius" type="number">
<title>Border Radius</title>
<default>20</default>
<visibility>
<test type="and">
<condition field="roundBorder" type="eq">1</condition>
</test>
</visibility>
</property>
<property id="objectFit" type="dropdown" mode="single">
<title>Scale type</title>
<helpText>How should this image be scaled?</helpText>
<default>cover</default>
<options>
<option name="fill">Fill</option>
<option name="contain">Contain</option>
<option name="cover">Cover</option>
</options>
</property>
<property id="alignId" type="dropdown" mode="single">
<title>Horizontal Align</title>
<helpText>How should this image be aligned?</helpText>
<default>center</default>
<options>
<option name="left">Left</option>
<option name="center">Centre</option>
<option name="right">Right</option>
</options>
<visibility>
<test>
<condition field="objectFit" type="neq">fill</condition>
</test>
</visibility>
</property>
<property id="valignId" type="dropdown" mode="single">
<title>Vertical Align</title>
<helpText>How should this image be vertically aligned?</helpText>
<default>middle</default>
<options>
<option name="top">Top</option>
<option name="middle">Middle</option>
<option name="bottom">Bottom</option>
</options>
<visibility>
<test>
<condition field="objectFit" type="neq">fill</condition>
</test>
</visibility>
</property>
<property type="header" variant="main">
<title>Images</title>
<visibility>
<test>
<condition field="backgroundImage" type="neq">none</condition>
</test>
</visibility>
</property>
<property type="message">
<title>Select images from the media library to replace the default weather images.</title>
</property>
<property id="cloudyImage" type="mediaSelector">
<title>Cloudy</title>
</property>
<property id="dayCloudyImage" type="mediaSelector">
<title>Cloudy day</title>
</property>
<property id="dayClearImage" type="mediaSelector">
<title>Clear</title>
</property>
<property id="fogImage" type="mediaSelector">
<title>Fog</title>
</property>
<property id="hailImage" type="mediaSelector">
<title>Hail</title>
</property>
<property id="nightClearImage" type="mediaSelector">
<title>Clear night</title>
</property>
<property id="nightPartlyCloudyImage" type="mediaSelector">
<title>Cloudy night</title>
</property>
<property id="rainImage" type="mediaSelector">
<title>Raining</title>
</property>
<property id="snowImage" type="mediaSelector">
<title>Snowing</title>
</property>
<property id="windyImage" type="mediaSelector">
<title>Windy</title>
</property>
<property id="iconPrefix" type="hidden">
<default>bg-</default>
</property>
</properties>
<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}}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}};
position: absolute; top: 0; left: 0;
{{#if data.icon}}
{{#if roundBorder}}
{{#if borderRadius}}border-radius: {{borderRadius}}px;{{/if}}
{{/if}}
{{/if}}"
/>
</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>
<asset id="bg-clear-day" type="path" mimeType="image/jpeg" path="/modules/assets/forecastio/wi-day-sunny.jpg"></asset>
<asset id="bg-fog" type="path" mimeType="image/jpeg" path="/modules/assets/forecastio/wi-fog.jpg"></asset>
<asset id="bg-sleet" type="path" mimeType="image/jpeg" path="/modules/assets/forecastio/wi-hail.jpg"></asset>
<asset id="bg-clear-night" type="path" mimeType="image/jpeg" path="/modules/assets/forecastio/wi-night-clear.jpg"></asset>
<asset id="bg-partly-cloudy-night" type="path" mimeType="image/jpeg" path="/modules/assets/forecastio/wi-night-partly-cloudy.jpg"></asset>
<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>
<id>weather_date</id>
<extends override="date" with="data.time">date</extends>
<title>Date</title>
<type>element</type>
<dataType>forecast</dataType>
<canRotate>true</canRotate>
<icon>fas fa-calendar-week</icon>
<startWidth>420</startWidth>
<startHeight>100</startHeight>
<properties>
<property id="dateFormat" type="text" variant="dateFormat">
<title>Date Format</title>
<default>M d</default>
</property>
</properties>
<onTemplateRender><![CDATA[
// Match all affected elements and get date div value
$(target).find('.date').each(function(_idx, dateEl){
var dateValue = $(dateEl).data('date');
var weatherDate = moment.unix(dateValue);
// Check for lang config
if (properties.lang !== null && String(properties.lang).length > 0) {
weatherDate.locale(properties.lang);
}
// Format the date with the dateFormat property
var formattedDate = weatherDate.format(properties.dateFormat);
// Set the date div value to the formatted date
$(dateEl).html(formattedDate);
if (properties.fitToArea) {
// Set target for the text
properties.fitTarget = '.date';
// Scale text to container
$(target).find('.global-elements-date').xiboTextScaler(properties);
}
});
]]></onTemplateRender>
</template>
<template>
<id>weather_group_1</id>
<type>element-group</type>
<dataType>forecast</dataType>
<title>Forecast 1</title>
<thumbnail>forecast-group-1</thumbnail>
<stencil>
<hbs></hbs>
<startWidth>940</startWidth>
<startHeight>400</startHeight>
<elementGroups>
<elementGroup id="group_0">
<title>Group 0</title>
<top>0</top>
<left>0</left>
<layer>0</layer>
<width>940</width>
<height>400</height>
<slot>0</slot>
<pinSlot>1</pinSlot>
</elementGroup>
<elementGroup id="group_1">
<title>Group 1</title>
<top>25</top>
<left>20</left>
<layer>0</layer>
<width>300</width>
<height>350</height>
<slot>0</slot>
<pinSlot>1</pinSlot>
</elementGroup>
<elementGroup id="group_2">
<title>Group 2</title>
<top>120</top>
<left>320</left>
<layer>2</layer>
<width>200</width>
<height>160</height>
<slot>1</slot>
<pinSlot>1</pinSlot>
</elementGroup>
<elementGroup id="group_3">
<title>Group 3</title>
<top>120</top>
<left>520</left>
<layer>2</layer>
<width>200</width>
<height>160</height>
<slot>2</slot>
<pinSlot>1</pinSlot>
</elementGroup>
<elementGroup id="group_4">
<title>Group 4</title>
<top>120</top>
<left>720</left>
<layer>2</layer>
<width>200</width>
<height>160</height>
<slot>3</slot>
<pinSlot>1</pinSlot>
</elementGroup>
</elementGroups>
<elements>
<element id="rectangle" elementGroupId="group_0">
<title>Background</title>
<top>100</top>
<left>0</left>
<layer>1</layer>
<width>940</width>
<height>200</height>
<defaultProperties>
<property id="backgroundColor">rgba(84,103,228,0.8)</property>
<property id="outline">0</property>
<property id="roundBorder">1</property>
<property id="borderRadius">24</property>
</defaultProperties>
</element>
<element id="rectangle" elementGroupId="group_0">
<title>Day 1 Background</title>
<top>0</top>
<left>20</left>
<layer>0</layer>
<width>300</width>
<height>400</height>
<defaultProperties>
<property id="backgroundColor">rgba(0,0,0,0.7)</property>
<property id="roundBorder">1</property>
<property id="borderRadius">24</property>
<property id="outline">0</property>
</defaultProperties>
</element>
<element id="weather_date" elementGroupId="group_1">
<title>Date</title>
<top>0</top>
<left>0</left>
<layer>2</layer>
<width>300</width>
<height>55</height>
<defaultProperties>
<property id="fontColor">#f9f9f9</property>
<property id="fontSize">60</property>
<property id="bold">1</property>
<property id="lineHeight">1</property>
<property id="verticalAlign">flex-start</property>
</defaultProperties>
</element>
<element id="weather_icon" elementGroupId="group_1">
<title>Icon</title>
<top>100</top>
<left>0</left>
<layer>2</layer>
<width>300</width>
<height>80</height>
<defaultProperties>
<property id="fontColor">#f9f9f9</property>
<property id="fontSize">66</property>
</defaultProperties>
</element>
<element id="weather_temperature" elementGroupId="group_1">
<title>Temperature</title>
<top>175</top>
<left>0</left>
<layer>2</layer>
<width>300</width>
<height>80</height>
<defaultProperties>
<property id="fontFamily">aileron regular</property>
<property id="fontColor">#f9f9f9</property>
<property id="fontSize">60</property>
<property id="bold">1</property>
<property id="lineHeight">0.8</property>
<property id="verticalAlign">flex-end</property>
</defaultProperties>
</element>
<element id="weather_summary" elementGroupId="group_1">
<title>Summary</title>
<top>295</top>
<left>0</left>
<layer>2</layer>
<width>300</width>
<height>30</height>
<defaultProperties>
<property id="fontColor">#f9f9f9</property>
<property id="fontSize">32</property>
<property id="bold">1</property>
<property id="lineHeight">0.8</property>
<property id="verticalAlign">flex-start</property>
</defaultProperties>
</element>
<element id="weather_attribution" elementGroupId="group_1">
<title>Attribution</title>
<top>325</top>
<left>0</left>
<layer>2</layer>
<width>300</width>
<height>25</height>
<defaultProperties>
<property id="fontColor">#f9f9f9</property>
<property id="fontSize">16</property>
</defaultProperties>
</element>
<element id="weather_date" elementGroupId="group_2">
<title>Date</title>
<top>0</top>
<left>0</left>
<layer>2</layer>
<width>200</width>
<height>50</height>
<defaultProperties>
<property id="fontColor">#f9f9f9</property>
<property id="fontSize">32</property>
<property id="lineHeight">1</property>
<property id="verticalAlign">flex-start</property>
</defaultProperties>
</element>
<element id="weather_icon" elementGroupId="group_2">
<title>Icon</title>
<top>50</top>
<left>0</left>
<layer>2</layer>
<width>200</width>
<height>50</height>
<defaultProperties>
<property id="fontColor">#f9f9f9</property>
<property id="fontSize">40</property>
</defaultProperties>
</element>
<element id="weather_temperature" elementGroupId="group_2">
<title>Temperature</title>
<top>100</top>
<left>0</left>
<layer>2</layer>
<width>200</width>
<height>60</height>
<defaultProperties>
<property id="fontFamily">aileron regular</property>
<property id="fontColor">#f9f9f9</property>
<property id="fontSize">40</property>
<property id="bold">1</property>
<property id="lineHeight">1</property>
<property id="verticalAlign">flex-end</property>
</defaultProperties>
</element>
<element id="weather_date" elementGroupId="group_3">
<title>Date</title>
<top>0</top>
<left>0</left>
<layer>2</layer>
<width>200</width>
<height>50</height>
<defaultProperties>
<property id="fontColor">#f9f9f9</property>
<property id="fontSize">32</property>
<property id="lineHeight">1</property>
<property id="verticalAlign">flex-start</property>
</defaultProperties>
</element>
<element id="weather_icon" elementGroupId="group_3">
<title>Icon</title>
<top>50</top>
<left>0</left>
<layer>2</layer>
<width>200</width>
<height>50</height>
<defaultProperties>
<property id="fontColor">#f9f9f9</property>
<property id="fontSize">40</property>
</defaultProperties>
</element>
<element id="weather_temperature" elementGroupId="group_3">
<title>Temperature</title>
<top>100</top>
<left>0</left>
<layer>2</layer>
<width>200</width>
<height>60</height>
<defaultProperties>
<property id="fontFamily">aileron regular</property>
<property id="fontColor">#f9f9f9</property>
<property id="fontSize">40</property>
<property id="bold">1</property>
<property id="lineHeight">1</property>
<property id="verticalAlign">flex-end</property>
</defaultProperties>
</element>
<element id="weather_date" elementGroupId="group_4">
<title>Date</title>
<top>0</top>
<left>0</left>
<layer>2</layer>
<width>200</width>
<height>50</height>
<defaultProperties>
<property id="fontColor">#f9f9f9</property>
<property id="fontSize">32</property>
<property id="lineHeight">1</property>
<property id="verticalAlign">flex-start</property>
</defaultProperties>
</element>
<element id="weather_icon" elementGroupId="group_4">
<title>Icon</title>
<top>50</top>
<left>0</left>
<layer>2</layer>
<width>200</width>
<height>50</height>
<defaultProperties>
<property id="fontColor">#f9f9f9</property>
<property id="fontSize">40</property>
</defaultProperties>
</element>
<element id="weather_temperature" elementGroupId="group_4">
<title>Temperature</title>
<top>100</top>
<left>0</left>
<layer>2</layer>
<width>200</width>
<height>60</height>
<defaultProperties>
<property id="fontFamily">aileron regular</property>
<property id="fontColor">#f9f9f9</property>
<property id="fontSize">40</property>
<property id="bold">1</property>
<property id="lineHeight">1</property>
<property id="verticalAlign">flex-end</property>
</defaultProperties>
</element>
</elements>
</stencil>
<assets>
<asset id="forecast-group-1" type="path" cmsOnly="true" mimeType="image/png" path="/modules/assets/template-thumbnails/forecast/elements/forecast-group-1.png" />
</assets>
</template>
<template>
<id>weather_current_1</id>
<type>element-group</type>
<dataType>forecast</dataType>
<title>Daily 1</title>
<thumbnail>forecast-current-1</thumbnail>
<stencil>
<hbs></hbs>
<startWidth>380</startWidth>
<startHeight>380</startHeight>
<elements>
<element id="rectangle">
<title>Background</title>
<top>0</top>
<left>0</left>
<layer>0</layer>
<width>380</width>
<height>380</height>
<defaultProperties>
<property id="backgroundColor">#5ad0ff</property>
<property id="roundBorder">1</property>
<property id="borderRadius">24</property>
<property id="outline">0</property>
</defaultProperties>
</element>
<element id="rectangle">
<title>Temp area</title>
<top>131</top>
<left>0</left>
<layer>1</layer>
<width>380</width>
<height>126</height>
<defaultProperties>
<property id="backgroundColor">rgba(255,255,255,0.5)</property>
<property id="outline">0</property>
</defaultProperties>
</element>
<element id="line">
<title>Line top</title>
<top>97</top>
<left>0</left>
<layer>2</layer>
<width>380</width>
<height>68</height>
<defaultProperties>
<property id="lineWidth">2</property>
<property id="lineColor">#f9f9f9</property>
<property id="lineStyle">solid</property>
</defaultProperties>
</element>
<element id="line">
<title>Line top</title>
<top>223</top>
<left>0</left>
<layer>2</layer>
<width>380</width>
<height>68</height>
<defaultProperties>
<property id="lineWidth">2</property>
<property id="lineColor">#f9f9f9</property>
<property id="lineStyle">solid</property>
</defaultProperties>
</element>
<element id="weather_icon">
<title>Icon</title>
<top>19</top>
<left>77</left>
<layer>3</layer>
<width>225</width>
<height>90</height>
<defaultProperties>
<property id="fontColor">#f9f9f9</property>
<property id="fontSize">78</property>
</defaultProperties>
</element>
<element id="weather_summary">
<title>Summary</title>
<top>282</top>
<left>20</left>
<layer>3</layer>
<width>340</width>
<height>35</height>
<defaultProperties>
<property id="fontColor">#f9f9f9</property>
<property id="fontSize">32</property>
<property id="bold">1</property>
</defaultProperties>
</element>
<element id="weather_attribution">
<title>Attribution</title>
<top>332</top>
<left>20</left>
<layer>3</layer>
<width>340</width>
<height>28</height>
<defaultProperties>
<property id="fontColor">#f9f9f9</property>
<property id="fontSize">16</property>
</defaultProperties>
</element>
<element id="weather_temperature">
<title>Temperature</title>
<top>153</top>
<left>101</left>
<layer>3</layer>
<width>179</width>
<height>102</height>
<defaultProperties>
<property id="fontFamily">aileron regular</property>
<property id="fontColor">#04b1f5</property>
<property id="fontSize">80</property>
<property id="bold">1</property>
</defaultProperties>
</element>
</elements>
</stencil>
<assets>
<asset id="forecast-current-1" type="path" cmsOnly="true" mimeType="image/png" path="/modules/assets/template-thumbnails/forecast/elements/forecast-current-1.png" />
</assets>
</template>
<template>
<id>weather_current_2</id>
<type>element-group</type>
<dataType>forecast</dataType>
<title>Daily 2</title>
<thumbnail>forecast-current-2</thumbnail>
<stencil>
<hbs></hbs>
<startWidth>900</startWidth>
<startHeight>400</startHeight>
<elements>
<element id="weather_condition_background_image">
<title>Background</title>
<top>0</top>
<left>0</left>
<layer>0</layer>
<width>900</width>
<height>400</height>
<defaultProperties>
<property id="iconPrefix">forecast-current-2-</property>
<property id="roundBorder">1</property>
<property id="borderRadius">24</property>
<property id="outline">0</property>
</defaultProperties>
</element>
<element id="weather_summary">
<title>Summary</title>
<top>214</top>
<left>49</left>
<layer>3</layer>
<width>360</width>
<height>56</height>
<defaultProperties>
<property id="fontColor">#ffff</property>
<property id="fontSize">40</property>
<property id="horizontalAlign">flex-start</property>
<property id="bold">1</property>
</defaultProperties>
</element>
<element id="weather_attribution">
<title>Attribution</title>
<top>329</top>
<left>49</left>
<layer>3</layer>
<width>351</width>
<height>50</height>
<defaultProperties>
<property id="fontColor">#f9f9f9</property>
<property id="horizontalAlign">flex-start</property>
<property id="fontSize">24</property>
</defaultProperties>
</element>
<element id="weather_temperature">
<title>Temperature</title>
<top>71</top>
<left>49</left>
<layer>3</layer>
<width>220</width>
<height>126</height>
<defaultProperties>
<property id="fontColor">#fff</property>
<property id="fontSize">120</property>
<property id="horizontalAlign">flex-start</property>
<property id="bold">1</property>
</defaultProperties>
</element>
</elements>
</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" />
</assets>
</template>
<template>
<id>weather_current_3</id>
<type>element-group</type>
<dataType>forecast</dataType>
<title>Daily 3</title>
<thumbnail>forecast-current-3</thumbnail>
<stencil>
<hbs></hbs>
<startWidth>400</startWidth>
<startHeight>500</startHeight>
<elements>
<element id="rectangle">
<title>Background</title>
<top>0</top>
<left>0</left>
<layer>0</layer>
<width>400</width>
<height>500</height>
<defaultProperties>
<property id="backgroundColor">#865bff</property>
<property id="roundBorder">1</property>
<property id="borderRadius">24</property>
<property id="outline">0</property>
</defaultProperties>
</element>
<element id="rectangle">
<title>Temp area</title>
<top>234</top>
<left>0</left>
<layer>1</layer>
<width>400</width>
<height>68</height>
<defaultProperties>
<property id="backgroundColor">rgba(0,0,0,0.12)</property>
<property id="outline">0</property>
</defaultProperties>
</element>
<element id="line">
<title>Line left</title>
<top>354</top>
<left>100</left>
<layer>2</layer>
<width>44</width>
<height>59</height>
<rotation>90</rotation>
<defaultProperties>
<property id="lineWidth">2</property>
<property id="lineColor">#f9f9f9</property>
<property id="lineStyle">solid</property>
</defaultProperties>
</element>
<element id="line">
<title>Line right</title>
<top>354</top>
<left>256</left>
<layer>2</layer>
<width>44</width>
<height>59</height>
<rotation>90</rotation>
<defaultProperties>
<property id="lineWidth">2</property>
<property id="lineColor">#f9f9f9</property>
<property id="lineStyle">solid</property>
</defaultProperties>
</element>
<element id="weather_icon">
<title>Icon</title>
<top>100</top>
<left>80</left>
<layer>3</layer>
<width>237</width>
<height>140</height>
<defaultProperties>
<property id="fontColor">#f9f9f9</property>
<property id="fontSize">100</property>
</defaultProperties>
</element>
<element id="weather_summary">
<title>Summary</title>
<top>250</top>
<left>68</left>
<layer>3</layer>
<width>272</width>
<height>39</height>
<defaultProperties>
<property id="fontColor">#f9f9f9</property>
<property id="fontSize">32</property>
<property id="bold">1</property>
</defaultProperties>
</element>
<element id="weather_attribution">
<title>Attribution</title>
<top>436</top>
<left>51</left>
<layer>3</layer>
<width>296</width>
<height>32</height>
<defaultProperties>
<property id="fontColor">#f9f9f9</property>
<property id="fontSize">16</property>
</defaultProperties>
</element>
<element id="weather_temperature">
<title>Temperature</title>
<top>334</top>
<left>51</left>
<layer>3</layer>
<width>50</width>
<height>99</height>
<defaultProperties>
<property id="fontColor">#f9f9f9</property>
<property id="fontSize">24</property>
</defaultProperties>
</element>
<element id="weather_wind_speed">
<title>Wind Speed</title>
<top>335</top>
<left>136</left>
<layer>3</layer>
<width>61</width>
<height>100</height>
<defaultProperties>
<property id="fontColor">#f9f9f9</property>
<property id="fontSize">24</property>
</defaultProperties>
</element>
<element id="weather_wind_speed_unit">
<title>Wind Speed</title>
<top>335</top>
<left>206</left>
<layer>3</layer>
<width>56</width>
<height>100</height>
<defaultProperties>
<property id="fontColor">#f9f9f9</property>
<property id="fontSize">24</property>
</defaultProperties>
</element>
<element id="weather_humidity_percent">
<title>Humidity</title>
<top>334</top>
<left>297</left>
<layer>3</layer>
<width>50</width>
<height>102</height>
<defaultProperties>
<property id="fontColor">#f9f9f9</property>
<property id="fontSize">24</property>
</defaultProperties>
</element>
<element id="weather_date">
<title>Date</title>
<top>40</top>
<left>68</left>
<layer>3</layer>
<width>272</width>
<height>39</height>
<defaultProperties>
<property id="dateFormat">g:i A</property>
<property id="fontColor">#f9f9f9</property>
<property id="fontSize">32</property>
</defaultProperties>
</element>
<element id="global_image">
<title>Humidity Icon</title>
<top>320</top>
<left>307</left>
<layer>3</layer>
<width>32</width>
<height>33</height>
<defaultProperties>
<property id="assetId">icon-humidity</property>
</defaultProperties>
</element>
<element id="global_image">
<title>Wind Icon</title>
<top>320</top>
<left>180</left>
<layer>3</layer>
<width>32</width>
<height>32</height>
<defaultProperties>
<property id="assetId">icon-wind</property>
</defaultProperties>
</element>
<element id="global_image">
<title>Weather Icon</title>
<top>320</top>
<left>61</left>
<layer>3</layer>
<width>32</width>
<height>32</height>
<defaultProperties>
<property id="assetId">icon-weather</property>
</defaultProperties>
</element>
</elements>
</stencil>
<assets>
<asset id="forecast-current-3" type="path" cmsOnly="true" mimeType="image/png" path="/modules/assets/template-thumbnails/forecast/elements/forecast-current-3.png" />
<asset id="icon-humidity" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/icon_humidity.png"></asset>
<asset id="icon-weather" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/icon_weather.png"></asset>
<asset id="icon-wind" type="path" mimeType="image/png" path="/modules/assets/forecastio/elements/icon_wind.png"></asset>
</assets>
</template>
<template>
<id>weather_current_4</id>
<type>element-group</type>
<dataType>forecast</dataType>
<title>Daily 4</title>
<thumbnail>forecast-current-4</thumbnail>
<stencil>
<hbs></hbs>
<startWidth>500</startWidth>
<startHeight>440</startHeight>
<elements>
<element id="rectangle">
<title>Background</title>
<top>0</top>
<left>0</left>
<layer>0</layer>
<width>500</width>
<height>440</height>
<defaultProperties>
<property id="backgroundColor">#212121</property>
<property id="roundBorder">1</property>
<property id="borderRadius">24</property>
<property id="outline">0</property>
</defaultProperties>
</element>
<element id="weather_condition_background_image">
<title>Background</title>
<top>32</top>
<left>125</left>
<layer>0</layer>
<width>250</width>
<height>250</height>
<defaultProperties>
<property id="iconPrefix">forecast-3d-</property>
<property id="roundBorder">1</property>
<property id="borderRadius">24</property>
<property id="outline">0</property>
</defaultProperties>
</element>
<element id="weather_summary">
<title>Summary</title>
<top>296</top>
<left>49</left>
<layer>3</layer>
<width>407</width>
<height>76</height>
<defaultProperties>
<property id="fontColor">#ffff</property>
<property id="fontSize">40</property>
<property id="bold">1</property>
</defaultProperties>
</element>
<element id="weather_attribution">
<title>Attribution</title>
<top>358</top>
<left>74</left>
<layer>3</layer>
<width>351</width>
<height>50</height>
<defaultProperties>
<property id="fontColor">rgba(249,249,249,0.34)</property>
<property id="fontSize">20</property>
</defaultProperties>
</element>
</elements>
</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" />
</assets>
</template>
</templates>