Custom Dark Sky Animated Weather Card

Milster · January 26, 2019, 12:44am

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!

m.p.frankland · January 26, 2019, 12:44am

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.

DavidFW1960 · January 26, 2019, 1:03am

I’ve gone back to defaults now for this and it looks great again…

mannigill1 · January 26, 2019, 3:29am

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

DavidFW1960 · January 26, 2019, 3:41am

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.

mannigill1 · January 26, 2019, 3:59am

Thanks David, worked like charm

Abeksis · January 26, 2019, 9:23pm

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

cjsimmons · January 26, 2019, 9:27pm

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

Abeksis · January 26, 2019, 9:30pm

I saw that you responded to him … I also wrote him … Still no answer

Anwen · January 26, 2019, 9:39pm

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?

thomasloven · January 26, 2019, 9:51pm

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.

Abeksis · January 26, 2019, 10:08pm

Thanks a lot, works great.

klogg · January 26, 2019, 10:58pm

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.

telecomguy · January 27, 2019, 1:35am

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?

finity · January 27, 2019, 2:22am

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

alibababa · January 27, 2019, 2:37am

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

telecomguy · January 27, 2019, 3:21pm

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

finity · January 27, 2019, 5:00pm

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

telecomguy · January 27, 2019, 5:55pm

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.

finity · January 27, 2019, 6:02pm

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.