Digital Clock c'est fini ! - KeithBolton/Home-Assistant GitHub Wiki

Merci d'indiquer l'url de cette page pour tout partage

Si vous aimez ce tutoriel, cliquez sur ⭐️ en haut à droite de l'écran pour dire que vous avez appréciez. Plus j'aurai d'⭐️ et plus je serai heureux de partager mes autres codes avec vous 😉

Je me passe de l'intégration Digital-Clock, je la remplace par Button-Card et le résultat est plus sympa je trouve ! Regardez la carte de gauche est celle de Digital Clock, celles de droites sont celles réalisées avec Button Card. Je suis resté sur quelque chose de ressemblant pour l'exemple mais les possibiltés sont énormes car vous pouvez tout modifier, couleurs, taille, style & police d'écriture ainsi que le background. En parlant de background, il est aussi possible de changer sa couleur en fonction du levé et du couché du soleil par exemple. Libre à vous et à votre imagination débordante. 🙃

Pour commencer, vous allez avoir besoin de différents sensors que je vous propose ci-dessous. Une fois copié dans votre fichier "configuration.yaml" vous devez redémarrer HA.

     # Affiche l'heure 
     time_fr:
       value_template: "{{ now().strftime('%H:%M')}}"

     # Numéro du jour
     week_day_number:
       value_template: "{{ now().strftime('%d')}}"

     # Jour en français
     jour_fr:
      value_template: "{{ ['Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi', 'Dimanche'][now().weekday()] }}"

     # Mois en français
     mois_fr:
       value_template: "{% set months = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'] %} {{ months[now().month-1]}}"

Une fois ceci terminé, vous devez ajouter une nouvelle carte type Button Card et copier le code ci-dessous :

custom_fields:
  name: |
    [[[
        return `
        <div style="display:block; font-size:40px; font-weight:900;">           
              ${states['sensor.time_fr'].state}
        </div>  
        <div style="display:block; font-size:22px; font-weight:400;">   
              ${states['sensor.jour_fr'].state}
              ${states['sensor.week_day_number'].state}
              ${states['sensor.mois_fr'].state} 
          </div>    
          `
      ]]]
styles:
  card:
    - height: 100px
    - color: rgba(209,234,245,1)
  custom_fields:
    name:
      - align-self: middle
      - justify-self: start
      - position: absolute
      - left: 30%
  grid:
    - grid-template-areas: '"i name"'
    - grid-template-columns: 1fr
    - grid-template-rows: 1fr min-content
type: custom:button-card

Dans la partie "custom_fields", vous avez deux lignes avec ce bout de code:

 font-size:40px; font-weight:900;

Voici à quoi ça correspond :

  • font-size est la taille du texte exprimée en pixel
  • font-weight est l'épaisseur du texte vous avez la possibilité de choisir entre 100 et 900 pour aller du moins gras au plus gras
⚠️ **GitHub.com Fallback** ⚠️