Dashboard - 🌻 Minimalist

Alors voici le code de cette view:

cards:
  - cards:
      - template: return_button
        type: custom:button-card
      - template: pilule_temperature
        type: custom:button-card
      - template: pilule_consommation_prix
        type: custom:button-card
    type: horizontal-stack
  - type: custom:button-card
    name: Températures
    template: titre
  - cards:
      - type: weather-forecast
        style: |
          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;
            filter: opacity(40%);
            color: #333333 !important;
          }
          .temp{
            font-size: 14px !important;
            font-weight: bold;
            margin-right: 14px !important;
          }
          .attribute{
            font-size: 12px !important;
            font-weight: bolder;
            filter: opacity(40%);
            color: #333333 !important;
          }
          span{
            font-size: 14px !important;
            font-weight: bold;
          }
        entity: weather.nersac
        show_forecast: false
        name: Nersac
    type: horizontal-stack
  - type: custom:button-card
    label: Intérieur
    template: titre
  - type: grid
    columns: 2
    square: false
    cards:
      - type: custom:button-card
        template: graph_with_card
        variables:
          entity_carte_gauche: sensor.netatmo_galahome_galastation_temperature
          entity_carte_droite: sensor.netatmo_galahome_galastation_humidity
          entity_graph: sensor.netatmo_galahome_galastation_temperature
          name_carte_gauche: Température
          name_carte_droite: Humidité
          color: var(--google-blue-500)
          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: 💧
          show_label_up: true
          label: Salon
          show_label_down: false
        custom_fields:
          item2:
            card:
              hours_to_show: 24
              hour24: true
              show:
                extrema: true
      - type: custom:button-card
        template: graph_with_card
        variables:
          entity_carte_gauche: sensor.sensor_suitep_temperature
          entity_carte_droite: sensor.sensor_suitep_humidity
          entity_graph: sensor.sensor_suitep_temperature
          name_carte_gauche: Température
          name_carte_droite: Humidité
          color: var(--google-blue-500)
          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: 💧
          show_label_up: true
          label: Suite Parentale
          show_label_down: false
        custom_fields:
          item2:
            card:
              hours_to_show: 24
              hour24: true
              show:
                extrema: true
      - type: custom:button-card
        template: graph_with_card
        variables:
          entity_carte_gauche: sensor.sensor_chbjardin_temperature
          entity_carte_droite: sensor.sensor_chbjardin_humidity
          entity_graph: sensor.sensor_chbjardin_temperature
          name_carte_gauche: Température
          name_carte_droite: Humidité
          color: var(--google-blue-500)
          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: 💧
          show_label_up: true
          label: Chambre Jardin
          show_label_down: false
        custom_fields:
          item2:
            card:
              hours_to_show: 24
              hour24: true
              show:
                extrema: true
      - type: custom:button-card
        template: graph_with_card
        variables:
          entity_carte_gauche: sensor.sensor_chbterrasse_temperature
          entity_carte_droite: sensor.sensor_chbterrasse_humidity
          entity_graph: sensor.sensor_chbterrasse_temperature
          name_carte_gauche: Température
          name_carte_droite: Humidité
          color: var(--google-blue-500)
          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: 💧
          show_label_up: true
          label: Chambre Terrasse
          show_label_down: false
        custom_fields:
          item2:
            card:
              hours_to_show: 24
              hour24: true
              show:
                extrema: true
      - type: custom:button-card
        template: graph_with_card
        variables:
          entity_carte_gauche: sensor.sensor_cellier_temperature
          entity_carte_droite: sensor.sensor_cellier_humidity
          entity_graph: sensor.sensor_cellier_temperature
          name_carte_gauche: Température
          name_carte_droite: Humidité
          color: var(--google-blue-500)
          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: 💧
          show_label_up: true
          label: Cellier
          show_label_down: false
        custom_fields:
          item2:
            card:
              hours_to_show: 24
              hour24: true
              show:
                extrema: true
      - type: custom:button-card
        template: graph_with_card
        variables:
          entity_carte_gauche: sensor.sensor_garage_temperature
          entity_carte_droite: sensor.sensor_garage_humidity
          entity_graph: sensor.sensor_garage_temperature
          name_carte_gauche: Température
          name_carte_droite: Humidité
          color: var(--google-blue-500)
          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: 💧
          show_label_up: true
          label: Garage
          show_label_down: false
        custom_fields:
          item2:
            card:
              hours_to_show: 24
              hour24: true
              show:
                extrema: true
  - type: custom:button-card
    label: Extérieur
    template: titre
  - type: grid
    columns: 2
    square: false
    cards:
      - type: custom:button-card
        template: graph_with_card
        variables:
          entity_carte_gauche: sensor.netatmo_galahome_galastation_galamodule_temperature
          entity_carte_droite: sensor.netatmo_galahome_galastation_galamodule_humidity
          entity_graph: sensor.netatmo_galahome_galastation_galamodule_temperature
          name_carte_gauche: Température
          name_carte_droite: Humidité
          color: var(--google-green-500)
          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: 💧
          show_label_up: true
          label: Jardin
          show_label_down: false
        custom_fields:
          item2:
            card:
              hours_to_show: 48
              hour24: true
              show:
                extrema: true
      - type: custom:button-card
        template: graph_with_card_one_item
        variables:
          entity_carte_gauche: sensor.sonde_piscine
          entity_graph: sensor.sonde_piscine
          name_carte_gauche: Température
          color: var(--google-green-500)
          show_icon_carte_gauche: false
          show_name_carte_gauche: false
          icon_carte_gauche: 🌡️
          show_label_up: true
          label: Piscine
          show_label_down: false
        custom_fields:
          item2:
            card:
              hours_to_show: 48
              hour24: true
              show:
                extrema: true
type: vertical-stack

Pour comparer voici une autre vue:


et son code:

cards:
  - cards:
      - template: bordures
        type: custom:button-card
      - template: return_button
        type: custom:button-card
      - template: pilule_temperature
        type: custom:button-card
      - template: pilule_consommation_prix
        type: custom:button-card
      - card:
          entity: input_boolean.mode_vacances
          template: pilule
          tap_action:
            action: navigate
            navigation_path: /lovelace/localisation
          label: ⛱️
          type: custom:button-card
        conditions:
          - entity: input_boolean.mode_vacances
            state_not: 'off'
        type: conditional
      - card:
          entity: input_boolean.invite_present
          template: pilule
          tap_action:
            action: navigate
            navigation_path: /lovelace/localisation
          label: 😃
          type: custom:button-card
        conditions:
          - entity: input_boolean.invite_present
            state_not: 'off'
        type: conditional
      - template: bordures
        type: custom:button-card
    type: horizontal-stack
  - type: grid
    cards:
      - type: custom:button-card
        name: Piscine
        template: titre
      - type: grid
        cards:
          - type: custom:button-card
            template: graph_with_card_one_item
            variables:
              entity_carte_gauche: sensor.sonde_piscine
              entity_graph: sensor.sonde_piscine
              name_carte_gauche: Température
              color: var(--google-green-500)
              show_icon_carte_gauche: false
              show_name_carte_gauche: false
              icon_carte_gauche: 🌡️
              show_label_up: true
              label: Piscine
              show_label_down: false
            custom_fields:
              item2:
                card:
                  hours_to_show: 48
                  hour24: true
                  show:
                    extrema: true
        columns: 1
        square: false
      - type: grid
        cards: []
        columns: 2
        square: false
      - type: grid
        cards:
          - entity: input_boolean.light_pool
            name: Lumière
            template:
              - icon_info_bg
              - light
            type: custom:button-card
            variables:
              image: /local/images/backgrounds/lamp_v2.jpg
            styles:
              card:
                - padding-top: 10px
                - padding-bottom: 10px
                - background-blend-mode: multiply
                - background: |
                    [[[
                        if (variables.image != null) {
                          return 'center / cover url(' + variables.image + ') rgba(0, 0, 0, 0.3)';
                        }
                        return '';
                    ]]]
          - entity: input_boolean.winter_pool
            name: Hivernage
            template:
              - icon_info_bg
              - bleu
            type: custom:button-card
            label: |-
              [[[ 
                  var etat = '';
                  if (entity.state == 'on')
                    etat = "On ";
                  else
                    etat = "Off";
                  return etat; 
              ]]]
            variables:
              image: /local/images/backgrounds/snow.jpg
            styles:
              card:
                - background-blend-mode: multiply
                - background: |
                    [[[
                        if (variables.image != null) {
                          return 'center / cover url(' + variables.image + ') rgba(0, 0, 0, 0.3)';
                        }
                        return '';
                    ]]]
          - entity: input_select.pool_pump
            name: Mode filtration
            variables:
              cycle: sensor.cycle_filtration
              image: /local/images/backgrounds/clean.jpg
            template:
              - icon_info_bg
              - sensor_piscine
            type: custom:button-card
            styles:
              card:
                - padding-top: 10px
                - padding-bottom: 10px
                - background-blend-mode: multiply
                - background: |
                    [[[
                        if (variables.image != null) {
                          return 'center / cover url(' + variables.image + ') rgba(0, 0, 0, 0.3)';
                        }
                        return '';
                    ]]]
          - entity: input_datetime.pool_filter_date
            name: Clean filtration dans
            template:
              - icon_info_bg
              - sensor_date
            variables:
              nbJours: 15
              image: /local/images/backgrounds/calendar.jpg
            type: custom:button-card
            styles:
              card:
                - padding-top: 10px
                - padding-bottom: 10px
                - background-blend-mode: multiply
                - background: |
                    [[[
                        if (variables.image != null) {
                          return 'center / cover url(' + variables.image + ') rgba(0, 0, 0, 0.7)';
                        }
                        return '';
                    ]]]
        columns: 2
        square: false
    columns: 1
    square: false
type: vertical-stack

Re,

Merci pour ton aide. Voici les codes :

Pour les cameras :

      - type: 'custom:button-card'
        name: SURVEILLANCE
        template: titre
      - cards:
          - template: bordures
            type: 'custom:button-card'
          - type: grid
            columns: 2
            square: false
            cards:
              - entity: camera.cam_garage
                template: 
                  - tuile_neutre
                type: custom:button-card
                camera_image: camera.cam_garage
                show_name: false
                show_live_stream: true
                camera_view: live
                tap_action:
                  action: toggle
                hold_action:
                  action: more-info
                name: Le garage
                
              - entity: camera.camera_buanderie
                template: 
                  - tuile_neutre
                type: custom:button-card
                camera_image: camera.camera_buanderie
                show_name: false
                show_live_stream: true
                camera_view: live
                tap_action:
                  action: toggle
                name: L'extérieur
              - template: bordures
                type: 'custom:button-card'
          - template: bordures
            type: 'custom:button-card'
        type: horizontal-stack

Le template:

tuile_neutre:
    tap_action: 
      action: more-info
    show-name: false
    styles:
      card:
        - border-radius: 20px
        - box-shadow: var(--box-shadow)
        - padding: 12px

Maintenant pour le chips :

Les templates

pilule_localisation:
    template: pilule
    show_icon: true
    label: |
      [[[
        var personnes_presentes = states['sensor.people_count_present'].state;
        return '🏠' +  personnes_presentes;
      ]]]
    styles:
      grid:
        - grid-template-areas: '"i"'
    tap_action:
      action: navigate
      navigation_path: /lovelace/localisation


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

Je sais pas si c’est bien lisible, dis moi si tu as besoin d’un truc plus clair :slight_smile:

Il manque le code de la carte.
Je soupçonne l’ordonnancement des templates…

Dans le code de la carte je pense que tu dois avoir mis :

template:
  - pillule
  - pillule_localisation

Si tel est le cas, essaie dans l’ordre inverse :

template:
  - pillule_localisation
  - pillule

Et de toute façon, je pense que dans le code de pillule_localisation, la définition des zones de la grille n’est pas correcte. Elle affiche seulement l’icone ('"i"') au lieu du label ('"l"').

Il faudrait enlever la définition de la grille dans le modèle pillule_localisation ce qui donnerais :

pilule_localisation:
    template: pilule
    show_icon: true
    label: |
      [[[
        var personnes_presentes = states['sensor.people_count_present'].state;
        return '🏠' +  personnes_presentes;
      ]]]
    styles:
      grid:
        - grid-template-areas: '"l"'   #<-- l en lieu et place de i
    tap_action:
      action: navigate
      navigation_path: /lovelace/localisation


:expressionless: :expressionless:
:grin:

En te donnant la correction du modele pilule_localisation, je viens de m’apercevoir qu’il utilisait le modèle pillule

Du coup, tu as donc dans ta carte :

template:
  - pilule_localisation

Ce qui revient à ce que j’ai soupçonné plus haut.
Du coup, il faut juste corriger le modèle comme décrit juste au dessus.

PS: j’ai laissé volontairement tout l’angle de réflexion pour aider à la compréhension de l’utilisation des modèles :wink:

Que veut dire :

Dans un autre lovelace

?
Dans un autre tableau de bord ? Dans une autre vue du même tableau de bord ? Dans une autre carte dans la vue du tableau de bord ? :wink:

Je viens de tester de mettre ce code sur mon instance de test dédiée HACF et cela fonctionne :

type: iframe
url: >-
  https://maps.google.com/maps?q=48.858370,2.294481&t=&z=17&ie=UTF8&iwloc=&output=embed
aspect_ratio: 50%

En ajoutant cette carte dans un tableau de bord, est que la carte google map s’affiche avec comme position la Tour Eiffel ?

La seule différence notable c’est :

Après, il faut y aller par dichotomie afin de savoir qu’elle carte est responsable.

A votre service :wink:

animate

Le code de la carte :

type: custom:button-card
entity: camera.demo_camera #entity_id de la caméra à afficher
template:
  - camera_live
  - tuile_neutre

les modèles :

button_card_templates:
  camera_live:  #Affiche la camera dans une picture-entity
    show_label: false
    show_icon: false
    show_name: false
    styles:
      grid:
        - grid-template-areas: '"item1"'
    custom_fields:
      item1:
        card:
          camera_image: '[[[ return entity.entity_id ]]]'
          camera_view: live
          entity: '[[[ return entity.entity_id ]]]'
          show_name: false
          show_state: false
          type: picture-entity
  tuile_neutre:
    tap_action:
      action: more-info
    show-name: false
    styles:
      card:
        - border-radius: 20px
        - box-shadow: var(--box-shadow)
        - padding: 12px

Je le présente au passage car je ne l’ai pas encore rencontré :

Le modèle a ajouter lors de l’utilisation du modèle titre (ou title) quand on veut simplement le label et non le nom…

:expressionless:

En image c’est plus parlant :grin:

De base, ca donnerai ça :

Oh le vilain décalage !

Du coup en ajoutant un petit modèle, on arrive à ça :

Mieux non ?!

Donc voici le code de la carte utilisant le titre sans le nom :

type: custom:button-card
name: lorem #requis !!! Un seul caractère suffit. NE DOIS PAS ETRE VIDE ""
label: Caméra Jardin
template:
  - titre
  - titre_no_name  #le modele supplémentaire en question

Le modèle :

button_card_templates:
  titre_no_name:
    styles:
      name:
        - visibility: hidden

Fais nous un retour en image :+1:

1 « J'aime »

Même pas besoin de demander c’est génial ^^
Moi j’ai mes cameras sur mon Syno, je passe donc par l’entité créé par l’intégration Syno.
Je n’ai pas d’affichage, c’est noir. J’ai rechargé l’intégration mais rien non plus.

image

Pour mon soucis de décalage, je ne vois pas de « trou » dans le code de mon lovelace…

Salut @Clemalex,

En fait, si je n’ajoute pas une carte iframe dans un autre tableau de bord lovelace, cela ne s’affiche pas.
On dirait que HA active l’iframe que si une carte est créée, bizarre non ?

J’ai du mal a comprendre/cerner le comportement que tu rencontres…

Tu peux la refaire entièrement ? :face_with_monocle:

Un grand merci Clemalex pour le partage.
J’essaie de mettre en place certaines choses mais malgré la copie du thème et la lecture de tout l’historique du post je ne vois pas le template - rouge_on et - vert_off
Est-ce que tu pourrais nous partager ces templates aussi stp ?

Niiiickel :slight_smile:

  • Pour la pilule c’était bien le grid-template-areas qui devait passer en L
  • Pour les cam j’ai utilisé ton modèle et c’est parfait aussi

voici le rendu en image :

Encore un grand merci pour ton aide et ta manière d’expliquer les choses afin de comprendre la syntaxe.

Peace.

1 « J'aime »

bonjour,
j’ai un petit soucis, il me manque le template icon_info_temperature, pouvez-vous le partager @BarTouZ ?

Sans titre

On finalise avec @barto_95 et on partage une carte :

animate

Mais quel super bon boulot, bravo a vous…et merci pour tout vos partages. superbe equipe. :+1: :+1: :+1:

Je refais ma carte alarme pour rester dans le thème, mais après avoir copier ton code, j’ai un petit soucis:
il ne m’affiche pas de message désactiver ou activé a coté de l’icône en vert ou rouge:

Capture d’écran 2021-08-28 à 11.32.30

Tu ne vois pas ou je fais une erreur ? je sèche.

Ce sont les anciennes couleurs (en francais), cela doit provenir de ça, il ne trouve pas la couleur dans le theme car maintenant elles sont en anglais.

pourtant c’est noter en anglais non:

ha-card > ha-label-badge{
            --alarm-state-color: var(--google-green-500) !important;
ha-card > h1::before{
             content: "Désactivée";
             color: var(--google-green-500);
             position: absolute;
             font-variant: small-caps;

regarde ton theme, mais il me semble que les -500 ont disparu

voila mon theme:

#main interface colors
primary-color: ‹ #89B3F8 ›
google-red : ‹ #F18B82 ›
google-green : ‹ #80C994 ›
google-yellow : ‹ #FCD663 ›
google-blue : ‹ #89B3F8 ›
google-violet : ‹ #BB86FC ›
google-grey: ‹ #BBBBBB ›
color-red: 241, 139, 130
color-green: 128, 201, 148
color-yellow: 252, 214, 99
color-blue : 137, 179, 248
color-theme : 221,221,221
color-purple : 102, 31, 255
color-grey : 187, 187, 187
color-pink : 233, 30, 99

je dois y mettre juste --google-green ?

Oui c’est ça