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.
- Card colors and icons change depending on AQI level
| 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. |
- Install the AirVisual sensor and confirm AQI, APL, and Main Pollutant sensors are created, like below.
- Download the AirVisual Card
- Place the file in your
config/wwwfolder - Include the card code in the Resources section of your
ui-lovelace-card.yaml
resources:
- url: /local/air-visual-card.js
type: js- Write configuration for the card in your
ui-lovelace.yamland 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'- Restart Home Assistant to load the card.
-
The card doesn't show the temperature properly
Let me know which weather provider you are using and I'll try to fix the issue. I have only tested with the Yahoo! Weather component. Optionally, if you create a template sensor that reports the temperature as its state, you can use that sensor as for the temp config.
-
This card doesn't work in Fully Kiosk Browser on Amazon Fire tablets. Why?
This card uses a new CSS function, CSS Grid Layout, which was implemented in October 2018, and isn't compatible with browsers using old versions of Android WebView. That's my guess anyways.
I am studying programming as a hobby and this is my first set of Home Assistant projects. Unfortunately, I know nothing about Javascript and relied on studying other Lovelace custom cards to write this. Suggestions are welcome but no promises if I can fix anything! If you're familiar with CSS, then you can edit the CSS style in the .js file directly.
- All the custom HA cards and components I studied from, including @Arsaboo's Animated Weather card and Mini Media Player
- airvisual.com - For the card design and data
- Home Assistant Air Visual sensor