Custom Dark Sky Animated Weather Card

Ive also tried to add the card to the custom_tracker but it isn’t showing up…

image

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.json

What is this card?..can you explain please?

It’s the custom tracker card/custom updater https://github.com/custom-components/custom_updater

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. :unamused:

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

image

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 :wink:

no to need to substitute, maybe simply add it the precipitation? Ive done it like this for now:

06

//  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:

41

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:

51

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 }}"

Auswahl_177

New version of card based primarily on requests from @Mariusthvdb

Major updates:

  • Current condition slots
  • Separator bar
  • Probability of precipitation intensity

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:
image

but if I add some slot flags, I can rearrange things:

slot_l1: pop
slot_l3: pressure
slot_r1: daytime_high
slot_r3: visibility

image

Or even something like this:

slot_l3: sun_next
slot_l4: sun_following
slot_r4: visibility

image

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

image
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

image

1 Like

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 :wink: 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?

00

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!