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

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 :

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

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

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

6 J'aime

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