[CARTE] - State-Switch (+ card-mod)

Clemalex · Novembre 23, 2020, 11:36

Pour ceux qui ne la connaisse pas, voici une carte personnalisée qui permet d’afficher suivant une condition une ou plusieurs autre carte :

Les conditions possibles sont :

Etat d’une entité (entity_id)
Le chemin de la vue (hash)
L’utilisateur (user)
Le groupe de l’utilisateur, admin ou non (group)
La taille de la fenêtre

Et en plus, elle dispose d’une partie transition :

Carte 1 :

Code Carte 1

type: 'custom:stack-in-card'
cards:
  - type: 'custom:state-switch'
    entity: input_select.afficher_personne
    default: hacf
    transition: swap-right
    states:
      HACF:
        type: entities
        entities:
          - entity: sensor.hacf_poids_date_locale
            name: Dernière pesée
      John:
        type: entities
        entities:
          - entity: sensor.john_poids_date_locale
            name: Dernière pesée
      Jane:
        type: entities
        entities:
          - entity: sensor.jane_poids_date_locale
            name: Dernière pesée
  - type: 'custom:state-switch'
    entity: input_select.afficher_personne
    default: hacf
    transition: swap-left
    states:
      HACF:
        type: entities
        entities:
          - entity: sensor.hacf_poids
            name: Poids
      John:
        type: entities
        entities:
          - entity: sensor.john_poids
            name: Poids
      Jane:
        type: entities
        entities:
          - entity: sensor.jane_poids
            name: Poids
  - type: 'custom:state-switch'
    entity: input_select.afficher_personne
    default: hacf
    transition: swap-right
    states:
      HACF:
        type: entities
        entities:
          - entity: sensor.hacf_poids_imc
            name: IMC
      John:
        type: entities
        entities:
          - entity: sensor.john_poids_imc
            name: IMC
      Jane:
        type: entities
        entities:
          - entity: sensor.jane_poids_imc
            name: IMC
  - type: 'custom:state-switch'
    entity: input_select.afficher_personne
    default: hacf
    transition: swap-left
    states:
      HACF:
        type: entities
        entities:
          - entity: sensor.hacf_poids_gv
            name: Graisse viscérale
      John:
        type: entities
        entities:
          - entity: sensor.john_poids_gv
            name: Graisse viscérale
      Jane:
        type: entities
        entities:
          - entity: sensor.jane_poids_gv
            name: Graisse viscérale
  - type: 'custom:state-switch'
    entity: input_select.afficher_personne
    default: hacf
    transition: swap-right
    states:
      HACF:
        type: entities
        entities:
          - entity: sensor.hacf_poids_mb
            name: Besoin calorique
      John:
        type: entities
        entities:
          - entity: sensor.john_poids_mb
            name: Besoin calorique
      Jane:
        type: entities
        entities:
          - entity: sensor.jane_poids_mb
            name: Besoin calorique

Et avec l’utilisation de la carte personnalisée stack-in-card et du module card-mod :

Carte 2 :

Code Carte 2

type: 'custom:stack-in-card'
cards:
  - type: glance
    entities:
      - entity: person.hacf
        tap_action:
          action: call-service
          service: input_select.select_option
          service_data:
            entity_id: input_select.afficher_personne
            option: HACF
        style: |
          @keyframes blink {
            50% {
              background: none;
            }
          }
          .name {
            display: none;
          }
          state-badge {
            animation: {% if is_state('input_select.afficher_personne', 'HACF') %} blink 1s linear infinite; {% endif %};
          }
          div:nth-child(3) {
           display: none;
          }
      - entity: person.john
        tap_action:
          action: call-service
          service: input_select.select_option
          service_data:
            entity_id: input_select.afficher_personne
            option: John
        style: |
          .name {
            display: none;
          }
          state-badge {
            border-style: {% if is_state('input_select.afficher_personne', 'John') %} dashed {% endif %};
            color: {% if is_state('input_select.afficher_personne', 'John') %} gold {% endif %};
          }
          div:nth-child(3) {
           display: none;
          }
      - entity: person.jane
        tap_action:
          action: call-service
          service: input_select.select_option
          service_data:
            entity_id: input_select.afficher_personne
            option: Jane
        style: |
          @keyframes blink {
            100% {
              transform: rotate(360deg);
            }
          }
          .name {
            display: none;
          }
          state-badge {
            animation: {% if is_state('input_select.afficher_personne', 'Jane') %} blink 2s infinite; {% endif %};
          }
          div:nth-child(3) {
           display: none;
          }
  - type: 'custom:stack-in-card'
    cards:
      - type: 'custom:state-switch'
        entity: input_select.afficher_personne
        default: hacf
        transition: swap-right
        states:
          HACF:
            type: entities
            style:
              .: |
                ha-card {
                }
                .card-content {
                   padding: 0 16px;
                }
            entities:
              - entity: sensor.hacf_poids_date_locale
                name: Dernière pesée
          John:
            type: entities
            style:
              .: |
                ha-card {
                }
                .card-content {
                   padding: 0 16px;
                }
            entities:
              - entity: sensor.john_poids_date_locale
                name: Dernière pesée
          Jane:
            type: entities
            style:
              .: |
                ha-card {
                }
                .card-content {
                   padding: 0 16px;
                }
            entities:
              - entity: sensor.jane_poids_date_locale
                name: Dernière pesée
      - type: 'custom:state-switch'
        entity: input_select.afficher_personne
        default: hacf
        transition: swap-left
        states:
          HACF:
            type: entities
            style:
              .: |
                ha-card {
                }
                .card-content {
                   padding: 0 16px;
                }
            entities:
              - entity: sensor.hacf_poids
                name: Poids
          John:
            type: entities
            style:
              .: |
                ha-card {
                }
                .card-content {
                   padding: 0 16px;
                }
            entities:
              - entity: sensor.john_poids
                name: Poids
          Jane:
            type: entities
            style:
              .: |
                ha-card {
                }
                .card-content {
                   padding: 0 16px;
                }
            entities:
              - entity: sensor.jane_poids
                name: Poids
      - type: 'custom:state-switch'
        entity: input_select.afficher_personne
        default: hacf
        transition: swap-right
        states:
          HACF:
            type: entities
            style:
              .: |
                ha-card {
                }
                .card-content {
                   padding: 0 16px;
                }
            entities:
              - entity: sensor.hacf_poids_imc
                name: IMC
          John:
            type: entities
            style:
              .: |
                ha-card {
                }
                .card-content {
                   padding: 0 16px;
                }
            entities:
              - entity: sensor.john_poids_imc
                name: IMC
          Jane:
            type: entities
            style:
              .: |
                ha-card {
                }
                .card-content {
                   padding: 0 16px;
                }
            entities:
              - entity: sensor.jane_poids_imc
                name: IMC
      - type: 'custom:state-switch'
        entity: input_select.afficher_personne
        default: hacf
        transition: swap-left
        states:
          HACF:
            type: entities
            style:
              .: |
                ha-card {
                }
                .card-content {
                   padding: 0 16px;
                }
            entities:
              - entity: sensor.hacf_poids_gv
                name: Graisse viscérale
          John:
            type: entities
            style:
              .: |
                ha-card {
                }
                .card-content {
                   padding: 0 16px;
                }
            entities:
              - entity: sensor.john_poids_gv
                name: Graisse viscérale
          Jane:
            type: entities
            style:
              .: |
                ha-card {
                }
                .card-content {
                   padding: 0 16px;
                }
            entities:
              - entity: sensor.jane_poids_gv
                name: Graisse viscérale
      - type: 'custom:state-switch'
        entity: input_select.afficher_personne
        default: hacf
        transition: swap-right
        states:
          HACF:
            type: entities
            style:
              .: |
                ha-card {
                }
                .card-content {
                   padding: 0 16px;
                }
            entities:
              - entity: sensor.hacf_poids_mb
                name: Besoin calorique
          John:
            type: entities
            style:
              .: |
                ha-card {
                }
                .card-content {
                   padding: 0 16px;
                }
            entities:
              - entity: sensor.john_poids_mb
                name: Besoin calorique
          Jane:
            type: entities
            style:
              .: |
                ha-card {
                }
                .card-content {
                   padding: 0 16px;
                }
            entities:
              - entity: sensor.jane_poids_mb
                name: Besoin calorique

Carte 3:

Code Carte 3

type: 'custom:stack-in-card'
cards:
  - type: glance
    entities:
      - entity: person.hacf
        tap_action:
          action: call-service
          service: input_select.select_option
          service_data:
            entity_id: input_select.afficher_personne
            option: HACF
        style: |
          @keyframes blink {
            50% {
              background: none;
            }
          }
          .name {
            display: none;
          }
          state-badge {
            animation: {% if is_state('input_select.afficher_personne', 'HACF') %} blink 1s linear infinite; {% endif %};
          }
          div:nth-child(3) {
           display: none;
          }
      - entity: person.john
        tap_action:
          action: call-service
          service: input_select.select_option
          service_data:
            entity_id: input_select.afficher_personne
            option: John
        style: |
          .name {
            display: none;
          }
          state-badge {
            border-style: {% if is_state('input_select.afficher_personne', 'John') %} dashed {% endif %};
            color: {% if is_state('input_select.afficher_personne', 'John') %} gold {% endif %};
          }
          div:nth-child(3) {
           display: none;
          }
      - entity: person.jane
        tap_action:
          action: call-service
          service: input_select.select_option
          service_data:
            entity_id: input_select.afficher_personne
            option: Jane
        style: |
          @keyframes blink {
            100% {
              transform: rotate(360deg);
            }
          }
          .name {
            display: none;
          }
          state-badge {
            animation: {% if is_state('input_select.afficher_personne', 'Jane') %} blink 2s infinite; {% endif %};
          }
          div:nth-child(3) {
           display: none;
          }
  - type: 'custom:stack-in-card'
    cards:
      - type: 'custom:state-switch'
        entity: input_select.afficher_personne
        default: hacf
        transition: flip
        states:
          HACF:
            type: entities
            style:
              .: |
                ha-card {
                }
                .card-content {
                   padding: 0 16px;
                }
            entities:
              - entity: sensor.hacf_poids_date_locale
                name: Dernière pesée
              - entity: sensor.hacf_poids
                name: Poids
              - entity: sensor.hacf_poids_imc
                name: IMC
              - entity: sensor.hacf_poids_gv
                name: Graisse viscérale
              - entity: sensor.hacf_poids_mb
                name: Besoin calorique
          John:
            type: entities
            style:
              .: |
                ha-card {
                }
                .card-content {
                   padding: 0 16px;
                }
            entities:
              - entity: sensor.john_poids_date_locale
                name: Dernière pesée
              - entity: sensor.john_poids
                name: Poids
              - entity: sensor.john_poids_imc
                name: IMC
              - entity: sensor.john_poids_gv
                name: Graisse viscérale
              - entity: sensor.john_poids_mb
                name: Besoin calorique
          Jane:
            type: entities
            style:
              .: |
                ha-card {
                }
                .card-content {
                   padding: 0 16px;
                }
            entities:
              - entity: sensor.jane_poids_date_locale
                name: Dernière pesée
              - entity: sensor.jane_poids
                name: Poids
              - entity: sensor.jane_poids_imc
                name: IMC
              - entity: sensor.jane_poids_gv
                name: Graisse viscérale
              - entity: sensor.jane_poids_mb
                name: Besoin calorique

Ces cartes s’adaptent très bien au sujet des balances xiaomi publié par @McFly

Gogo · Novembre 24, 2020, 9:02

Merci du partage, je ne la connaissais pas celle ci !

Felix62 · Septembre 28, 2021, 4:29

Un grand merci

Je souhaiter savoir si avec state-switch on pouvais rendre la transition automatique:
P1 ->transition dans x seconde → P2

Cela dépasse mes compétences, mais serai t-il possible de créer un timer en sensor qui servirai de déclencheur ?

Ou peut être que c’est impossible

pour ma part sa me ferai gagner de la place sur les infos du jour ou l’entête en faisant défiler.

Clemalex · Septembre 28, 2021, 9:15

Je ferais une automatisation qui ferais un basculement (toggle) d’un booléen(input_boolean). toutes les X secondes comme modèle de temps (time_pattern en /5).

Et j’instancierai ce booléen à la carte en utilisant la clé entity_id

Felix62 · Septembre 29, 2021, 9:20

Sa fonctionne super bien pour la transition flip les autres sa décale sur les autres card
Comment fait-on pour faire un GIF animé que je puisse montrer le résultat ?

PS: l’automatisation qui envoie une demande toute les 5 secondes est-ce que cela peux surcharger la machine ? peux-t-on ajouter d’autre choix que « on » « off » pour avoir +2 card différentes ?

edit: je viens de trouver « screen to gif »

resultat

:

#config.yaml
input_boolean:
  sommaire:
    name: state-switch sommaire

#automatisation
- alias: 'Actualisation sommaire'
  id: input_boolean change x sec
  trigger:
  - seconds: '/10'
    platform: time_pattern
  condition: []
  action:
  - service: input_boolean.toggle
    target:
      entity_id: input_boolean.sommaire

#lovelace
    type: custom:state-switch 
    entity: template
    template: "{% if is_state('input_boolean.sommaire', 'on') %} fete1 {% else %} fete2 {% endif %}"
    default: "fete1"
    transition: flip
    transition_time: 1000
    states:
      fete1:
        type: markdown
        card_mod: 
          style: |
            ha-card {
              font-size: 17px;
              font-family: Quicksand;
              height: 25px;
              background: none;
              margin-top: -0.2em;
              padding-top: 0px;
              padding-bottom: 0px;
              margin-left: -5px;
              margin-bottom: -1em;
              box-shadow: none;
            }  
            .no-header {
              padding-top: 0px;
              padding-bottom: 16px;
            }
        content: >
            <center><i> 🎉 &nbsp; Nous fêtons la Saint </i>{{ states('sensor.saint_du_jour') }} &nbsp; 🎉 <center>
      fete2:
        type: markdown
        card_mod: 
          style: |
            ha-card {
              font-size: 17px;
              font-family: Quicksand;
              height: 25px;
              background: none;
              margin-top: -0.2em;
              padding-top: 0px;
              padding-bottom: 0px;
              margin-left: -5px;
              margin-bottom: -1em;
              box-shadow: none;
            } 
            .no-header {
              padding-top: 0px;
              padding-bottom: 16px;
            }            
        content: >
            <center><i> 🎉  &nbsp; Demain, nous fêterons la Saint </i>{{ states('sensor.saint_de_demain') }} &nbsp;  🎉 <center>

Felix62 · Septembre 30, 2021, 11:38

J’ai trouver la réponse a cette question « input_number » avec une automatisation choice avec condition et action.

Guizmos · Février 14, 2022, 2:54

Hello, super tuto
Possible d’utiliser des button-card avec state-switch ?
Je veux en appuyant sur mon button-card que ça change l’option de mon input_select

J’essaie ça sans succès :

            tap_action:
              action: service
              service: input_select.select_option
              data:
                options: Films2
              target:
                entity_id: input_select.stat_plex

Clemalex · Février 14, 2022, 6:49

Essaie plutôt :

action: call-service #'call-' avant service

Guizmos · Février 14, 2022, 7:21

toujours un message d’erreur :

error

Clemalex · Février 15, 2022, 4:22

Essaie :

service_data:

Tout est là :

Guizmos · Février 16, 2022, 9:19

Merci pour la réponse.
Cela fonctionne avec une button-card classique.
Mais quand je souhaite la mélanger avec un state-switch ça ne fonctionne plus

Voici un exemple de card pour tester :

type: custom:button-card
entity: media_player.nvidia_shield
name: Plex
icon: custom
styles:
  icon:
    - top: '-2%'
    - left: 3%
    - width: 18%
    - position: absolute
  name:
    - top: 80%
    - left: 15%
    - position: center
    - color: rgba(240, 240, 240, 0.8)
  card:
    - font-size: 100%
    - background-color: rgba(240, 240, 240, 0.1)
    - border-radius: 15%
    - border-style: solid
    - border-color: rgba(240, 240, 240, 0.3)
    - border-width: 1px
    - transition: true
  custom_fields:
    icon_plex:
      - top: 14%
      - left: 10%
      - width: 40%
      - position: absolute
custom_fields:
  icon_plex: |
    [[[
      const state = entity.state === 'idle' ? 'animate' : null;
      return `
        <svg viewBox="0 0 50 50">
          <style>
            @keyframes animate {
              0% {
                transform: scale(0.85);
              }
              20% {
                transform: scale(1.1);
              }
              40% {
                transform: scale(0.95);
              }
              60% {
                transform: scale(1.03);
              }
              80% {
                transform: scale(0.97);
              }
              100% {
                transform: scale(1);
              }
              }
              .animate {
              animation: animate 0.8s;
              transform-origin: center;
            }
          </style>
      <path d="M7.7.3h34.6c4.1 0 7.4 3.3 7.4 7.4v34.6c0 4.1-3.3 7.4-7.4 7.4H7.7c-4.1 0-7.4-3.3-7.4-7.4V7.7C.3 3.6 3.6.3 7.7.3z" fill="#282a2d"/>
      <path d="M25,7.1H14.6L25,25L14.6,42.9H25L35.4,25L25,7.1z" fill="#e5a00d"/>
    </svg>
      `;
    ]]]
aspect_ratio: 1/1
state:
  - value: 'on'
    styles:
      card:
        - background-color: rgba(255, 255, 255, 0.8)
        - border: 1px rgba(80, 80, 80) solid
        - box-shadow: 0px 0px 6px 3px var(--button-card-light-color)
      name:
        - color: rgba(0, 0, 0, 0.6)
      icon:
        - color: var(--button-card-light-color-no-temperature)
tap_action:
  action: fire-dom-event
  browser_mod:
    command: popup
    title: Filmographie
    hide_header: true
    animation_card: |
      [[[
        const animation_speed_ms = 900;
        const animation = `card_bounce ${animation_speed_ms}ms cubic-bezier(0.22, 1, 0.36, 1)`;
        this.shadowRoot.getElementById("card").style.animation = animation;
        window.setTimeout(() => {
          this.shadowRoot.getElementById("card").style.animation = "none";
        }, animation_speed_ms)
      ]]]
    card:
      type: custom:button-card
      show_entity_picture: false
      entity_picture: /local/Neon/tv.png
      name: Filmographie
      styles:
        card:
          - font-size: 12px
          - border-radius: 10px
          - background-color: transparent
          - height: 500px
        name:
          - font-weight: lighter
          - z-index: 2
          - position: absolute
          - top: 20px
          - left: 20px
          - font-size: 45px
          - color: var(--secondary-text-color)
        icon:
          - width: 50%
        img_cell:
          - z-index: 2
          - padding-bottom: 20px
        custom_fields:
          blur:
            - z-index: 1
            - border-radius: 10px
            - top: 0%
            - left: 0%
            - width: 100%
            - height: 100%
            - position: absolute
            - background-color: rgba(0, 0, 0, 0.1)
            - backdrop-filter: blur(20px)
            - '-webkit-backdrop-filter': blur(20px)
          films:
            - z-index: 3
            - position: absolute
            - left: 20px
            - width: 50px
            - top: 410px
          series:
            - z-index: 3
            - left: 150px
            - width: 50px
            - position: absolute
            - top: 410px
          animation:
            - z-index: 3
            - left: 280px
            - width: 50px
            - position: absolute
            - top: 410px
          centre:
            - z-index: 3
            - left: 20px
            - width: 350px
            - position: absolute
            - top: 100px
      custom_fields:
        blur: |
          <div></div>
        films:
          card:
            type: custom:button-card
            name: Films
            entity: input_select.stat_plex
            show_state: false
            show_icon: false
            tap_action:
              action: call-service
              service: input_select.select_option
              entity_id: input_select.stat_plex
              service_data:
                option: Films2
              animation_card: |
                [[[
                   const animation_speed_ms = 900;
                   const animation = `card_bounce ${animation_speed_ms}ms cubic-bezier(0.22, 1, 0.36, 1)`;
                   this.shadowRoot.getElementById("card").style.animation = animation;
                   window.setTimeout(() => {
                   this.shadowRoot.getElementById("card").style.animation = "none";
                   }, animation_speed_ms)
                ]]]
            styles:
              card:
                - '--mdc-ripple-press-opacity': 0
                - '--mdc-ripple-press-opacity': 0
                - border-radius: 10px
                - height: 70px
                - width: 100px
                - background: rgba(240, 240, 240, 0.1)
              name:
                - color: white
                - font-weight: bold
                - font-size: 12px
                - justify-self: center
        series:
          card:
            type: custom:button-card
            name: Séries
            entity: input_select.stat_plex
            show_state: false
            show_icon: false
            tap_action:
              action: call_service
              service: input_select.select_option
              entity_id: input_select.stat_plex
              service_data:
                options: Séries2
            styles:
              card:
                - '--mdc-ripple-press-opacity': 0
                - '--mdc-ripple-press-opacity': 0
                - border-radius: 10px
                - height: 70px
                - width: 100px
                - background: rgba(240, 240, 240, 0.1)
              name:
                - color: white
                - font-weight: bold
                - font-size: 12px
                - justify-self: center
        animation:
          card:
            type: custom:button-card
            name: Animation
            entity: input_select.stat_plex
            show_state: false
            show_icon: false
            tap_action:
              action: call_service
              service: input_select.select_option
              data:
                option: Animation2
                entity_id: input_select.stat_plex
            styles:
              card:
                - '--mdc-ripple-press-opacity': 0
                - '--mdc-ripple-press-opacity': 0
                - border-radius: 10px
                - height: 70px
                - width: 100px
                - background: rgba(240, 240, 240, 0.1)
              name:
                - color: white
                - font-weight: bold
                - font-size: 12px
                - justify-self: center
        centre:
          card:
            type: custom:state-switch
            entity: input_select.stat_plex
            transition: swap-right
            states:
              Films2:
                type: entities
                entities:
                  - entity: sensor.dalg_plex_library_films
                    name: Films
              Séries2:
                type: entities
                entities:
                  - entity: sensor.dalg_plex_library_series_tv
                    name: Séries TV
              Animations2:
                type: entities
                entities:
                  - entity: sensor.dalg_plex_library_films_animation
                    name: Films d'animation

Clemalex · Février 16, 2022, 11:37

Teste la carte state-switch en dehors de tout.

Si elle fonctionne.

Le problème vient des autres cartes.

Cherche laquelle et ouvre un ticket sur la carte concernée.

Guizmos · Février 16, 2022, 8:03

Super merci, j’ai trouvé la solution :

        tap_action:
              action: call-service
              service: input_select.select_option
              service_data:
                option: Films2
                entity_id: input_select_stat_plex