J’ai fait une modification dans le code pour la partie alerte météo, la partie pollen et la qualité de l’air.
Le but est que les barres se colorent en fonction de l’alerte la plus élevée, et affiche le type d’alerte la plus élevée.
Les sensors à ajouter dans votre template.yaml ou configuration.yaml (à ajuster en fonction d’où vous le déposer, l’exemple est pour le fichier template.yaml).
#Sensor pour l'affichage dans la bar card météo avancée des alertes en fonction de la couleur
- sensor:
- name: "Alerte Max Météo France"
state: >
{% set alert_types = {
'Vent violent': state_attr('sensor.XX_weather_alert', 'Vent violent'),
'Pluie-inondation': state_attr('sensor.XX_weather_alert', 'Pluie-inondation'),
'Orages': state_attr('sensor.XX_weather_alert', 'Orages'),
'Neige-verglas': state_attr('sensor.XX_weather_alert', 'Neige-verglas'),
'Vagues-submersion': state_attr('sensor.XX_weather_alert', 'Vagues-submersion'),
'Inondation': state_attr('sensor.XX_weather_alert', 'Inondation')
} %}
{% set severity_order = ['Rouge', 'Orange', 'Jaune', 'Vert'] %}
{% set max_alert = None %}
{% for alert, severity in alert_types.items() %}
{% if severity in severity_order %}
{% if max_alert is none or severity_order.index(severity) < severity_order.index(max_alert) %}
{% set max_alert = severity %}
{% endif %}
{% endif %}
{% endfor %}
{{ max_alert if max_alert else 'Aucune alerte' }}
#Sensor pour le pollen
- sensor:
- name: "Pollen Max Region"
state: >
{% set pollens = [
state_attr('sensor.pollens_XX_ambroisies', 'state'),
state_attr('sensor.pollens_XX_armoise', 'state'),
state_attr('sensor.pollens_XX_aulne', 'state'),
state_attr('sensor.pollens_XX_bouleau', 'state'),
state_attr('sensor.pollens_XX_charme', 'state'),
state_attr('sensor.pollens_XX_chataignier', 'state'),
state_attr('sensor.pollens_XX_chene', 'state'),
state_attr('sensor.pollens_XX_cupressacees', 'state'),
state_attr('sensor.pollens_XX_frene', 'state'),
state_attr('sensor.pollens_XX_graminees', 'state'),
state_attr('sensor.pollens_XX_noisetier', 'state'),
state_attr('sensor.pollens_XX_olivier', 'state'),
state_attr('sensor.pollens_XX_oseille', 'state'),
state_attr('sensor.pollens_XX_peuplier', 'state'),
state_attr('sensor.pollens_XX_plantain', 'state'),
state_attr('sensor.pollens_XX_platane', 'state'),
state_attr('sensor.pollens_XX_saule', 'state'),
state_attr('sensor.pollens_XX_tilleul', 'state'),
state_attr('sensor.pollens_XX_urticacees', 'state')
] %}
{% set severity_order = ['nul', 'faible', 'moyen', 'élevé'] %}
{% set valid_pollens = pollens | select('!=', 'nul') | list %}
{% if valid_pollens | count > 0 %}
{% set max_pollen = valid_pollens | sort %}
{% if 'élevé' in max_pollen %}
'élevé'
{% elif 'moyen' in max_pollen %}
'moyen'
{% elif 'faible' in max_pollen %}
'faible'
{% else %}
'Aucun pollen'
{% endif %}
{% else %}
'Aucun pollen'
{% endif %}
Le code pour les alertes météo :
- type: custom:bar-card
entities:
- entity: sensor.alerte_max_meteo_france
name: Alerte Météo France
height: 30px
min: 0
max: 4
positions:
indicator: "off"
icon: "off"
severity:
- value: Aucune alerte
color: Green
text: Aucune alerte
- value: Vert
color: green
text: Vert
- value: Jaune
color: yellow
text: Jaune
- value: Orange
color: orange
text: Orange
- value: Rouge
color: red
text: Rouge
card_mod:
style: >
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 25px;
}
#states > bar-card-row > bar-card-card > bar-card-background >
bar-card-contentbar > bar-card-name {
font-size: 16px;
font-weight: bold;
} ha-card {
margin-top: -10px;
background: none;
border: none;
}
Pour le pollen :
- type: custom:mod-card
card_mod:
style:
.: |
:host {
--text-divider-color: rgb(68, 115, 158);
--text-divider-line-size: 1px;
}
ha-card {
margin-top: -25px;
}
card:
type: custom:text-divider-row
text: Pollens
align: left
- type: custom:mod-card
card_mod:
style: |
ha-card {
margin: -30px -5px 0px -5px;
}
card:
type: horizontal-stack
cards:
- type: custom:button-card
entity: sensor.pollen_max_Region
name: "Pollen Region :"
icon: mdi:alert-decagram-outline
layout: icon_name_state2nd
color_type: icon
show_name: true
show_state: true
state:
- value: nul
operator: "=="
color: black
icon: mdi:decagram-outline
styles:
state:
- color: black
- value: faible
operator: "=="
color: green
icon: mdi:check-decagram-outline
styles:
state:
- color: green
- value: moyen
operator: "=="
color: rgb(242,234,26)
icon: mdi:alert-decagram-outline
styles:
state:
- color: rgb(242,234,26)
- value: élevé
operator: "=="
color: red
icon: mdi:alert-decagram
styles:
state:
- color: red
size: 50%
styles:
card:
- "--mdc-ripple-color": rgb(68, 115, 158)
- "--mdc-ripple-press-opacity": 0.5
name:
- font-size: 16px
state:
- font-weight: bold
- font-size: 16px
card_mod:
style: |
ha-card {
background: none;
border: none;
}
- type: custom:bar-card
entities:
- entity: sensor.pollen_max_Region
name: Risque Pollen
icon: mdi:alert-circle
height: 47px
color: Green
min: 0
max: 3
positions:
indicator: "off"
icon: "off"
severity:
- color: Red
from: 2
to: 3
- color: Yellow
from: 1
to: 2
- color: Green
from: 0
to: 1
card_mod:
style: >
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 25px;
}
#states > bar-card-row > bar-card-card > bar-card-background >
bar-card-contentbar > bar-card-name {
font-size: 16px;
color: lightblue;
} ha-card {
margin-top: -2px;
background: none;
border: none;
} bar-card-value {
color: black;
font-weight: bold;
}
Et pour la qualité de l’air :
- type: custom:mod-card
card_mod:
style:
.: |
:host {
--text-divider-color: rgb(68, 115, 158);
--text-divider-line-size: 1px;
}
card:
type: custom:text-divider-row
text: Qualité de l'air
align: left
- type: custom:mod-card
card_mod:
style: |
ha-card {
margin: -17px -5px 0px -5px;
}
- type: grid
square: false
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: >-
sensor.st_laurent_blangy_nord_pas_de_calais_france_air_quality_index
icon: mdi:leaf
content: >-
{% set aqi =
states('sensor.st_laurent_blangy_nord_pas_de_calais_france_air_quality_index')
| float %} {% if aqi <= 50 %} Bonne
({{states('sensor.st_laurent_blangy_nord_pas_de_calais_france_air_quality_index')}})
{% elif 51 >= aqi <= 100 %} Moyenne
{{states('sensor.st_laurent_blangy_nord_pas_de_calais_france_air_quality_index')}}
- Moderate {% elif 101 >= aqi <= 150 %} Air - malsain pour les
groupes sensibles
{{states('sensor.st_laurent_blangy_nord_pas_de_calais_france_air_quality_index')}}
{% elif 151 >= aqi <= 200 %} Air - malsain
{{states('sensor.st_laurent_blangy_nord_pas_de_calais_france_air_quality_index')}}
{% elif 201 >= aqi <= 300 %} Air - Très malsain
{{states('sensor.st_laurent_blangy_nord_pas_de_calais_france_air_quality_index')}}
{% elif aqi > 300 %} Air - Dangereux {% endif %}
icon_color: >-
{% set aqi =
states('sensor.st_laurent_blangy_nord_pas_de_calais_france_air_quality_index')
| float %} {% if aqi <= 50 %} green {% elif 51 >= aqi <= 100
%} yellow {% elif 101 >= aqi <= 150 %} orange {% elif 151 >=
aqi <= 200 %} pink {% elif 201 >= aqi <= 300 %} purple {% elif
aqi > 300 %} red {% endif %}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
font-size: clamp(12px, 2.5vw, 20px); /* Ajuste la taille du texte en fonction de la taille de la carte */
}
- type: horizontal-stack
cards:
- type: custom:bar-card
entities:
- entity: sensor.st_laurent_blangy_nord_pas_de_calais_france_pm10
name: PM10
max: 100
min: 0
severity:
- color: lightgreen
from: 0
to: 20
- color: green
from: 20
to: 40
- color: yellow
from: 40
to: 60
- color: orange
from: 60
to: 80
- color: red
from: 80
to: 100
- entity: sensor.st_laurent_blangy_nord_pas_de_calais_france_pm2_5
name: PM2.5
min: 0
max: 200
severity:
- color: lightgreen
from: 0
to: 50
- color: green
from: 50
to: 70
- color: yellow
from: 70
to: 90
- color: orange
from: 90
to: 120
- color: red
from: 120
to: 160
- color: purple
from: 160
to: 200
- entity: >-
sensor.st_laurent_blangy_nord_pas_de_calais_france_dominant_pollutant
name: Gaz Dominant
- entity: >-
sensor.st_laurent_blangy_nord_pas_de_calais_france_sulphur_dioxide
name: Sulphur
min: 0
max: 20
severity:
- color: Drakblue
from: 0
to: 0.2
- color: Blue
from: 0.2
to: 0.5
- color: LightBlue
from: 0.5
to: 1
- color: Green
from: 1
to: 1.5
- color: rgb(153,255,51)
from: 1.5
to: 2
- color: Yellow
from: 2
to: 3
- color: rgb(255,179,0)
from: 3
to: 4
- color: Orange
from: 4
to: 6
- color: Red
from: 6
to: 8
- color: rgb(255,82,55)
from: 8
to: 10
- color: Purple
from: 10
to: 20
- entity: sensor.st_laurent_blangy_nord_pas_de_calais_france_ozone
name: Ozone
min: 0
max: 100
severity:
- color: Blue
from: 0
to: 20
- color: Green
from: 20
to: 40
- color: Yellow
from: 40
to: 60
- color: Orange
from: 60
to: 80
- color: Red
from: 80
to: 100
- entity: >-
sensor.st_laurent_blangy_nord_pas_de_calais_france_nitrogen_dioxide
name: Nitrogen
min: 0
max: 20
severity:
- color: Drakblue
from: 0
to: 0.2
- color: Blue
from: 0.2
to: 0.5
- color: LightBlue
from: 0.5
to: 1
- color: Green
from: 1
to: 1.5
- color: rgb(153,255,51)
from: 1.5
to: 2
- color: Yellow
from: 2
to: 3
- color: rgb(255,179,0)
from: 3
to: 4
- color: Orange
from: 4
to: 6
- color: Red
from: 6
to: 8
- color: rgb(255,82,55)
from: 8
to: 10
- color: Purple
from: 10
to: 20
icon: mdi:flash-alert
direction: up
height: 100px
width: 50px
columns: 6
stack: horizontal
positions:
indicator: "off"
icon: "off"
card_mod:
style: >
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 50px;
} #states > bar-card-row > bar-card-card > bar-card-background >
bar-card-contentbar > bar-card-name {
font-size: 10px;
} bar-card-name {
margin-top: 13px;
margin-left: center;
} ha-card {
margin: -16px 16px 16px 16px;
} bar-card-value {
color: black;
font-weight: bold;
} ha-card > div.header > div.name > span {
font-size: 14px;
font-weight: bold;
}
ha-card {
margin-top: -1px;
margin-bottom: -1px;
margin-right: -1px;
margin-left: -1px;
}
