Dashboard - 🌻 Minimalist

[Galadan]

J’ai fait ça:

  - title: temperature
    icon: mdi:thermometer
    path: temperature
    cards:
      - cards:
          - cards:
              - button_card_templates:
                  graph:
                    variables:
                      entity: sensor.example
                      color: var(--google-blue-500)
                      name: Default name
                  styles:
                    card:
                      - border-radius: 20px
                      - box-shadow: var(--box-shadow)
                      - padding: 0px
                    grid:
                      - grid-template-areas: '"item1" "item2"'
                      - grid-template-columns: 1fr
                      - grid-template-rows: min-content  min-content
                  custom_fields:
                    item1:
                      card:
                        entity: '[[[ return variables.entity ]]]'
                        name: '[[[ return variables.name ]]]'
                        template:
                          - icon_info
                          - generique
                        styles:
                          card:
                            - padding: 12px
                        type: custom:button-card
                    item2:
                      card:
                        type: custom:mini-graph-card
                        entities:
                          - entity: '[[[ return variables.entity ]]]'
                      line_color: '[[[ return variables.color ]]]'
                      show:
                        name: false
                        icon: false
                        legend: false
                        state: false
                      style: |
                        ha-card {
                          box-shadow: none;
                          border-radius: var(--border-radius);
                        }

[Clemalex]

Ce n’est pas ainsi, regarde le lien du message précédent

[Galadan]

Oui j’ai lu, j’ai créé un YAML regroupant tous les templates.
Mais quand je le déclare dans mon lovelace-ui j’ai un message d’erreur…

[Clemalex]

L’erreur parle d’elle-même…

Il n’est pas possible d’inclure en mode graphique.

@Galadan

Oui j’ai lu,

C’est un gif qui est présent…

Tu as lu ? Ou vu ?

[Galadan]

Donc c’est pas ici que l’on fait ça… je suis perdu lol
Comment il fait pour s’organiser comme cela:

Ca m’a l’air d’être plus claire pour gérer après non ?

Arf, j’ai juste était sur le git de Kaoru …
Ok avec le GIF, c’est plus parlant pour moi
Je regarde cela de suite!

J’ai fait cela mais, cela ne semble pas prendre en compte le template…

    button_card_templates:
      pilule:
        tap_action:
          action: more-info
        show_icon: false
        show_name: false
        show_state: false
        show_label: true
        size: 80%
        styles:
          img_cell:
            - width: 24px
          card:
            - border-radius: 30px
            - box-shadow: var(--box-shadow)
            - height: 36px
            - width: auto
            - padding-left: 6px
            - padding-right: 6px
          grid:
            - grid-template-areas: '"l"'
          label:
            - justify-self: center
            - padding: 0px 6px
            - font-weight: bold
            - font-size: 14px
      graph:
        variables:
          entity: sensor.example
          color: var(--google-blue-500)
          name: Default name
        styles:
          card:
            - border-radius: 20px
            - box-shadow: var(--box-shadow)
            - padding: 0px
          grid:
            - grid-template-areas: '"item1" "item2"'
            - grid-template-columns: 1fr
            - grid-template-rows: min-content  min-content
        custom_fields:
          item1:
            card:
              entity: '[[[ return variables.entity ]]]'
              name: '[[[ return variables.name ]]]'
              template:
                - icon_info
                - generique
              styles:
                card:
                  - padding: 12px
              type: custom:button-card
          item2:
            card:
              type: custom:mini-graph-card
              entities:
                - entity: '[[[ return variables.entity ]]]'
              line_color: '[[[ return variables.color ]]]'
              show:
                name: false
                icon: false
                legend: false
                state: false
              style: |
                ha-card {
                  box-shadow: none;
                  border-radius: var(--border-radius);
                }
  - title: test_template
    path: test-template
    badges: []
    cards:
      - type: custom:button-card
        template: graph
        variables:
          entity: sensor.netatmo_galahome_galastation_galamodule_temperature
          color: var(--google-blue-500)
          name: Température

[Clemalex]

@Galadan

- title: test_template

Parce que le tiret n’a pas lieu d’être.

Si tu fait tout en graphique, tu ne devrait pas avoir de tiret.

Tu est en train de tout mélanger là.

@Galadan

Comment il fait pour s’organiser comme cela:

YAML ou Graphique?

Bonjour, Il à l’air top ce thème je vais le tester. En partant de 0 il vaut mieux partir en yaml ou en graphique ?

Multiple Dashboards

[Galadan]

ok, j’ai compris… c’est avant « view: » qu’il faut que je mette mes template…

J’avance mais les couleur ne semble pas appliquées:

[Clemalex]

@Galadan

J’avance mais les couleur ne semble pas appliquées:

Il faut appliquer le thème :

Dashboard - Minimalist

Ce n’est pas parce que tu n’aime pas le code que tu es obligé d’y aller comme un bœuf Montre nous ton fichier en plus des erreurs Aucun soucis pour ma part : frontend: themes: minimalist: #Couleurs google-red-500 : '#F54436' google-green-500 : '#01C852' google-yellow-500 : '#FF9101' google-blue-500 : '#3D5AFE' google-violet-500 : '#661FFF' google-grey-500: '#BBBBBB' couleur-rouge : 245, 68, 54 couleur-vert :…

[Galadan]

ben oui je suis bête, je l’ai pas activé alors que j’ai mis mes fichiers yaml en place… maintenant c’est ok de ce coté là

j’ai modifié le template pilule_temperature pour que cela fonctionne avec l’intégration météo France, voici le code:

 pilule_temperature:
    template: pilule
    tap_action:
      action: navigate
      navigation_path: /lovelace/temperature
    label: |
      [[[
        var inter = states['sensor.netatmo_galahome_galastation_temperature'].state;
        var exter = states['sensor.netatmo_galahome_galastation_galamodule_temperature'].state;
        var icon = '☀️';
        if (states['weather.nersac'].state == 'SUNNY'){
          var icon = '☀️';
        } else if(states['weather.nersac'].state == 'CLEAR_NIGHT'){
          var icon = '🌙';
        } else if(states['weather.nersac'].state == 'RAINY'){
          var icon = '🌧️';
        } else if(states['weather.nersac'].state == 'SNOWY'){
          var icon = '❄️';
        } else if(states['weather.nersac'].state == 'SNOWY_RAINY'){
          var icon = '❄️';
        } else if(states['weather.nersac'].state == 'WINDY'){
          var icon = '🌫️';
        } else if(states['weather.nersac'].state == 'FOG'){
          var icon = '🌫️';
        } else if(states['weather.nersac'].state == 'CLOUDY'){
          var icon = '☁️';
        } else if(states['weather.nersac'].state == 'PARTLYCLOUDY'){
          var icon = '⛅️';
        } else if(states['weather.nersac'].state == 'PARTLYCLOUDY'){
          var icon = '⛅';
        }
        return icon + ' ' + inter + '° / ' +  exter + '°' ;
      ]]]

ça a l’air d’être ok mais je ne suis pas sur d’avoir toutes les conditions climatique, me semble que tu utilise aussi cette intégration, ça te semble bon?

[Galadan]

Hello, j’ai aussi une interrogation sur comment modifier/ajouter un template pour afficher ce type d’info:

Avec les templates de Tben cela me donne ça:

Je n’ai donc pas l’info du sensor et c’est pareil pour d’autre du même type.

[Clemalex]

Commence par lire la documentation de la carte Button-card et des templates.

C’est impossible de pouvoir répondre à toutes les sollicitations

Commence par faire la carte comme tu le souhaites (sans template) et ensuite, tu créera un template (qui sert uniquement à ne pas recopier le code dans toutes les cartes)

Pas de soucis pour mettre au point avec toi par la suite.

[Galadan]

Je comprends bien, merci du temps passé pour tous nous aider.
J’ai donc repris mon bouton initial et je lui est rajouté le card-mod, ce qui semble bon niveau design sauf pour afficher l’icone sur le coté.

Reste a optimiser avec un template si je comprends bien.

type: button
template: icon_info_bg
tap_action:
  action: toggle
entity: sensor.pool_filtre_time_rest
name: Clean du filtre dans
icon: mdi:calendar
show_icon: false
show_state: true
state_color: true
card_mod:
  style: |
    ha-card > ul.flow-row.current > li:nth-child(3){
      color: transparent;
    }
    ha-card > ul.flow-row.details.spacer > li:nth-child(2){
      color: transparent;
    }
    ha-card {
      box-shadow: var(--box-shadow);
      border-radius: 20px;
      padding: 12px !important;
    }
    .icon-image{
      min-width: 42px !important;
      margin-right: 12px !important;
    }
    .icon-image > *{
      height: 42px !important; 
      width: 42px;
      flex: 0 0 42px !important;
    }
    .state {
      font-size: 14px !important;
      font-weight: bold;
    }
    .name{
      font-weight: bolder;
      font-size: 12px !important;

[Clemalex]

@Galadan

Reste a optimiser avec un template si je comprends bien.

Non car tu est parti sur l’utilisation de la carte button et non la carte personnelles (custom-card) button-card…

[CARTE] Button-Card

Bonjour, Lorsque je cherchais des informations sur la carte custom button-card. J’ai trouvé ces vidéos, elles sont en anglais mais particulièrement pédagogiques sur les possibilités de cette card. Il y a trois vidéos qui traitent de cette card. Voila le lien : [Animate Icons with Home Assistant: Spin, Flash, & Rotate. Custom Button Card - Tutorial #1] [Custom Button Card 2: Home Assistant Icons: Fonts, Weights, Backgrounds and Glows] [Custom Button Card 3: H…

Avec le thème minimalist, autant partir sur button-card, qui est bien plus permissive et personnalisable simplement (beaucoup moins de recours à card-mod)

[Galadan]

Ah oui d’accord, du coup avec la custom ça donne cela:

Et je n’arrive pas a afficher le state…

Edit:
J’ai bidouillé ça:

    sensor_date:
    tap_action:
      action: more-info
    label: |
      [[[return entity.state + " " + entity.attributes.unit_of_measurement]]]

Par contre je ne sais pas comment passer l’icone a rouge si il passe a 0 jours ou moins.

[Clemalex]

@Galadan

Par contre je ne sais pas comment passer l’icone a rouge si il passe a 0 jours ou moins.

C’est dans la documentation

[BarTouZ]

@Galadan

  chauffe_eau:
    icon: mdi:waves
    label: |
      [[[ 
          var etat = "Inactif";
          var consommation = states[variables.kwh].state + " " + states[variables.kwh].attributes.unit_of_measurement + " - " + states[variables.volt].state + " " + states[variables.volt].attributes.unit_of_measurement + " - " + states[variables.watt].state + " " + states[variables.watt].attributes.unit_of_measurement;

          if (entity.state == 'off') 
            etat = 'Arrêt forcé';
          else if (states[variables.watt].state > 0) 
            etat = "Chauffe";
          
          return etat + " - " + consommation;
      ]]]
    styles:
      icon:
        - color: |
            [[[
               if (states[variables.watt].state > 0)
                 return 'rgba(var(--couleur-rouge),1)'
               else
                 return 'rgba(var(--couleur-theme),0.2)'
            ]]]
      img_cell:
        - background-color: |
            [[[
               if (states[variables.watt].state > 0)
                 return 'rgba(var(--couleur-rouge),0.2)'
               else
                 return 'rgba(var(--couleur-theme),0.05)'
            ]]]

Tu peux t’inspirer de mon templatE… Dans mon cas, je détecte si mes Watt sont > 0 ou non, et en fonctionne je mets l’icone en rouge ou non…

[Galadan]

yes en regardant la doc, j’ai compris comment faire, en effet cela ressemble a ton Template ^^
c’est ok a ce niveau maintenant je veux modifier le template des cover pour ajouter un bouton, jy arrive mais c’est dégeu ^^, je cherche encore comment rendre cela comme sur l’initial.
Merci @BarTouZ et @Clemalex

[Clemalex]

@Galadan

le template des cover pour ajouter un bouton

il n’y en a pas assez là ?

Dashboard - Minimalist

Toujours en partant de l’existant, voici pour mes volets somfy : [image] #templates button_card_templates: cover_somfy: tap_action: action: more-info icon: | [[[ var icon = 'mdi:window-shutter'; if (entity.attributes.current_position == 0){ var icon = 'mdi:window-shutter'; } else var icon = 'mdi:window-shutter-open'; return icon ; ]]] label: |- [[[ if (entity.state == 'opening')…

[Galadan]

Oui j’ai vu ce post, je voudrais l’ajouter sur la ligne du bas.
je l’ai ajouté mais, il en maque un du coup ^^

ça doit-être par la non?

      grid:
        - grid-template-areas: '"item1" "item2"'
        - grid-template-columns: 1fr
        - grid-template-rows: min-content  min-content
        - row-gap: 12px

[Clemalex]

@Galadan

'"item1" "item2"'

Par là…

---