Afficher sortie poubelles jaune/grise/verte

Bonjour,

Le rythme du ramassage des poubelles est différent selon leur couleur (tri oblige) et je souhaite afficher sur le dashboard le jour de sortie pour chaque poubelle (en fait la veille).
Par exemple, pour une poubelle ramassée le mercredi matin, j’affiche un message la veille : « sortir la poubelle jaune ».

Pour ce faire, j’ai créé un calendrier (calendar) où sont indiqués les couleurs et les jours de sortie (ex: tous les mercredis : jaune, un jeudi sur deux : grise, etc.), une entité et un button-card conditionnel.
N.B.: je suis ultra-débutant…


Entité :

template:
  - sensor:
      - name: "Sortir la poubelle"
        state: >
          {% set event = state_attr('calendar.poubelles', 'description') %}
          {% if event is not none %}
            {% set event_lower = event | lower %}
            {% if 'jaune' in event_lower %} jaune
            {% elif 'grise' in event_lower %} grise
            {% elif 'verte' in event_lower %} verte
            {% else %} aucune
            {% endif %}
          {% else %}
            unknown
          {% endif %}

Button-card, dans carte conditionnelle, avec en précision dessous "L’état n’est pas égal à ‹ inconnu › "

type: conditional
conditions:
  - entity: sensor.sortir_la_poubelle
    state_not: "aucune"
  - entity: sensor.sortir_la_poubelle
    state_not: "unknown"
card:
  type: custom:button-card
  entity: sensor.sortir_la_poubelle
  name: >
    [[[
      let etat = entity.state.trim().toLowerCase();
      return "Sortir la poubelle : " + etat.charAt(0).toUpperCase() + etat.slice(1);
    ]]]
  icon: >
    [[[
      let etat = entity.state.trim().toLowerCase();
      return etat === "jaune" ? "mdi:recycle"
           : etat === "grise" ? "mdi:delete"
           : etat === "verte" ? "mdi:leaf"
           : "mdi:help-circle";
    ]]]
  color: >
    [[[
      let etat = entity.state.trim().toLowerCase();
      return etat === "jaune" ? "yellow"
           : etat === "grise" ? "gray"
           : etat === "verte" ? "green"
           : "white";
    ]]]
  show_state: false
  show_icon: true
  styles:
    card:
      - background-color: white
      - font-size: 20px
      - font-weight: bold
      - border-radius: 10px
      - padding: 10px

Avec un button-card simple (une seule poubelle, pas de conditions), j’obtiens l’affichage sur le dashboard.
Par contre, avec un choix selon la couleur, je n’obtiens rien qu’un gros point d’interrogation dans le dashboard avec l’indication :« sortir la poubelle : template: - sensor: - name: « Sortir la poubelle » state: > jaune »

J’ai vérifié dans Outils développement/Etat, le sensor.sortir_la_poubelle affiche "jaune"ce qui indique amha qu’il est opérationnel.

Le souci semble venir du button-card mais là, je sèche…
Si quelqu’un a une idée ou une piste de recherche, je le remercie par avance.

Bonjour,

Le seul souci chez moi avec ta carte est lié à ta définition de - color qui ne change rien en fonction de l’état du sensor. En modifiant cet état avec les outils de développement, j’obtiens ceci :




et la carte ne s’affiche pas en définissant l’état à « aucune »

Du coup, je ne vois pas comment t’aider

Le code modifié pour que la couleur de fond de la carte change en fonction de l’état du sensor :

type: conditional
conditions:
  - entity: sensor.sortir_la_poubelle
    state_not: aucune
  - entity: sensor.sortir_la_poubelle
    state_not: unknown
card:
  type: custom:button-card
  entity: sensor.sortir_la_poubelle
  name: |
    [[[
      let etat = entity.state.trim().toLowerCase();
      return "Sortir la poubelle : " + etat.charAt(0).toUpperCase() + etat.slice(1);
    ]]]
  icon: |
    [[[
      let etat = entity.state.trim().toLowerCase();
      return etat === "jaune" ? "mdi:recycle"
           : etat === "grise" ? "mdi:delete"
           : etat === "verte" ? "mdi:leaf"
           : "mdi:help-circle";
    ]]]
  show_state: false
  show_icon: true
  styles:
    card:
      - background-color: |
          [[[
            let etat = entity.state.trim().toLowerCase();
            return etat === "jaune" ? "yellow"
                 : etat === "grise" ? "gray"
                 : etat === "verte" ? "green"
                 : "white";
          ]]]
      - font-size: 20px
      - font-weight: bold
      - border-radius: 10px
      - padding: 10px

ou alors la couleur de l’icône :

type: conditional
conditions:
  - entity: sensor.sortir_la_poubelle
    state_not: aucune
  - entity: sensor.sortir_la_poubelle
    state_not: unknown
card:
  type: custom:button-card
  entity: sensor.sortir_la_poubelle
  name: |
    [[[
      let etat = entity.state.trim().toLowerCase();
      return "Sortir la poubelle : " + etat.charAt(0).toUpperCase() + etat.slice(1);
    ]]]
  icon: |
    [[[
      let etat = entity.state.trim().toLowerCase();
      return etat === "jaune" ? "mdi:recycle"
           : etat === "grise" ? "mdi:delete"
           : etat === "verte" ? "mdi:leaf"
           : "mdi:help-circle";
    ]]]
  show_state: false
  show_icon: true
  styles:
    card:
      - background-color: white
      - font-size: 20px
      - font-weight: bold
      - border-radius: 10px
      - padding: 10px
    icon:
      - color: |
          [[[
            let etat = entity.state.trim().toLowerCase();
            return etat === "jaune" ? "yellow"
                 : etat === "grise" ? "gray"
                 : etat === "verte" ? "green"
                 : "black";
          ]]]

Personnellement, j’ai ça sur mon tableau de bord :
essai

Bonjour,

Merci pour cette réponse qui cependant ne fait qu’augmenter mon trouble…
J’ai en effet c/c le bouton-card (icônes colorées) que tu as transmis et pourtant, j’ai toujours ce fichu point d’interrogation qui s’affiche en lieu et place de l’icône et de son texte…

Ceci étant, j’avoue que ta solution (montrée en fin d’intervention) est très visuelle et nettement plus élaborée que ce que je tente de faire…

Serait-il possible,stp, d’en indiquer le code et le principe de fonctionnement ?

Bonjour,

Je me réponds à moi-même, histoire de clore ce sujet.
Plutôt que de réinventer l’eau chaude, après quelques recherches, je suis tombé sur ce fil qui répond pleinement à mon souhait (après adaptation) :

Merci pour tout,
AS

Et il fonctionne au top :slight_smile:

Du coup, tu n’as plus besoin du code de ma carte ?

Bonsoir Cleya,

Je rentre de réunion et découvre ton message.

Du coup, tu n’as plus besoin du code de ma carte ?

Oh que si, car même si j’ai trouvé une solution à mon besoin, j’aimerais cependant bien décrypter et comprendre ton code ; pour deux raisons, d’une part histoire de progresser et aussi et surtout pour sa présentation qui est vraiment agréable.
Merci d’avance.
AS

Bonjour,
j’avais fait une carte dans le même genre :


image

tu trouveras le code sur ce post :

Salut, je te poste ça dans la journée.

Sinon, je pense que le problème vient de ton sensor.
Voici comment je l’ai configuré chez moi :

sensor:
  - platform: template
    sensors:
      sortir_la_poubelle:
        friendly_name: "Sortir la poubelle"
        value_template: >-
          {% set event = state_attr('calendar.poubelles', 'description') %}
          {% if event is not none %}
            {% set event_lower = event | lower %}
            {% if 'jaune' in event_lower %} jaune
            {% elif 'grise' in event_lower %} grise
            {% elif 'verte' in event_lower %} verte
            {% else %} aucune
            {% endif %}
          {% else %}
            unknown
          {% endif %}

Le code de mon custom_fields pour le ramassage des ordures :

                      carte_poubelles:
                        card:
                          type: custom:button-card
                          template: carte_fond
                          variables:
                            carte_hauteur: 115
                            carte_largeur: 383
                          name: 'Ramassage des ordures :'
                          custom_fields:
                            poubelle_verte_icone:
                              card:
                                type: custom:button-card
                                entity_picture: /local/images/poubelle_verte.png
                                show_entity_picture: true
                                styles:
                                  card:
                                    - background-color: rgba(255,255,255,0.0)
                                    - border: none
                                    - width: 66px
                                    - height: 66px
                                    - border-radius: 0
                                  entity_picture:
                                    - width: 90%
                                    - opacity: 100%
                            poubelle_verte_valeur:
                              card:
                                type: custom:button-card
                                entity: sensor.poubelle_verte_jour
                                name: 'Prochain<br>ramassage :'
                                show_name: true
                                show_icon: false
                                show_state: true
                                lock:
                                  enabled: true
                                  exemptions: []
                                styles:
                                  card:
                                    - background-color: rgba(255,255,255,0.0)
                                    - border: none
                                    - width: 120px
                                    - height: 70px
                                    - border-radius: 0
                                    - cursor: default
                                  lock:
                                    - opacity: 0
                                  name:
                                    - font-size: 0.7em
                                    - font-weight: bold
                                    - justify-self: start
                                    - align-self: start
                                    - text-align: start
                                    - color: rgba(0,0,0,0.6)
                                  state:
                                    - font-size: 0.9em
                                    - font-weight: bold
                                    - justify-self: start
                                    - align-self: start
                                    - color: |
                                        [[[
                                          if (states['sensor.poubelle_verte_jour'].state == 'demain')
                                            return 'rgba(255,0,0,1.0)';
                                          else 
                                            return 'rgba(0,0,0,0.6)';
                                        ]]]
                                    - animation: |
                                        [[[
                                          if (states['sensor.poubelle_verte_jour'].state == 'demain')
                                            return 'blink 2s ease infinite';
                                        ]]]
                                  tap_action:
                                    action: none
                                  hold_action:
                                    action: none
                            poubelle_jaune_icone:
                              card:
                                type: custom:button-card
                                entity_picture: /local/images/poubelle_jaune.png
                                show_entity_picture: true
                                styles:
                                  card:
                                    - background-color: rgba(64,192,64,0.0)
                                    - border: none
                                    - width: 66px
                                    - height: 66px
                                    - border-radius: 50%
                                  entity_picture:
                                    - width: 90%
                                    - opacity: 100%
                            poubelle_jaune_valeur:
                              card:
                                type: custom:button-card
                                entity: sensor.poubelle_jaune_jour
                                name: 'Prochain<br>ramassage :'
                                show_name: true
                                show_icon: false
                                show_state: true
                                lock:
                                  enabled: true
                                  exemptions: []
                                styles:
                                  card:
                                    - background-color: rgba(255,255,255,0.0)
                                    - border: none
                                    - width: 120px
                                    - height: 70px
                                    - border-radius: 0
                                    - cursor: default
                                  lock:
                                    - opacity: 0
                                  name:
                                    - font-size: 0.7em
                                    - font-weight: bold
                                    - justify-self: start
                                    - align-self: start
                                    - text-align: start
                                    - color: rgba(0,0,0,0.6)
                                  state:
                                    - font-size: 0.9em
                                    - font-weight: bold
                                    - justify-self: start
                                    - align-self: start
                                    - color: |
                                        [[[
                                          if (states['sensor.poubelle_jaune_jour'].state == 'demain')
                                            return 'rgba(255,0,0,1.0)';
                                          else 
                                            return 'rgba(0,0,0,0.6)';
                                        ]]]
                                    - animation: |
                                        [[[
                                          if (states['sensor.poubelle_jaune_jour'].state == 'demain')
                                            return 'blink 2s ease infinite';
                                        ]]]
                                  tap_action:
                                    action: none
                                  hold_action:
                                    action: none
                          styles:
                            name:
                              - margin-top: '-8px'
                              - font-size: 1.0em
                              - font-weight: bold
                              - justify-self: start
                              - align-self: start
                              - padding-left: 15px
                              - color: rgba(0,0,0,0.6)
                            custom_fields:
                              poubelle_verte_icone:
                                - position: absolute
                                - top: 35px
                                - left: 25px
                              poubelle_verte_valeur:
                                - position: absolute
                                - top: 40px
                                - left: 90px
                              poubelle_jaune_icone:
                                - position: absolute
                                - top: 35px
                                - left: 200px
                              poubelle_jaune_valeur:
                                - position: absolute
                                - top: 40px
                                - left: 265px
                          tap_action:
                            action: none
                          hold_action:
                            action: none

Comme indiqué, il s’agit d’un custom_fields mais tu devrais pouvoir extraire la partie qui t’intéresse.

La carte de fond est un template :

button_card_templates:
  carte_fond:
    type: custom:button-card
    show_state: false
    show_icon: false
    styles:
      card:
        - background-image: >-
            linear-gradient(135deg, rgba(64,64,64,1.0) 0%, rgba(96,96,96,1.0)
            25%, rgba(128,128,128,1.0) 100%)
        - border-radius: 10px
        - box-shadow: 4px 4px 8px 0px rgba(32,32,32,0.5)
        - border: 2px rgba(32,32,32,0.5) outset
        - height: '[[[ return variables.carte_hauteur + "px"; ]]]'
        - width: '[[[ return variables.carte_largeur + "px"; ]]]'
        - cursor: default
    tap_action:
      action: none
    hold_action:
      action: none



Images a éditer avec un logiciel comme Gimp pour les transformer en .png en supprimant le fond blanc par un fond transparent.

Avec la balise texte préformaté ajoute yaml après la première balise pour avoir le code en couleur, c’est plus sympa :wink:

exemple :
image

OK, je ne connaissais pas. Merci @WarC0zes

@WarC0zes @Cleya
Merci pour vos contributions que je conserve précieusement.
En fait, j’ai eu quelques soucis avec la création du template de Cleya.
Du coup, je mets tout cela en pause et j’examinerai par la suite, à tête reposée, ces apports intéressants.

Si besoin , j’ai les templates que j’utilise pour ma carte, dans le message juste au-dessus du lien que j’ai posté.

Dis moi où tu coinces, je suis dispo si besoin

Merci tous les deux pour votre aide, c’est sympa.
Mais finalement, avec Trashcard, j’ai ce que je souhaite : afficher la veille, selon un code couleur, la.poubelle à sortir.
Mon dernier souci réside dans le chiffre sous l’illustration que j’aimerai supprimer car il n’apporte rien et m’agace un peu…

Tu as la solution sur le post de trashcard

Merci pour ta réponse.
Cela « fonctionne » effectivement pour l’affichage standard et puce, mais pas pour l’affichage icône que j’utilise…
Je propose que l’on continue (si besoin) sur le fil dédié à Trashcard.