Personnaliser ses cartes avec Card-mod

Clemalex · Avril 30, 2021, 2:15

Un sujet dans #entraide-home-assistant pour regrouper les demandes d’aide concernant l’utilisation de card-mod.

Ce module permettant de modifier le rendu des cartes, des thèmes est un indispensable de la personnalisation et revient souvent.

Utilisable aussi bien sur les cartes natives que sur les cartes personnalisées (custom-card), rien ne lui resiste

Pour bien commencer, je vous propose de ne pas réinventer la roue et de vous partager un lien qui est parmi l’un des +1700 messages (oui, j’ai tout parcouru, rien de mieux pour apprendre ) :

Ce lien regroupe divers exemples de customisations très intéressantes (j’aurais aimé l’avoir dans mes début… ).

Amusez-vous

Et n’hésitez pas à demander de l’aide (ici ou ailleurs )

Et j’en oublie certainement, désolé

Clemalex · Avril 30, 2021, 2:20

Code de la carte météo :

type: weather-forecast
entity: weather.maison
show_forecast: true
secondary_info_attribute: pressure
card_mod:
  style: >
    .temp-attribute{color:green;}

    .forecast > div:nth-child(5){filter: blur(5px);}

    .forecast > div:nth-child(5):hover{filter: blur(0);cursor: crosshair;}

    ha-card > div.forecast > div:nth-child(1) > div:nth-child(1),

    ha-card > div.forecast > div:nth-child(2) > div:nth-child(1),

    ha-card > div.forecast > div:nth-child(3) > div:nth-child(1){position:
    relative; z-index: 1;text-transform: capitalize;font-size: 14px;bottom:
    -8rem}

    ha-card > div.forecast > div:nth-child(1) > div.forecast-image-icon,

    ha-card > div.forecast > div:nth-child(2) > div.forecast-image-icon,

    ha-card > div.forecast > div:nth-child(3) >
    div.forecast-image-icon{transform: scale(2)}

Clemalex · Juillet 22, 2021, 8:45

Je viens d’ajouter la 1ère vidéo officielle de HACF

Elle explique la navigation de card-mod pour cibler les modifications.

Je crois qu’à un moment je parle de javascript…c’est du css !

Bon visionnage !

En espérant que ça en aide certain

Le format vidéo, c’est pas ma tasse de thé, mais parfois, il n’y a pas le choix donc…

Shadow · Juillet 23, 2021, 4:20

Merci pour la vidéo, SUPER explicative

Clemalex · Juillet 27, 2021, 8:01

Alors @barto_95 ? Ça a aidé la vidéo à ta compréhension ?

Galadan · Juillet 27, 2021, 8:08

Top cette vidéo!! Carrément plus clair (pour ma part) dans ce format.
On peux utiliser cette méthode pour par exemple utiliser un autre sensor température dans la carte? Ou c’est uniquement du changement « esthétique »?

Clemalex · Juillet 27, 2021, 8:19

As tu déjà oublié ?

https://forum.hacf.fr/t/installer-la-carte-meteo-france/979/46?u=clemalex

J’avais passé du temps pour rédiger le mini tuto… pour répondre à ta question (qui est la même aujourd’hui )

Galadan · Juillet 27, 2021, 8:28

Non, j’ai pas oublié! C’est en place d’ailleurs, mais je me demandais si de cette façon, c’était pas plus simple.

Clemalex · Juillet 27, 2021, 9:26

Ak ok ! Alors oui on peut le faire ainsi…

C’est avec du ::before et/ou du after:: et la propriété css content:.

En résumé, tu mets la propriété display: none; sur l’élément de la température et tu mets la propriété content: "{{states('sensor.temperature_netatmo')}}"; pour ::after pat exemple

Tu trouveras des exemples en suivant le lien que j’ai mis dans le premier post (tu tomberas sur ce lien)

Galadan · Juillet 27, 2021, 9:31

Ah! C’est top ce lien, pleins d’exemples de modifications qui donnent pleins d’idées!
Merci @Clemalex ! Hésite pas a faire d’autres vidéos même si c’est pas ce que tu préfère Je trouve le format vraiment bien.

Clemalex · Juillet 27, 2021, 9:36

Digression :

Ce n’est pas que je n’aime pas (mais c’est sur, c’est pas ma tasse de thé), mais c’est que je préfère le format écrit car on retrouve facilement les informations.

Je trouve les vidéos utiles pour les découvertes mais pas dans la mise au point. (il en a parlé dans sa vidéo de 25min…mais où ?.. … Je trouve que c’est une perte de temps vis a vis d’un tuto écrit).

C’est mon avis.

Et quand on cherche une information, on la retrouve mieux quand elle est écrite…

Fin de la digression…

Clemalex · Juillet 27, 2021, 9:40

Pour les idées, ne te limite pas à Home Assistant mais regarde plus large en regardant le CSS.

Card-mod nous permet d’ajouter n’importe quel code CSS… (exemple : 🎨 [Mon Dashboard] - @Clemalex - #31 par Clemalex)

Et si tu veux ajouter du code Javascript, oriente toi vers la carte [CARTE] Button-Card de @RomRider

Galadan · Juillet 27, 2021, 9:42

C’est pas faux
Pour un tuto, pas trop long bien sûr ça peu le faire, par exemple sur celui-ci, je le suit pas a pas, et la pause est bien pratique

Je connais pas trop le CSS et le code web en général mais je m’y intéresse ^^

Galadan · Juillet 27, 2021, 10:08

@Clemalex , j’arrive a faire disparaitre la temp initial mais pas a afficher celle de remplacement, j’ai fait comme cela:

  style: |
    ha-card > ul.flow-row.current > li:nth-child(3){
      display: none;
      .text-content::after {
          content: "{{states('sensor.temperature_netatmo')}}";
      }        
    }

Clemalex · Juillet 27, 2021, 11:34

C’est pas comme ça que ça fonctionne

style: |
    ha-card > ul.flow-row.current > li:nth-child(3){
      display: none;
    }
    ha-card > ul.flow-row.current > li:nth-child(3)::after{
      content: "{{states('sensor.temperature_netatmo')}} °C";
    }

Regarde mieux les exemples

Galadan · Juillet 27, 2021, 12:08

En effet, j’avais pas fait attention qu’il fallait redéclarer l’objet à modifier…
Mais j’ai toujours rien qui s’affiche:

card_mod:
  style: |
    ha-card > ul.flow-row.current > li:nth-child(3){
      display: none;
    }
    ha-card > ul.flow-row.current > li:nth-child(3)::after{
      content: "{{states('sensor.netatmo_galahome_galastation_galamodule_temperature')}} °C";
    }

Mais si j’enlève le display: none, j’ai les deux.

Du coup j’ai fait ça (en suivant un exemple du lien):

card_mod:
  style: |
    ha-card > ul.flow-row.current > li:nth-child(3){
      color: transparent;
    }
    ha-card > ul.flow-row.current > li:nth-child(3)::after{
      content: "{{states('sensor.netatmo_galahome_galastation_galamodule_temperature')}} °C";
      color: var(--primary-text-color);
    }

Et la c’est ok, je sais pas si c’est juste par contre…

Clemalex · Juillet 27, 2021, 12:22

Si c’est ok…

Ma première proposition ne peut pas fonctionner vu que l’on masque l’élément…

Si tu ajoutes un ::before tu comprendra mieux l’agencement que tu viens de créer…

Galadan · Juillet 27, 2021, 12:24

Je me disais aussi que c’était pas « logique » de remplacer quelque chose de masqué ^^
J’ai fait la même pour l’humidité sans problème du coup

Oui faut que je joue avec pour voir.
Cela décale vers le bas le « after » et le "before"le laisse sur la même ligne mais avant (normal quoi ^^ )
Peut-être je doit réduire la taille de la police pour garder sur la même ligne mais toujours après l’original?

barto_95 · Juillet 27, 2021, 8:51

merci pour ta vidéo.

Je comprend mieux le principe effectivement merci poto

par contre le truc shadow faut que je revoie pour mieux comprendre.

Petite suggestion: la music est par moment un peut trop forte (justement au niveau de l’explication shadow)

franchement la vidéo nikel mec continue sérieux c’est top

manque plus qu’a faire la même chose pour Button-card

Pulpy-Luke · Juillet 27, 2021, 8:57

Hello

Sympa la vidéo !
Seul bémol l’amplification du son… Casque à fond, il faut rester concentré pour pas perdre le fil. C’est ça les vieux^^