Hi Daniel, welcome to the forum what version of HA are you running. I am on 109.6 and this sensor has been running without fail polls every 30mins.
I’m on 110.3
This could be the reason there was a lot of breaking changes in 110 for non core components I would add an issue to the github page.
Hi
Had this all working fine in 111.4 updated to 112.1 and now getting
Custom element doesn't exist: air-visual-card.
any ideas?
1 Like
nothing new?
1 Like
Please, make any response, i’m thinking of making it myself but i don’t want to make more options if you can fix it easily. I opened the ticket in your github repo. Please check it.
thnx
When I add this card to my lovelace interface, the whole tab turns black and I cannot edit anything on my computer. On my phone I just get a card error.
Does anyone else have the black screen issue?
How can you get your PM2.5 value bro “7.2 ug/m3”?
I only have the below sensor
How can i remove “undefined” value below?
since had been editing my own Airvisual card while trying to keep up to date with its latest developments, this card has been a bit if a problem card the last year or 2.
Was also the last card which remains a type: js resource , and not a type: module.
suddenly I figured why not simple create a custom:button-card that provides the same info, and take out the weather stuff, since we have that in multitude elsewhere.
sharing here, so you can try a bit for yourselves. Ive kept in some comments so you can see the main differences. Use either entity_picture, or background-image.
For now I copied the Front color settings if the Airvisial card, but, as these don’t seem to be used on the resource at all (see the link I use on double_tap), and they are not contrasty enough for me, I wonder if I will keep those. Anyways, here goes, showing them in a nice grid 4, with some other main elements, for a quick overview:
type: custom:button-card
template:
- button_summary
entity: sensor.u_s_air_pollution_level
name: Aqi
# size: 70%
show_last_changed: false
show_state: true
show_icon: false
state_display: >
[[[ return entity.state.replace('_',' '); ]]]
# show_entity_picture: true
show_name: true
variables:
aqi_color: >
[[[ var aqi = states['sensor.u_s_air_quality_index'].state;
if (aqi <= 50) return '#A8E05F';
if (aqi <= 100) return '#FDD64B';
if (aqi <= 150) return '#FF9B57';
if (aqi <= 200) return '#FE6A69';
if (aqi <= 300) return '#A97ABC';
return '#A87383'; ]]]
index_color: >
[[[ var indexColor =
{'good':'#718B3A','moderate':'#A57F23','unhealthy_sensitive':'#B25826',
'unhealthy':'#AF2C3B','very_unhealthy':'#634675','hazardous':'#683E51'};
return indexColor[entity.state] || 'grey'; ]]]
# entity_picture: >
# [[[ var mapper = {'good':'ic-face-1','moderate':'ic-face-2',
# 'unhealthy_sensitive':'ic-face-3',
# 'unhealthy':'ic-face-4','very_unhealthy':'ic-face-5'};
# var picture = mapper[entity.state] || 'ic-face-6';
# var path = '/local/weather/aqi_icons/'
# var ext = '.svg'
# return path + picture + ext; ]]]
#show_state: false
hold_action:
action: navigate
navigation_path: /ui-overzicht/weer
double_tap_action:
action: url
url_path: https://www.iqair.com/netherlands/north-brabant/roosendaal
styles:
card:
- color: >
[[[return variables.index_color; ]]]
- background-color: >
[[[ return variables.aqi_color; ]]]
- background-image: >
[[[ var indexFace = {'good':'ic-face-1','moderate':'ic-face-2',
'unhealthy_sensitive':'ic-face-3',
'unhealthy':'ic-face-4','very_unhealthy':'ic-face-5'};
var picture = indexFace[entity.state] || 'ic-face-6';
var path = '/local/weather/aqi_icons/'
var ext = '.svg'
return 'url(' + path + picture + ext + ')'; ]]]
- background-size: cover #80%
- background-repeat: no-repeat
state:
- font-size: 13px
- font-weight: bold
# - background-color: ivory
# name:
# - background-color: ivory
custom_fields:
notification:
- border-color: var(--primary-color)
# - color: >
# [[[ return (entity.state === 'on') ? variables.text_color : 'white'; ]]]
- background-color: ivory
# [[[ if (entity.state === 'on') return 'rgb(16,55,115)'; return 'green'; ]]]
- animation: >
[[[ if (entity.state !== 'good') return 'blink 2s ease infinite'; ]]]
custom_fields:
notification: >
[[[ return states['sensor.u_s_air_quality_index'].state; ]]]
the template can be replaced, its just my quick and dirty setup so I dont have to worry for some main styling settings
4 Likes
It is an attribute of the sensor. The card pulls the attributes to display them.
I ended up using your button-card config and tweaking it for my own ends for use with the IQVIA integration. Here is the result…
type: vertical-stack
cards:
- type: custom:button-card
entity: sensor.allergy_index_today
name: Allergy Index
show_last_changed: false
show_state: true
show_icon: false
state_display: |
[[[ return entity.attributes.rating; ]]]
show_name: true
variables:
aqi_color: |
[[[ var aqi = states['sensor.allergy_index_today'].state;
if (aqi <= 2.4) return '#A8E05F';
if (aqi <= 4.8) return '#FDD64B';
if (aqi <= 7.2) return '#FF9B57';
if (aqi <= 9.6) return '#FE6A69';
if (aqi <= 12) return '#A97ABC';
return '#A87383'; ]]]
styles:
card:
- height: 60px
- background-color: |
[[[ return variables.aqi_color; ]]]
name:
- font-size: 20px
- color: black
- justify-self: start
- padding: 25px 20px 0px
state:
- font-size: 13px
- font-weight: bold
- color: black
- position: relative
- left: 33%
- bottom: 3px
- z-index: 2
custom_fields:
notification:
- background-color: ivory
- color: black
- border-radius: 10px
- position: absolute
- right: 1%
- top: 7%
- height: 50px
- width: 100px
- font-size: 18px
- line-height: 45px
custom_fields:
notification: |
[[[ return states['sensor.allergy_index_today'].state; ]]]
- type: custom:button-card
entity: sensor.asthma_index_today
name: Asthma Index
show_last_changed: false
show_state: true
show_icon: false
state_display: |
[[[ return entity.attributes.rating; ]]]
show_name: true
variables:
aqi_color: |
[[[ var aqi = states['sensor.asthma_index_today'].state;
if (aqi <= 2.4) return '#A8E05F';
if (aqi <= 4.8) return '#FDD64B';
if (aqi <= 7.2) return '#FF9B57';
if (aqi <= 9.6) return '#FE6A69';
if (aqi <= 12) return '#A97ABC';
return '#A87383'; ]]]
styles:
card:
- height: 60px
- background-color: |
[[[ return variables.aqi_color; ]]]
name:
- font-size: 20px
- color: black
- justify-self: start
- padding: 25px 20px 0px
state:
- font-size: 13px
- font-weight: bold
- color: black
- position: relative
- left: 33%
- bottom: 3px
- z-index: 2
custom_fields:
notification:
- background-color: ivory
- color: black
- border-radius: 10px
- position: absolute
- right: 1%
- top: 7%
- height: 50px
- width: 100px
- font-size: 18px
- line-height: 45px
custom_fields:
notification: |
[[[ return states['sensor.asthma_index_today'].state; ]]]
- type: custom:button-card
entity: sensor.cold_flu_index_today
name: Cold & Flu Index
show_last_changed: false
show_state: true
show_icon: false
state_display: |
[[[ return entity.attributes.rating; ]]]
show_name: true
variables:
aqi_color: |
[[[ var aqi = states['sensor.cold_flu_index_today'].state;
if (aqi <= 2.4) return '#A8E05F';
if (aqi <= 4.8) return '#FDD64B';
if (aqi <= 7.2) return '#FF9B57';
if (aqi <= 9.6) return '#FE6A69';
if (aqi <= 12) return '#A97ABC';
return '#A87383'; ]]]
styles:
card:
- height: 60px
- background-color: |
[[[ return variables.aqi_color; ]]]
name:
- font-size: 20px
- color: black
- justify-self: start
- padding: 25px 20px 0px
state:
- font-size: 13px
- font-weight: bold
- color: black
- position: relative
- left: 33%
- bottom: 3px
- z-index: 2
custom_fields:
notification:
- background-color: ivory
- color: black
- border-radius: 10px
- position: absolute
- right: 1%
- top: 7%
- height: 50px
- width: 100px
- font-size: 18px
- line-height: 45px
custom_fields:
notification: |
[[[ return states['sensor.cold_flu_index_today'].state; ]]]
Thanks!