Custom Dark Sky Animated Weather Card


#608

I’ve noticed that a lot of you guys have the current condition in text next to the big icon at the top right? How do you guys get that? I can’t find the option to turn that on.


#609

I think it’s all correct…

lovelace:

resources:
  - url: /local/custom_ui/card-tools.js
    type: js
  - url: /local/custom_ui/card-modder.js
    type: module
  - url: /local/custom_ui/tracker-card.js?v=0.1.5
    type: js
  - url: /local/custom_ui/weather-card.js?v=0.0.1
    type: js
  - url: /local/custom_ui/mini-media-player-bundle.js?v=0.9.7
    type: module
  - url: /local/custom_ui/vertical-style-card.js?v=0.0.2
    type: js
  - url: /local/custom_ui/button-card.js?v=0.0.3
    type: module
  - url: /local/custom_ui/monster-card.js?v=0.2.3
    type: js

  - url: /local/custom_ui/dark-sky-weather-card.js?v=0.7.1
    type: module

image


#610

I get this error a lot. I’d say about 50/50. It either loads or it does and gives this error. At least for you it’s consistently an error. I’ve tried different browsers, devices and it’s still 50/50. No idea what the issue is. :frowning:


#611

get rid of the css file.

Also I found I had to delete all data and cookies before mine started working again after cardgate.


#612

You need to create a sensor to add the current condition… it’s not in the lovelace file… Mark posted the code to add when he did the major update before the one on the weekend.


#613

done and done…restarted HA, still no good, even on a completely new device which has never loaded that page in its life!


#614

Thanks @DavidFW1960. I must have totally missed that post. Seems that I can’t get it working. As in the new sensor template is working, but the card isn’t updating with current condition text.

I also added the show_beaufort option and it’s not working. Hmm… Not sure what is happening.


#615

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

#616

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


#617

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


#618

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:


#619

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


#620

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?


#621

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?


#622

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.


#623

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


#624

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


#625

Added to latest version


#626

Added to latest version. You can use “slots” to define the order of the conditions.


#627

Added to latest version