Un petit exemple d'affichage avec personnalisation de l'alerte météo

Bonjour,

image

on appréciera ou pas mes gouts en matière de couleur mais j’ai réalisé (avec beaucoup d’aide et autant de lectures) un badge d’affichage de l’état de l’alerte météo : suivant l’état changement de la couleur de l’icone, changement du texte et de sa couleur et changement de l’arrière-plan.
avec card-mod, le code (ça fonctionne alors je partage) :

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: sensor.33_weather_alert
    icon: mdi:weather-cloudy-alert
    content: |-
      {% set entity = 'sensor.33_weather_alert' %}
          {% if is_state(entity,'Vert') %}
            pas d'alerte
          {% elif is_state(entity,'Jaune') %}
            alerte météo
          {% elif is_state(entity,'Orange') %}
            Risque météo !         
          {% else %}
          Indisponible
          {% endif %}
    icon_color: |-
      {% if is_state(entity, 'Vert') %}
        green
      {% elif is_state(entity, 'Jaune') %}  
        yellow
      {% elif is_state(entity, 'Orange') %}  
        orange
      {% else %} 
        red
      {% endif %}
    card_mod:
      style: |
        ha-card {
           
          {% set entity = 'sensor.33_weather_alert' %}
          {% if is_state(entity,'Vert') %}
            --text-color: green;
          {% elif is_state(entity,'Jaune') %}
            --text-color: yellow;
          {% elif is_state(entity,'Orange') %}
            --text-color: orange;            
          {% else %}
            --text-color: red;
          {% endif %} 
          {% if is_state(entity,'Vert') %}
            --chip-background: white;
          {% elif is_state(entity,'Jaune') %}
            --chip-background: rgba(189, 189, 189, 0.5);
          {% elif is_state(entity,'Orange') %}
            --chip-background: rgba(256, 100, 55, 0.4);            
          {% else %}
            --chip-background: orange;
          {% endif %} 
        }
view_layout:
  position: main
alignment: start
4 « J'aime »

bonjour

sympa, je presume qu il faut juste changer le sensor33 par le numero de departement??

genre pour moi sensor86

merci

tout à fait, j’eus dû le préciser

pas grave, j’ai teste mais j’ai cette erreur

c’est un message d’avertissement, comme tu utilise card-mod dans le code, tu ne peux pas utiliser le mode UI pour editer la carte. C’est quand YAML.
Rien de grave, c’est normal.

1 « J'aime »

ok merci du coup ça me marque indisponible et quand je clic dessus je n’ai rien

je pense que c’est normal??

tu n’as pas changé toutes les entités sensor.33_weather_alertdans le code. il y en a trois à changer

J’ai fait pareil avec une BubleCard

type: custom:bubble-card
card_type: separator
name: Alarme
icon: mdi:shield-home
card_layout: normal
rows: 1
styles: |-
  .bubble-line {
    background: var(--primary-text-color);
    opacity: 0.1;
  }
  ha-card {
    border-radius: 0px !important;
    padding-top: 20px !important;
    padding-bottom: 80px !important;
    bottom: 0 !important;
     color: ${ hass.states['sensor.69_weather_alert'].state === 'Vert'
        ? 'green'
        : hass.states['sensor.69_weather_alert'].state === 'Jaune'
          ? 'yellow'
          : hass.states['sensor.69_weather_alert'].state === 'Rouge'
            ? 'red'
            : 'orange'
      } !important;
  }
  .bubble-sub-button > ha-icon {
      color: ${ hass.states['sensor.69_weather_alert'].state === 'Vert'
        ? 'green'
        : hass.states['sensor.69_weather_alert'].state === 'Jaune'
          ? 'yellow'
          : hass.states['sensor.69_weather_alert'].state === 'Rouge'
            ? 'red'
            : 'orange'
      } !important;
    }
    .bubble-sub-button-name-container{
      color: ${ hass.states['sensor.69_weather_alert'].state === 'Vert'
        ? 'green'
        : hass.states['sensor.69_weather_alert'].state === 'Jaune'
          ? 'yellow'
          : hass.states['sensor.69_weather_alert'].state === 'Rouge'
            ? 'red'
            : 'orange'
      } !important;
    }
sub_button:
  - entity: sensor.text_vigilance
    show_last_changed: false
    show_state: true
    show_background: false
    show_attribute: false
    name: ""
    show_name: false
    show_icon: true
    icon: mdi:cloud-alert-outline
    hold_action:
      action: more-info
    tap_action:
      action: navigate
      navigation_path: /dashboard-home/meteo

oui j’ai bien changer les 3

j’ai trouver c’est les 3 sensor86… y avait ajouter des mots en trop

encore merci

ça fonctionne

1 « J'aime »