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.
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.
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.
Looks good. I’ll check it out later. I did notice the icons looked odd.
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
Hi, I was happily using this card until the last week when airvisual decided to remove the “main pollutant” value from their API. The card is not willing to run without this data. Any chance for an update that works without the main pollutant?
Yes, I’ll be looking into it soon. Should be an easy fix.
I just updated the code to (hopefully) fix the issue. Can you test and let me know of any issues?
1 Like
Working great, thanks! Shot you a pull request to fix one link that appears to have changed.
I had some time to update the card so I added a few things:
- no longer need to locally store AQI icons as icons are downloaded from jsdelivr.net
- ‘More Info’ window appears when items are clicked on
- HACS support as a custom repository
- better error handling
1 Like
Hi all, quick question. I’ve begun using a “night mode” for HA as I’m adding control panel tablets around the house. The white bar at the top of the airvisual card really sticks out at night. I’m wondering if there’s any way to get the white bar at the top to play nicely with the theme and turn dark too, or otherwise just go away altogether so I can use something like a markdown card for the title… Any ideas?
That’s a good idea. I played around with the CSS to remove the hard-coded color values and replace with theme-selected values and it works, though it’s not that pretty. Find updated release here:
Later, I’ll add the ability to hide the title that holds the city and name, so that you can replace with button-card or something else.
Edit: I should mention that I only tested against this dark theme. If you can share the theme you use, I can take a look at it to make sure it works on your theme.
Wow that was quick! I’d say it’s an improvement, though I think I’d prefer the title bar to take on the normal dark card color as it’s background rather than the color of the airvisual card reflecting the pollution level… Or if it does, probably better to use a dark font rather than white. Here’s what it looks lik enow.
Looks like it’s not working properly on your theme…
I use a different dark theme and have been using the CSS variables from that to color the font and background. I suspected not all themes will have the same variable names, so I guess I need to find a different way.
Can you share the theme you use? So I can see the names of the CSS variables?
I’ll add in the option to turn off the title soon, so you can use another card as title.
Here’s the theme I’m using if it helps:
The card was updated again with ability to hide the title. In your Lovelace UI config, add the option hide_title: true to hide the title.
I haven’t found a good way to fix the background color, but I think a workaround is to add this line of code to your Home Assistant theme:
background-color: 'var(--secondary-background-color)'
My card looks for the variable background-color, which is now defined if you add that line of code to your theme. I tested the theme and it looks like it works.
Thanks, I tried both suggestions and they both worked… In the end I went with hide_title as it didn’t really need a title and I already had the temperature in the view in a weather card.
How is everyone getting rounded corners with this card? I have rounded corners in my theme, and when adding the them to this card I get nothing. I’ve also tried using the card-mod plugin and then adding css the card with no luck as well!
1 Like
Hi,
When using
type: entities
entities:
- sensor.u_s_air_pollution_level
- sensor.u_s_air_quality_index
- sensor.u_s_main_pollutant
I can see the data i’m requesting, however when i’m adding to my lovelace
resources:
- type: js
url: /community_plugin/air-visual-card/air-visual-card.js
and
- title: Test 2
path: test-2
badges: []
cards:
- 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.dark_sky
city: San Francisco
Nothing is displayed in my lovelace interface but i’m not getting any error 
look at the name of your sensors vs. the names you used in the Lovelace configuration. One is sensor.u_s and the other is sensor.us…