Custom Dark Sky Animated Weather Card

Those were the main changes that I made - the card usually can’t be set up to do it.
If you give me a couple of days I will clean up my code and post it so you can try it/modify it if you are looking for something similar.

You need to know some JavaScript though. This forum is not a Help Desk.

Ok I am waiting for your code

It was my fault that @pepeEL was asking. I wasn’t clear in my first post that the changes that I made to the card were to show the different views (daily to short term to hourly). They likely just thought that was standard and I was showing something else.

1 Like

well, I like to think we can and like to be helpful…
so, if we can help, let’s do.

2 Likes

Agreed
Ir seems like many people want it all done for them though, causing one forum admin to start this thread I quoted from.

Yeah, I thought that post was mostly excellent but I did baulk at that opening gambit.
I’d say the very definition of this forum pretty much is a helpdesk, albeit with many prior expectations on the helpee*, as covered in that post.

*Spellchecker says that’s not a word, but I’m sticking with it!

1 Like

@pepeEL,

You can download my version of the card here. Setup is generally the same as the original version but go through the readme file to see what needs to be added to your HA config (darksky sensor) and the card config to get it to work.

And sorry - I can’t translate some of the labels. If you need another language to be displayed you can edit the .js file and look for the area where localization is set (I think it should be easy for you to fix yourself).

1 Like

Ok i test and give you and info… thanks.

Ok i add this but not show me weather hourly… In entity i have enities by hourly…

Did you set

extended_info: true

This is the main flag to activate the cycling through other views.

Yes. It is my config for card

tooltip_bg_color: ‘rgb( 75,155,239)’
entity_hourly_icon_15: sensor.dark_sky_icon_15h
time_format: 24
entity_hourly_icon_4: sensor.dark_sky_icon_4h
entity_hourly_summary_18: sensor.dark_sky_summary_18h
entity_hourly_icon_20: sensor.dark_sky_icon_20h
entity_hourly_temp_2: sensor.dark_sky_temperature_2h
entity_hourly_temp_13: sensor.dark_sky_temperature_13h
entity_hourly_temp_16: sensor.dark_sky_temperature_16h
entity_hourly_summary_24: sensor.dark_sky_summary_24h
entity_hourly_temp_11: sensor.dark_sky_temperature_11h
entity_hourly_apparent_20: sensor.dark_sky_apparent_temperature_20h
entity_summary_4: sensor.dark_sky_summary_4d
entity_hourly_summary_1: sensor.dark_sky_summary_1h
entity_hourly_icon_6: sensor.dark_sky_icon_6h
entity_forecast_low_temp_3: sensor.dark_sky_overnight_low_temperature_2d
entity_forecast_icon_1: sensor.dark_sky_icon_1d
entity_hourly_temp_7: sensor.dark_sky_temperature_7h
entity_hourly_temp_23: sensor.dark_sky_temperature_23h
entity_hourly_summary_15: sensor.dark_sky_summary_15h
entity_hourly_apparent_19: sensor.dark_sky_apparent_temperature_19h
extended_info: true
entity_hourly_pop_23: sensor.dark_sky_precip_probability_23h
entity_forecast_icon_3: sensor.dark_sky_icon_3d
tooltip_width: 100
entity_hourly_icon_11: sensor.dark_sky_icon_11h
entity_hourly_apparent_3: sensor.dark_sky_apparent_temperature_3h
entity_forecast_low_temp_1: sensor.dark_sky_overnight_low_temperature_0d
entity_hourly_icon_10: sensor.dark_sky_icon_10h
entity_hourly_icon_2: sensor.dark_sky_icon_2h
entity_wind_bearing: sensor.dark_sky_wind_bearing
entity_hourly_pop_17: sensor.dark_sky_precip_probability_17h
entity_hourly_temp_20: sensor.dark_sky_temperature_20h
entity_hourly_temp_9: sensor.dark_sky_temperature_9h
entity_hourly_summary_19: sensor.dark_sky_summary_19h
entity_pop_4: sensor.dark_sky_precip_probability_4d
entity_hourly_apparent_8: sensor.dark_sky_apparent_temperature_8h
entity_forecast_low_temp_2: sensor.dark_sky_overnight_low_temperature_1d
entity_hourly_temp_22: sensor.dark_sky_temperature_22h
entity_hourly_pop_12: sensor.dark_sky_precip_probability_12h
entity_hourly_pop_19: sensor.dark_sky_precip_probability_19h
entity_hourly_apparent_12: sensor.dark_sky_apparent_temperature_12h
entity_hourly_apparent_2: sensor.dark_sky_apparent_temperature_2h
entity_hourly_apparent_7: sensor.dark_sky_apparent_temperature_7h
cycle_duration: 60
entity_hourly_pop_4: sensor.dark_sky_precip_probability_4h
entity_hourly_summary_20: sensor.dark_sky_summary_20h
entity_hourly_pop_3: sensor.dark_sky_precip_probability_3h
entity_hourly_summary_16: sensor.dark_sky_summary_16h
entity_hourly_summary_11: sensor.dark_sky_summary_11h
entity_hourly_pop_10: sensor.dark_sky_precip_probability_10h
entity_hourly_icon_22: sensor.dark_sky_icon_22h
entity_forecast_low_temp_5: sensor.dark_sky_overnight_low_temperature_4d
entity_hourly_summary_13: sensor.dark_sky_summary_13h
tooltip_border_color: orange
entity_hourly_pop_5: sensor.dark_sky_precip_probability_5h
entity_hourly_pop_6: sensor.dark_sky_precip_probability_6h
entity_sun: sun.sun
type: ‘custom:dark-sky-weather-card’
entity_hourly_pop_24: sensor.dark_sky_precip_probability_24h
entity_hourly_temp_8: sensor.dark_sky_temperature_8h
entity_apparent_temp: sensor.dark_sky_apparent_temperature
entity_hourly_icon_16: sensor.dark_sky_icon_16h
entity_hourly_temp_19: sensor.dark_sky_temperature_19h
entity_hourly_pop_15: sensor.dark_sky_precip_probability_15h
entity_forecast_high_temp_1: sensor.dark_sky_daytime_high_temperature_1d
entity_hourly_apparent_9: sensor.dark_sky_apparent_temperature_9h
entity_hourly_summary_22: sensor.dark_sky_summary_22h
entity_hourly_pop_1: sensor.dark_sky_precip_probability_1h
forecast_labels: true
entity_hourly_temp_4: sensor.dark_sky_temperature_4h
entity_hourly_summary_7: sensor.dark_sky_summary_7h
entity_hourly_temp_3: sensor.dark_sky_temperature_3h
static_icons: false
entity_hourly_temp_5: sensor.dark_sky_temperature_5h
entity_summary_3: sensor.dark_sky_summary_3d
entity_hourly_summary_5: sensor.dark_sky_summary_5h
tooltip_border_width: 3
entity_hourly_pop_22: sensor.dark_sky_precip_probability_22h
entity_forecast_low_temp_4: sensor.dark_sky_overnight_low_temperature_3d
entity_hourly_icon_24: sensor.dark_sky_icon_24h
entity_visibility: sensor.dark_sky_visibility
entity_hourly_temp_15: sensor.dark_sky_temperature_15h
entity_forecast_high_temp_2: sensor.dark_sky_daytime_high_temperature_2d
entity_forecast_high_temp_5: sensor.dark_sky_daytime_high_temperature_5d
entity_hourly_pop_18: sensor.dark_sky_precip_probability_18h
entity_temperature: sensor.dark_sky_temperature
entity_hourly_pop_0: sensor.dark_sky_precip_probability_0h
entity_hourly_summary_9: sensor.dark_sky_summary_9h
entity_summary_2: sensor.dark_sky_summary_2d
entity_hourly_apparent_22: sensor.dark_sky_apparent_temperature_22h
entity_pop_1: sensor.dark_sky_precip_probability_1d
tooltip_caret_size: 10
entity_hourly_pop_2: sensor.dark_sky_precip_probability_2h
show_separator: true
entity_hourly_icon_19: sensor.dark_sky_icon_19h
entity_hourly_apparent_13: sensor.dark_sky_apparent_temperature_13h
entity_hourly_icon_1: sensor.dark_sky_icon_1h
entity_forecast_icon_2: sensor.dark_sky_icon_2d
entity_hourly_pop_7: sensor.dark_sky_precip_probability_7h
entity_pop: sensor.dark_sky_precip_probability
entity_hourly_summary_4: sensor.dark_sky_summary_4h
entity_humidity: sensor.dark_sky_humidity
entity_hourly_icon_3: sensor.dark_sky_icon_3h
entity_hourly_summary_6: sensor.dark_sky_summary_6h
entity_summary_1: sensor.dark_sky_summary_1d
entity_hourly_summary_2: sensor.dark_sky_summary_2h
entity_hourly_apparent_23: sensor.dark_sky_apparent_temperature_23h
entity_hourly_icon_7: sensor.dark_sky_icon_7h
entity_hourly_icon_0: sensor.dark_sky_icon_0h
entity_hourly_temp_21: sensor.dark_sky_temperature_21h
entity_hourly_icon_9: sensor.dark_sky_icon_9h
alt_wind: sensor.dark_sky_alt_wind
entity_hourly_apparent_14: sensor.dark_sky_apparent_temperature_14h
entity_hourly_pop_8: sensor.dark_sky_precip_probability_8h
entity_hourly_apparent_6: sensor.dark_sky_apparent_temperature_6h
entity_hourly_apparent_17: sensor.dark_sky_apparent_temperature_17h
tooltip_left_offset: -12
show_beaufort: true
entity_hourly_temp_1: sensor.dark_sky_temperature_1h
entity_hourly_apparent_15: sensor.dark_sky_apparent_temperature_15h
entity_hourly_apparent_4: sensor.dark_sky_apparent_temperature_4h
entity_hourly_icon_13: sensor.dark_sky_icon_13h
entity_summary_5: sensor.dark_sky_summary_5d
entity_hourly_apparent_11: sensor.dark_sky_apparent_temperature_11h
entity_hourly_icon_23: sensor.dark_sky_icon_23h
tooltips: true
entity_hourly_temp_10: sensor.dark_sky_temperature_10h
entity_forecast_high_temp_4: sensor.dark_sky_daytime_high_temperature_4d
entity_hourly_summary_10: sensor.dark_sky_summary_10h
old_daily_format: false
entity_hourly_icon_14: sensor.dark_sky_icon_14h
entity_hourly_temp_12: sensor.dark_sky_temperature_12h
entity_hourly_icon_5: sensor.dark_sky_icon_5h
entity_hourly_icon_18: sensor.dark_sky_icon_18h
entity_pop_2: sensor.dark_sky_precip_probability_2d
entity_hourly_icon_8: sensor.dark_sky_icon_8h
forecast_icon_size: 60px
entity_hourly_pop_13: sensor.dark_sky_precip_probability_13h
large_icon_size: 14em
entity_hourly_summary_12: sensor.dark_sky_summary_12h
entity_hourly_summary_17: sensor.dark_sky_summary_17h
entity_hourly_summary_3: sensor.dark_sky_summary_3h
tooltip_fg_color: ‘#fff
entity_hourly_pop_16: sensor.dark_sky_precip_probability_16h
entity_hourly_icon_21: sensor.dark_sky_icon_21h
entity_hourly_pop_14: sensor.dark_sky_precip_probability_14h
entity_hourly_temp_0: sensor.dark_sky_temperature_0h
entity_hourly_summary_21: sensor.dark_sky_summary_21h
entity_hourly_temp_14: sensor.dark_sky_temperature_14h
entity_wind_speed: sensor.dark_sky_wind_speed
entity_hourly_summary_0: sensor.dark_sky_summary_0h
entity_hourly_temp_6: sensor.dark_sky_temperature_6h
entity_pop_3: sensor.dark_sky_precip_probability_3d
entity_hourly_apparent_5: sensor.dark_sky_apparent_temperature_5h
entity_hourly_icon_17: sensor.dark_sky_icon_17h
entity_pressure: sensor.dark_sky_pressure
entity_hourly_icon_12: sensor.dark_sky_icon_12h
entity_current_text: sensor.dark_sky_current_text
entity_current_conditions: sensor.dark_sky_icon
entity_hourly_apparent_0: sensor.dark_sky_apparent_temperature_0h
entity_hourly_summary_14: sensor.dark_sky_summary_14h
entity_hourly_apparent_18: sensor.dark_sky_apparent_temperature_18h
entity_pop_5: sensor.dark_sky_precip_probability_5d
entity_hourly_pop_11: sensor.dark_sky_precip_probability_11h
entity_forecast_icon_5: sensor.dark_sky_icon_5d
entity_hourly_summary_8: sensor.dark_sky_summary_8h
entity_hourly_pop_21: sensor.dark_sky_precip_probability_21h
entity_hourly_temp_17: sensor.dark_sky_temperature_17h
entity_hourly_summary_23: sensor.dark_sky_summary_23h
forecast_icon_margin_right: 4px
entity_hourly_apparent_21: sensor.dark_sky_apparent_temperature_21h
entity_forecast_icon_4: sensor.dark_sky_icon_4d
locale: pl
entity_hourly_temp_24: sensor.dark_sky_temperature_24h
entity_hourly_apparent_10: sensor.dark_sky_apparent_temperature_10h
entity_hourly_pop_9: sensor.dark_sky_precip_probability_9h
entity_hourly_apparent_16: sensor.dark_sky_apparent_temperature_16h
entity_daily_summary: sensor.dark_sky_daily_summary
entity_hourly_apparent_24: sensor.dark_sky_apparent_temperature_24h
entity_forecast_high_temp_3: sensor.dark_sky_daytime_high_temperature_3d
entity_hourly_pop_20: sensor.dark_sky_precip_probability_20h
entity_hourly_apparent_1: sensor.dark_sky_apparent_temperature_1h
forecast_labels_colour: blue
entity_pop_intensity: sensor.dark_sky_precip_intensity
entity_hourly_temp_18: sensor.dark_sky_temperature_18h
entity_daytime_high: sensor.dark_sky_daytime_high_temperature_0d

Lol. That looks big when you paste it all. Maybe I have to work on that.
Is the card working except not rotating through the hourly and short term forecasts? If it is then maybe the original card is still in cache. I know when I was testing I would have to force clear cache and hard reload to see changes (in Chrome you press F12 to get the developer tools then right click on the “reload this page” button and select “Empty cache and hard reload”).
I’m not sure but you might have to change the version in the resources reference to something like dark-sky-weather-card.js?v=7.2 (the “official” card instructions show 7.1).
It could also be the browser if you are using internet explorer - apparently it doesn’t handle some css animations well (really not an expert, just basing this on other comments I have come across).
Hope something in there helps.

Hi
I clear cache and nothing…
ALso change to 7.2 and nothing. It looks as on screen. Not show high, low, P.O.P, temp., Feels like, P.O.P…pogoda

Say what? Everything you say is missing is showing there???

Looks on my screen and on screen James888. On my not showing hourly and short term forecast.

hope this custom lovelace card will be avaliable for HACS, from the developer of custom_updater

2 Likes

James888 can you help me with this hourly view ?

Now when i add as you write on your github https://github.com/888JW/home-assistant-config/tree/master/ui/darksky i have as look:

@m.p.frankland

Do you have any plans to add this to the new HACS installation/update component?

1 Like

I would very much like to see this one in HACS as well.