[Article] Un beau dashboard, tout simplement

Si possible @Marleo , édite ton premier post en y mettant ton code, comme ça le lien que j’ai d’ores et déjà mis dans le premier post du fil contiendra toutes les infos sur cette jolie tuile météo…

@jerome6994 @BBE voilà c’est fait
hésitez pas à me dire si il y’a des choses « bizarre »

2 « J'aime »

je suis certain que @BBE a déjà fait le test de ton code mais je le ferais aussi pour voir si d’une conf à une autre il y a des choses bizarre ou pas comme sur la carte que j’avais mise

Edit :
Je viens de monter sur ton post et il est super complet c’est vraiment génial
merci pour la communauté

2 « J'aime »

Salut
j’ai trouvé une « solution » mais je ne sais pas si c’est « réglementaire »
Dans le nom du sensor je récupère la date que je traduit

exemple :

  - name: "{{ daily['weather.VOTRE_VILLE'].forecast[2].datetime | as_timestamp | timestamp_custom('%a', true) | replace('Mon', 'Lundi') | replace('Tue', 'Mardi') | replace('Wed', 'Mercredi') | replace('Thu', 'Jeudi') | replace('Fri', 'Vendredi') | replace('Sat', 'Samedi') | replace('Sun', 'Dimanche') }}"
    unique_id: meteo_VOTRE_VILLE'_jour_2
    state: "Something"
    picture: >
        {% set weather = daily['weather.VOTRE_VILLE''].forecast[2].condition %}
        {{ '/local/icones/meteo/' + weather + '.svg' }}
    attributes:
      datetime: >
        {{ daily['weather.VOTRE_VILLE''].forecast[2].datetime | as_timestamp | timestamp_custom('%d/%m', true) }}
      condition: "{{ daily['weather.VOTRE_VILLE''].forecast[2].condition }}"
      cond_icon: >
        {% set weather = daily['weather.VOTRE_VILLE''].forecast[2].condition %}
        {{ '/local/icones/meteo/' + weather + '.svg' }}
      temperature: "🔺{{ daily['weather.VOTRE_VILLE''].forecast[2].temperature }}°"
      humidity: "💧{{ daily['weather.VOTRE_VILLE''].forecast[2].humidity }}%"
      templow: "🔻{{ daily['weather.VOTRE_VILLE''].forecast[2].templow }}°"
      precipitation: "☂️{{ daily['weather.VOTRE_VILLE''].forecast[2].precipitation }}mm"

Ce qui donne ceci :

es dangereux de mettre une « variable » dans le nom ?

merci

1 « J'aime »

Rien de dangereux. Une fois « évalué » ce n’est plus une variable, c’est devenu du texte…

La difficulté c’est comment tu vient « sélectionner » ce sensor dans l’affichage. Si le nom change, il faut au moins un unique_id fixe. Ici c’est le cas, donc c’est bon.

C’est une solution intéressante que pas mal d’entre nous utilisons ou testons :
Fabriquer son propre sensor pour pouvoir utiliser les cartes core directement plutôt que de faire des template dans le dashboard dans des cartes custom…

Ton utilisation sur la météo est intéressante car la gestion des icônes et de la traduction est plus casse pied que pour un sensor avec moins d’états…

J’avais déjà joué sur l’état, mais pas sur le nom… Et c’est plutôt malin en fait !!

Il faut juste vérifier si le changement de nom se fait bien a chaque fois que le sensor évolue. Pas sûr que ce soit aussi réactif que pour l’état. A tester sur plusieurs jours dans ton cas où avec un nom qui évolue plus souvent, pour être sûr du fonctionnement…

re
merci pour ton message, je me suis bien « amusé » a concevoir cette carte ça permis de bien comprendre le fonctionnement des templates et j’avoue que c’est hyper puissant

Pour le nom, maintenant je met toujours une id unique, j’ai souvent eu des souci d’utilisation des entités si il n’y avait pas d’id unique.
J’ai pris l’habitude d’en mettre systématiquement

suite à mes tests cela semble fonctionner le nom prends bien en compte la variable mes jours s’incrémente correctement

J’ai fait le même principe pour mes tuiles calendriers et cela semble fonctionner correctement.

Par contre le temps de synchronisation est de quelques minutes lorsque cela passe à l’evenement/jours suivant, ce n’est pas instantanée.

Je vais modifier mon post précédent avec le code pour le nom en mode « variable »
J’ai aussi intégré un code pour la trad des conditions
@jerome6994 si tu veux tester :wink:

1 « J'aime »

Je viens juste de regarder le message super taf :clap:

Je regarde ceci dès que possible

1 « J'aime »

Bon à savoir !

Je pense que c’est la bonne façon pour finir par se passer de mushroom template…
Reste à trouver comment faire pour avoir le mini badge en plus…
(Bon au pire on met un émoticône dans le template du nom ou de l’état et ça peut faire le job…)

J’avais pas prévu de refaire tout mon dashboard… Va falloir arreter les bonnes idées
:rofl:

1 « J'aime »

du coup je te confirme que ça fonctionne sur les 3 jours de « tests » les chgt de nom ce font bien.
Oui avec les émoticones ça fait le job, j’en utilise pour mes états et ça fonctionne bien.

Je suis assez content des templates qui permet de s’affranchir des cartes customs pour l’instant
J’ai pas encore fini de migrer toutes mes cartes mais pour l’instant mon challenge 100% tuiles ce goupille bien

Il n’y a que la personnalisation des images entités pour les covers/lumières etc… qui n’est pas possible par défaut
image
Je ne veux pas utiliser card_mod je suis donc obligé de créer des templates pour mes lumières par exemples, seulement pour mettre une image à la place d’une icon
un peu chiant

Salut
en ce moment je fais énormément de tests avec cartes tuiles et sections
Du coup je fouille pas mal
Je ne sais pas si cela va répondre à ta question mais tu peux créer une carte « dépliante » avec ce fameux chevron

Étapes à suivre :

Ce qui donne

ensuite quand tu clique sur >

Je sais pas si ça réponds à ton besoin mais pour ma part je vais le déployer pour mon interface mobile.
A+

1 « J'aime »

Super astuce ajoutée au premier post !

1 « J'aime »

Je ne sais pas si l’astuce a déjà été donnée. Voici comment je gère l’empilement de plusieurs cartes.

grid_options:
  columns: full
  rows: 0

Résultat :

Ça fonctionne pour les cartes où l’on peut redéfinir la hauteur comme mini-graph-card.

Désolé, elle est peut-être non pertinente pour du full UI sans YAML.

Oui j’utilise cette astuce pour afficher des paramètres pour mes volets roulants

Si je clique sur la roue crantée j’obtiens :

La roue crantée est colorée donc active
Et je vois mes paramètres Volet si je clique de nouveau sur matin je passe soit à l’heure lever du soleil soit à une heure programmée

la carte avant ça :

on a quelques choses de plus minimaliste pour le coup, mais on peut vite avoir pas mal d’helper / entrée

1 « J'aime »

Alors peut être que c’est déjà passé mais voici 3 fois la même carte avec un peu de card_mod par contre !
image

On supprime le fond de couleur de l’icone.

carte n°1
type: custom:mushroom-template-card
primary: ""
secondary: ""
icon: mdi:home-assistant
icon_color: blue
layout: vertical
tap_action:
  action: navigate
  navigation_path: /dashboard-telephone/info
grid_options:
  columns: 3
  rows: 1
card_mod:
  style:
    .: |
      ha-card {
        background-color: rgba(var(--rgb-secondary-text-color), 0.2) !important;
      }
    mushroom-shape-icon$: |
      .shape {
        --shape-color: none !important;
      }

carte n°2
type: custom:mushroom-template-card
primary: ""
secondary: ""
icon: mdi:home-assistant
icon_color: blue
layout: vertical
tap_action:
  action: navigate
  navigation_path: /dashboard-telephone/info
grid_options:
  columns: 3
  rows: 1
carte n°3
type: custom:mushroom-template-card
primary: ""
secondary: ""
icon: mdi:home-assistant
icon_color: blue
layout: vertical
tap_action:
  action: navigate
  navigation_path: /dashboard-telephone/info
grid_options:
  columns: 3
  rows: 1
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --shape-color: none !important;
      }

Je cherche des solution pour mettre un peu en forme les tuiles sans passer par des usines à gaz quand même sinon autant faire de la button card :slight_smile: