Dashboard météo all inclusive V2 (maj 02/08/23)

Tu est sur que c’est le même code.

je passais par mod-card, mais le mieux est d’utiliser la carte entities et utiliser le text-divider-row dans la carte entities

type: entities
entities:
  - type: custom:text-divider-row
    text: modded
    card_mod:
      style: |
        .text-divider {
          border-bottom: 3px dotted cyan !important;
        }
        .text-divider span {
          color: orange !important;
          background-color: red !important;
          padding-left: 32px !important;
          padding-right: 32px !important;
        }

Merci j’ai effectivement changé mon fusil d’épaule et j’ai décidé d’utiliser « entities » cela fonctionne.
Sinon pour la gauge card je n’arrive pas à virer le fond même si j’ai identifié où il fallait attaquer :

Si tu as une idée, je suis preneur.

Ta tester de voir si tu met background: true dans les option de stack-in-card ?

J’y suis arrivé en plaçant un card-mod au niveau de « type: custom:stack-in-card »

1 « J'aime »

Sympa ça! La « rose des vents éclairs », elle indique le dernier éclair tombé ou le plus proche dans un délais donné ?

Salut,
c’est le dernier éclair tombé, avec la distance et l’orientation.

Merci. Tu crois que ce serait possible d’afficher la distance du plus proche (dans la fenêtre de 120 min qu’on a réglée en configurant le service)?

je ne sais pas. Mais ça doit être possible avec une automatisation.

hello @WarC0zes

Je reviens vers toi car je n’arrive pas faire fonctionner le forecast 14 jours sur les deux lignes.
Est ce que tu as une idée ?

image

- type: vertical-stack
    cards:
      - type: entities
        entities:
          - type: custom:text-divider-row
            text: Prévisions 14 Jours
            align: left
        card_mod:
          style: |
            ha-card {
              margin-top: -30px;
              background: none;
            }
      - type: custom:meteofrance-weather-card
        entity: weather.saint_pierre_de_chandieu
        number_of_daily_forecasts: "14"
        number_of_hourly_forecasts: "0"
        details: false
        one_hour_forecast: false
        daily_forecast: true
        wind_forecast_icons: false
        animated_icons: true
        humidity_forecast: true
        hourly_forecast: false
        alert_forecast: false
        current: false
        card_mod:
          style: |
            ha-card > ul > li:nth-child(7) {
              border-right: 0px !important;
            }       
            ha-card > ul > li:nth-child(8) {
              display: none;
            }       
            ha-card > ul > li:nth-child(9) {
              display: none;
            }
            ha-card > ul > li:nth-child(10) {
              display: none;
            }
            ha-card > ul > li:nth-child(11) {
              display: none;
            }
            ha-card > ul > li:nth-child(12) {
              display: none;
            }
            ha-card > ul > li:nth-child(13) {
              display: none;
            }
            ha-card > ul > li:nth-child(14) {
              display: none;
            }
            ha-card {
              top: -20px;
              height: 135px;
              background: transparent;
            }
      - type: custom:meteofrance-weather-card
        entity: weather.saint_pierre_de_chandieu
        number_of_daily_forecasts: "14"
        number_of_hourly_forecasts: "0"
        details: false
        one_hour_forecast: false
        daily_forecast: true
        wind_forecast_icons: false
        animated_icons: true
        humidity_forecast: true
        hourly_forecast: false
        alert_forecast: false
        current: false
        card_mod:
          style: |
            ha-card > ul > li:nth-child(7) {
              border-right: 0px !important;
            }       
            ha-card > ul > li:nth-child(8) {
              display: none;
            }       
            ha-card > ul > li:nth-child(9) {
              display: none;
            }
            ha-card > ul > li:nth-child(10) {
              display: none;
            }
            ha-card > ul > li:nth-child(11) {
              display: none;
            }
            ha-card > ul > li:nth-child(12) {
              display: none;
            }
            ha-card > ul > li:nth-child(13) {
              display: none;
            }
            ha-card > ul > li:nth-child(14) {
              display: none;
            }
            ha-card {
              top: 4px;
              height: 135px;
              background: transparent;
            }

Bonjour,
tu as bien installé card-mod à partir de HACS ?

      - type: vertical-stack
        cards:
          - type: entities
            entities:
              - type: custom:text-divider-row
                text: Prévisions 14 Jours
                align: left
            card_mod:
              style: |
                ha-card {
                  margin-top: -20px;
                  margin-bottom: -10px;
                  background: none;
                }
          - type: custom:meteofrance-weather-card
            entity: weather.xxxx
            name: xxx
            number_of_daily_forecasts: "14"
            number_of_hourly_forecasts: "0"
            current: false
            alert_forecast: false
            details: false
            hourly_forecast: false
            humidity_forecast: true
            one_hour_forecast: false
            daily_forecast: true
            wind_forecast_icons: false
            animated_icons: false
            card_mod:
              style: |
                ha-card > ul > li:nth-child(7) {
                  border-right: 0px !important;
                }       
                ha-card > ul > li:nth-child(8) {
                  display: none;
                }       
                ha-card > ul > li:nth-child(9) {
                  display: none;
                }
                ha-card > ul > li:nth-child(10) {
                  display: none;
                }
                ha-card > ul > li:nth-child(11) {
                  display: none;
                }
                ha-card > ul > li:nth-child(12) {
                  display: none;
                }
                ha-card > ul > li:nth-child(13) {
                  display: none;
                }
                ha-card > ul > li:nth-child(14) {
                  display: none;
                }
                ha-card {
                  top: -20px;
                  height: 135px;
                  background: transparent;
                }
          - type: custom:meteofrance-weather-card
            entity: weather.xxxxx
            name: xxxx
            number_of_daily_forecasts: "14"
            number_of_hourly_forecasts: "0"
            current: false
            alert_forecast: false
            details: false
            hourly_forecast: false
            humidity_forecast: true
            one_hour_forecast: false
            daily_forecast: true
            wind_forecast_icons: false
            animated_icons: false
            card_mod:
              style: |
                ha-card > ul > li:nth-child(1) {
                  display: none;
                }
                ha-card > ul > li:nth-child(2) {
                  display: none;
                }
                ha-card > ul > li:nth-child(3) {
                  display: none;
                }
                ha-card > ul > li:nth-child(4) {
                  display: none;
                }
                ha-card > ul > li:nth-child(5) {
                  display: none;
                }
                ha-card > ul > li:nth-child(6) {
                  display: none;
                }
                ha-card > ul > li:nth-child(7) {
                  display: none;
                }
                ha-card {
                  top: 4px;
                  height: 135px;
                  background: transparent;
                }

Oui je l’utilise ailleurs dans des cartes

Ah! tu as raison, le code fonctionne plus avec la dernière maj de la carte météo France
image

je ne l’utilise plus car maintenant, il y a une barre avec la dernière version de la carte MF

image

grrrr j’ai l’impression que quand on maj un plug-in tu es obligé de reprendre le code ou vérifier si ca fonctionne toujours :smiley:

Oui j’ai vu le slider malheureusement c’est pour un affichage mobile et j’ai besoin de scinder en deux

Attends, je modifie le code.

1 « J'aime »

image

j’arrive pas a garder les barres de séparation, mais le reste c’est bon.

type: vertical-stack
cards:
  - type: entities
    entities:
      - type: custom:text-divider-row
        text: Prévisions 14 Jours
        align: left
    card_mod:
      style: |
        ha-card {
          margin-top: -20px;
          margin-bottom: -10px;
          background: none;
        }
  - type: custom:meteofrance-weather-card
    entity: weather.xxxxx
    name: xxxxx
    number_of_daily_forecasts: "14"
    number_of_hourly_forecasts: "0"
    current: false
    alert_forecast: false
    details: false
    hourly_forecast: false
    humidity_forecast: true
    one_hour_forecast: false
    daily_forecast: true
    wind_forecast_icons: false
    animated_icons: false
    card_mod:
      style: |
        .forecast > li {
          border-right: 0px !important;
        }
        ha-card > div > ul > li:nth-child(8) > ul {
          display: none;
        }       
        ha-card > div > ul > li:nth-child(9) > ul {
          display: none;
        }
        ha-card > div > ul > li:nth-child(10) > ul {
          display: none;
        }
        ha-card > div > ul > li:nth-child(11) > ul {
          display: none;
        }
        ha-card > div > ul > li:nth-child(12) > ul {
          display: none;
        }
        ha-card > div > ul > li:nth-child(13) > ul {
          display: none;
        }
        ha-card > div > ul > li:nth-child(14) > ul {
          display: none;
        }
        ha-card {
          top: -20px;
          height: 135px;
          background: transparent;
        }
  - type: custom:meteofrance-weather-card
    entity: weather.xxxx
    name: xxxx
    number_of_daily_forecasts: "14"
    number_of_hourly_forecasts: "0"
    current: false
    alert_forecast: false
    details: false
    hourly_forecast: false
    humidity_forecast: true
    one_hour_forecast: false
    daily_forecast: true
    wind_forecast_icons: false
    animated_icons: false
    card_mod:
      style: |
        .forecast > li {
          border-right: 0px !important;
        }
        ha-card > div > ul > li:nth-child(1) > ul {
          display: none;
        }
        ha-card > div > ul > li:nth-child(2) > ul {
          display: none;
        }
        ha-card > div > ul > li:nth-child(3) > ul {
          display: none;
        }
        ha-card > div > ul > li:nth-child(4) > ul {
          display: none;
        }
        ha-card > div > ul > li:nth-child(5) > ul {
          display: none;
        }
        ha-card > div > ul > li:nth-child(6) > ul {
          display: none;
        }
        ha-card > div > ul > li:nth-child(7) > ul {
          display: none;
        }        
        ha-card {
          top: 4px;
          height: 135px;
          background: transparent;
        }
1 « J'aime »

top merci beaucoup, pas grave pour le trait de séparation

1 « J'aime »

C’est bon, j’ai trouvé pour les séparateurs :wink:
image

type: vertical-stack
cards:
  - type: entities
    entities:
      - type: custom:text-divider-row
        text: Prévisions 14 Jours
        align: left
    card_mod:
      style: |
        ha-card {
          margin-top: -20px;
          margin-bottom: -10px;
          background: none;
        }
  - type: custom:meteofrance-weather-card
    entity: weather.xxxx
    name: xxxx
    alertEntity: sensor.11_weather_alert
    number_of_daily_forecasts: "14"
    number_of_hourly_forecasts: "0"
    current: false
    alert_forecast: false
    details: false
    hourly_forecast: false
    humidity_forecast: true
    one_hour_forecast: false
    daily_forecast: true
    wind_forecast_icons: false
    animated_icons: false
    card_mod:
      style: |
        .forecast > li:nth-child(7) {
          border-right: 0px !important;
        }       
        .forecast > li:nth-child(8) {
          border-right: 0px !important;
        }
        .forecast > li:nth-child(9) {
          border-right: 0px !important;
        }
        .forecast > li:nth-child(10) {
          border-right: 0px !important;
        }
        .forecast > li:nth-child(11) {
          border-right: 0px !important;
        }
        .forecast > li:nth-child(12) {
          border-right: 0px !important;
        }
        .forecast > li:nth-child(13) {
          border-right: 0px !important;
        }       
        ha-card > div > ul > li:nth-child(8) > ul {
          display: none;
        }       
        ha-card > div > ul > li:nth-child(9) > ul {
          display: none;
        }
        ha-card > div > ul > li:nth-child(10) > ul {
          display: none;
        }
        ha-card > div > ul > li:nth-child(11) > ul {
          display: none;
        }
        ha-card > div > ul > li:nth-child(12) > ul {
          display: none;
        }
        ha-card > div > ul > li:nth-child(13) > ul {
          display: none;
        }
        ha-card > div > ul > li:nth-child(14) > ul {
          display: none;
        }
        ha-card {
          top: -20px;
          height: 135px;
          background: transparent;
        }
  - type: custom:meteofrance-weather-card
    entity: weather.xxxxx
    name: xxxxx
    alertEntity: sensor.11_weather_alert
    number_of_daily_forecasts: "14"
    number_of_hourly_forecasts: "0"
    current: false
    alert_forecast: false
    details: false
    hourly_forecast: false
    humidity_forecast: true
    one_hour_forecast: false
    daily_forecast: true
    wind_forecast_icons: false
    animated_icons: false
    card_mod:
      style: |
        .forecast > li:nth-child(1) {
          border-right: 0px !important;
        }       
        .forecast > li:nth-child(2) {
          border-right: 0px !important;
        }       
        .forecast > li:nth-child(3) {
          border-right: 0px !important;
        }
        .forecast > li:nth-child(4) {
          border-right: 0px !important;
        }
        .forecast > li:nth-child(5) {
          border-right: 0px !important;
        }
        .forecast > li:nth-child(6) {
          border-right: 0px !important;
        }
        .forecast > li:nth-child(7) {
          border-right: 0px !important;
        }            
        ha-card > div > ul > li:nth-child(1) > ul {
          display: none;
        }
        ha-card > div > ul > li:nth-child(2) > ul {
          display: none;
        }
        ha-card > div > ul > li:nth-child(3) > ul {
          display: none;
        }
        ha-card > div > ul > li:nth-child(4) > ul {
          display: none;
        }
        ha-card > div > ul > li:nth-child(5) > ul {
          display: none;
        }
        ha-card > div > ul > li:nth-child(6) > ul {
          display: none;
        }
        ha-card > div > ul > li:nth-child(7) > ul {
          display: none;
        }        
        ha-card {
          top: 4px;
          height: 135px;
          background: transparent;
        }

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;
                    }
1 « J'aime »