ekesa
October 23, 2018, 2:33pm
122
Hi!
I have tried to get this dark sky weather card to work and i managed to get passed some errors but im stucked getting this error in home assistant lovelace gui:
Please define entities
{
I am so very new at this and I’m suffering from newbieitist, it’s a thing now…
I am getting this vague error in my home-assistant.log file
2018-10-23 14:42:15 ERROR (MainThread) [frontend.js.latest.201810120] http://TLD.com:8123/local/custom_ui/dark-sky-weather-card.js?v=6:85:82 Uncaught TypeError: Cannot read property ‘state’ of undefined
I’ve updated the js to remove the .core, I’ve incremented the version in ui-lovelace for the JS and cleared the cache, cookies, and other site data.
Update:
So I resolved this, fresh eyes this morning while trying to figure out another issue noticed that there was an error in my sensors.yaml file. I was lacking a single space in front of ‘- platform’
Put the space in and now I have a beautiful animated weather card!
I know it’s been a while since you posted this but how did you get the picture at the top of the weather card?
I have had this card working for 2 months now, I updated to 0.81.0 today and everything was ok but I was just playing around with some cards on the same page as this weather card (didn’t touch its config) and now I’m getting this
here is my console
Jim! Tsk tsk!!! There are maybe 10 threads about this! It’s a known bug and we are awaiting 0.81.1 hot fix soon…
ok thanks I assumed it wasn’t related to update as it had been working prior to this on 0.81.0
1 Like
Yeah they made an error after 0.81.0b2 and it went straight to release instead of b3.
1 Like
Issue still exists in 0.81.1
do you have 0.81.1 or does the dev tools show 0.81.0dev or something like that?
well that is odd. Peeps on discord say it fixed it for them
thedave
October 29, 2018, 3:09am
133
Same. I’m going to try to get it figured, I’ll let you know if I do.
thedave
October 29, 2018, 4:15am
134
@Kaostral - I found the solution here: Custom animated weather card for Lovelace
Basically, if the SVG used for the large icon is also used for the small icon, in Safari, that causes blurring. A bit silly to do, but I duplicated the /animated/ folder and named them /animated.small/ and /animated.large/ and updated the JS to use the appropriate resources.
this.content.innerHTML = `
<span class="icon bigger" style="background: none, url(/local/icons/weather_icons/animated.large/${weatherIcons[currentConditions]}.svg) no-repeat; background-size: contain;">${currentConditions}</span>
<span class="temp">${temperature}</span><span class="tempc"> ${getUnit('temperature')}</span>
<span>
<ul class="variations right">
<li><span class="ha-icon"><ha-icon icon="mdi:water-percent"></ha-icon></span>${humidity}<span class="unit"> %</span></li>
<li><span class="ha-icon"><ha-icon icon="mdi:gauge"></ha-icon></span>${pressure}<span class="unit"> ${getUnit('air_pressure')}</span></li>
</ul>
<ul class="variations">
<li><span class="ha-icon"><ha-icon icon="mdi:weather-windy"></ha-icon></span>${windBearing} ${windSpeed}<span class="unit"> ${getUnit('length')}/h</span></li>
<li><span class="ha-icon"><ha-icon icon="mdi:weather-fog"></ha-icon></span>${visibility}<span class="unit"> ${getUnit('length')}</span></li>
</ul>
</span>
<div class="forecast clear">
${forecast.map(daily => `
<div class="day">
<span class="dayname">${(daily.date).toString().split(' ')[0]}</span>
<br><i class="icon" style="background: none, url(/local/icons/weather_icons/animated.small/${weatherIcons[hass.states[daily.condition].state]}.svg) no-repeat; background-size: contain;"></i>
<br><span class="highTemp">${Math.round(hass.states[daily.temphigh].state)}${getUnit('temperature')}</span>
<br><span class="lowTemp">${Math.round(hass.states[daily.templow].state)}${getUnit('temperature')}</span>
</div>`).join('')}
</div>
<br><span class="unit">${hass.states[this.config.entity_daily_summary].state}</span></br>`;
I should note that Safari (and by extension, mobile safari) still renders the icons slightly blurred, but it’s much better.
2 Likes
bundito
October 29, 2018, 3:56pm
135
I think I’ve got a new one here:
http://hassbian.local:8123/local/custom_ui/dark-sky-weather-card.js?v=1:17:43 Uncaught TypeError: Cannot read property 'unit_system' of undefined
I looked up the Dark Sky API and they’ve got an API call units = [units]
I went through the .js file and hard-coded all the unit functions I could find so they’d return “us”. My configuration.yaml also has the unit system at the top set to Imperial.
Any guess what’s going on? It doesn’t render a single thing. In the traditional UI, I’ve got seven zillion Dark Sky sensors now, so I must be querying Dark Sky correctly. Therefore, I’ve got to guess something’s jacked up in the display code.
Open up your dark-sky-weather-card.js file and remove .corehass.config.core.unit_systemhass.config.unit_system
This string occurs twice in the same function. There was a breaking change in Home Assistant and the source code for this card has not yet been updated.
2 Likes
Yakker
November 2, 2018, 3:40am
137
I’ve spent 4 hours with these awful instructions on how to get this damn thing running and I’m no closer to actually figuring it out. Does anybody have an actual well-written write-up on how to get ANYTHING to run properly?
@Yakker part of that problem is that Home-Assistant is still in a developmental stage and the updates sometimes have changes that break the code we have already. It’s annoying but part of the beta life.
Where are you stuck?
woody4165
November 4, 2018, 5:09pm
141
There is something wrong in my config because when I add it in the lovelace config the page does not load and I get a white screen like this after seeing it for half a second.
My configs are:
sensors.yaml
- platform: darksky
api_key: !secret darksky_api_key
forecast:
- 1
- 2
- 3
- 4
- 5
update_interval:
minutes: 5
monitored_conditions:
- summary
- icon
- nearest_storm_distance
- nearest_storm_bearing
- apparent_temperature
- pressure
- precip_intensity
- precip_probability
- precip_accumulation
- precip_intensity_max
- humidity
- wind_speed
- visibility
- wind_bearing
- temperature
- cloud_cover
- precip_type
- daily_summary
- uv_index
- temperature_high
- temperature_low
- apparent_temperature_high
- apparent_temperature_low
ui-lovelace.yaml
- url: /local/custom_ui/dark-sky-weather-card.js?v=4
type: js
...
- type: custom:dark-sky-weather-card
entity_sun: sun.sun
entity_daily_summary: sensor.dark_sky_daily_summary
entity_current_conditions: sensor.dark_sky_icon
entity_humidity: sensor.dark_sky_humidity
entity_pressure: sensor.dark_sky_pressure
entity_temperature: sensor.dark_sky_temperature
entity_visibility: sensor.dark_sky_visibility
entity_wind_bearing: sensor.dark_sky_wind_bearing
entity_wind_speed: sensor.dark_sky_wind_speed
entity_forecast_high_temp_1: sensor.dark_sky_daytime_high_temperature_1
entity_forecast_high_temp_2: sensor.dark_sky_daytime_high_temperature_2
entity_forecast_high_temp_3: sensor.dark_sky_daytime_high_temperature_3
entity_forecast_high_temp_4: sensor.dark_sky_daytime_high_temperature_4
entity_forecast_high_temp_5: sensor.dark_sky_daytime_high_temperature_5
entity_forecast_low_temp_1: sensor.dark_sky_overnight_low_temperature
entity_forecast_low_temp_2: sensor.dark_sky_overnight_low_temperature_1
entity_forecast_low_temp_3: sensor.dark_sky_overnight_low_temperature_2
entity_forecast_low_temp_4: sensor.dark_sky_overnight_low_temperature_3
entity_forecast_low_temp_5: sensor.dark_sky_overnight_low_temperature_4
entity_forecast_icon_1: sensor.dark_sky_icon_1
entity_forecast_icon_2: sensor.dark_sky_icon_2
entity_forecast_icon_3: sensor.dark_sky_icon_3
entity_forecast_icon_4: sensor.dark_sky_icon_4
entity_forecast_icon_5: sensor.dark_sky_icon_5
config/www/custom_ui/dark-sky-weather-card.css
.clear {
clear: both;
}
.card {
margin: auto;
padding-top: 2em;
padding-bottom: 1em;
padding-left: 1em;
padding-right:1em;
position: relative;
}
.ha-icon {
height: 18px;
margin-right: 5px;
color: var(--paper-item-icon-color);
}
.temp {
font-weight: 300;
font-size: 4em;
color: var(--primary-text-color);
position: absolute;
right: 1em;
}
.tempc {
font-weight: 300;
font-size: 1.5em;
vertical-align: super;
color: var(--primary-text-color);
position: absolute;
right: 1em;
margin-top: -14px;
margin-right: 7px;
}
.variations {
display: inline-block;
font-weight: 300;
color: var(--primary-text-color);
list-style: none;
margin-left: -2em;
margin-top: 4.5em;
}
.variations.right {
position: absolute;
right: 1em;
margin-left: 0;
margin-right: 1em;
}
.unit {
font-size: .8em;
}
.forecast {
width: 100%;
margin: 0 auto;
height: 10em;
}
.day {
display: block;
width: 20%;
float: left;
text-align: center;
color: var(--primary-text-color);
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(1) {
border-right: none;
margin-right: 0;
}
.highTemp {
font-weight: bold;
}
.lowTemp {
color: var(--secondary-text-color);
}
.icon.bigger {
width: 10em;
height: 10em;
margin-top: -4em;
position: absolute;
left: 0em;
}
.icon {
width: 50px;
height: 50px;
margin-right: 5px;
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: var(--primary-text-color);
text-align: left;
position: absolute;
top: -0.5em;
left: 6em;
word-wrap: break-word;
width: 30%;
}
config/www/custom_ui/dark-sky-weather-card.js as in the first post
Hassio is on version 0.81.5
What can I check?
Thanks
@woody4165 Can you post your entire .js code and check your log for errors?
Mine did this also, Add ?v=5 and hit ctr shift and R to refresh.
