Custom animated weather card for Lovelace

Share your Projects! Dashboards & Frontend
22

I don’t use that element but for another element I just did it as follows

setConfig(config) {
  this.config = config;
}
23

I’m still using 0.72, so I haven’t had any SetConfig errors. Aside from the CSS, are you having other issues?
How did you format my other post? It’ll be good to know in the future. My CSS is the same CSS from the reddit post, which doesn’t work for the card. This is why I’m still working through CSS issues. I’ll include it so everyone has a starting point.

.clear {
  clear:both;
}
.card {
  margin: 0em auto;
  padding-left: 0em;
  padding-right: 0em;
  position: relative;
}
.iron-icon {
  height: 18px;
  color: var(--paper-item-icon-color);
}
.temp {
  font-weight: 300;
  font-size: 4.5em;
  color: var(--primary-text-color);
  position: relative;
  top: 0.175em;
  right: 0.75em;
}
.temp_unit {
  font-weight: 300;
  font-size: 2.0em;
  vertical-align: super;
  color: var(--primary-text-color);
  position: relative;
  right: 1em;
  margin-top: -0.1em;
  margin-right: -0.5em;
}
.variations {
  font-weight: 300;
  color: var(--primary-text-color);
  list-style: none;
  margin-left: -2em;
  margin-top: 3.5em;
}
.variations.right {
  float: right;
  margin-left: 0;
  margin-right: 1em;
}
.unit {
  font-size: .8em;
}
.forecast {
  width: 100%;
  margin: 0 auto;
  height: 8.9em;
  cursor: pointer;
}
.day {
  display: block;
  width: 20%;
  float: left;
  text-align: center;
  color: var(--primary-text-color);
  border-right: .1em solid #d9d9d9;
  line-height: 1.6;
  box-sizing: border-box;
}
.dayname {
  text-transform: uppercase;
}

.forecast .day:first-child {
  margin-left: 0;
}
.forecast .day:nth-last-child(2) {
  border-right: none;
  margin-right: 0;
}
.highTemp {
  font-weight: bold;
}
.lowTemp {
  color: var(--secondary-text-color);
}
.icon.bigger {
  width: 10em;
  height: 10em;
  margin-top: -3.5em;
  position: relative;
  left: 0em;
}
.icon {
  width: 50px;
  height: 50px;
  display: inline-block;
  vertical-align: middle;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  text-indent: -9999px;
}
24

how about something like a “widget store/repository” in which users can upload their custom cards etc and share them with the community? HA users could then browse this store/repository from within the HA installation (similar to the hass.io add-on store) and have something like a “one click” downloader/installer

8 Likes
27

All right, so thanks to @ciotlosm, we now have the updated weather card (minus all the hacks). I have updated the original post with the updated instructions.

Again, any feedback you have on improving the cards is welcome.

1 Like
28

This is excellent, thanks!

Can you tell me please if it can work same as regular UI and it shows the week forecast when you press on it?
Like this:

image
image952×465 54.8 KB

29

No…it does not open the more-info card. May be that is something we can add.

30

I’m not sure what I’m doing wrong but it’s not working for me (nothing showing on lovelace)

I’ve done the following:

  1. Created the www directory inside of my config directory
  2. Created /www/custom_ui and /www/icons
  3. Placed weather-card.js and weather-card.css in /www/custom_ui
  4. Placed the animated icons in /www/icons/weather_icons/animated
  5. Copy/Pasted the included code snippet to my ui-lovelace.yaml
  6. Restarted HA and CTRL + SHIFT + R with no results

Not sure what I am missing here. I’m on HA 0.72.1

31

That code was written for 0.73, so that may explain

32

With few exceptions (like setConfig) this should with 0.72.1. What error did you get in developer console?

33

I’m sure I’m missing something very basic but I’ve tried several times to get this card added and I keep getting the below error message:
image

Any idea what I’m doing wrong?

34

Did you import the card in ui-lovelace.yaml? If yes, force refresh the browser and the error should go away.

35

I do have the code in the ui_lovelace.yaml file. I’ve tried refreshing and doing a full restart; still nothing. I’m running 73.0b6 on Hass.io; not sure if this is relevant. However, I am wondering if this line might have something to do with it:
garage_door_tilt_sensor_alarm_level: Weather

36

Nevermind I got it working; there must be a caching issue on my computer. Tried it on my phone and it was working just fine. Love the card btw, nice work!

37

how can I add this card to a group?

38

This card is supposed to exist independently. Also, groups don’t behave the same way in Lovelace.

39

Thanks arsaboo.
So I cannot integrate lovelace card inside a normal home assistant UI, right? Is it a completely different environment?
I’m sorry if I ask this question here but I was not able to get that before now :slight_smile:

40

@arsaboo Hi, excellent work, thank you. I would like to ask you for one thing - is it somehow possible to translate wind direction and days? If yes, can you pls give me an idea? Thank you

41

For the regular UI, you can continue to follow the old thread.

42

It will be little more involved, but you can modify the windDirections and the day calculation here.

43

How did you fix this? I have the same error and I copy/pasted the .yaml into my ui-lovelace. Doesn’t work on my phone or on my computer even after clearing cache.