Dashboard - 🌻 Minimalist

Galadan · Août 17, 2021, 7:23

Hello,

J’était pas loin de la vérité alors
J’ai fais une petite modif de mon coté:

Ajout icone interieure et temp de la piscine.

Clemalex · Août 17, 2021, 7:40

Je savais bien que quelqu’un l’avais déjà adapté !

Je ne retrouvais pas ton post

Je ne travaille pas bien passé minuit…

@barto_95 c’est @Galadan qui avait commencé à l’adapter ! Oui c’est trop tard ! Mais je savais que je l’avais lu quelque part

barto_95 · Août 17, 2021, 7:50

Pas de problème @Clemalex

@Galadan tu a ton code d’adaptation ou ?

Galadan · Août 17, 2021, 7:54

Pas de souci ^^

@barto_95 , le voici:

  pilule_temperature:
    variables:
      weather: weather.ville
      outside: sensor.ext
      inside: sensor.int
      pool: sensor.piscine
    template: pilule
    tap_action:
      action: navigate
      navigation_path: /lovelace/temperature
    label: |
      [[[
        var inter = Math.round(states[variables.inside].state* 10) / 10;
        var exter = Math.round(states[variables.outside].state* 10) / 10;
        var pool = Math.round(states[variables.pool].state* 10) / 10;
        if (states[variables.weather].state == 'clear-night'){
          var icon = '🌙';
        } else if(states[variables.weather].state == 'rainy'){
          var icon = '🌧️';
        } else if(states[variables.weather].state == 'snowy'){
          var icon = '🌨️️';
        } else if(states[variables.weather].state == 'snowy-rainy'){
          var icon = '🌨️️';
        } else if(states[variables.weather].state == 'windy'){
          var icon = '💨';
        } else if(states[variables.weather].state == 'windy-variant'){
          var icon = '💨';
        } else if(states[variables.weather].state == 'fog'){
          var icon = '🌫️';
        } else if(states[variables.weather].state == 'cloudy'){
          var icon = '☁️';
        } else if(states[variables.weather].state == 'partlycloudy'){
          var icon = '⛅️';
        } else if(states[variables.weather].state == 'hail'){
          var icon = '🌨️️';
        } else if(states[variables.weather].state == 'lightning'){
          var icon = '🌩️';
        } else if(states[variables.weather].state == 'lightning-rainy'){
          var icon = '⛈️';
        } else if(states[variables.weather].state == 'pouring'){
          var icon = '🌨️️';
        } else if(states[variables.weather].state == 'snowy-rainy'){
          var icon = '🌨️️';
        } else if(states[variables.weather].state == 'sunny'){
          var icon = '☀️';
        } else {
          var icon = '❓️';
        }
        return icon + ' ' + exter + '° / 🏠 ' +  inter + '° / 🌊 ' +  pool + '°' ;
      ]]]

Galadan · Août 17, 2021, 9:01

@Clemalex , je n’arrive pas a faire un truc, je voudrais ajouter une seconde entity sur le template graph, j’ai créé un autre template en suivant le premier, ce qui donne ça:

  graph2:
    variables:
      entity: sensor.xiaomi_multisensor_salon_humidite
      entity2: sensor.cost
      color: var(--google-blue-500)
      name: Default name
      name2: name sensor.cost
    styles:
      card:
        - border-radius: 20px
        - box-shadow: var(--box-shadow)
        - padding: 0px
      grid:
        - grid-template-areas: '"item1 item2 item3"'
        - grid-template-columns: 1fr 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:
          entity: '[[[ return variables.entity2 ]]]'
          name: '[[[ return variables.name2 ]]]'
          template:
            - icon_info
            - generique
          styles:
            card:
              - padding: 12px
          type: custom:button-card
      item3:
        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);
            }

Mais du coup, graphiquement ça donne ça:

J’aimerai en haut, une entity a gauche et l’autre a droite et le graph dans la partie de dessous.

Clemalex · Août 17, 2021, 9:38

Regarde par là : GitHub - custom-cards/button-card: ❇️ Lovelace button-card for home assistant

Si tu mets :

- grid-template-areas: '"item1 item2" "item3"'

Ca donne quoi ?

Clemalex · Août 17, 2021, 9:43

Faudra revoir ça je pense aussi

Galadan · Août 17, 2021, 9:44

J’avais essayé un truc du genre:

Clemalex · Août 17, 2021, 9:45

Lis le tutoriel indiqué ici :

https://forum.hacf.fr/t/dashboard-minimalist/5507/16?u=clemalex

Je repasse ce soir…

Clemalex · Août 17, 2021, 10:05

Voir pour styliser seulement item3 avec :

grid-column: 1 / 3;

Peut être…

J’ai pas encore eu le temps de jouer avec…

KKox · Août 17, 2021, 11:12

Merci pour le code ça fonctionne nickel !

Galadan · Août 17, 2021, 3:30

Avec l’aide de @BarTouZ , j’ai procédé autrement, j’ai joué avec la card « grid »:

M_nu62880 · Août 17, 2021, 5:49

Bonjour à tous,
@galadan pourrais tu partager ta carte ? merci

Clemalex · Août 17, 2021, 6:55

Tu devrais au moins englober le tout dans une stack-in-card, tu verras, ça feras au plus une vrai carte…(que tu peux ensuite remettre dans une grille… )

Clemalex · Août 17, 2021, 11:32

Pour l’instant, j’ai pas eu trop de le temps de m’amuser avec mais voici où j’en suis :

Sur PC :

Sur Mobile:

Il reste des fioritures à corriger.

Je suis vraiment pas fan du rendu sur téléphone ou pc (sauf le bleu ou le rouge peut être).

Je poserais le modèle (template) dans la semaine…

Ps: les graph jaune (ou orange ?) sont les graphes de base.

Galadan · Août 18, 2021, 6:49

Celle en rouge ou en violet était mon idée de base.
cela fait chargé avec les deux icones.

Drealine · Août 18, 2021, 8:45

Hello.

La personne en charge du repo a fait des modifications dans les ressources des cartes en passant les mots en Anglais. Il faut donc faire la modification à la mano pour les configurations de chaque vue.

Clemalex · Août 18, 2021, 10:07

Oui et des cartes ont été ajoutées et des variables renommées. Ainsi qu’un thème dark

ce sujet ne se veut pas exhaustif. Pensez à aller voir le github

Clemalex · Août 18, 2021, 11:36

J’en suis là, et j’arrête…

Je postes le code ce soir

Edit:

Le modèle :
Il est pas super propre car j’ai fais pas mal de tests mais je laisse pour montrer (un peu) les possibilités de codage…

button_card_templates:
  graph_with_card:
    variables:
      entity_carte_gauche: sensor.default
      entity_carte_droite: sensor.default
      entity_graph: sensor.default
      color: var(--info-color)
      name_carte_gauche: Default name
      name_carte_droite: Default name
      show_icon_carte_gauche: 'false'
      show_icon_carte_droite: 'false'
      show_name_carte_gauche: 'false'
      show_name_carte_droite: 'false'
      icon_carte_gauche: null
      icon_carte_droite: null
    styles:
      card:
        - border-radius: var(--border-radius)
        - 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:
        item2:
          - padding-top: >
              [[[ if (!variables.show_name_carte_gauche &&
              !variables.show_name_carte_droite) return '13px';]]]
    custom_fields:
      item1:
        card:
          type: custom:button-card
          entity: '[[[ return variables.entity_carte_gauche ]]]'
          name: '[[[ return variables.name_carte_gauche ]]]'
          template:
            - icon_info
            - generique
          show_icon: '[[[ return variables.show_icon_carte_gauche ]]]'
          show_name: '[[[ return variables.show_name_carte_gauche ]]]'
          label: |
            [[[
              if (variables.icon_carte_gauche ) return (variables.icon_carte_gauche + " " + states[variables.entity_carte_gauche].state+ " " + states[variables.entity_carte_gauche].attributes.unit_of_measurement);
              return states[variables.entity_carte_gauche].state + " " + states[variables.entity_carte_gauche].attributes.unit_of_measurement;
            ]]]
          styles:
            card:
              - '--padding-mobile': >
                  [[[ if (!variables.show_icon_carte_gauche &&
                  !variables.show_icon_carte_droite) return '5px 5px 14px 0px';
                  if (variables.show_icon_carte_gauche &&
                  variables.show_icon_carte_droite) return '3px 0 0px 10px';
                  return '10px 0 9px 10px'; ]]]
              - '--padding-computer': >
                  [[[ if (!variables.show_icon_carte_gauche &&

                  !variables.show_icon_carte_droite) return '23px 0 12px 0';
                  return '12px'; ]]]
              - padding: var(--padding-computer)
            grid:
              - grid-template-areas: '"i l item1_item1" "i n item1_item1"'
              - grid-template-columns: >
                  [[[ if (!variables.show_icon_carte_gauche &&

                  !variables.show_icon_carte_droite) return 'auto'; return
                  'min-content auto'; ]]]
          extra_styles: |
            #label {
              white-space: nowrap;
            }
            /* telephone */
            @media screen and (max-width: 800px) {
              #label {
                white-space: pre-line;
              }
              #card {
                padding: var(--padding-mobile) !important;
              }
            }
          custom_fields:
            item1_item1:
              card:
                entity: '[[[ return variables.entity_carte_droite ]]]'
                name: '[[[ return variables.name_carte_droite ]]]'
                template:
                  - icon_info
                  - generique
                label: |
                  [[[
                    if (variables.icon_carte_droite ) return (variables.icon_carte_droite + " " + states[variables.entity_carte_droite].state) + " " + states[variables.entity_carte_droite].attributes.unit_of_measurement;
                    return states[variables.entity_carte_droite].state + " " + states[variables.entity_carte_droite].attributes.unit_of_measurement;
                  ]]]
                show_icon: '[[[ return variables.show_icon_carte_droite ]]]'
                show_name: '[[[ return variables.show_name_carte_droite ]]]'
                extra_styles: |
                  #label {
                    white-space: nowrap;
                  }
                  /* telephone */
                  @media screen and (max-width: 800px) {
                    #label {
                      white-space: pre-line;
                    }
                  }
                type: custom:button-card
      item2:
        card:
          type: custom:mini-graph-card
          entities:
            - entity: '[[[ return variables.entity_graph ]]]'
          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);
            }

#carte grise
type: custom:button-card
template: graph_with_card
variables:
  entity_carte_gauche: sensor.temperature_enfant1
  entity_carte_droite: sensor.humidity
  entity_graph: sensor.temperature_salon
  name_carte_gauche: Enfant 1
  name_carte_droite: Enfant 2
  color: gray
  show_icon_carte_droite: false
  show_icon_carte_gauche: false
  show_name_carte_droite: false
  show_name_carte_gauche: false
  icon_carte_gauche: 🌡️
  icon_carte_droite: 💧

#carte rouge
type: custom:button-card
template: graph_with_card
variables:
  entity_carte_gauche: sensor.temperature_enfant1
  entity_carte_droite: sensor.humidity
  entity_graph: sensor.temperature_salon
  name_carte_gauche: Enfant 1
  name_carte_droite: Enfant 2
  color: red
  show_icon_carte_droite: false
  show_icon_carte_gauche: false
  show_name_carte_droite: false
  show_name_carte_gauche: false

#carte jaune
type: custom:button-card
template: graph_with_card
variables:
  entity_carte_gauche: sensor.temperature_enfant1
  entity_carte_droite: sensor.humidity
  entity_graph: sensor.temperature_salon
  name_carte_gauche: Température
  name_carte_droite: Humidité
  color: gold
  show_icon_carte_droite: false
  show_icon_carte_gauche: false
  show_name_carte_droite: true
  show_name_carte_gauche: true

Galadan · Août 19, 2021, 7:31

Hello, merci @Clemalex , c’est top!!

C’est quoi cette partie:

                extra_styles: |
                  #label {
                    white-space: nowrap;
                  }
                  /* telephone */
                  @media screen and (max-width: 800px) {
                    #label {
                      white-space: pre-line;
                    }
                  }

?