[Mon Dashboard] - @kaoru

Salut, la première fois que tu mets un style : *icon_hue_styles, tu dois mettre forcément la * mais après tu dois plus la mettre plus loin dans ton code

Hello, je suis un peu sur le même design, aurait tu le temps de m’expliquer comment tu as mis la température à côté du titre ? un bout de code serait top.

Merci d’avance

hello, voici le code pour le button card:

          - type: custom:button-card
            entity: light.salon
            label: >
              [[[ return Math.round(states['sensor.temperature_salon'].state) + '°' ]]]
            tap_action:
              !include popup/salon.yaml
            double_tap_action:
              action: toggle
            template:
              - base
              - icon_hue

ainsi que le template correspondant au « label » (j’ai laissé que ce qui concernait le label:

  base:
    show_label: true
    styles:
      label:
        - justify-self: end
        - line-height: 115%
    extra_styles: |
      #name, #state, #label {
        font-size: 1.24vw;
        letter-spacing: 0.05vw;
      }
      /* portrait */
      @media screen and (max-width: 1100px) {
        #name, #state, #label {
          font-size: 1.8vw;
          letter-spacing: 0.05vw;
        }
      }
      /* phone */
      @media screen and (max-width: 800px) {
        #name, #state, #label {
          font-size: 3.1vw;
          letter-spacing: 0.12vw;
        }
      }
      @keyframes card_bounce {
        0% {
          transform: scale(1);
        }
        15% {
          transform: scale(0.9);
        }
        25% {
          transform: scale(1);
        }
        30% {
          transform: scale(0.98);
        }
        100% {
          transform: scale(1);
        }
      }

hésites pas si tu as besoin de plus d’informations

Merci beaucoup, j’ai testé et cela fonctionne bien sur les boutons as-tu un code similaire qui pourrait être mis à côté du grand titre ?

image

Je n’ai pas trouvé de solution pour mettre un template dans le titre, il reste la possibilité de jouer avec le grid, supprimer le titre, le remettre dans une case avec du markdown, mettre le template dans un button card invisible à côté, avec les cases en dessous mais beaucoup de bidouilles pour pas grand chose dans mon cas (mes grids sont les étages et les pièces les chambres, j’ai tout remodifié depuis)

Bonjour @kaoru,

Le design de mat8707 et le tien m’ont inspiré…bien inspiré ! Je suis donc en train de refaire un dashboard equivalent.
Et la, je suis confronté à 2 points qui m’embêtent:

  1. Les angles des boutons sont bien trop carré à mon goût et je ne vois pas où dois-je effectuer la modification - Je serai tenté de dire dans button_card_template.yaml puis dans la partie « base », mais rien n’y fait.
  2. Dans la partie « Temperature », je me retrouve avec du texte de code alors que j’ai bien pris les différents partie de button_card_template.

Capture d’écran 2021-10-19 à 20.17.12

As-tu une idée de ce qui cloche ?

Il te manque un border-radius quelque part dans ton code…

Ce ne doit pas être du code, mais plus un message d’erreur je pense.
Commence par vérifier que les entités existent. Que si un attribut est récupéré, qu’il existe pour ton entité également…

Si tu veux plus d’aide, il te faudra partager ton code :+1:

Salut, tu as activé le thème appelé tablet dans ton profil utilisateur ?

Merci Kaoru,
Dans le profil user, je n’ai pas accès à la partie thème. Il est grisé.

T’as bien un thème.yaml dans ton dossier include ?

En effet c’est mieux avec !

Par contre sais-tu d’ou vient le problème d’affichage sur les boutons de t°
Capture d’écran 2021-10-19 à 20.17.12

Je me retrouve également avec ce problème avec après un appui long pour ouvrir le popup.

Alors que j’ai déclaré mes ressources dans le fichier configuration.yaml

lovelace:
  mode: yaml
  resources:
    [ { url: /hacsfiles/bar-card/bar-card.js,                               type: module },
       { url: /hacsfiles/button-card/button-card.js,                         type: module },
       { url: /hacsfiles/kiosk-mode/kiosk-mode.js,                           type: module },
       { url: /hacsfiles/light-entity-card/light-entity-card.js,             type: module },
       { url: /hacsfiles/light-popup-card/light-popup-card.js,               type: module },]

PS: je te remercie pour tes éclairages précédent. :sunglasses:

@kaoru
Bon tout est rentré dans l’ordre. Peut-etre un problème de cache sur le navigateur!

ça surement réglé le problème pour light-popup-card, c’est parfois un peu capricieux.

Concernant les thermomètres, t’as plus rien aussi ?

Sinon regarde la console du mode développement de ton navigateur. Tu auras sûrement des informations qui pourront t’aiguiller dans ton debug

Si pour le thermomètre ça c’est mis aussi à jour…

Par contre peux-tu me dire comme faire pour réduire un peu la taille des boutons sur la page (info flèche rouge sur le screenshot)? Ainsi que la taille de la police dans les boutons? Je pense que ce doit être dans le fichier button_card_templates partie base, mais je ne vois où.Capture d’écran 2021-10-22 à 22.29.12

C’est possiblement à la fois dans themes et button_card_template pour réduire la détaille des buttons

Pour la police, c’est probablement ligne 96 de button_card_template. Veille bien à changer la taille pour les différente types de media

      /* portrait */
      @media screen and (max-width: 1200px) {
      /* phone */
      @media screen and (max-width: 800px) {
        #name, #state {

Tu comptes faire quoi comme disposition des grid ?

Il faut que je regarde ça en détail.
hier en jetant un bref coup d’oeil j’ai bien trouvé pour les polices mais par les boutons.

Pour ce qui est de ma disposition, je vais un basique par pièce.

Bonsoir, as-tu eu l’occasion de créer ton sujet Dashboard ici sur le forum ou un github avec ton Dashboard ? Il y a plusieurs chose que j’aimerais voir comment tu as fait …

Merci :pray:

Bonjour, je n’ai pas créé de nouveau sujet car entre ce post et l’original de Matt, ce type de dashboard est déjà bien documenté.
Si besoin de détail sur quelque-chose n’hésites pas, ici ou en mp.

Oui c’est vrai, tu as raison. Je n’hésiterais pas à te demander. C’est gentil. Bonne journée

Bonjour @kaoru, un magnifique design que tu as fait là… et dont je m’inspire énormément !
Tes cards pour les températures sont super chouettes. Je suis parti de ta config et je me retrouve avec le graph qui ne couvre pas la card entièrement :

image

Tu saurais d’où vient le problème ?

Merci pour ton temps.
HugoKs3.