I had to change it from customize to customize_glob to get it to show up:
homeassistant:
customize_glob:
I am also having this bug.
hello,
i just tryed to set this up myself,
but where do you set the woeid.
thanks for the help i already have a customize.ymal do i just rename it to customise_glob.yamal
and change it to
homeassistant:
customize_glob: !include customize_glob.yaml
or i have to have both also i just find out that in the iphone app is working only in chrome pc and tablet is not thank you again
it goes under weather on the configuration.yamal
weather:
- platform: yweather
woeid: 115555454
1 Like
already have a yweather entity Home, so hope this doesnt interfere.
I get an empty card,
when i click it i see this:
flipping the boolean gives an error:
my weather.yweather seems to work fine, its getting all necessary info:
do we need to customize the input_boolean? or the weather.yweather.
Not sure i fully get the configuration correct here.
My weather.yaml now reads:
- platform: openweathermap
api_key: !secret openweather_key
- platform: yweather
name: Home
- platform: buienradar
name: !secret buienradar_station
- platform: yweather
Maybe i should give the latter an extra name, to distinguish it from Home? Not sure how to name the input_boolean in that case, or the customization for that matter.
btw, line 175 (and called in 179) of the script reads:
computed: 'comptuteWeatherObj(hass, stateObj)',
shouldn’t that be
computed: 'computeWeatherObj(hass, stateObj)',
Please have a look ?
cheers,
Marius
I also get blurry images… Doesn’t seem blurry on mobile though.
Just to help anyone else who runs into this. I too had a blank card. Clicked the blank card and flipped the boolean switch to on. The full card then showed up.
Probably have to set an initial boolean value to on?
sometimes the awnser is so simple, but my mind is thinking dificuld. 
why need the input_boolean in the first place? Only to switch the custom-card on or off? Otherwise it might be even simpler to take that out completely?
I have made some changes to custom-weather-card.html
- if the temperature value is 0 then it will not be shown on the weather card, added some code to check that and save the temp as string so it will be shown
- changed attribute name to wind_bearing
- changed the formula for wind_bearing
- make the wind_bearing visible on the weather card
Below the updated version which contains Dutch text and works with Buienradar.
HTML code
<dom-module id='custom-weather-card'>
<template>
<style>
.clear {
clear:both;
}
.card {
margin:1em auto;
padding-left: 1em;
padding-right:1em;
position: relative;
}
.iron-icon {
height: 18px;
color: #c8c8c8;
}
.temp {
font-weight: 300;
font-size: 4em;
color:#5b5b5b;
position: absolute;
right: .5em;
}
.tempc {
font-weight: 300;
font-size: 1.5em;
vertical-align: super;
color:#5b5b5b;
position: absolute;
right: 0em;
}
.variations {
font-weight:300;
color:#8c8c8c;
list-style:none;
margin-left:-2em;
margin-top: 2.5em;
}
.variations.right {
float: right;
margin-left: 0;
margin-right: 1em;
}
.unit {
font-size:.8em;
}
.forecast {
width:100%;
margin:0 auto;
height:9em;
}
.day {
display:block;
width: 25%;
float:left;
text-align:center;
color: #5b5b5b;
border-right:.1em solid #d9d9d9;
line-height: 2;
box-sizing: border-box;
}
.dayname {
text-transform: uppercase;
}
.forecast .day:first-child {
margin-left: 0;
}
.forecast .day:nth-last-child(2) {
border-right:none;
margin-right: 0;
}
.highTemp {
font-weight:bold;
}
.lowTemp {
color: #8c8c8c;
}
.icon.bigger {
width: 10em;
height: 10em;
margin-top: -4em;
position: absolute;
left: 0em;
}
.icon {
width: 50px;
height: 50px;
display: inline-block;
vertical-align: middle;
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
text-indent: -9999px;
}
.weather {
font-weight: 300;
font-size: 1.5em;
color:#5b5b5b;
text-align:center;
position: absolute;
top: 0em;
left: 6em;
}
</style>
<div class="card">
<span class="icon bigger" style="background: none, url(/local/weather_icons/animated/[[nowCond]].svg) no-repeat; background-size: contain;"></span>
<span class="temp">[[roundedTemp]]</span><span class="tempc">°C</span>
<span class="weather">[[nowCondIT]]</span>
<br>
<span>
<ul class="variations right">
<template is="dom-if" if="[[weatherObj.attributes.humidity]]">
<li><iron-icon icon="mdi:water-percent"></iron-icon> [[weatherObj.attributes.humidity]]<span class="unit">%</span></li>
</template>
<template is="dom-if" if="[[weatherObj.attributes.pressure]]">
<li><iron-icon icon="mdi:gauge"></iron-icon> [[weatherObj.attributes.pressure]]<span class="unit"> hPa</span></li>
</template>
</ul>
<ul class="variations">
<template is="dom-if" if="[[weatherObj.attributes.wind_speed]]">
<li><iron-icon icon="mdi:weather-windy"></iron-icon> [[windBearing]] [[weatherObj.attributes.wind_speed]]<span class="unit"> m/s</span></li>
</template>
<template is="dom-if" if="[[weatherObj.attributes.visibility]]">
<li><iron-icon icon="mdi:weather-fog"></iron-icon> [[weatherObj.attributes.visibility]]<span class="unit">m</span></li>
</template>
</ul>
</span>
<div class="forecast clear">
<template is="dom-repeat" items="[[forecast]]">
<div class="day"><span class="dayname">[[item.dayIT]]</span>
<template is="dom-if" if="[[item.condIcon]]">
<br> <i class="icon" style="background: none, url(/local/weather_icons/animated/[[item.condIcon]].svg) no-repeat; background-size: contain;"></i>
</template>
<template is="dom-if" if="[[item.tempHigh]]">
<br> <span class="highTemp">[[item.tempHigh]]°C</span>
</template>
<template is="dom-if" if="[[item.tempLow]]">
<br> <span class="lowTemp">[[item.tempLow]]°C</span>
</template>
</div>
</template>
</div>
</div>
</template>
</dom-module>
<script>
(function () {
'use strict';
var _WEATHER_TO_ICON = {
cloudy: 'cloudy',
fog: 'cloudy',
hail: 'rainy-7',
lightning: 'thunder',
'lightning-rainy': 'thunder',
partlycloudy: 'cloudy-day-3',
pouring: 'rainy-6',
rainy: 'rainy-5',
snowy: 'snowy-6',
'snowy-rainy': 'rainy-7',
sunny: 'day',
windy: 'cloudy',
'windy-variant': 'cloudy-day-3',
exceptional: '!!',
};
var _WEATHER_TO_NAME = {
cloudy: 'Bewolkt',
fog: 'Mist',
hail: 'Hagel',
lightning: 'Onweer',
'lightning-rainy': 'Onweer',
partlycloudy: 'Gedeeltelijk bewolkt',
pouring: 'Stortregen',
rainy: 'Regen',
snowy: 'Sneeuw',
'snowy-rainy': 'Natte sneeuw',
sunny: 'Zonnig',
windy: 'Winderig',
'windy-variant': 'Variable wind',
exceptional: '!',
};
var _DEGREE_TEXT = [
'N', 'NNO', 'NO', 'ONO', 'O', 'OZO', 'ZO', 'ZZO',
'Z', 'ZZW', 'ZW', 'WZW', 'W', 'WNW', 'NW', 'NNW', 'N'
];
var _DAY_TO_DAY = {
Mon: 'MA',
Tue: 'DI',
Wed: 'WO',
Thu: 'DO',
Fri: 'VR',
Sat: 'ZA',
Sun: 'ZO',
};
Polymer({
is: 'custom-weather-card',
properties: {
hass: {
type: Object,
},
stateObj: {
type: Object,
},
weatherObj: {
type: Object,
observer: 'checkRequirements',
computed: 'computeWeatherObj(hass, stateObj)',
},
},
computeWeatherObj: function (hass, stateObj) {
return stateObj && stateObj.attributes && stateObj.attributes.config && stateObj.attributes.config.weather ? hass.states[stateObj.attributes.config.weather] : null;
},
getForecastArray: function () {
if (!this.weatherObj.attributes.forecast) {
return [];
}
var data = this.weatherObj.attributes.forecast;
var forecast = [];
var prevDay = '';
for (var i = 0; i < data.length; i++) {
var day = new Date(data[i].datetime).toString().split(' ')[0];
if (day != prevDay) {
if (data[i].max_temp) {
var tempHigh = Math.round(data[i].max_temp * 10) / 10;
} else {
var tempHigh = Math.round(data[i].temperature * 10) / 10;
}
if (tempHigh == 0) {
tempHigh = '0'; // otherwise the value 0 will not be shown on the weather card
}
var tempLow = Math.round(data[i].templow * 10) / 10;
if (tempLow == 0) {
tempLow = '0'; // otherwise the value 0 will not be shown on the weather card
}
var condIcon = _WEATHER_TO_ICON[data[i].condition];
var dayIT = _DAY_TO_DAY[day];
forecast.push({dayIT:dayIT, tempHigh:tempHigh, tempLow:tempLow, condIcon:condIcon});
prevDay = day;
} else {
if (data[i].max_temp) {
var tempHigh = Math.round(data[i].max_temp * 10) / 10;
} else {
var tempHigh = Math.round(data[i].temperature * 10) / 10;
}
var tempLow = Math.round(data[i].tempLow * 10) / 10;
if (tempLow > forecast[forecast.length-1].tempHigh) {
forecast[forecast.length-1].tempHigh = tempLow;
}
if (tempHigh > forecast[forecast.length-1].tempHigh) {
forecast[forecast.length-1].tempHigh = tempHigh;
}
if (!forecast[forecast.length-1].tempLow) {
forecast[forecast.length-1].tempLow = tempHigh;
}
if (tempHigh < forecast[forecast.length-1].tempLow) {
forecast[forecast.length-1].tempLow = tempHigh;
}
if (tempLow < forecast[forecast.length-1].tempLow) {
forecast[forecast.length-1].tempLow = tempLow;
}
}
}
return forecast;
},
checkRequirements: function () {
if (!this.weatherObj) {
return;
}
this.nowCond = _WEATHER_TO_ICON[this.weatherObj.state];
this.nowCondIT = _WEATHER_TO_NAME[this.weatherObj.state];
if (this.weatherObj.attributes.temperature) {
this.roundedTemp = Math.round( this.weatherObj.attributes.temperature * 10) / 10;
}
if (this.weatherObj.attributes.wind_bearing) {
this.windBearing = this.windBearingToText(this.weatherObj.attributes.wind_bearing);
}
this.forecast = this.getForecastArray().slice(0, 4);
},
windBearingToText: function (degree) {
// return _DEGREE_TEXT[((parseInt(degree) + 5.63) / 11.25) | 0];
return _DEGREE_TEXT[(parseInt((degree + 11.25) / 22.5))];
},
});
}());
</script>
4 Likes
HI gerard, thanks!
what settings do you use in the config and customize to get it to show. I cant seem the get the yweather card to show other than regular. im puzzled…
i was bussy with the same before posting the custom-weather-card.html.
the only extra thing you provided, was the 0 degrees to show on the map.
thanks for that,
the only thing i want to change is the unit of windspeed, and the the unit of visibility to bft and meters.
but cant find it yet how to change these units.
curently the visibility is showing miles i think,
The units are in the html page just before the </span>.
<li><iron-icon icon="mdi:weather-windy"></iron-icon> [[windBearing]] [[weatherObj.attributes.wind_speed]]<span class="unit"> m/s</span></li>
<li><iron-icon icon="mdi:weather-fog"></iron-icon> [[weatherObj.attributes.visibility]]<span class="unit"> m</span></li>
i saw that, but this wil only change the text after the vallue.
the vallue self won’t change.
i think it should be changed in the component Yweater, that is where the vallue read from.
The value and unit is indeed part of the component. If you want to change that you can do that in the script part of the html, there are some more calculations in there like
var tempHigh = Math.round(data[i].temperature * 10) / 10;
I am using the settings from this post.
Looks like you have 2 yweather platforms defined.
Can you remove one and see if that works?
that’s what i tried indeed, tried to have the customization take place on my existing Home card, but it doesnt stick, still shows as it always has done.
why does the card use the init_boolean in the customization and not the weather card directly? all i can see in my group is an input_boolean switch now 
That’s strange. Can you try it with your buienradar platform?
And maybe one more doublecheck if you have all items from the config of eddi89? 
its a bit confusing since all items use ‘weather’… and my setup already uses:
- platform: yweather
name: Home
this why i asked what eddi89’s config would have to look like in my config…
please see what you would make of that?
customize: would i need to add Home in here?
homeassistant:
customize:
input_boolean.weather:
custom_ui_state_card: custom-weather-card
config:
weather: weather.yweather
input_boolean: i guess this is about the platform itself, so no need to change that?
input_boolean:
weather:
Group: only item is the boolean, so no need to change that i suppose. Can show that in any group already there.
group:
weather:
name: Weather
entities:
- input_boolean.weather