AirVisual Lovelace Card (for Air Quality Index)


#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

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 component.

Features

  • Card colors and icons change depending on AQI level

Options

Name Type Default Description
air_pollution_level string Required Name of the Air Pollution Level sensor created by Airvisual component.
air_quality_index string Required Name of the Air Quality Index sensor created by Airvisual component.
main_pollutant string Required Name of the Main Pollutant sensor created by Airvisual component.
temp string Optional Name of the temperature sensor or weather entity, such as ‘weather.yweather’ or ‘sensor.yweather_temperature’
city string Optional Name of the city that AirVisual is collecting AQI data from.

Instructions

  1. Install the AirVisual sensor and confirm AQI, APL, and Main Pollutant sensors are created.

  2. Download the AirVisual Card

  3. Place the file in your Home Assistant config/www folder

  4. Include the card code in the Resources section of your ui-lovelace-card.yaml

resources: 
  - url: /local/air-visual-card.js 
    type: js
  1. Write configuration for the card in your ui-lovelace.yaml and list your AirVisual sensors. An example is provided below:
- type: custom:air-visual-card 
  air_pollution_level: sensor.us_air_pollution_level 
  air_quality_index: sensor.us_air_quality_index 
  main_pollutant: sensor.us_main_pollutant 
  temp: weather.yweather 
  city: 'San Francisco'
  1. Restart Home Assistant to load the card, and clear your browser cache in case you have a previous version loaded.

Releases

  • v0.0.2 - Added weather icon next to temperature
  • v0.0.1 - Initial release

Credits


#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.