AirVisual Lovelace Card (for Air Quality Index)

Share your Projects!
1

I made this card to check the AQI during the Camp fire in California. Now that the AQI has finally cooled down, this card isn’t as useful to me but I hope others can make use of it. Let me know if you have any problems setting it up.

Air Visual Card

example

Github Link for installation instructions.

This is a Home Assistant Lovelace card that uses the AirVisual Sensor and creates a card like the ones found on AirVisual website. Requires the AirVisual Sensor to be setup. Tested with Yahoo Weather and Dark Sky component.

Features

  • Card colors and icons change depending on AQI level
  • Uses Airvisual icons (optional)

Releases

  • v0.0.3 - Added option to use AirVisual .svg files instead of MDI icons. See Options and Instructions for details.
  • v0.0.2 - Added weather icon next to temperature
  • v0.0.1 - Initial release

Credits

4 Likes
2

Thanks! Added to my config, looks good!

3

Glad to hear it works! Whew :relieved:

4

I’ve updated the card to include a weather icon next to temperature, to further match to airvisual.com style.

5

Mine worked great until today, now it is crashing the tab and giving me the following in the log:

https://MYHOST:8123/local/air-visual-card.js:151:75 Uncaught TypeError: Cannot read property ‘state’ of undefined

6

Check if your sensors and weather component are loading data correctly. Error happens when there is something wrong with the sensors.

1 Like
7

Hmm, The sensors are all showing up with data in my <> window:

sensor.us_air_pollution_level_2 Moderate attribution: Data provided by AirVisual friendly_name: U.S. Air Pollution Level longitude: MYLONG icon: mdi:emoticon-happy latitude: MYLAT
sensor.us_air_quality_index_2 99 attribution: Data provided by AirVisual unit_of_measurement: AQI latitude: MYLAT friendly_name: U.S. Air Quality Index icon: mdi:chart-line longitude: MYLONG
sensor.us_main_pollutant_2 PM2.5 attribution: Data provided by AirVisual friendly_name: U.S. Main Pollutant pollutant_symbol: p2 pollutant_unit: µg/m3 latitude: MYLAT icon: mdi:chemical-weapon longitude: MYLONG
8

Lol,

Okay now that I pasted it there I realize what the problem is… They’ve gone and renamed themselves for some reason… Changed the name and that fixed it. Thanks for the hint.

9

I just saw this after making my own card :frowning: thanks will be using it for guidance specially how to change card colour and icons depending on AQI Level

image

10

haha, no problem. I’m also a beginner at this stuff so it took some time to format everything. Also I am probably not following best practices.

11

No problem. Eventually I’ll update the code so it doesn’t crash the entire Lovelace UI.

12

Looks good. Seems to be a few little things with with running HA 0.86.2. The white section at the top is not even all the way across. Where the temperature the white is a little lower (Or the name is sitting higher?). I fixed this by removing height: 1em; from .city in the CSS. Looks great now!!

Also there seems to be a transparent overlay over the face icon, where as in your example above, it seems to be over the rest of the card.

I have a very similar looking card to @jimpower’s. It’s just a picture-elements card, but it doesn’t change colours or face. Wouldn’t be a problem if the AQI level stayed under 50, but we often get up in to the Moderate area.

I might check out your code and see if I can adapt it to my other failed custom card.

1 Like
13

Cool. I’ll test it your change soon and add it. I don’t really know css so in sure there are cleaner ways to implement the card.

I’m on 0.85.1 and the card looks fine to me. I’ll upgrade to 0.86 soon and see if I run into your issues.

14

@cjsimmons

You could use the image card and create the images for each condition and set that in your card

- type: image
  entity: sensor.air_quality
  title: Air Quality
  image: /local/lovelace/normal.png
  state_image:
    "High": /local/lovelace/high.png
    "Medium": /local/lovelace/medium.png
    "Low": /local/lovelace/low.png
  style:
    left: 12%
    top: 1%
    transform: none
    width: 24px
    height: 24px
15

Never used it like that. I might check it out later.

16

About the different colored area for the face icon–are you using Google Chrome or Fully Kiosk Browser to view Home Assistant? I’ve been testing it on Chrome with different laptops and I don’t have the issue you mention. Though I did have that issue when I was first developing the card. One of the CSS properties I added fixed the issue.

17

I’m using chrome. It’s the same in the iOS app too.

It doesn’t bother me. It’s just different to the example you have in the first post.

18

After updating Home Assistant, I had some weird issues with the MDI icons looking really ugly. I decided to do a quick release–I updated the card to include your CSS fix, and the option to use Airvisual.com SVG files. Take a look through the Github instructions to download and use the .svg icons. The card will look much better now. Let me know if you run into any other issues.

19

Looks good. I’ll check it out later. I did notice the icons looked odd.

20

Annotation%202019-02-13%20225734

Looks better with that face. Not sure why my green is slightly different to yours though…

Oh, you need to update your tracker.json file to 0.0.3