Custom Dark Sky Animated Weather Card

Share your Projects! Dashboards & Frontend
593

have to study what you’re saying here… must admit it mostly is a matter of trial and error for me, editing these stylesheets. fwiw, this is what I have now (did change some of the colors too, find the primary text a bit harsh) and didn’t touch the variations yet, because I would love both sides to slide down a bit, and couldn’t find the same style for left and right in the existing css:

  .ha-icon {
    height: 18px;
    margin-right: 5px;
    color: var(--paper-item-icon-color);
  }
  .temp {
    font-weight: 300;
    font-size: 4em;
    color: var(--secondary-text-color);
    position: absolute;
    right: 1em;
    margin-top: 12px
  }
  .tempc {
    font-weight: 300;
    font-size: 1.5em;
    vertical-align: super;
    color: var(--scondary-text-color);
    position: absolute;
    right: 1em;
    margin-top: 0px;
    margin-right: 7px;
  }
  .apparent {
    color: var(--secondary-text-color);
    position: absolute;
    right: 1em;
    margin-top: 50px;
    margin-right: 1em;
  }
  .currentText {
    font-size: 1.5em;
    color: var(--secondary-text-color);
    position: absolute;
    left: 1.3em;
    margin-top: 50px;
  }
594

I just posted a screenshot…

Your current text is left 1.5em whereas mine is 5em…

595

thanks!
I Indeed tried to align it with the set of icons below, and the large Icon above, and position the condition text below the icon.
Now I have to find the style for the two columns of variations and hope to slide that section down a bit.

596

HI folks,

please help me out. My card won’t show the correct large night icon:

16

ive made an extra dedicated template sensor to check if the icon exists:

08
which it obviously does.

this is the code in the card for the icon:

  get weatherIcons() {
    return {
      'clear-day': 'day',
      'clear-night': 'night',
      'rain': 'rainy-5',
      'snow': 'snowy-6',
      'sleet': 'rainy-6',
      'wind': 'cloudy',
      'fog': 'cloudy',
      'cloudy': 'cloudy',
      'partly-cloudy-day': 'cloudy-day-3',
      'partly-cloudy-night': 'cloudy-night-3',
      'hail': 'rainy-7',
      'lightning': 'thunder',
      'thunderstorm': 'thunder',
      'windy-variant': `cloudy-day-3`,
      'exceptional': '!!',
    }
  }

and this is what I use for the extra sensor:

  weather_rsd_icon:
    friendly_name_template: >
      {{states('sensor.dark_sky_icon')|title|replace('-',' ')}}
    value_template: >
      {{states('sensor.dark_sky_icon')|title|replace('-',' ')}}
    entity_picture_template: >
      {% set mapper = 
        { 'Breezy': 'cloudy',
          'Clear Night': 'night',
          'Clear': 'day',
          'Mostly Clear': 'day',
          'Clear Day': 'day', 
          'Cloudy': 'cloudy',
          'Fog': 'cloudy',
          'Hail': 'rainy-7',
          'Lightning': 'thunder',
          'Mostly Cloudy': 'cloudy',
          'Partly Cloudy': 'cloudy-day-3',
          'Partly Cloudy Day': 'cloudy-day-2',
          'Partly Cloudy Night': 'cloudy-night-3',
          'Rain': 'rainy-4',
          'Scattered Showers': 'rainy-3',
          'Showers': 'rainy-6',
          'Snow': 'snowy-6',
          'Mostly Sunny': 'day',
          'Sunny': 'day',
          'Windy': 'cloudy'} %}
      {% set state = states('sensor.dark_sky_icon')|title|replace('-',' ') %}
      {% set weather = mapper[state] if state in mapper else 'weather' %}
      {% set path = '/local/weather/animated/' %}
      {% set ext = '.svg'%}
        {{[path,weather,ext]|join('')|lower}}
597

**** Card Updated *****

I have seen a couple of folks trying different css settings to move components around the card. I thought I would make it a little easier so you don’t have to edit the card and then lose all your edits when you update the card. To that end I have added several new flags that can be used to pass in css information to help position components on the card.

My current card looks like this using defaults for the flags:

image
image741×563 36.1 KB

But by setting the following flags

current_text_top_margin: 0px
current_text_left_pos: 1em
current_data_top_margin: 9em
large_icon_top_margin: '-1em'
temp_top_margin: .75em
temp_uom_top_margin: 1.25em
apparent_top_margin: 6em

It can look like this

image
image748×668 37.5 KB

The updated file is here
The readme file is here and contins the full list of flags added.

1 Like
598

Awesome! I so appreciate this! Thanks. I’m going to give that a go right now!

OK DONE!!! It works ‘as advertised’!
I replicated my earlier changes as it was showing all over-printed with the defaults but making the lovelace changes to replicate my earlier css ‘playing’ gave the result I wanted with the new stock card.

Great card and thanks for those changes Mark.

Just in case it helps someone else:

            temp_top_margin: -20px
            temp_font_weight: 300
            temp_font_size: 4em
            temp_right_pos: 1em
            temp_uom_top_margin: -14px
            temp_uom_right_margin: 7px
            apparent_top_margin: 45px
            apparent_right_pos: 1em
            apparent_right_margin: 1em
            current_text_top_margin: 39px
            current_text_left_pos: 5em
            current_text_font_size: 1.5em
            current_data_top_margin: 5em
            large_icon_top_margin: -3.5em
            large_icon_left_position: 0em
1 Like
599

Hi David and M.P.
M.P., Absolutely awesome card. I love it! Thanks for your hard work!
As David asked once, could we please have a version .json one day. It would be great to be able to track updates to this wonderful custom card.
Best! Milster

600

I don’t use the tracker cards so I don’t have a good way to test this so please provide feed back on whether it works or not. There is a version.json file available at this url: https://github.com/iammexx/home-assistant-config/blob/master/ui/darksky/version.json

601

How can I get version from frontend?
I tried with a sensor like:

  - 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 }}'

without success: UNKNOWN value

602

The json file is for the custom_updater.
But your sensor will also work with {{ value_json['dark-sky-weather-card'].version }} as value_template.

603

For those who don’t know, you can’t use the actual link given, you have to use the following:

https://raw.githubusercontent.com/iammexx/home-assistant-config/master/ui/darksky/version.json

Which is just a link to the ‘raw’ file i.e. the link given but after pressing the Raw button at top right on that page.

And @m.p.frankland it seems to work. but I’ll know for sure if and when there is a new version :wink:

604

Works great using the URL @klogg posted:

https://raw.githubusercontent.com/iammexx/home-assistant-config/master/ui/darksky/version.json

image
image761×992 186 KB

605

I’ve updated to HA 0.85.1 and the latest version of this card…still getting the below error…with lots of bubshing Ctrl+F5…no deal (also tried in incognito mode)

image

606

Have you checked that the location of your .js file in resources: is correct?
You might think this is a stupid question but I’ve made this mistake in the past :blush:

607

I wound back a version just to confirm it not only reports correctly but performs the update. Works perfectly!
Thank you Mark!!!
Again the latest updates of this CC are outstanding. Thank you again and well done!!!

image

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.