Ive also tried to add the card to the custom_tracker but it isn’t showing up…
custom_updater:
track:
- components
- cards
- python_scripts
card_urls:
- https://raw.githubusercontent.com/kalkih/mini-media-player/master/tracker.json
- https://raw.githubusercontent.com/kuuji/button-card/master/tracker.json
- https://raw.githubusercontent.com/iammexx/home-assistant-config/master/ui/darksky/version.jsonWhat is this card?..can you explain please?
Ok, got some really weird stuff happening now. Every time I load a page that has this custom card on it, I get the following errors:
https://{removed}/local/custom_ui/dark-sky-weather-card.js?v=0.7.1:26:176 Uncaught TypeError: Cannot read property 'state' of undefined
and a whole bunch of these as well…
https://unpkg.com/@polymer/[email protected]/lib/utils/async.js?module:44:11 Uncaught TypeError: Cannot read property 'state' of undefined
Does anyone have any ideas?
UPDATE: Doesn’t matter. I worked it out. I updated something else on my Pi and it downgraded one of the requirements for HA, cryptography to 2.2.2. I’ve just updated it back to what HA needs and the card is working again. 
Probably of no significance to the weather card (but, hey, you never know with Lovelace!) - you don’t need ‘mini-media-player’ anymore, you only need the bundle.
- url: /local/custom_ui/mini-media-player-bundle.js?v=0.9.8
type: module
Hey @m.p.frankland,
as per this thread Custom animated weather card for Lovelace wouldn’t you agree that adding the 1 hour precipitation to the main body of the variations would be a great idea? though were now used to visibility, I must agree with @tottow that the precipitation is very useful…this card can use both, so will be even completer 
no to need to substitute, maybe simply add it the precipitation? Ive done it like this for now:
// Handle Configuration Flags
var icons = this.config.static_icons ? "static" : "animated";
var sunLeft = this.config.entity_sun ? this.sunSet.left : "";
var sunRight = this.config.entity_sun ? this.sunSet.right : "";
var currentText = this.config.entity_current_text ? html`<span class="currentText">${hass.states[this.config.entity_current_text].state}</span>` : ``;
var apparentTemp = this.config.entity_apparent_temp ? html`<span class="apparent">${this.localeText.feelsLike} ${this.current.apparent} ${this.getUOM("temperature")}</span>` : ``;
var daytimeHigh = this.config.entity_daytime_high ? html`<li><span class="ha-icon"><ha-icon icon="mdi:thermometer"></ha-icon></span>${this.localeText.maxToday} ${Math.round(this.hass.states[this.config.entity_daytime_high].state)}<span> ${this.getUOM('temperature')}</span></li>` : ``;
var pop = this.config.entity_pop ? html`<li><span class="ha-icon"><ha-icon icon="mdi:weather-rainy"></ha-icon></span>${Math.round(this.hass.states[this.config.entity_pop].state)} %</li>` : ``;
// var precip = this.config.entity_precip_intensity ? html`<li>${this.hass.states[this.config.entity_precip_intensity].state} <span class="unit"> mm</span></li>` : ``;
var precip = this.config.entity_pop && this.config.entity_precip_intensity ? html`<li><span class="ha-icon"><ha-icon icon="mdi:weather-rainy"></ha-icon></span>${Math.round(this.hass.states[this.config.entity_pop].state)} % - ${this.hass.states[this.config.entity_precip_intensity].state}<span class="unit"> mm/h</span></li>` : ``;
var visibility = this.config.entity_visibility ? html`<li><span class="ha-icon"><ha-icon icon="mdi:weather-fog"></ha-icon></span>${this.current.visibility}<span class="unit"> ${this.getUOM('length')}</span></li>` : ``;
var wind = this.config.entity_wind_bearing && this.config.entity_wind_speed ? html`<li><span class="ha-icon"><ha-icon icon="mdi:weather-windy"></ha-icon></span>${this.current.beaufort}${this.current.windBearing} ${(this.current.windSpeed)*3.6}<span class="unit"> ${this.getUOM('length')}/h</span></li>` : ``;
var humidity = this.config.entity_humidity ? html`<li><span class="ha-icon"><ha-icon icon="mdi:water-percent"></ha-icon></span>${this.current.humidity}<span class="unit"> %</span></li>` : ``;
var pressure = this.config.entity_pressure ? html`<li><span class="ha-icon"><ha-icon icon="mdi:gauge"></ha-icon></span>${this.current.pressure}<span class="unit"> ${this.getUOM('air_pressure')}</span></li>` : ``;
var summary = this.config.entity_daily_summary ? html`<br><span class="unit">${hass.states[this.config.entity_daily_summary].state}</span></br>` : ``;
var precip = this.config.entity_pop && this.config.entity_precip_intensity ? html`<li><span class="ha-icon"><ha-icon icon="mdi:weather-rainy"></ha-icon></span>${Math.round(this.hass.states[this.config.entity_pop].state)} % - ${this.hass.states[this.config.entity_precip_intensity].state}<span class="unit"> mm/h</span></li>` : ``;
and config:
- type: custom:dark-sky-weather-card
entity_sun: sun.sun
entity_daily_summary: sensor.dark_sky_daily_summary
entity_current_conditions: sensor.dark_sky_forecast_icon_0
entity_humidity: sensor.dark_sky_humidity
entity_pressure: sensor.dark_sky_pressure
entity_apparent_temp: sensor.dark_sky_apparent_temperature
entity_temperature: sensor.dark_sky_temperature
entity_visibility: sensor.dark_sky_visibility
entity_daytime_high: sensor.dark_sky_forecast_daytime_high_temperature_0
entity_wind_bearing: sensor.dark_sky_wind_bearing
entity_wind_speed: sensor.br_wind_speed
entity_wind_force: sensor.br_wind_force
entity_current_text: sensor.weather_rsd_icon
entity_precip_intensity: sensor.dark_sky_precip_intensity
entity_forecast_high_temp_1: sensor.dark_sky_forecast_daytime_high_temperature_1
entity_forecast_high_temp_2: sensor.dark_sky_forecast_daytime_high_temperature_2
entity_forecast_high_temp_3: sensor.dark_sky_forecast_daytime_high_temperature_3
entity_forecast_high_temp_4: sensor.dark_sky_forecast_daytime_high_temperature_4
entity_forecast_high_temp_5: sensor.dark_sky_forecast_daytime_high_temperature_5
entity_forecast_low_temp_1: sensor.dark_sky_forecast_overnight_low_temperature_1
entity_forecast_low_temp_2: sensor.dark_sky_forecast_overnight_low_temperature_2
entity_forecast_low_temp_3: sensor.dark_sky_forecast_overnight_low_temperature_3
entity_forecast_low_temp_4: sensor.dark_sky_forecast_overnight_low_temperature_4
entity_forecast_low_temp_5: sensor.dark_sky_forecast_overnight_low_temperature_5
entity_forecast_icon_1: sensor.dark_sky_forecast_icon_1
entity_forecast_icon_2: sensor.dark_sky_forecast_icon_2
entity_forecast_icon_3: sensor.dark_sky_forecast_icon_3
entity_forecast_icon_4: sensor.dark_sky_forecast_icon_4
entity_forecast_icon_5: sensor.dark_sky_forecast_icon_5
entity_summary_1: sensor.dark_sky_forecast_summary_1
entity_summary_2: sensor.dark_sky_forecast_summary_2
entity_summary_3: sensor.dark_sky_forecast_summary_3
entity_summary_4: sensor.dark_sky_forecast_summary_4
entity_summary_5: sensor.dark_sky_forecast_summary_5
entity_pop: sensor.dark_sky_forecast_precip_probability
entity_pop_1: sensor.dark_sky_forecast_precip_probability_1
entity_pop_2: sensor.dark_sky_forecast_precip_probability_2
entity_pop_3: sensor.dark_sky_forecast_precip_probability_3
entity_pop_4: sensor.dark_sky_forecast_precip_probability_4
entity_pop_5: sensor.dark_sky_forecast_precip_probability_5
show_beaufort: true
tooltips: true
old_daily_format: false
static_icons: false
locale: nl
tooltip_bg_color: 'rgb( 75,155,239)'
tooltip_border_color: orange
tooltip_border_width: 1
tooltip_caret_size: 10
tooltip_fg_color: '#fff'
tooltip_left_offset: -5
tooltip_width: 100
as you can see, Ive also rearranged the variations a bit, so that the max temp today is on the right (temperature) side. An the precipitation is below the large icon, which is more coherent since they both often show clouds. Visibility has a lot to do with windspeed and force, so they are on one line now too. Which results in humidity and pressure to be aligned and that is very adequate.
Would you in any way want to consider adding a horizontal line above the variations? It might give the card a bit more structure, with a header kind of main info:
And, since we’re talking fine-tuning and a bit of fun too, wouldn’t it be cool if the variations icon for precipitation would reflect the kind of precipitation?
-hail, -snowy, -snowy-rainy, -rainy, -lightning-rainy, -pouring could be deducted for the icon in a template based on the current precipitation?
separate post for another feature suggestion: trying to get todays date in the card to have the summary show:
Summary for today, 23 january 2019 (or whatever format you like your date sensor to be in), I can’t for the life of me get the dat to show up… Have tried with and without styles, different sensor, even tried it on the current setup variable, but noting shows. No error either… only an empty space before the semi-colon:
I tried it with this lastly:
var summary = this.config.entity_daily_summary ? html`<br><span class="summary">${hass.states[this.config.entity_daily_summary].state}</span></br>` : ``;
var today = this.config.entity_date ? html`<span class="summary">${hass.states[this.config.entity_date].state}</span>` : ``;
and
<span class="summary">Summary for </span> ${today}: ${summary}
in the .js file, this is in the config:
- type: custom:dark-sky-weather-card
entity_sun: sun.sun
entity_daily_summary: sensor.dark_sky_daily_summary
entity_current_conditions: sensor.dark_sky_forecast_icon_0
entity_humidity: sensor.dark_sky_humidity
entity_pressure: sensor.dark_sky_pressure
entity_apparent_temp: sensor.dark_sky_apparent_temperature
entity_temperature: sensor.dark_sky_temperature
entity_visibility: sensor.dark_sky_visibility
entity_daytime_high: sensor.dark_sky_forecast_daytime_high_temperature_0
entity_wind_bearing: sensor.dark_sky_wind_bearing
entity_wind_speed: sensor.br_wind_speed
entity_wind_force: sensor.br_wind_force
entity_current_text: sensor.weather_rsd_icon
entity_precip_intensity: sensor.dark_sky_precip_intensity
entity_date: sensor.date
what am I doing wrong here?
It doesn’t work. I get differents errors:
Invalid config for [sensor.file]: invalid template (TemplateSyntaxError: expected name or number) for dictionary value @ data[‘value_template’]. Got “{{ value_json.[‘dark-sky-weather-card’].version }}”
I’d like to know also the current available version online. Tried:
but I get UNKNOWN. I don’t want to use custom updater card cause some “plugin” are not compatible.
Works for me.
- platform: rest
resource: https://raw.githubusercontent.com/iammexx/home-assistant-config/master/ui/darksky/version.json
name: customdarksky_available_version
scan_interval: 3600
value_template: "{{ value_json['dark-sky-weather-card'].version }}"
New version of card based primarily on requests from @Mariusthvdb
Major updates:
Updated card is here
Readme is here
Current condition slots
A request was made to move some of the current conditions around from side to side and different locations on each side. In thinking about this, I decided it would make sense to be able to define the side of the card you wanted the data on and also it’s position in the list.
To accomplish this I came up with the idea of slots.
There are 4 slots on each side of the card designated slot_l1 - l4 for the left side and slot_r1 - r4 for the right side. Each slot has a default value so you only need to specify slots you want to change. You can also specify an empty slot if you don’t want a specific slot displayed.
For example if I don’t specify any specific slot flags I get the default:
but if I add some slot flags, I can rearrange things:
slot_l1: pop
slot_l3: pressure
slot_r1: daytime_high
slot_r3: visibility
Or even something like this:
slot_l3: sun_next
slot_l4: sun_following
slot_r4: visibility
Note : Obviously you still need to populate the correct entities to get the values to show in their respective slots. See the readme file for more information on slots.
Separator Bar
use flag show_separator to add a separator bar to help define a header area:
show_separator: true
Note If you use this option and have also used current_data_top_margin to add space you will need to adjust the value as the separator defines a new starting point for the top-margin
POP intensity
add the optional entity_pop_intensity entity to get a precipitation intensity beside the current pop %:
entity_pop_intensity: sensor.dark_sky_precip_intensity
Added to latest version
Added to latest version. You can use “slots” to define the order of the conditions.
Added to latest version
Unfortunately, the current conditions wont necessarily match the POP conditions. Ideally I would use dark_sky_precip to get the current precipitation but it appears to be unknown. If this was passed in from the API it could be used to set the icon.
Ok thanks, was a typo problem.
Can i ask you if you try this code to show the installed version? Thanks.
I get unknown.
I don’t want to use custom updater card script.
I’ve also whitelisted /home/homeassistant/.homeassistant/www/custom_ui/ dir.
- platform: file
file_path: /home/homeassistant/.homeassistant/www/custom_ui/version.json
name: customdarksky_current_version
value_template: "{{ value_json['dark-sky-weather-card'].version }}"No, i’m using the custom_updater, was simply a test.
Format your code when posting (blue box at the top), then we will see.
Cool, you’ve been busy 
Please note that the % and F aren’t yet in the <span class="unit">. The way I did that was:
var precip = this.config.entity_pop && this.config.entity_precip_intensity ? html`<li><span class="ha-icon"><ha-icon icon="mdi:weather-rainy"></ha-icon></span>${Math.round(this.hass.states[this.config.entity_pop].state)}<span class="unit"> %</span> - ${this.hass.states[this.config.entity_precip_intensity].state}<span class="unit"> mm/h</span></li>` : ``;
Maybe, for esthetics, we could change the AM/PM too so all units are displayed alike.
btw, my date is working now.
btw2, my icon is off, it is night overhere, should show a cloudy night?
var icons = this.config.static_icons ? "static" : "animated";
var sunLeft = this.config.entity_sun ? this.sunSet.left : "";
var sunRight = this.config.entity_sun ? this.sunSet.right : "";
var currentText = this.config.entity_current_text ? html`<span class="currentText">${hass.states[this.config.entity_current_text].state}</span>` : ``;
var apparentTemp = this.config.entity_apparent_temp ? html`<span class="apparent">${this.localeText.feelsLike} ${this.current.apparent} ${this.getUOM("temperature")}</span>` : ``;
var daytimeHigh = this.config.entity_daytime_high ? html`<li><span class="ha-icon"><ha-icon icon="mdi:thermometer"></ha-icon></span>${this.localeText.maxToday} ${Math.round(this.hass.states[this.config.entity_daytime_high].state)}<span class="unit"> ${this.getUOM('temperature')}</span></li>` : ``;
// var pop = this.config.entity_pop ? html`<li><span class="ha-icon"><ha-icon icon="mdi:weather-rainy"></ha-icon></span>${Math.round(this.hass.states[this.config.entity_pop].state)} %</li>` : ``;
var precip = this.config.entity_pop && this.config.entity_precip_intensity ? html`<li><span class="ha-icon"><ha-icon icon="mdi:weather-rainy"></ha-icon></span>${Math.round(this.hass.states[this.config.entity_pop].state)}<span class="unit"> %</span> - ${this.hass.states[this.config.entity_precip_intensity].state}<span class="unit"> mm/h</span></li>` : ``;
var visibility = this.config.entity_visibility ? html`<li><span class="ha-icon"><ha-icon icon="mdi:weather-fog"></ha-icon></span>${this.current.visibility}<span class="unit"> ${this.getUOM('length')}</span></li>` : ``;
var wind = this.config.entity_wind_bearing && this.config.entity_wind_speed ? html`<li><span class="ha-icon"><ha-icon icon="mdi:weather-windy"></ha-icon></span>${this.current.beaufort}${this.current.windBearing} ${(this.current.windSpeed)*3.6}<span class="unit"> ${this.getUOM('length')}/h</span></li>` : ``;
var humidity = this.config.entity_humidity ? html`<li><span class="ha-icon"><ha-icon icon="mdi:water-percent"></ha-icon></span>${this.current.humidity}<span class="unit"> %</span></li>` : ``;
var pressure = this.config.entity_pressure ? html`<li><span class="ha-icon"><ha-icon icon="mdi:gauge"></ha-icon></span>${this.current.pressure}<span class="unit"> ${this.getUOM('air_pressure')}</span></li>` : ``;
var summary = this.config.entity_daily_summary ? html`<br><span class="summary">${hass.states[this.config.entity_daily_summary].state}</span></br>` : ``;
var today = this.config.entity_today ? html`<span class="today">${hass.states[this.config.entity_today].state}</span>` : ``;
I know, but we could create a mapper for that, to filter the relevant conditions? And set these against the available precipitation icons. In fact just like we do with the condition icons, that aren’t all available either.
like this maybe?:
get precipIcons() {
return {
'clear-day': 'weather-sunny',
'clear-night': 'weather-night',
'rain': 'weather-rainy',
'snow': 'weather-snowy',
'sleet': 'weather-pouring',
'wind': 'weather-cloudy',
'fog': 'weather-fog',
'cloudy': 'weather-cloudy',
'partly-cloudy-day': 'weather-cloudy',
'partly-cloudy-night': 'weather-cloudy',
'hail': 'weather-hail',
'lightning': 'weather-lightning',
'thunderstorm': 'weather-lightning-rainy',
'windy-variant': `weather-windy-variant`,
'exceptional': '!!',
}
}
Those main icons are off a bit too as Ive posted in the other post, during the night. I think that even when condition is cloudy, we maybe should check if its past 8pm to change to night icons?
Sorry. Formatted now
Why this?
Should be a rest sensor!