This is all i get. I followed the most recent instructions but for the life of me cannot get this card to load.
EDIT: Got it working by not using a couple sensors
Disregard, i got it working
Great card! Thank you for your efforts.
Iâve been having a problem using both the conditional card and the custom:state-switch with the Dark Sky Weather Card. If the DS Weather Card is being displayed the conditional/state-switch cards require a refresh to work. They work initially and after a couple of minutes they stop working. Refresh allows them to work again.
If I comment out the DS Weather Card the conditional/state-switch cards works fine.
Is this a known problem? Is there a fix?
Hi, i think you should have it under sensor: not under weather:
A quote from the Dark Sky Weather Card configuration
- Add the Dark Sky sensor platform to your configuration.yaml or sensors.yaml or wherever you keep your sensor configuration.
1 Like
I havenât heard of that issue beforeâŠ
As far as I am aware one custom card should not be able to interfere with another. Especially in a way where it works for a while and then stops working. What hardware are you running HA on (Also what HW are you using to browse from). Itâs possible that both cards are trying to refresh too fast and are consuming to much CPU.
There is a Refresh_Interval flag that you can set on the Dark Sky Weather Card that will slow down how fast it attempts to refresh card data. It defaults to 30 seconds but you can set it to however long you want. As weather data changes very slowly it is safe to set the value much higher (say 300 - which would be 5 minutes). Try changing that to see if it makes a difference. If not, I am unsure what the issue would be.
Yeah I fixed it since then, all is working nowâŠ
Yes this certainly is strange. Iâm running Hassbian on a rPi3, and just this morning updated to 0.89.0b3 I believe that I implemented the conditional cards in 0.88 Tried on both Firefox & Chrome from my laptop Windows 10.
I found the refresh_interval flag and set it to 60, 120 & 180 seconds, I also put the Weather Card on a condition card so I could measure the time of when the buttons stop working. I have 3 buttons that show/hide 3 cards. It looks like I can successfully toggle the conditional cards for exactly the refresh rate before it stops working.
Does this help?
Uncaught (in promise) TypeError: Cannot set property âtextContentâ of null
at HTMLElement.updateValues (dark-sky-weather-card.js:734)
at HTMLElement.set hass [as hass] (dark-sky-weather-card.js:698)
at HTMLElement.set hass [as hass] (state-switch.js:65)
at HTMLElement.set hass [as hass] (401352253e833b70a294.chunk.js:3615)
at _cards.forEach.element (401352253e833b70a294.chunk.js:5693)
at Array.forEach ()
at HTMLElement.updated (401352253e833b70a294.chunk.js:5693)
at HTMLElement.performUpdate (app-a285b20d.js:93)
at HTMLElement._enqueueUpdate (app-a285b20d.js:93)
I doubt the developer has the spare time to work with beta software.
Can you post a print screen of your card ? This is similar to the issue resolved here. although it presents in a slightly different way.
1 Like
LOL, I was just reading that and remembered removing POP about the same time this all started.
I removed these lines from my configuration and itâs been working now for 10 minutes!
entity_visibility: sensor.dark_sky_visibility
entity_pop: sensor.dark_sky_precip_probability
entity_pop_intensity: sensor.dark_sky_precip_intensity
Thank you so much for guiding me in the right direction.
Iâm not sure is this the place to ask this but is there a way to translate
Feels like, Todayâs High, Bft, SSW⊠and other english words.
Most are in their own language (Finnish), but a couple of strings have not been translated.
I think i could hard code it in the js-file but that wouldnât be very smart.
I probably should use something like iammexx has in his instructions (Example template sensors) but i donât now what entities and whatnot to put there.
Example template sensors:
dark_sky_current_text:
value_template: {% if is_state("sensor.dark_sky_icon","clear-day") %} Clear
{% elif is_state("sensor.dark_sky_icon","clear-night") %} Clear
{% elif is_state("sensor.dark_sky_icon","rain") %} Rain
{% elif is_state("sensor.dark_sky_icon","snow") %} Snowy
{% elif is_state("sensor.dark_sky_icon","fog") %} Foggy
{% elif is_state("sensor.dark_sky_icon","sleet") %} Sleet
{% elif is_state("sensor.dark_sky_icon","wind") %} Windy
{% elif is_state("sensor.dark_sky_icon","cloudy") %} Cloudy
{% elif is_state("sensor.dark_sky_icon","partly-cloudy-day") %} Partly Cloudy
{% elif is_state("sensor.dark_sky_icon","partly-cloudy-night") %} Partly Cloudy
{% elif is_state("sensor.dark_sky_icon","hail") %} Hailing
{% elif is_state("sensor.dark_sky_icon","lightning") %} Lightning
{% elif is_state("sensor.dark_sky_icon","thunderstorm") %} Thunderstorm
{% endif %}
dark_sky_alt_wind:
value_template: >-
{% set winddir = ['North','North-Northeast','Northeast','East-Northeast','East','East-Southeast','Southeast','South-Southeast','South','South-Southwest','Southwest','West-Southwest','West','West-Northwest','Northwest','North-Northwest','North'] %}
{{ states('sensor.dark_sky_wind_speed') | round }} mi/h from the {{ winddir[((states('sensor.dark_sky_wind_bearing') | float / 360)*16) | round]}}
If you provide the Finnish text translation for âTodayâs Highâ, âFeels Likeâ and the cardinal compass points I can add them to the next release.
1 Like
I have tried to get this working but am seeing the following error:
Uncaught (in promise) TypeError: Cannot read property 'state' of undefined at HTMLElement.get current [as current] (dark-sky-weather-card.js?v=7.4:307)
That line in the .js file corresponds with the var conditions line of getCurrent() function:
var conditions = this._hass.states[this.config.entity_current_conditions].state;
I cannot post my full files because there is a 32,000 character limit.
Partial dark-sky-weather-card.js
// #####
// ##### current : Returns current weather information
// #####
get current() {
var conditions = this._hass.states[this.config.entity_current_conditions].state;
var humidity = this.config.entity_humidity ? this._hass.states[this.config.entity_humidity].state : 0;
var pressure = this.config.entity_pressure ? Math.round(this._hass.states[this.config.entity_pressure].state) : 0;
var temperature = Math.round(this._hass.states[this.config.entity_temperature].state);
var visibility = this.config.entity_visibility ? this._hass.states[this.config.entity_visibility].state : 0;
var windBearing = this.config.entity_wind_bearing ? isNaN(this._hass.states[this.config.entity_wind_bearing].state) ? this._hass.states[this.config.entity_wind_bearing].state : this.windDirections[(Math.round((this._hass.states[this.config.entity_wind_bearing].state / 360) * 16))] : 0;
var windSpeed = this.config.entity_wind_speed ? Math.round(this._hass.states[this.config.entity_wind_speed].state) : 0;
var apparent = this.config.entity_apparent_temp ? Math.round(this._hass.states[this.config.entity_apparent_temp].state) : 0;
var beaufort = this.config.show_beaufort ? html`Bft: ${this.beaufortWind} - ` : ``;
return {
'conditions': conditions,
'humidity': humidity,
'pressure': pressure,
'temperature': temperature,
'visibility': visibility,
'windBearing': windBearing,
'windSpeed': windSpeed,
'apparent' : apparent,
'beaufort' : beaufort,
}
}
ui-lovelace.yaml
resources:
- url: /local/custom_ui/dark-sky-weather-card.js?v=7.4
type: module
views:
- title: Weather
cards:
- type: 'custom:dark-sky-weather-card'
entity_current_conditions: sensor.dark_sky_icon
entity_temperature: sensor.dark_sky_temperature
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_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
entity_forecast_low_temp_1: sensor.dark_sky_overnight_low_temperature_0
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_summary_1: sensor.dark_sky_summary_1
entity_summary_2: sensor.dark_sky_summary_2
entity_summary_3: sensor.dark_sky_summary_3
entity_summary_4: sensor.dark_sky_summary_4
entity_summary_5: sensor.dark_sky_summary_5
entity_sun: sun.sun
entity_visibility: sensor.dark_sky_visibility
entity_daytime_high: sensor.dark_sky_daytime_high_temperature_0
entity_wind_bearing: sensor.dark_sky_wind_bearing
entity_wind_speed: sensor.dark_sky_wind_speed
entity_humidity: sensor.dark_sky_humidity
entity_pressure: sensor.dark_sky_pressure
entity_apparent_temp: sensor.dark_sky_apparent_temperature
entity_daily_summary: sensor.dark_sky_daily_summary
entity_pop: sensor.dark_sky_precip_probability
entity_pop_intensity: sensor.dark_sky_precip_intensity
entity_pop_1: sensor.dark_sky_precip_probability_1
entity_pop_2: sensor.dark_sky_precip_probability_2
entity_pop_3: sensor.dark_sky_precip_probability_3
entity_pop_4: sensor.dark_sky_precip_probability_4
entity_pop_5: sensor.dark_sky_precip_probability_5
locale: en
static_icons: false
tooltip_bg_color: 'rgb( 75,155,239)'
tooltip_border_color: orange
tooltip_border_width: 3
tooltip_caret_size: 10
tooltip_fg_color: '#fff'
tooltip_left_offset: -12
tooltip_width: 100
tooltips: true
old_daily_format: false
time_format: 24
show_beaufort: true
sensors.yaml
# Weather prediction
- platform: darksky
api_key: !secret darksky_apikey
language: en
forecast:
- 0
- 1
- 2
- 3
- 4
- 5
monitored_conditions:
- icon
- summary
- nearest_storm_distance
- nearest_storm_bearing
- humidity
- temperature
- temperature_high
- temperature_low
- apparent_temperature
- apparent_temperature_high
- apparent_temperature_low
- wind_speed
- wind_bearing
- precip_type
- precip_probability
- precip_accumulation
- precip_intensity
- precip_intensity_max
- uv_index
- daily_summary
- pressure
- visibility
update_interval:
minutes: 5
What is the value of sensor.dark_sky_icon in the states developer tool ?
Hi,
Could someone please let me know where Iâm going wrong here? The is my first custom card in Lovelace, so Iâm assuming that Iâm missing something very simple. I am getting the following issue;
I have these files set up in my config file;
my dark sky weather card css is;
.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;
my dark sky weather card js is;
class DarkSkyWeatherCard extends HTMLElement {
set hass(hass) {
if (!this.content) {
const card = document.createElement('ha-card');
const link = document.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
link.href = '/local/custom_ui/dark-sky-weather-card.css';
card.appendChild(link);
this.content = document.createElement('div');
this.content.className = 'card';
card.appendChild(this.content);
this.appendChild(card);
}
const getUnit = function (measure) {
const lengthUnit = hass.config.unit_system.length;
switch (measure) {
case 'air_pressure':
return lengthUnit === 'km' ? 'hPa' : 'inHg';
case 'length':
return lengthUnit;
case 'precipitation':
return lengthUnit === 'km' ? 'mm' : 'in';
default:
return hass.config.unit_system[measure] || '';
}
};
const transformDayNight = {
"below_horizon": "night",
"above_horizon": "day",
}
const sunLocation = transformDayNight[hass.states[this.config.entity_sun].state];
const weatherIcons = {
'clear-day': 'day',
'clear-night': 'night',
'rain': 'rainy-5',
'snow': 'snowy-6',
'sleet': 'rainy-6',
'wind': 'cloudy',
'fog': 'cloudy',
'cloudy': 'cloudy',
'partly-cloudy-day': 'cloudy-day-3',
'partly-cloudy-night': 'cloudy-night-3',
'hail': 'rainy-7',
'lightning': 'thunder',
'thunderstorm': 'thunder',
'windy-variant': `cloudy-${sunLocation}-3`,
'exceptional': '!!',
}
const windDirections = [
'N',
'NNE',
'NE',
'ENE',
'E',
'ESE',
'SE',
'SSE',
'S',
'SSW',
'SW',
'WSW',
'W',
'WNW',
'NW',
'NNW',
'N'
];
var forecastDate1 = new Date();
forecastDate1.setDate(forecastDate1.getDate()+1);
var forecastDate2 = new Date();
forecastDate2.setDate(forecastDate2.getDate()+2);
var forecastDate3 = new Date();
forecastDate3.setDate(forecastDate3.getDate()+3);
var forecastDate4 = new Date();
forecastDate4.setDate(forecastDate4.getDate()+4);
var forecastDate5 = new Date();
forecastDate5.setDate(forecastDate5.getDate()+5);
const currentConditions = hass.states[this.config.entity_current_conditions].state;
const humidity = hass.states[this.config.entity_humidity].state;
const pressure = Math.round(hass.states[this.config.entity_pressure].state);
const temperature = Math.round(hass.states[this.config.entity_temperature].state);
// const forecast_high_temp = Math.round(hass.states[this.config.entity_forecast_high_temp].state);
// const forecast_low_temp = Math.round(hass.states[this.config.entity_forecast_low_temp].state);
const apparent_temperature = Math.round(hass.states[this.config.entity_apparent_temperature].state);
const visibility = hass.states[this.config.entity_visibility].state;
const windBearing = windDirections[(Math.round((hass.states[this.config.entity_wind_bearing].state / 360) * 16))];
const windSpeed = Math.round(hass.states[this.config.entity_wind_speed].state);
const forecast1 = { date: forecastDate1,
condition: this.config.entity_forecast_icon_1,
temphigh: this.config.entity_forecast_high_temp_1,
templow: this.config.entity_forecast_low_temp_1, };
const forecast2 = { date: forecastDate2,
condition: this.config.entity_forecast_icon_2,
temphigh: this.config.entity_forecast_high_temp_2,
templow: this.config.entity_forecast_low_temp_2, };
const forecast3 = { date: forecastDate3,
condition: this.config.entity_forecast_icon_3,
temphigh: this.config.entity_forecast_high_temp_3,
templow: this.config.entity_forecast_low_temp_3, };
const forecast4 = { date: forecastDate4,
condition: this.config.entity_forecast_icon_4,
temphigh: this.config.entity_forecast_high_temp_4,
templow: this.config.entity_forecast_low_temp_4, };
const forecast5 = { date: forecastDate5,
condition: this.config.entity_forecast_icon_5,
temphigh: this.config.entity_forecast_high_temp_5,
templow: this.config.entity_forecast_low_temp_5, };
const forecast = [forecast1,forecast2,forecast3,forecast4,forecast5];
this.content.innerHTML = `
<span>
<span class="icon bigger" style="background: none, url(/local/icons/weather_icons/animated/${weatherIcons[currentConditions]}.svg) no-repeat; background-size: contain;">${currentConditions}</span>
<ul style="list-style-type:none">
<li><span class="temp">${temperature}</span><span class="tempc"> ${getUnit('temperature')}</span></li>
<li><span class="tempa">Feels like ${apparent_temperature}</span><span class="unitc"> ${getUnit('temperature')}</span></li>
</ul>
</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/${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>`;
}
setConfig(config) {
if (!config.entity_current_conditions ||
!config.entity_humidity ||
!config.entity_pressure ||
!config.entity_temperature ||
!config.entity_visibility ||
!config.entity_wind_bearing ||
!config.entity_wind_speed) {
throw new Error('Please define entities');
}
this.config = config;
}
// @TODO: This requires more intelligent logic
getCardSize() {
return 3;
}
}
customElements.define('dark-sky-weather-card', DarkSkyWeatherCard);
And in my configuration.yaml file I have;
sensor:
- platform: yr
- platform: darksky
api_key: !secret darksky_api_key
forecast:
- 1
- 2
- 3
- 4
- 5
monitored_conditions:
- icon
- summary
- nearest_storm_distance
- nearest_storm_bearing
- humidity
- temperature
- temperature_high
- temperature_low
- apparent_temperature
- apparent_temperature_high
- apparent_temperature_low
- wind_speed
- wind_bearing
- precip_type
- precip_probability
- precip_accumulation
- precip_intensity
- precip_intensity_max
- uv_index
- daily_summary
- pressure
- visibility
update_interval:
minutes: 5Hi and thanks, love your card, itâs so clean and elegant.
I hope i got everything right, some Finn could correct me if iâm wrong.
Feels Like = SÀÀ tuntuu kuin
Todayâs High = Ylin lĂ€mpötila
We do not use in Finland those in between points like NNE.
But here are the ones we use:
N = Pohjoistuulta
NE = Koillistuulta
E = ItÀtuulta
SE = Kaakkoistuulta
S = EtelÀtuulta
SW = Lounaistuulta
W = LĂ€nsituulta
NW = Luodetuulta
So if the wind blows 10 km/h from SW it would be Lounaistuulta 2.7 m/s
And the correct measurement for windspeed is meters / second in Finland
1 Like
I am not sure I am following your question. In the debugger, .state looks like this and has no value:
