Custom Dark Sky Animated Weather Card

Annotation%202019-11-05%20131032
Hi all,
Here is my card and I love it. The problem is - today is already Tuesday and as you can see on forecast panel the first day of the forecast is also Tuesday. And that would be not a big deal but the actual forecast in this slot is from Wednesday.
Does anyone compare his forecast to the other sources? I think it should start from Wednesday , so how i can fix my forecast days appearance?

Hi all,

This is probably a very basic question, but I’m new to both HA and Dark Sky.

  1. Is there any way to change the color (and size?) of the summary icon, or can I change the icons to my own icons for every possible state?
    Right now it’s black, which doesn’t really show too well on grey background.
  2. Can I somehow get rid of the C for Celsius to only display the temperature and the degrees sign? Would be nice to have a cleaner look if possible.

f946216ebe83d4a07933ebe734515bfaa3afa394%20(1) f946216ebe83d4a07933ebe734515bfaa3afa394

ui-lovelace,yaml
#Weather
###########################################################################
#Today image
          - type: image
            image: /local/Weather/Today.svg
            style:
              left: 27%
              top: 3%
#Today Summary
          - type: state-icon
            entity: sensor.dark_sky_summary_0d
            style:
              left: 27%
              top: 10%
#Today Temp
          - type: state-label
            entity: sensor.dark_sky_temperature
            style:
              left: 27%
              top: 16%
              color: white
              font-size: 23px
#Tomorrow image
          - type: image
            image: /local/Weather/Tomorrow.svg
            style:
              left: 76%
              top: 3%
#Tomorrow Summary
          - type: state-icon
            entity: sensor.dark_sky_summary_1d
            style:
              left: 76%
              top: 10%
#Tomorrow Temp
          - type: state-label
            entity: sensor.dark_sky_temperature
            style:
              left: 76%
              top: 16%
              color: white
              font-size: 23px
Configuration.yaml
#Dark Sky Sensor
  - platform: darksky
    api_key: SecretCode
    forecast:
      - 0
      - 1
    monitored_conditions:
      - summary
      - temperature
      - icon
      - temperature_low
      - temperature_high

Kind regards
Daniel

Hi,

I’ve been using this card and I like it a lot! Have one problem though - the card seems to be too wide when displayed on iPhone (XR), attached is a screenshot from Safari, in homeassitant companion app the gap from the right is not that big, but it’s there. I was trying to fix it myself, but have no clue. Can anyone help please?

Is there anything better in the Home Assistant Community Store? I can’t fine one, with Dark Sky support.

This one is in HACS - but i doesn’t looks like there’s support for Dark Sky :slight_smile:

Is there a way to hide the units for one of the sensors, like for: “entity_forecast_high_temp_5: sensor.dark_sky_daytime_high_temperature_5d”, for example?

Not sure what you mean, bramkragten/weather-card supports dark sky. Scroll to the bottom of that repositories readme to see how to set weather to use Dark Sky.

1 Like

Wow. How did i miss that part. I guess i looked for a larger selection of configs or so :slight_smile: Thanks decairn.

Hi guys,
i’ve installed new script version and all work as it should but icons doens’t show.
I’ve installed it in www/icons/weather-icons/

Cattura

Any ideas?
Thank you so much in advance and happy new year to all!!
Regards,

Alessandro

Should be

www/icons/weather_icons/

Fixed, what a fool!
Thank you so much @VDRainer

Hi,
i’m here again.
Cards on pc desktop works as it should but on my mobile phone (android with Chrome browser) not:

Thanks in advance for any help.
Regards,

Alessandro

might be a cache issue, did you refresh? Sometimes have that same thing on iPhone, and killing the app to force refresh does the thing.

Incredible!
I’ve refreshed cache browser, cards are gone :frowning_face:

This is my configuration:

Cattura2

This is also my card code:

- badges: []
    cards:
      - entity_apparent_temp: sensor.dark_sky_apparent_temperature
        entity_current_conditions: sensor.dark_sky_icon
        entity_daily_summary: sensor.dark_sky_daily_summary
        entity_daytime_high: sensor.dark_sky_daytime_high_temperature_0d
        entity_forecast_high_temp_1: sensor.dark_sky_daytime_high_temperature_1d
        entity_forecast_high_temp_2: sensor.dark_sky_daytime_high_temperature_2d
        entity_forecast_high_temp_3: sensor.dark_sky_daytime_high_temperature_3d
        entity_forecast_high_temp_4: sensor.dark_sky_daytime_high_temperature_4d
        entity_forecast_high_temp_5: sensor.dark_sky_daytime_high_temperature_5d
        entity_forecast_icon_1: sensor.dark_sky_icon_1d
        entity_forecast_icon_2: sensor.dark_sky_icon_2d
        entity_forecast_icon_3: sensor.dark_sky_icon_3d
        entity_forecast_icon_4: sensor.dark_sky_icon_4d
        entity_forecast_icon_5: sensor.dark_sky_icon_5d
        entity_forecast_low_temp_1: sensor.dark_sky_overnight_low_temperature_0d
        entity_forecast_low_temp_2: sensor.dark_sky_overnight_low_temperature_1d
        entity_forecast_low_temp_3: sensor.dark_sky_overnight_low_temperature_2d
        entity_forecast_low_temp_4: sensor.dark_sky_overnight_low_temperature_3d
        entity_forecast_low_temp_5: sensor.dark_sky_overnight_low_temperature_4d
        entity_humidity: sensor.umidita_esterna
        entity_pop: sensor.dark_sky_precip_probability
        entity_pop_1: sensor.dark_sky_precip_probability_1d
        entity_pop_2: sensor.dark_sky_precip_probability_2d
        entity_pop_3: sensor.dark_sky_precip_probability_3d
        entity_pop_4: sensor.dark_sky_precip_probability_4d
        entity_pop_5: sensor.dark_sky_precip_probability_5d
        entity_pop_intensity: sensor.dark_sky_precip_intensity
        entity_pressure: sensor.barometro
        entity_summary_1: sensor.dark_sky_summary_1d
        entity_summary_2: sensor.dark_sky_summary_2d
        entity_summary_3: sensor.dark_sky_summary_3d
        entity_summary_4: sensor.dark_sky_summary_4d
        entity_summary_5: sensor.dark_sky_summary_5d
        entity_sun: sun.sun
        entity_temperature: sensor.temperatura_esterna
        entity_visibility: sensor.dark_sky_visibility
        entity_wind_bearing: sensor.direzione_vento
        entity_wind_speed: sensor.raffica_vento
        locale: it
        old_daily_format: false
        show_beaufort: true
        static_icons: false
        time_format: 24
        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
        type: 'custom:dark-sky-weather-card'

Thank you so much for any help.
Regards,

Alessandro

all cards, or only the dark_sky card?

did you try another browser too?

any error messages in the log, or inspector? If the card shows on desktop this would at least mean the config is alright, and it is an android/chrome combination issue…

as far as I can see, the config would be fine, and I can tell you it does work on iPhone /Chrome like that.

Is there anything you changed before the issue started?

Is there a way to import a personal weather station data into this card? If one gets PWS data in HA, having local/personal weather shown in this card could be awesome.

Only dark-sky card.
weather card doesn’t show anymore on both system, Android and windows :frowning:

Please, could you send me valid dark-sky-weather-card.js file?

This is my manual card code:

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_1d
entity_forecast_high_temp_2: sensor.dark_sky_daytime_high_temperature_2d
entity_forecast_high_temp_3: sensor.dark_sky_daytime_high_temperature_3d
entity_forecast_high_temp_4: sensor.dark_sky_daytime_high_temperature_4d
entity_forecast_high_temp_5: sensor.dark_sky_daytime_high_temperature_5d
entity_forecast_icon_1: sensor.dark_sky_icon_1d
entity_forecast_icon_2: sensor.dark_sky_icon_2d
entity_forecast_icon_3: sensor.dark_sky_icon_3d
entity_forecast_icon_4: sensor.dark_sky_icon_4d
entity_forecast_icon_5: sensor.dark_sky_icon_5d
entity_forecast_low_temp_1: sensor.dark_sky_overnight_low_temperature_0d
entity_forecast_low_temp_2: sensor.dark_sky_overnight_low_temperature_1d
entity_forecast_low_temp_3: sensor.dark_sky_overnight_low_temperature_2d
entity_forecast_low_temp_4: sensor.dark_sky_overnight_low_temperature_3d
entity_forecast_low_temp_5: sensor.dark_sky_overnight_low_temperature_4d
entity_summary_1: sensor.dark_sky_summary_1d
entity_summary_2: sensor.dark_sky_summary_2d
entity_summary_3: sensor.dark_sky_summary_3d
entity_summary_4: sensor.dark_sky_summary_4d
entity_summary_5: sensor.dark_sky_summary_5d
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
locale: it
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

About log file errors.
Where is it? It’s the general home-assistant.log?

Thank you so much for your support.
Regards,

Alessandro

check home-assistant-config/ui/darksky at master · iammexx/home-assistant-config · GitHub

I have manual edited mine to some serious extent, so best to stay with the original for now

yes, that is a good source for config errors :wink:

also, right click the Desktop Lovelace interface and select inspector (depends on the browser you are using), an error should be displayed if it exists.

Ispector results:

Uncaught SyntaxError: Unexpected token ‘<’

must be an accidental error you made in the custom card? did you by any chance edit the file?
Did you re-download it using the Raw button?
https://raw.githubusercontent.com/iammexx/home-assistant-config/master/ui/darksky/dark-sky-weather-card.js

Hello folks,
I’m having a problem. I 've done all the steps one by one. I have all files, folders etc in the rights places. I have cleared cache and tried another browser but still I can;t see the icons. I have the card and temperatures but not icons. any ideas? I have the lovelace splitted and what i have for the weather is this

title: Weather
icon: mdi:weather-hazy
cards:
  - 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_1d
    entity_forecast_high_temp_2: sensor.dark_sky_daytime_high_temperature_2d
    entity_forecast_high_temp_3: sensor.dark_sky_daytime_high_temperature_3d
    entity_forecast_high_temp_4: sensor.dark_sky_daytime_high_temperature_4d
    entity_forecast_high_temp_5: sensor.dark_sky_daytime_high_temperature_5d
    entity_forecast_icon_1: sensor.dark_sky_icon_1d
    entity_forecast_icon_2: sensor.dark_sky_icon_2d
    entity_forecast_icon_3: sensor.dark_sky_icon_3d
    entity_forecast_icon_4: sensor.dark_sky_icon_4d
    entity_forecast_icon_5: sensor.dark_sky_icon_5d
    entity_forecast_low_temp_1: sensor.dark_sky_overnight_low_temperature_0d
    entity_forecast_low_temp_2: sensor.dark_sky_overnight_low_temperature_1d
    entity_forecast_low_temp_3: sensor.dark_sky_overnight_low_temperature_2d
    entity_forecast_low_temp_4: sensor.dark_sky_overnight_low_temperature_3d
    entity_forecast_low_temp_5: sensor.dark_sky_overnight_low_temperature_4d
    entity_summary_1: sensor.dark_sky_summary_1d
    entity_summary_2: sensor.dark_sky_summary_2d
    entity_summary_3: sensor.dark_sky_summary_3d
    entity_summary_4: sensor.dark_sky_summary_4d
    entity_summary_5: sensor.dark_sky_summary_5d