Skip to content
This repository has been archived by the owner on Nov 4, 2023. It is now read-only.

Commit

Permalink
fix(WEATHER): update state mappings and documentation (#661)
Browse files Browse the repository at this point in the history 
- Used Weather state instead of summary (no more used) in HEADER_ITEMS.WEATHER
- Added Weather states dictionary in config.js (slightly changed the behavior of reading the states field)
- Increased font size / changed alignment in HEADER_ITEMS.WEATHER -> temperature to match Clock
  size /alignment (having symmetrical appearance if placed on opposite sides)
  • Loading branch information
@mikyjazz
mikyjazz authored Mar 1, 2021
1 parent 7d83970 commit 40114d8
Show file tree
Hide file tree
Showing 6 changed files with 205 additions and 62 deletions.
77 changes: 61 additions & 16 deletions TILE_EXAMPLES.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -622,19 +622,42 @@ This is a custom tile which can be used for displaying values from different sen
// sunny
// tstorms
// unknown
// So for example, to map 'cloudy-night' sensor value to a respective icon, set the value to
// 'nt-cloudy' (for light icon) or 'dark-nt-cloudy' (for dark icon).
// So for example, to map 'clear-night' sensor value to a respective icon, set the value to
// 'nt-clear' (for light icon) or 'dark-nt-clear' (for dark icon).
icons: {
'clear-day': 'clear',
'clear-night': 'nt-clear',
'cloudy': 'cloudy',
'rain': 'rain',
'sleet': 'sleet',
'snow': 'snow',
'wind': 'hazy',
'exceptional': 'fog',
'fog': 'fog',
'partly-cloudy-day': 'partlycloudy',
'partly-cloudy-night': 'nt-partlycloudy'
'hail': 'sleet',
'lightning': 'chancestorms',
'lightning-rainy': 'tstorms',
'partlycloudy': 'partlycloudy',
'pouring': 'rain',
'rainy': 'chancerain',
'snowy': 'snow',
'snowy-rainy': 'sleet',
'sunny': 'sunny',
'windy': 'hazy',
'windy-variant': 'flurries'
},
// A map from sensor's state (key) to human readable and possibly localized strings.
states: {
'clear-night': 'Clear, night',
'cloudy': 'Cloudy',
'exceptional': 'Exceptional',
'fog': 'Fog',
'hail': 'Hail',
'lightning': 'Lightning',
'lightning-rainy': 'Lightning, rainy',
'partlycloudy': 'Partly cloudy',
'pouring': 'Pouring',
'rainy': 'Rainy',
'snowy': 'Snowy',
'snowy-rainy': 'Snowy, rainy',
'sunny': 'Sunny',
'windy': 'Windy',
'windy-variant': 'Windy'
},
fields: { // most of that fields are optional
summary: '&sensor.dark_sky_summary.state',
Expand Down Expand Up @@ -676,17 +699,39 @@ This is a custom tile which can be used for displaying values from different sen
title: 'Forecast',
id: {},
icons: {
'clear-day': 'clear',
'clear-night': 'nt-clear',
'cloudy': 'cloudy',
'rain': 'rain',
'sleet': 'sleet',
'snow': 'snow',
'wind': 'hazy',
'exceptional': 'fog',
'fog': 'fog',
'partly-cloudy-day': 'partlycloudy',
'partly-cloudy-night': 'nt-partlycloudy'
'hail': 'sleet',
'lightning': 'chancestorms',
'lightning-rainy': 'tstorms',
'partlycloudy': 'partlycloudy',
'pouring': 'rain',
'rainy': 'chancerain',
'snowy': 'snow',
'snowy-rainy': 'sleet',
'sunny': 'sunny',
'windy': 'hazy',
'windy-variant': 'flurries'
},
states: {
'clear-night': 'Clear, night',
'cloudy': 'Cloudy',
'exceptional': 'Exceptional',
'fog': 'Fog',
'hail': 'Hail',
'lightning': 'Lightning',
'lightning-rainy': 'Lightning, rainy',
'partlycloudy': 'Partly cloudy',
'pouring': 'Pouring',
'rainy': 'Rainy',
'snowy': 'Snowy',
'snowy-rainy': 'Snowy, rainy',
'sunny': 'Sunny',
'windy': 'Windy',
'windy-variant': 'Windy'
},
hideHeader: false,
secondaryTitle: 'Wind',
list: [1,2,3,4,5].map(function (id) {
Expand Down
133 changes: 96 additions & 37 deletions config.example.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,11 +33,66 @@ var CONFIG = {
margin: '30px 130px 0',
fontSize: '28px'
},
right: [],
right: [
{
type: HEADER_ITEMS.CUSTOM_HTML,
html: 'MyCity'
},
{
type: HEADER_ITEMS.WEATHER,
styles: {
margin: '0'
},
icon: '&weather.mycity.state',
state: '&weather.mycity.state',
icons: {
'clear-night': 'nt-clear',
'cloudy': 'cloudy',
'exceptional': 'fog',
'fog': 'fog',
'hail': 'sleet',
'lightning': 'chancestorms',
'lightning-rainy': 'tstorms',
'partlycloudy': 'partlycloudy',
'pouring': 'rain',
'rainy': 'chancerain',
'snowy': 'snow',
'snowy-rainy': 'sleet',
'sunny': 'sunny',
'windy': 'hazy',
'windy-variant': 'flurries'
},
states: {
'clear-night': 'Clear, night',
'cloudy': 'Cloudy',
'exceptional': 'Exceptional',
'fog': 'Fog',
'hail': 'Hail',
'lightning': 'Lightning',
'lightning-rainy': 'Lightning, rainy',
'partlycloudy': 'Partly cloudy',
'pouring': 'Pouring',
'rainy': 'Rainy',
'snowy': 'Snowy',
'snowy-rainy': 'Snowy, rainy',
'sunny': 'Sunny',
'windy': 'Windy',
'windy-variant': 'Windy'
},
fields: {
temperature: '&weather.mycity.attributes.temperature',
temperatureUnit: '°C',
}
}
],
left: [
{
type: HEADER_ITEMS.CUSTOM_HTML,
html: '<b><i>Home Sweet Home</b></i>'
},
{
type: HEADER_ITEMS.DATETIME,
dateFormat: 'EEEE, LLLL dd', //https://docs.angularjs.org/api/ng/filter/date
dateFormat: 'EEEE, dd LLLL', //https://docs.angularjs.org/api/ng/filter/date
},
// {
// type: HEADER_ITEMS.DATE,
Expand All @@ -46,34 +101,6 @@ var CONFIG = {
// {
// type: HEADER_ITEMS.TIME,
// },
// {
// type: HEADER_ITEMS.CUSTOM_HTML,
// html: 'Welcome to the <b>TileBoard</b>'
// },
// {
// type: HEADER_ITEMS.WEATHER,
// styles: {
// margin: '0 0 0'
// },
// icon: '&sensor.dark_sky_icon.state',
// icons: {
// 'clear-day': 'clear',
// 'clear-night': 'nt-clear',
// 'cloudy': 'cloudy',
// 'rain': 'rain',
// 'sleet': 'sleet',
// 'snow': 'snow',
// 'wind': 'hazy',
// 'fog': 'fog',
// 'partly-cloudy-day': 'partlycloudy',
// 'partly-cloudy-night': 'nt-partlycloudy'
// },
// fields: {
// summary: '&sensor.dark_sky_summary.state',
// temperature: '&sensor.dark_sky_temperature.state',
// temperatureUnit: '&sensor.dark_sky_temperature.attributes.unit_of_measurement',
// }
// }
]
},

Expand Down Expand Up @@ -206,7 +233,7 @@ var CONFIG = {
},

{
title: '',
title: 'MyCity',
width: 1,
height: 3,
items: [
Expand All @@ -218,19 +245,51 @@ var CONFIG = {
//classes: ['-compact'],
type: TYPES.WEATHER,
id: {},
state: function () {return 'Sunny'}, // https://github.com/resoai/TileBoard/wiki/Anonymous-functions
icon: 'clear-day',
icons: { 'clear-day': 'clear'},
state: function () {return 'Clear, night'}, // https://github.com/resoai/TileBoard/wiki/Anonymous-functions
icon: 'clear-night',
icons: {
'clear-night': 'nt-clear',
'cloudy': 'cloudy',
'exceptional': 'sunny',
'fog': 'fog',
'hail': 'sleet',
'lightning': 'chancestorms',
'lightning-rainy': 'tstorms',
'partlycloudy': 'partlycloudy',
'pouring': 'rain',
'rainy': 'chancerain',
"snowy": 'snow',
'snowy-rainy': 'sleet',
'sunny': 'sunny',
'windy': 'hazy',
'windy-variant': 'flurries'
},
states: {
"clear-night": "Clear, night",
"cloudy": "Cloudy",
"exceptional": "Exceptional",
"fog": "Fog",
"hail": "Hail",
"lightning": "Lightning",
"lightning-rainy": "Lightning, rainy",
"partlycloudy": "Partly cloudy",
"pouring": "Pouring",
"rainy": "Rainy",
"snowy": "Snowy",
"snowy-rainy": "Snowy, rainy",
"sunny": "Sunny",
"windy": "Windy",
"windy-variant": "Windy"
},
fields: {
summary: 'Sunny',
temperature: '18',
temperatureUnit: 'C',
temperatureUnit: '°C',
windSpeed: '5',
windSpeedUnit: 'kmh',
humidity: '50',
humidityUnit: '%',
list: [
'Feels like 16 C'
'Feels like 16 °C'
/*
'Feels like '
+ '&sensor.dark_sky_apparent_temperature.state'
Expand Down
15 changes: 14 additions & 1 deletion scripts/controllers/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -408,6 +408,14 @@ App.controller('Main', function ($scope, $timeout, $location, Api, tmhDynamicLoc
return group.styles;
};

$scope.effectiveTileSize = function (page, item) {
const tileSize = page.tileSize || CONFIG.tileSize;
return {
height: (item.height || 1) * tileSize,
width: (item.width || 1) * tileSize,
};
};

$scope.itemStyles = function (page, item, entity) {
const prevSize = item._prevTileSize || page.tileSize || CONFIG.tileSize;
const currentSize = page.tileSize || CONFIG.tileSize;
Expand Down Expand Up @@ -506,7 +514,12 @@ App.controller('Main', function ($scope, $timeout, $location, Api, tmhDynamicLoc

if (typeof item.state !== 'undefined') {
if (typeof item.state === 'string') {
return parseString(item.state, entity);
const state = parseString(item.state, entity);
if (typeof item.states === 'object' && item.states !== null) {
return item.states[state] || state;
} else {
return state;
}
} else if (typeof item.state === 'function') {
return callFunction(item.state, [item, entity]);
} else {
Expand Down
3 changes: 3 additions & 0 deletions scripts/directives/headerItem.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,5 +30,8 @@
<div class="header-weather--summary" ng-if="item.fields.summary">
<span ng-bind="getWeatherField('summary', item, {})"></span>
</div>
<div class="header-weather--state" ng-if="!item.fields.summary && (_state = entityState(item, entity))">
<span ng-bind="_state"></span>
</div>
</div>
</div>
24 changes: 19 additions & 5 deletions scripts/directives/tile.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -370,17 +370,31 @@
</span>
</div>

<div class="weather-line -items">
<div class="weather-line -items" ng-if="effectiveTileSize(page, item).width >= 140">
<span ng-if="item.fields.humidity" class="weather-item">
<i class="mdi mdi-water"></i>
<span ng-bind="getWeatherField('humidity', item, entity)"></span><!--
--><span ng-bind="getWeatherField('humidityUnit', item, entity)"></span>
<span ng-bind="getWeatherField('humidity', item, entity)"></span>
<span ng-bind="getWeatherField('humidityUnit', item, entity)"></span>
</span>
<span ng-if="item.fields.windSpeed" class="weather-item">
<i class="mdi mdi-weather-windy"></i>
<span ng-bind="getWeatherField('windSpeed', item, entity)"></span>
<span ng-bind="getWeatherField('windSpeedUnit', item, entity)"></span>
</span>
</div>

<div class="weather-line -items" ng-if="effectiveTileSize(page, item).width < 140">
<span ng-if="item.fields.humidity" class="weather-item">
<i class="mdi mdi-water"></i>
<span ng-bind="getWeatherField('humidity', item, entity)"></span>
<span ng-bind="getWeatherField('humidityUnit', item, entity)"></span>
</span>
</div>
<div class="weather-line -items" ng-if="effectiveTileSize(page, item).width < 140">
<span ng-if="item.fields.windSpeed" class="weather-item">
<i class="mdi mdi-weather-windy"></i>
<span ng-bind="getWeatherField('windSpeed', item, entity)"></span><!--
--><span ng-bind="getWeatherField('windSpeedUnit', item, entity)"></span>
<span ng-bind="getWeatherField('windSpeed', item, entity)"></span>
<span ng-bind="getWeatherField('windSpeedUnit', item, entity)"></span>
</span>
</div>

Expand Down
15 changes: 12 additions & 3 deletions styles/main.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -305,7 +305,7 @@ body {
&--temperature {
display: inline-block;
vertical-align: middle;
font-size: 1.2em;
font-size: 1.5em;
}

&--summary {
Expand Down Expand Up @@ -1032,13 +1032,22 @@ body {
line-height: 18px;
}

&--name, &--value {
&--name {
display: inline-block;
vertical-align: middle;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 70%;
}

&--value {
display: inline-block;
vertical-align: middle;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 50%;
width: 30%;
}

&--name {
Expand Down

0 comments on commit 40114d8

Please sign in to comment.