Personnaliser ses cartes avec Card-mod

Clemalex · Septembre 2, 2021, 7:16

Même une réponse

Afficher le code

      card-mod-theme: minimalist
      card-mod-root-yaml: |
      
        .: |
          /* Cacher le bouton d'ouverture de la barre latérale */
          ha-menu-button {
            display: none !important;
          }

          /* Cacher le bouton du menu (modification du tableau de bord, etc.) */
          ha-button-menu   {
            display: none !important;
          }
          
        "#layout":
          app-header:
            app-toolbar:
              ha-tabs:
                $: |
                   /* Cacher le chevron de droite */
                    paper-icon-button[icon="paper-tabs:chevron-right"] {
                      display: none;
                    }

                   /* Cacher le chevron de gauche */
                    paper-icon-button[icon="paper-tabs:chevron-left"] {
                      display: none;
                    }

C’est la même chose que les explications de la vidéo. Le seul détail qui change c’est de bien commencer par :

card-mod-root-yaml: |

→ Le -yaml et | sont très important

mat4444 · Septembre 2, 2021, 8:22

Merci pour la solution !
Comme les autres exemples de modification de thème n’avaient pas de shadow-root, je n’ai pas pris la peine de remonter plus haut.
Y a-t-il une raison particulière pour avoir choisi paper-icon-button[icon="paper-tabs:chevron-right"] au lieu de paper-icon-button:nth-child(4) comme donné par le selector ?

Clemalex · Septembre 2, 2021, 9:08

Parce que c’est ciblé plus précisément.

Le selecteur donne les informations de l’architecture donc si elle évolue, ça peut ne plus fonctionner (dans les deux cas mais moins rapide dans le cas que je présente).

Et je crois que je l’avais vu dans la doc de card-mod à l’époque… Faut lire les docs, elles sont écrites par les sachant…

mat4444 · Septembre 3, 2021, 9:06

J’ai bien lu les docs, mais pour card-mod, je trouve ça assez indigeste ! En tout cas, ta vidéo est très utile pour illustrer son utilisation.

Clemalex · Septembre 3, 2021, 10:08

C’est très poussé c’est sûr…

Felix62 · Septembre 6, 2021, 11:30

Bonjour à toi @Clemalex

J’essaie de mettre de la couleur sur le dahboard et pour ce qui est des valeurs allant de - xx,xx% à + xx,xx%, je n’y parvient pas

L’idée serai si la valeur est négatif alors mettre en couleur rouge sinon vert.

voici mon code actuelle style:

          style: |
            ha-card {
            background: none;
            box-shadow: none;
            margin-bottom: -10px;
            margin-top: 0px;
            }
            :host {
                --paper-item-icon-color: {% if states('sensor.cac_40_variation') | int <= 0.1 |round(3) %} red {% else %} green {% endif %}
            }
            .state > div:nth-child(1) {
             color: {% if states('sensor.cac_40_variation')| int <= 0.1 |round(3) %} red {% else %} green {% endif %}
            }

Clemalex · Septembre 6, 2021, 5:07

Plusieurs choses :

La conversion

|int

→ convertie en integer (un entier) donc chiffre sans virgule… donc <= 0.1 n’est pas cohérent Il vaudrait mieux |float (nombre à virgule)

L’arrondi

|round(3)

Il n’a rien a faire ici celui la !

Du coup pour un nombre entier :

animate

type: entities
entities:
  - entity: input_number.hacf
    card_mod:
      style: |
        hui-generic-entity-row > div > span{
          color: {% if (states('input_number.hacf'))|int < -19 %} red {% else %} green {% endif %};
        }

et donc pour un nombre à virgule :

animate

type: entities
entities:
  - entity: input_number.hacf
    card_mod:
      style: |
        hui-generic-entity-row > div > span{
          color: {% if (states('input_number.hacf'))|float < -1.5 %} red {% else %} green {% endif %};
        }

Felix62 · Septembre 6, 2021, 6:08

Merci pour les explications @Clemalex

Felix62 · Septembre 7, 2021, 9:49

Cela ne fonctionne pas correctement, mais je pense que c’est parce-que dans la valeur de l’entité dans l’outil de dev j’ai « xx,xx % » est-ce que le « % » serai l’élément perturbateur ?
c’est un scrape donc forcement on ne choisit pas peut-être un « replace » ‹ % ›,’ ’ ?

dev tools

Je colle le code:

            :host {
                --paper-item-icon-color: {% if (states('sensor.cac_40_variation'))| float < -0.00 %} red {% else %} green {% endif %};
            }
            .state > div:nth-child(1) {
             color: {% if (states('sensor.cac_40_variation'))|float < -0.00 %} red {% else %} green {% endif %};
            }

Merci d’avance @Clemalex

Clemalex · Septembre 7, 2021, 10:06

D’où provient l’entité ?

Car on peut découper bien sûr, mais si on peut directement jouer sur l’entité car elle ne semble pas bien construite (l’unité de mesure ne doit pas être contenue dans l’état mais être déclarée comme attribut…)

Felix62 · Septembre 7, 2021, 10:18

  - platform: scrape
    name: CAC 40 variation
    resource: https://www.boursedirect.fr/fr/marche/euronext-paris/cac-40-FR0003500008-PX1-EUR-XPAR/seance
    select: ".main-quotation-body > div:nth-child(2) > strong:nth-child(1)"

Clemalex · Septembre 7, 2021, 1:11

Alalala !

Il faut reprendre cette définition, clairement.

Felix62 · Septembre 7, 2021, 6:45

Comment je dois procéder ?

Clemalex · Septembre 7, 2021, 6:59

Non, j’avais pas oublié…

sensor:    
  - platform: scrape
    name: CAC 40 variation SPlit
    resource: https://www.boursedirect.fr/fr/marche/euronext-paris/cac-40-FR0003500008-PX1-EUR-XPAR/seance
    select: ".main-quotation-body > div:nth-child(2) > strong:nth-child(1)"
    value_template: '{{ value.split()[0] }}' #<- On découpe la valeur récupérer pour ne garder que le nombre
    unit_of_measurement: "%" #<- On définit l'unité ici

Ce qui donne :

Et donc, en avant pour règles de calcul :

            :host {
                --paper-item-icon-color: {% if (states('sensor.cac_40_variation'))| float < 0 } red {% else %} green {% endif %};
            }
            .state > div:nth-child(1) {
             color: {% if (states('sensor.cac_40_variation'))|float < 0} red {% else %} green {% endif %};
            }

Felix62 · Septembre 7, 2021, 8:01

merci.

J’ai une question concernant Split 0 comment cela fonctionne pourquoi 0 et pas 1 ou 2.
Sa me permettra d’apprendre

Clemalex · Septembre 7, 2021, 8:25

Nikos3296 · Septembre 24, 2021, 10:35

Hello tout le monde,

Tout d’abord merci @Clemalex pour sa vidéo très intéressante !

Alors j’ai créé la carte suivante pour mes volets roulants :

type: vertical-stack
title: Centralisation des volets
cards:
  - type: custom:button-card
    color: rgba(255, 255, 255.)
    name: Tout ouvrir
    tap_action:
      action: call-service
      service: cover.open_cover
      service_data:
        entity_id: cover.tous
  - type: custom:button-card
    color: rgba(255, 255, 255.)
    name: Ouverture principale
    tap_action:
      action: call-service
      service: cover.open_cover
      service_data:
        entity_id: cover.piece_principale
  - type: horizontal-stack
    cards:
      - type: custom:shutter-card
        name: Bureau
        entities:
          - entity: cover.bureau_2
            name: Bureau
            buttons_position: left
            title_position: bottom
      - type: custom:shutter-card
        name: Chambre extension
        entities:
          - entity: cover.chambre_extension_2
            name: Extension
            buttons_position: left
            title_position: bottom
  - type: horizontal-stack
    cards:
      - type: entity
        entity: cover.bureau_2
      - type: entity
        entity: cover.chambre_extension_2

Le rendu sur l’interface web de mon pc est correct

Mais le rendu sur mon iphone en portrait n’est pas génial alors qu’en paysage si…

Mode portrait iPhone :

Mode paysage iPhone :

Une idée a proposer ?

Pour info j’ai testé l’idée du card-mod avec le mode portrait et paysage mais ça ne change rien…

https://forum.hacf.fr/t/carte-differentes-en-mode-portrait-paysage/4127/5

Clemalex · Septembre 24, 2021, 4:04

La réaction est celle qui doit être avec ta combinaison de piles…

Passer par layout-card peut être.

Mais en pratique, il est beaucoup plus dur de maintenir un seul tableau de bord compatible pour tous les appareils plutôt que d’avoir un tableau de bord par type d’écran (pc, tablette, smartphone, tv, etc)

Nikos3296 · Septembre 24, 2021, 4:28

Merci j’essaierai par layout.
Après tu n’as pas tort, autant avoir un Dashboard par type d’appareil.
Merci du conseil

Plouf34 · Septembre 28, 2021, 12:30

Bonjour à tous,
Savez vous comment ajouter le % du secondary info pour mes capteurs d’humidité (inégré a mes capteurs de temp Aqara). Et en question bonus, peut on colorer la valeur selon un delata de % comme pour les temperatures?

Capture

- entity: sensor.temperature_abri_piscine
    name: A.Piscine
    secondary_info:
      name: false
      entity: sensor.humidity_abri_piscine
    style:
      hui-generic-entity-row:
        $: |
          .secondary {
            font-size: 12px;
            line-height: initial;
          }
        .: |
          :host .text-content {
            color: 
              {% if states(config.entity) | int < 18 %} 
                lightblue
              {% elif states(config.entity) | int < 20 %}
                #5294E2
              {% elif states(config.entity) | int < 23 %}
                orange
              {% elif states(config.entity) | int < 26 %}
                red
              {% elif states(config.entity) | int < 50 %}
               #922B21           
              {% endif %}
              ;
          }