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

Commit

Permalink
fix(WEATHER): minor fixes for weather icon
Browse files Browse the repository at this point in the history 
 - Don't override background-repeat property set form '.wu' class
 - Center weather icon in case it's smaller than expected
  • Loading branch information
@rchl
rchl committed Feb 15, 2021
1 parent 98aa9c1 commit e739b51
Show file tree
Hide file tree
Showing 3 changed files with 86 additions and 81 deletions.
2 changes: 2 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -250,12 +250,14 @@ Tile Object. [Click here for some real-life examples](TILE_EXAMPLES.md)
* You can use any of the material design icons from https://materialdesignicons.com/
* as long as they have been published in the [latest npm package](https://github.com/templarian/materialdesign-svg).
* Use an object or function to map states to icons
* Note: handling differs for Weather tile. See details in TILE_EXAMPLES.md#weather.
*/
icons: {on: "mdi-volume-high", off: "mdi-volume-off"}, // Object example
icons: function (item, entity) {return entity.attributes.icon}, // Function example
/* icon: Set a static icon for a tile
* You can use any of the material design icons from https://materialdesignicons.com/
* as long as they have been published in the [latest npm package](https://github.com/templarian/materialdesign-svg).
* Note: handling differs for Weather tile. See details in TILE_EXAMPLES.md#weather.
*/
icon: 'mdi-phone',
/* customHtml: Replace the icon by a custom HTML content
Expand Down
4 changes: 3 additions & 1 deletion TILE_EXAMPLES.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -593,7 +593,9 @@ This is a custom tile which can be used for displaying values from different sen
id: 'group.weather',
state: '&sensor.dark_sky_summary.state', // label with weather summary (e.g. Sunny)
icon: '&sensor.dark_sky_icon.state',
//iconImage: '&sensor.dark_sky_icon.state', // use this one if you want to replace icon with image
// Use this one if you have an URL of the image to show.
//iconImage: '&sensor.dark_sky_icon.state',
// A map from sensor's state (key) to icon name (value).
icons: {
'clear-day': 'clear',
'clear-night': 'nt-clear',
Expand Down
161 changes: 81 additions & 80 deletions styles/weather-icons.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

.wu {
display: inline-block;
background-position: center center;
background-repeat: no-repeat;
padding: 0;
margin: 0;
Expand All @@ -14,88 +15,88 @@
.wu-128 { width: 128px; height: 128px; }
.wu-256 { width: 256px; height: 256px; }

.wu-chanceflurries { background: url(../images/weather-icons/white/chanceflurries.svg); }
.wu-chancerain { background: url(../images/weather-icons/white/chancerain.svg); }
.wu-chancesleet { background: url(../images/weather-icons/white/chancesleet.svg); }
.wu-chancesnow { background: url(../images/weather-icons/white/chancesnow.svg); }
.wu-chancetstorms { background: url(../images/weather-icons/white/chancetstorms.svg); }
.wu-clear { background: url(../images/weather-icons/white/clear.svg); }
.wu-cloudy { background: url(../images/weather-icons/white/cloudy.svg); }
.wu-flurries { background: url(../images/weather-icons/white/flurries.svg); }
.wu-fog { background: url(../images/weather-icons/white/fog.svg); }
.wu-hazy { background: url(../images/weather-icons/white/hazy.svg); }
.wu-mostlycloudy { background: url(../images/weather-icons/white/mostlycloudy.svg); }
.wu-mostlysunny { background: url(../images/weather-icons/white/mostlysunny.svg); }
.wu-partlycloudy { background: url(../images/weather-icons/white/partlycloudy.svg); }
.wu-partlysunny { background: url(../images/weather-icons/white/partlysunny.svg); }
.wu-rain { background: url(../images/weather-icons/white/rain.svg); }
.wu-sleet { background: url(../images/weather-icons/white/sleet.svg); }
.wu-snow { background: url(../images/weather-icons/white/snow.svg); }
.wu-sunny { background: url(../images/weather-icons/white/sunny.svg); }
.wu-tstorms { background: url(../images/weather-icons/white/tstorms.svg); }
.wu-unknown { background: url(../images/weather-icons/white/unknown.svg); }
.wu-chanceflurries { background-image: url(../images/weather-icons/white/chanceflurries.svg); }
.wu-chancerain { background-image: url(../images/weather-icons/white/chancerain.svg); }
.wu-chancesleet { background-image: url(../images/weather-icons/white/chancesleet.svg); }
.wu-chancesnow { background-image: url(../images/weather-icons/white/chancesnow.svg); }
.wu-chancetstorms { background-image: url(../images/weather-icons/white/chancetstorms.svg); }
.wu-clear { background-image: url(../images/weather-icons/white/clear.svg); }
.wu-cloudy { background-image: url(../images/weather-icons/white/cloudy.svg); }
.wu-flurries { background-image: url(../images/weather-icons/white/flurries.svg); }
.wu-fog { background-image: url(../images/weather-icons/white/fog.svg); }
.wu-hazy { background-image: url(../images/weather-icons/white/hazy.svg); }
.wu-mostlycloudy { background-image: url(../images/weather-icons/white/mostlycloudy.svg); }
.wu-mostlysunny { background-image: url(../images/weather-icons/white/mostlysunny.svg); }
.wu-partlycloudy { background-image: url(../images/weather-icons/white/partlycloudy.svg); }
.wu-partlysunny { background-image: url(../images/weather-icons/white/partlysunny.svg); }
.wu-rain { background-image: url(../images/weather-icons/white/rain.svg); }
.wu-sleet { background-image: url(../images/weather-icons/white/sleet.svg); }
.wu-snow { background-image: url(../images/weather-icons/white/snow.svg); }
.wu-sunny { background-image: url(../images/weather-icons/white/sunny.svg); }
.wu-tstorms { background-image: url(../images/weather-icons/white/tstorms.svg); }
.wu-unknown { background-image: url(../images/weather-icons/white/unknown.svg); }


.wu-nt-chanceflurries { background: url(../images/weather-icons/white/nt_chanceflurries.svg); }
.wu-nt-chancerain { background: url(../images/weather-icons/white/nt_chancerain.svg); }
.wu-nt-chancesleet { background: url(../images/weather-icons/white/nt_chancesleet.svg); }
.wu-nt-chancesnow { background: url(../images/weather-icons/white/nt_chancesnow.svg); }
.wu-nt-chancetstorms { background: url(../images/weather-icons/white/nt_chancetstorms.svg); }
.wu-nt-clear { background: url(../images/weather-icons/white/nt_clear.svg); }
.wu-nt-cloudy { background: url(../images/weather-icons/white/nt_cloudy.svg); }
.wu-nt-flurries { background: url(../images/weather-icons/white/nt_flurries.svg); }
.wu-nt-fog { background: url(../images/weather-icons/white/nt_fog.svg); }
.wu-nt-hazy { background: url(../images/weather-icons/white/nt_hazy.svg); }
.wu-nt-mostlycloudy { background: url(../images/weather-icons/white/nt_mostlycloudy.svg); }
.wu-nt-mostlysunny { background: url(../images/weather-icons/white/nt_mostlysunny.svg); }
.wu-nt-partlycloudy { background: url(../images/weather-icons/white/nt_partlycloudy.svg); }
.wu-nt-partlysunny { background: url(../images/weather-icons/white/nt_partlysunny.svg); }
.wu-nt-rain { background: url(../images/weather-icons/white/nt_rain.svg); }
.wu-nt-sleet { background: url(../images/weather-icons/white/nt_sleet.svg); }
.wu-nt-snow { background: url(../images/weather-icons/white/nt_snow.svg); }
.wu-nt-sunny { background: url(../images/weather-icons/white/nt_sunny.svg); }
.wu-nt-tstorms { background: url(../images/weather-icons/white/nt_tstorms.svg); }
.wu-nt-unknown { background: url(../images/weather-icons/white/nt_unknown.svg); }
.wu-nt-chanceflurries { background-image: url(../images/weather-icons/white/nt_chanceflurries.svg); }
.wu-nt-chancerain { background-image: url(../images/weather-icons/white/nt_chancerain.svg); }
.wu-nt-chancesleet { background-image: url(../images/weather-icons/white/nt_chancesleet.svg); }
.wu-nt-chancesnow { background-image: url(../images/weather-icons/white/nt_chancesnow.svg); }
.wu-nt-chancetstorms { background-image: url(../images/weather-icons/white/nt_chancetstorms.svg); }
.wu-nt-clear { background-image: url(../images/weather-icons/white/nt_clear.svg); }
.wu-nt-cloudy { background-image: url(../images/weather-icons/white/nt_cloudy.svg); }
.wu-nt-flurries { background-image: url(../images/weather-icons/white/nt_flurries.svg); }
.wu-nt-fog { background-image: url(../images/weather-icons/white/nt_fog.svg); }
.wu-nt-hazy { background-image: url(../images/weather-icons/white/nt_hazy.svg); }
.wu-nt-mostlycloudy { background-image: url(../images/weather-icons/white/nt_mostlycloudy.svg); }
.wu-nt-mostlysunny { background-image: url(../images/weather-icons/white/nt_mostlysunny.svg); }
.wu-nt-partlycloudy { background-image: url(../images/weather-icons/white/nt_partlycloudy.svg); }
.wu-nt-partlysunny { background-image: url(../images/weather-icons/white/nt_partlysunny.svg); }
.wu-nt-rain { background-image: url(../images/weather-icons/white/nt_rain.svg); }
.wu-nt-sleet { background-image: url(../images/weather-icons/white/nt_sleet.svg); }
.wu-nt-snow { background-image: url(../images/weather-icons/white/nt_snow.svg); }
.wu-nt-sunny { background-image: url(../images/weather-icons/white/nt_sunny.svg); }
.wu-nt-tstorms { background-image: url(../images/weather-icons/white/nt_tstorms.svg); }
.wu-nt-unknown { background-image: url(../images/weather-icons/white/nt_unknown.svg); }



.wu-dark-chanceflurries { background: url(../images/weather-icons/black/chanceflurries.svg); }
.wu-dark-chancerain { background: url(../images/weather-icons/black/chancerain.svg); }
.wu-dark-chancesleet { background: url(../images/weather-icons/black/chancesleet.svg); }
.wu-dark-chancesnow { background: url(../images/weather-icons/black/chancesnow.svg); }
.wu-dark-chancetstorms { background: url(../images/weather-icons/black/chancetstorms.svg); }
.wu-dark-clear { background: url(../images/weather-icons/black/clear.svg); }
.wu-dark-cloudy { background: url(../images/weather-icons/black/cloudy.svg); }
.wu-dark-flurries { background: url(../images/weather-icons/black/flurries.svg); }
.wu-dark-fog { background: url(../images/weather-icons/black/fog.svg); }
.wu-dark-hazy { background: url(../images/weather-icons/black/hazy.svg); }
.wu-dark-mostlycloudy { background: url(../images/weather-icons/black/mostlycloudy.svg); }
.wu-dark-mostlysunny { background: url(../images/weather-icons/black/mostlysunny.svg); }
.wu-dark-partlycloudy { background: url(../images/weather-icons/black/partlycloudy.svg); }
.wu-dark-partlysunny { background: url(../images/weather-icons/black/partlysunny.svg); }
.wu-dark-rain { background: url(../images/weather-icons/black/rain.svg); }
.wu-dark-sleet { background: url(../images/weather-icons/black/sleet.svg); }
.wu-dark-snow { background: url(../images/weather-icons/black/snow.svg); }
.wu-dark-sunny { background: url(../images/weather-icons/black/sunny.svg); }
.wu-dark-tstorms { background: url(../images/weather-icons/black/tstorms.svg); }
.wu-dark-unknown { background: url(../images/weather-icons/black/unknown.svg); }
.wu-dark-nt-chanceflurries { background: url(../images/weather-icons/black/nt_chanceflurries.svg); }
.wu-dark-nt-chancerain { background: url(../images/weather-icons/black/nt_chancerain.svg); }
.wu-dark-nt-chancesleet { background: url(../images/weather-icons/black/nt_chancesleet.svg); }
.wu-dark-nt-chancesnow { background: url(../images/weather-icons/black/nt_chancesnow.svg); }
.wu-dark-nt-chancetstorms { background: url(../images/weather-icons/black/nt_chancetstorms.svg); }
.wu-dark-nt-clear { background: url(../images/weather-icons/black/nt_clear.svg); }
.wu-dark-nt-cloudy { background: url(../images/weather-icons/black/nt_cloudy.svg); }
.wu-dark-nt-flurries { background: url(../images/weather-icons/black/nt_flurries.svg); }
.wu-dark-nt-fog { background: url(../images/weather-icons/black/nt_fog.svg); }
.wu-dark-nt-hazy { background: url(../images/weather-icons/black/nt_hazy.svg); }
.wu-dark-nt-mostlycloudy { background: url(../images/weather-icons/black/nt_mostlycloudy.svg); }
.wu-dark-nt-mostlysunny { background: url(../images/weather-icons/black/nt_mostlysunny.svg); }
.wu-dark-nt-partlycloudy { background: url(../images/weather-icons/black/nt_partlycloudy.svg); }
.wu-dark-nt-partlysunny { background: url(../images/weather-icons/black/nt_partlysunny.svg); }
.wu-dark-nt-rain { background: url(../images/weather-icons/black/nt_rain.svg); }
.wu-dark-nt-sleet { background: url(../images/weather-icons/black/nt_sleet.svg); }
.wu-dark-nt-snow { background: url(../images/weather-icons/black/nt_snow.svg); }
.wu-dark-nt-sunny { background: url(../images/weather-icons/black/nt_sunny.svg); }
.wu-dark-nt-tstorms { background: url(../images/weather-icons/black/nt_tstorms.svg); }
.wu-dark-nt-unknown { background: url(../images/weather-icons/black/nt_unknown.svg); }
.wu-dark-chanceflurries { background-image: url(../images/weather-icons/black/chanceflurries.svg); }
.wu-dark-chancerain { background-image: url(../images/weather-icons/black/chancerain.svg); }
.wu-dark-chancesleet { background-image: url(../images/weather-icons/black/chancesleet.svg); }
.wu-dark-chancesnow { background-image: url(../images/weather-icons/black/chancesnow.svg); }
.wu-dark-chancetstorms { background-image: url(../images/weather-icons/black/chancetstorms.svg); }
.wu-dark-clear { background-image: url(../images/weather-icons/black/clear.svg); }
.wu-dark-cloudy { background-image: url(../images/weather-icons/black/cloudy.svg); }
.wu-dark-flurries { background-image: url(../images/weather-icons/black/flurries.svg); }
.wu-dark-fog { background-image: url(../images/weather-icons/black/fog.svg); }
.wu-dark-hazy { background-image: url(../images/weather-icons/black/hazy.svg); }
.wu-dark-mostlycloudy { background-image: url(../images/weather-icons/black/mostlycloudy.svg); }
.wu-dark-mostlysunny { background-image: url(../images/weather-icons/black/mostlysunny.svg); }
.wu-dark-partlycloudy { background-image: url(../images/weather-icons/black/partlycloudy.svg); }
.wu-dark-partlysunny { background-image: url(../images/weather-icons/black/partlysunny.svg); }
.wu-dark-rain { background-image: url(../images/weather-icons/black/rain.svg); }
.wu-dark-sleet { background-image: url(../images/weather-icons/black/sleet.svg); }
.wu-dark-snow { background-image: url(../images/weather-icons/black/snow.svg); }
.wu-dark-sunny { background-image: url(../images/weather-icons/black/sunny.svg); }
.wu-dark-tstorms { background-image: url(../images/weather-icons/black/tstorms.svg); }
.wu-dark-unknown { background-image: url(../images/weather-icons/black/unknown.svg); }
.wu-dark-nt-chanceflurries { background-image: url(../images/weather-icons/black/nt_chanceflurries.svg); }
.wu-dark-nt-chancerain { background-image: url(../images/weather-icons/black/nt_chancerain.svg); }
.wu-dark-nt-chancesleet { background-image: url(../images/weather-icons/black/nt_chancesleet.svg); }
.wu-dark-nt-chancesnow { background-image: url(../images/weather-icons/black/nt_chancesnow.svg); }
.wu-dark-nt-chancetstorms { background-image: url(../images/weather-icons/black/nt_chancetstorms.svg); }
.wu-dark-nt-clear { background-image: url(../images/weather-icons/black/nt_clear.svg); }
.wu-dark-nt-cloudy { background-image: url(../images/weather-icons/black/nt_cloudy.svg); }
.wu-dark-nt-flurries { background-image: url(../images/weather-icons/black/nt_flurries.svg); }
.wu-dark-nt-fog { background-image: url(../images/weather-icons/black/nt_fog.svg); }
.wu-dark-nt-hazy { background-image: url(../images/weather-icons/black/nt_hazy.svg); }
.wu-dark-nt-mostlycloudy { background-image: url(../images/weather-icons/black/nt_mostlycloudy.svg); }
.wu-dark-nt-mostlysunny { background-image: url(../images/weather-icons/black/nt_mostlysunny.svg); }
.wu-dark-nt-partlycloudy { background-image: url(../images/weather-icons/black/nt_partlycloudy.svg); }
.wu-dark-nt-partlysunny { background-image: url(../images/weather-icons/black/nt_partlysunny.svg); }
.wu-dark-nt-rain { background-image: url(../images/weather-icons/black/nt_rain.svg); }
.wu-dark-nt-sleet { background-image: url(../images/weather-icons/black/nt_sleet.svg); }
.wu-dark-nt-snow { background-image: url(../images/weather-icons/black/nt_snow.svg); }
.wu-dark-nt-sunny { background-image: url(../images/weather-icons/black/nt_sunny.svg); }
.wu-dark-nt-tstorms { background-image: url(../images/weather-icons/black/nt_tstorms.svg); }
.wu-dark-nt-unknown { background-image: url(../images/weather-icons/black/nt_unknown.svg); }

0 comments on commit e739b51

Please sign in to comment.