Custom animated weather card for Lovelace

There are some unsupported features that are missing in latest Firefox. I believe an update is coming in May that will fix these…

Hi,

Is there some customization I’m missing to make the card display multiple days in the forecast, instead of the same day over and over?

Capture

Thanks!

EDIT: Found it. Have to set mode.

Is that picture your config in Lovelace? If so, how did you achieve this?

The picture was a screen extract from the Dark Sky website using the Snipping Tool in Windows. I was looking at a detailed forecast for the day because I suspected something was wrong with the daily high/low temperatures.

https://darksky.net/forecast/

As an aside, it would be nice to extract the website’s timeline somehow and put it in the Lovelace card. It’s pretty useful. Perhaps there’s a prepackaged widget somewhere.

EDIT: There is a widget: https://darksky.net/widgets/graphbar

1 Like

Thank you very much for sharing this weather card!

This card is very beautiful! really great work :slight_smile:

Hello,

can’t get i working i do somthing wrong i suspect but can’t figure out what.

in my configuration.yaml i have this

weather:

  • platform: buienradar
    forecast: true
    name: ‘twente’

sensor:

  • platform: buienradar
    monitored_conditions:
    - condition
    - conditioncode
    - conditiondetailed
    - conditionexact
    - symbol
    - symbol_1d
    - symbol_2d
    - symbol_3d
    - symbol_4d
    - symbol_5d
    - temperature_1d
    - temperature_2d
    - temperature_3d
    - temperature_4d
    - temperature_5d
    - rainchance_1d
    - rainchance_2d
    - rainchance_3d
    - rainchance_4d
    - rainchance_5d
    - sunchance_1d
    - sunchance_2d
    - sunchance_3d
    - sunchance_4d
    - sunchance_5d
    - rain_1d
    - rain_2d
    - rain_3d
    - rain_4d
    - rain_5d

and in my ui-lovelace.yaml i have this

  - title: Experimental
    icon: mdi:worker
    cards:
      - type: "custom:weather-card"
        entity_weather: weather.twente
        entity_sun: sun.sun

what do i do wrong

I had the same problem, resolved by deleting “_weather” in “entity_weather” like this:

  - type: "custom:weather-card"
    entity: "weather.dark_sky"

Can confirm I also have the issue with large icons not rendering in full res.
Been an issue for ~6 months.

i did that as well, worked until it didnt. Mine is off and on still useig either:

entity: "weather.dark_sky"

or:

entity_weather: "weather.dark_sky"

Either way, it works about half the time, and throws the following error the other half:

Please define a weather entity
{
  "entity_sun": "sun.sun",
  "entity_weather": "weather.dark_sky",
  "type": "custom:weather-card"
}
Please define a weather entity
{
  "entity_sun": "sun.sun",
  "entity": "weather.dark_sky",
  "type": "custom:weather-card"
}

I upgraded HA to 0.96 yesterday and today I noticed that the Weather card no longer loads. I do not see any errors or anything in the GUI, really odd. Anyone else seeing this?

EDIT: Nevermind! I had an old version of the card, got the new one and all is well :smiley:

Is there any card like this but adds perception and removes the icons above the days?

This sounds stupid - but any way to remove the animation and just make the image static?

You can just use the regular (default) weather card or change the images to static ones.

Thank you for the nice custom weather card. I wanted to display both a hourly and daily forecast as well as a bit different weather information. For this I used the original card of @Bram_Kragten, adjusted it to work with the Dark Sky Sensor and tweaked the display.

You can find my fork here

weather-card

1 Like

how to set color to red
Glad to have received the help
asis

Could it be possible to use as temperature sensor one local?
I mean i have a sensor from xiaomi to check the external temperature and i would like to use it…

1 Like

+1 on that! Exactly what I would like to do also…

you can use a fixed or templated value like this:

  var temp_color = this.config.temp_color ? this._hass.states[this.config.temp_color].state : 'rgb(255, 165, 0)';

and in the css bit:

      .temp {
        font-weight: ${tempFontWeight};
        font-size: ${tempFontSize};
        color: ${temp_color};
        position: absolute;
        right: ${tempRightPos};
        margin-top: ${tempTopMargin};
      }

in my card config I use a template sensor for the variable:

temp_color: sensor.temperature_color_name
      temperature_color_name:
        value_template: >
          {% set temp = states('sensor.dark_sky_temperature')|float %}
          {% if temp < -20 %} black
          {% elif temp < -15 %} navy
          {% elif temp < -10 %} darkblue
          {% elif temp < -5 %} mediumblue
          {% elif temp < 0 %} blue
          {% elif temp < 5 %} dodgerblue
          {% elif temp < 10 %} lightblue
          {% elif temp < 15 %} turquoise
          {% elif temp < 20 %} green
          {% elif temp < 25 %} darkgreen
          {% elif temp < 30 %} orange
          {% elif temp < 35 %} crimson
          {% else %} firebrick
          {% endif %}

sure, use any temp sensor you like. simply add it in the card config for entity_temperature:

I’m trying to change the colors of the amChart icons to match the rest of my theme, but whenever I change the color in Adobe Illustrator the icons loose their animation for some reason.

Does anyone know how to just change the color of animated icons?