Custom Dark Sky Animated Weather Card

Ahh! Thanks, alignment has been restored! Sorry for the repeat query.

And for the observant of you; that today high reading is correct, it IS 38 degrees Celsius in Sydney today. 100.4 F. Melting hot! :slight_smile:

1 Like

New Version is available

Here

0.8.3

  • Polish text added : @bieniu
  • Adjusted temperature top-margin due to changes in HA v 86.x
  • Corrected windy-variant icon mapping

Note This version has been modified to work correctly with the latest version of HA 86.x. If you are using 85.1 or below you will likely need to adjust the top-margin of the temperature otherwise it will be misaligned. Use the temp_top_margin flag to specify a new margin. ā€œ5pxā€ is a good place to start.

2 Likes

Iā€™ve gone back to defaults now for this and it looks great againā€¦

are you using lovelace in Yaml mode? I disabled yaml mode and mine does not work at all.

Have you tried copying your ui-lovelace.yaml file to the clipboard (the whole file) and then opening lovelace editor in raw editor and overwriting it with that? THere is no reason yaml or storage mode will produce a different result other than there being a difference in the respective configurations.

Thanks David, worked like charm :slight_smile:

1 Like

I use a card-modder to design my lovelace.

Since last update 0.86.2 I get an error:

/local/custom_ui/card-modder.js:44:23 Uncaught TypeError: this.card.style.setProperty is not a function

what could be the problem?

You can see more information in my github - https://github.com/abeksis/My-HomeAssistant-Config

  - type: custom:card-modder
    card:
      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_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_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_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
      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
      show_separator: true
    style:
      background-image: url("/local/lovelace/background/cardbackk.png")
      background-repeat: no-repeat
      background-color: rgba(50,50,50,0.3)
      background-size: 100% 68px
      border-radius: 20px
      border: solid 1px rgba(100,100,100,0.3)
      box-shadow: 3px 3px rgba(0,0,0,0.4)
      overflow: hidden

I get this as well. Exact same error. Iā€™ve already asked @thomasloven who develops card-modded. Iā€™m just waiting for his reply.

I saw that you responded to him ā€¦ I also wrote him ā€¦ Still no answer :frowning:

Iā€™ve been using an older version of Dark Sky Weather card and have been watching this thread with interest. Today I installed the latest version (with temp_top_margin: 5px as suggested - Iā€™m still on 0.85.1, and using YAML mode). It is really amazing and I am so happy with it. Many, many thanks to @m.p.frankland and everyone who has contributed!

Iā€™m trying to limit the crazy amount of Dark Sky data coming in to HA. It seems to me that some of the monitored conditions included in the sensor arenā€™t actually used for anything. These would be

nearest_storm_distance
nearest_storm_bearing
apparent_temperature_high
apparent_temperature_low
uv_index

Can I remove these from the sensor, or am I missing something?

For those who use card-modder, Iā€™ve just made an update to it to handle this card.


For @m.p.frankland
Iā€™m by no means a java developer but Iā€¦ donā€™t think this is a good ideaā€¦
get functions are for things you wish to expose outside of your element. Is it vital that other card can read (but not edit) the styles of your card?

A better way, in my amateur opinion, would be to replace that line with style() { and this one with ${this.style()}. You might want to do that to other properties-that-should-be-functions as well.

2 Likes

Thanks a lot, works great.

No I donā€™t think you are.
Anything not used by this card or by you anywhere else can be removed.
But you could just comment them out for now to make sure it doesnā€™t break anything else.

1 Like

Hey all - I just tried adding this to my HASS server and lovelace config, but I canā€™t seem to get it working. Iā€™ve followed the directions on the git, set up my Dark Sky sensor properly and then put everything into my lovelace config, but nothing is showing up where the card should be. I am putting it between two cards, and I just get an extra space between the cards. Without custom card:

With custom card:

I am not seeing any errors in the log, although I am logging at warning. I did switch the log back to debug, and I can see debug messages for the card, but no errors. Iā€™ve even removed the ?v=7.1 from the end of the URL in the resource in lovelace to see if that was causing a problem, and it kicked out an error in the log so I know that did something. Iā€™ve even double checked that Iā€™ve got the files in the right place also:

Any ideas what I could be doing wrong here?

try refreshing your browser (ctrl-F5 for chrome).

Hi, thank you for your hard work. Everything is working perfectly. I just would like to ask you, if entity_pop_intensity could be rounded like value_template: "{{ states.sensor.dark_sky_precip_intensity.state | round(1) }}"?
Thank you

Thanks, I had already tried that before posting with no change. I just tried it again with the same results. Any other ideas?

try posting your config for the card. maybe thereā€™s something in there that isnā€™t right that youā€™re not seeing.

Hereā€™s the lovelace config for the resource:

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

And hereā€™s the actual card config:

- 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

Iā€™ve even tried removing the quotes from the card name for type: but that didnā€™t make any difference either.

Everything looks the same in my working config as yours does above.

Iā€™m having some funky stuff going on with my lovelace in that I need to restart my HA (instead of just a browser refresh) on every change to the config. Which is really annoying and I need to figure out whyā€¦

But try a restart to see if that might fix it.