Custom animated weather card for Lovelace

Solved it by hiding the un-wanted divs with card-mod

I have no error but have a blank screen now. Not sure it is due to recent upgrades to the system?

Anything I need to look at?

Although I use a modified version of this card, I suspect the following applies to this card too…

Last night my weather forecast hit the exceptional
condition (see last line)

const weatherIconsDay = {
  clear: "day",
  "clear-night": "night",
  cloudy: "cloudy",
  fog: "cloudy",
 ....
  "windy-variant": "cloudy-day-3",
  exceptional: "!!",
};

and it wanted to use the icon named “!!.svg” which I don’t have. Any ideas for a good Icon to use in this case?

This may sound like a trivial question,
Can I make the card background transparent.
I may add that I am using the card as an element in a picture-elements card

Maybe look at card-mod?

Thanks for your answer.
Yes I have card-mod installed.

However in a picture element card I have a hard time getting the formatting from card-mod and the one from the element to execute

See: Style not considered in picture element card

Another trivial question:
Is it possible to modify card height?

1 Like

Please tell me how you managed to hide unnecessary elements.
I’m just getting started with card-mod.
So far we have only managed to make a transparent background.
I guess what needs to be removed:
div.lowTemp
div.precipitation_probability
but the command display: none; - does not work.
Or I have a syntax problem.


            div.lowTemp {display: none;}     
            div.precipitation_probability {display: none;} 
            div.precipitation {display: none;}  

1 Like

I have my own solar weather station, so I wonder if it is possible to replace current temp, humidity and pressure with the values with from my weather station. If this is possible then where is it in the card config in Lovelace or is a specific value in the code of the card? Any tips? Thx.

In the config of the card you pass through the entity you want to use for temperature. It’s fully configurable. Are you sure you are using this card?

I am using Weather Card from HACS:
image

and the code in the card is as follows:

type: 'custom:weather-card'
entity: weather.openweathermap
entity_temperature: sensor.solar_weather_temp
number_of_forecasts: '6'
hourly_forecast: false
forecast: true
details: true

However, nothing changes.

I dont think that is th card referenced in this thread but it uses th weather nitty so you ar out of luck with that. Th rar other water cards you can us that will do this for you.

I’m also a bit lost here with OpenWeatherMap. This is my config:

type: 'custom:weather-card'
number_of_forecasts: '5'
hourly_forecast: false
details: true
forecast: true
entity: weather.openweathermap
current: true

and this is the card:

image

It shows TUE for all days even though the data seems to differ from day to day.

Edit: stupid me, I had the OpenWeatherMap integration configured wrong with an hourly call instead of a daily. After I changed that, it started working.

I assume this is related to OpenWeatherMap rather than custom weather card, but I’d like to see the ability to round/truncate values… I really don’t need to know barometric pressure down to the quadrillionth digit:

type: 'custom:weather-card'
entity: weather.openweathermap
name: ' '
1 Like

Is there a way I can add the wind forecast as a new row at the bottom, below precipitation forecast? Thanks.

1 Like

Yes, I have the same issue with Barometric Pressure.

2021-06-08 15_03_33-865186180 - AnyDesk

.

I have been using this weather card for some time and really like it. However, I have an issue where the main weather icon does not show up when the weather is reported as “exceptional”. I have tried most weather API’s to get this behavior to stop but it still happens. It also happened on the builtin Lovelace weather card for forecasts.

Any ideas on how to manage this so I get an appropriate icon?

card data

immagine
I want to eliminate low temperature and precipitation, but I can’t.

type: custom:weather-card
entity: weather.casa
number_of_forecasts: '5'
forecast: 
  card_mod:
    style:
      div.lowTemp {display: none;}
      div.precipitation_probability {display: none;}
      div.precipitation {display: none;}
details: true
hourly_forecast: false
current: true

can you give me the complete code of the card with div.lowTemp working?

Hello,

I have using this card already for a long time. very nice card. Now i have a small tablet which i would like to put on the wall. But the title (name) of the weather card is not scaling the same way as the other parts of the card. see picture below. Is there a way to fix this?

I thought I would ask if anyone knows if this card will be affected by the upcoming removal of paper elements?