Tableaux de bords mal dockés

Entraide Home Assistant
,
1

Bonjour,

Voici mon problème : j’ai une installation de panneaux photovoltaïque sur une maison triphasé.
Je tente de faire un tableau de bord avec mes consommations instantanées :
3 blocs : Conso net / Conso / Production avec à chaque fois le total et les 3 valeurs sur chaque phase.

3 cas :

  1. j’ai ajouté 3 blocs : ça marche bien mais c’est brouillon, trop de gauge et c’est pas lisible, j’ai donc souhaité mettre un fond de couleur sur chaque bloc Conso Net / Conso / Production avec card_mod: / style: mais ça ne prend pas.
  2. J’ai tout édité et fait à la main mais là, les éléments ne prennent pas toute la largeur, il sont les uns sous les autres : voir code yaml.
Code 
views:
  - title: Home
    cards:
      - type: custom:mod-card
        square: false
        card_mod:
          style: |
            ha-card {
              border-top: 2px outset #F0F0FF;
              border-left: 2px outset #F0F0F0;
              border-bottom: 2px inset #F0F0FF;
              border-right: 2px inset #F0F0FF;
              background-color: rgba(60,80,250,0.05);
            }
        card:
          title: Consommation Net
          type: grid
          square: false
          columns: 2
          card_mod:
            style: |
              card-header {
                color: red !important;
                background-color: rgba(60,80,250,0.05);
              }
          cards:
            - type: gauge
              name: Total
              entity: sensor.envoy_122308022894_current_net_power_consumption
              card_mod:
                style: |
                  ha-card {
                    background-color: rgba(60,255,250,0.1);
                  }
              max: 4000
              needle: true
              segments:
                - from: -5000
                  color: '#EB16FF'
                - from: 0
                  color: '#47FF4D'
                - from: 1000
                  color: '#EEFF32'
                - from: 2000
                  color: '#FFA426'
                - from: 3000
                  color: '#FF0037'
              min: -1000
            - type: vertical-stack
              cards:
                - type: gauge
                  name: Phase 1
                  entity: sensor.envoy_122308022894_current_net_power_consumption_l1
                  card_mod:
                    style: |
                      ha-card {
                        background-color: rgba(60,255,250,0.1);
                      }
                  max: 3000
                  needle: true
                  segments:
                    - from: -5000
                      color: '#EB16FF'
                    - from: 0
                      color: '#47FF4D'
                    - from: 500
                      color: '#EEFF32'
                    - from: 1000
                      color: '#FFA426'
                    - from: 2000
                      color: '#FF0037'
                  min: -500
                - type: gauge
                  name: Phase 2
                  entity: sensor.envoy_122308022894_current_net_power_consumption_l2
                  card_mod:
                    style: |
                      ha-card {
                        background-color: rgba(60,255,250,0.1);
                      }
                  max: 3000
                  needle: true
                  segments:
                    - from: -5000
                      color: '#EB16FF'
                    - from: 0
                      color: '#47FF4D'
                    - from: 500
                      color: '#EEFF32'
                    - from: 1000
                      color: '#FFA426'
                    - from: 2000
                      color: '#FF0037'
                  min: -500
                - type: gauge
                  name: Phase 3
                  entity: sensor.envoy_122308022894_current_net_power_consumption_l3
                  card_mod:
                    style: |
                      ha-card {
                        background-color: rgba(60,255,250,0.1);
                      }
                  max: 3000
                  needle: true
                  segments:
                    - from: -5000
                      color: '#EB16FF'
                    - from: 0
                      color: '#47FF4D'
                    - from: 500
                      color: '#EEFF32'
                    - from: 1000
                      color: '#FFA426'
                    - from: 2000
                      color: '#FF0037'
                  min: -500
      - type: custom:mod-card
        square: false
        card_mod:
          style: |
            ha-card {
              border-top: 2px outset #F0F0FF;
              border-left: 2px outset #F0F0F0;
              border-bottom: 2px inset #F0F0FF;
              border-right: 2px inset #F0F0FF;
              background-color: rgba(60,80,25,0.05);
            }
            #card-header {
              color: red !important;
              background-color: rgba(60,80,25,0.05);
            }
        card:
          type: grid
          square: false
          columns: 2
          title: Consommation
          cards:
            - type: gauge
              name: Total
              entity: sensor.envoy_122308022894_current_power_consumption
              card_mod:
                style: |
                  ha-card {
                    background-color: rgba(60,255,250,0.1);
                  }
              min: 0
              max: 4000
              needle: true
              segments:
                - from: -5000
                  color: '#EB16FF'
                - from: 0
                  color: '#47FF4D'
                - from: 1000
                  color: '#EEFF32'
                - from: 2000
                  color: '#FFA426'
                - from: 3000
                  color: '#FF0037'
            - type: vertical-stack
              cards:
                - type: gauge
                  name: Phase 1
                  entity: sensor.envoy_122308022894_current_power_consumption_l1
                  card_mod:
                    style: |
                      ha-card {
                        background-color: rgba(60,255,250,0.1);
                      }
                  min: 0
                  max: 3000
                  needle: true
                  segments:
                    - from: -5000
                      color: '#EB16FF'
                    - from: 0
                      color: '#47FF4D'
                    - from: 500
                      color: '#EEFF32'
                    - from: 1000
                      color: '#FFA426'
                    - from: 2000
                      color: '#FF0037'
                - type: gauge
                  name: Phase 2
                  entity: sensor.envoy_122308022894_current_power_consumption_l2
                  card_mod:
                    style: |
                      ha-card {
                        background-color: rgba(60,255,250,0.1);
                      }
                  min: 0
                  max: 3000
                  needle: true
                  segments:
                    - from: -5000
                      color: '#EB16FF'
                    - from: 0
                      color: '#47FF4D'
                    - from: 500
                      color: '#EEFF32'
                    - from: 1000
                      color: '#FFA426'
                    - from: 2000
                      color: '#FF0037'
                - type: gauge
                  name: Phase 3
                  entity: sensor.envoy_122308022894_current_power_consumption_l3
                  card_mod:
                    style: |
                      ha-card {
                        background-color: rgba(60,255,250,0.1);
                      }
                  min: 0
                  max: 3000
                  needle: true
                  segments:
                    - from: -5000
                      color: '#EB16FF'
                    - from: 0
                      color: '#47FF4D'
                    - from: 500
                      color: '#EEFF32'
                    - from: 1000
                      color: '#FFA426'
                    - from: 2000
                      color: '#FF0037'
      - type: custom:mod-card
        square: false
        card_mod:
          style: |
            ha-card {
              border-top: 2px outset #F0F0FF;
              border-left: 2px outset #F0F0F0;
              border-bottom: 2px inset #F0F0FF;
              border-right: 2px inset #F0F0FF;
              background-color: rgba(60,255,2,0.05);
            }
        card:
          title: Production
          square: false
          type: grid
          columns: 2
          card_mod:
            style: |
              card-header {
                color: red !important;
                background-color: rgba(60,80,250,0.05);
              }
          cards:
            - type: gauge
              name: Total
              entity: sensor.envoy_122308022894_current_power_production
              card_mod:
                style: |
                  ha-card {
                    background-color: rgba(60,255,250,0.1);
                  }
              min: 0
              max: 3300
              needle: true
              segments:
                - from: 0
                  color: '#FF0037'
                - from: 300
                  color: '#FFA426'
                - from: 1100
                  color: '#EEFF32'
                - from: 2200
                  color: '#47FF4D'
            - type: vertical-stack
              cards:
                - type: gauge
                  name: Phase 1
                  entity: sensor.envoy_122308022894_current_power_production_l1
                  card_mod:
                    style: |
                      ha-card {
                        background-color: rgba(60,255,250,0.1);
                      }
                  min: 0
                  max: 1200
                  needle: true
                  segments:
                    - from: 0
                      color: '#FF0037'
                    - from: 100
                      color: '#FFA426'
                    - from: 400
                      color: '#EEFF32'
                    - from: 800
                      color: '#47FF4D'
                - type: gauge
                  name: Phase 2
                  entity: sensor.envoy_122308022894_current_power_production_l2
                  card_mod:
                    style: |
                      ha-card {
                        background-color: rgba(60,255,250,0.1);
                      }
                  min: 0
                  max: 1200
                  needle: true
                  segments:
                    - from: 0
                      color: '#FF0037'
                    - from: 100
                      color: '#FFA426'
                    - from: 400
                      color: '#EEFF32'
                    - from: 800
                      color: '#47FF4D'
                - type: gauge
                  name: Phase 3
                  entity: sensor.envoy_122308022894_current_power_production_l3
                  card_mod:
                    style: |
                      ha-card {
                        background-color: rgba(60,255,250,0.1);
                      }
                  min: 0
                  max: 900
                  needle: true
                  segments:
                    - from: 0
                      color: '#FF0037'
                    - from: 100
                      color: '#FFA426'
                    - from: 300
                      color: '#EEFF32'
                    - from: 600
                      color: '#47FF4D'
    badges: []
  1. J’ai fais avec un horizontal-stack mais là, les 3 blocs font ensemble la largeur d’un seul bloc précédent, donc c’est tout petit ! : voir code code yaml
Code 
views:
  - title: Home
    cards:
      - type: horizontal-stack
        cards:
          - type: custom:mod-card
            square: false
            card_mod:
              style: |
                ha-card {
                  border-top: 2px outset #F0F0FF;
                  border-left: 2px outset #F0F0F0;
                  border-bottom: 2px inset #F0F0FF;
                  border-right: 2px inset #F0F0FF;
                  background-color: rgba(60,80,250,0.05);
                }
            card:
              title: Consommation Net
              type: grid
              square: false
              columns: 2
              card_mod:
                style: |
                  card-header {
                    color: red !important;
                    background-color: rgba(60,80,250,0.05);
                  }
              cards:
                - type: gauge
                  name: Total
                  entity: sensor.envoy_122308022894_current_net_power_consumption
                  card_mod:
                    style: |
                      ha-card {
                        background-color: rgba(60,255,250,0.1);
                      }
                  max: 4000
                  needle: true
                  segments:
                    - from: -5000
                      color: '#EB16FF'
                    - from: 0
                      color: '#47FF4D'
                    - from: 1000
                      color: '#EEFF32'
                    - from: 2000
                      color: '#FFA426'
                    - from: 3000
                      color: '#FF0037'
                  min: -1000
                - type: vertical-stack
                  cards:
                    - type: gauge
                      name: Phase 1
                      entity: >-
                        sensor.envoy_122308022894_current_net_power_consumption_l1
                      card_mod:
                        style: |
                          ha-card {
                            background-color: rgba(60,255,250,0.1);
                          }
                      max: 3000
                      needle: true
                      segments:
                        - from: -5000
                          color: '#EB16FF'
                        - from: 0
                          color: '#47FF4D'
                        - from: 500
                          color: '#EEFF32'
                        - from: 1000
                          color: '#FFA426'
                        - from: 2000
                          color: '#FF0037'
                      min: -500
                    - type: gauge
                      name: Phase 2
                      entity: >-
                        sensor.envoy_122308022894_current_net_power_consumption_l2
                      card_mod:
                        style: |
                          ha-card {
                            background-color: rgba(60,255,250,0.1);
                          }
                      max: 3000
                      needle: true
                      segments:
                        - from: -5000
                          color: '#EB16FF'
                        - from: 0
                          color: '#47FF4D'
                        - from: 500
                          color: '#EEFF32'
                        - from: 1000
                          color: '#FFA426'
                        - from: 2000
                          color: '#FF0037'
                      min: -500
                    - type: gauge
                      name: Phase 3
                      entity: >-
                        sensor.envoy_122308022894_current_net_power_consumption_l3
                      card_mod:
                        style: |
                          ha-card {
                            background-color: rgba(60,255,250,0.1);
                          }
                      max: 3000
                      needle: true
                      segments:
                        - from: -5000
                          color: '#EB16FF'
                        - from: 0
                          color: '#47FF4D'
                        - from: 500
                          color: '#EEFF32'
                        - from: 1000
                          color: '#FFA426'
                        - from: 2000
                          color: '#FF0037'
                      min: -500
          - type: custom:mod-card
            square: false
            card_mod:
              style: |
                ha-card {
                  border-top: 2px outset #F0F0FF;
                  border-left: 2px outset #F0F0F0;
                  border-bottom: 2px inset #F0F0FF;
                  border-right: 2px inset #F0F0FF;
                  background-color: rgba(60,80,25,0.05);
                }
                #card-header {
                  color: red !important;
                  background-color: rgba(60,80,25,0.05);
                }
            card:
              type: grid
              square: false
              columns: 2
              title: Consommation
              cards:
                - type: gauge
                  name: Total
                  entity: sensor.envoy_122308022894_current_power_consumption
                  card_mod:
                    style: |
                      ha-card {
                        background-color: rgba(60,255,250,0.1);
                      }
                  min: 0
                  max: 4000
                  needle: true
                  segments:
                    - from: -5000
                      color: '#EB16FF'
                    - from: 0
                      color: '#47FF4D'
                    - from: 1000
                      color: '#EEFF32'
                    - from: 2000
                      color: '#FFA426'
                    - from: 3000
                      color: '#FF0037'
                - type: vertical-stack
                  cards:
                    - type: gauge
                      name: Phase 1
                      entity: sensor.envoy_122308022894_current_power_consumption_l1
                      card_mod:
                        style: |
                          ha-card {
                            background-color: rgba(60,255,250,0.1);
                          }
                      min: 0
                      max: 3000
                      needle: true
                      segments:
                        - from: -5000
                          color: '#EB16FF'
                        - from: 0
                          color: '#47FF4D'
                        - from: 500
                          color: '#EEFF32'
                        - from: 1000
                          color: '#FFA426'
                        - from: 2000
                          color: '#FF0037'
                    - type: gauge
                      name: Phase 2
                      entity: sensor.envoy_122308022894_current_power_consumption_l2
                      card_mod:
                        style: |
                          ha-card {
                            background-color: rgba(60,255,250,0.1);
                          }
                      min: 0
                      max: 3000
                      needle: true
                      segments:
                        - from: -5000
                          color: '#EB16FF'
                        - from: 0
                          color: '#47FF4D'
                        - from: 500
                          color: '#EEFF32'
                        - from: 1000
                          color: '#FFA426'
                        - from: 2000
                          color: '#FF0037'
                    - type: gauge
                      name: Phase 3
                      entity: sensor.envoy_122308022894_current_power_consumption_l3
                      card_mod:
                        style: |
                          ha-card {
                            background-color: rgba(60,255,250,0.1);
                          }
                      min: 0
                      max: 3000
                      needle: true
                      segments:
                        - from: -5000
                          color: '#EB16FF'
                        - from: 0
                          color: '#47FF4D'
                        - from: 500
                          color: '#EEFF32'
                        - from: 1000
                          color: '#FFA426'
                        - from: 2000
                          color: '#FF0037'
          - type: custom:mod-card
            square: false
            card_mod:
              style: |
                ha-card {
                  border-top: 2px outset #F0F0FF;
                  border-left: 2px outset #F0F0F0;
                  border-bottom: 2px inset #F0F0FF;
                  border-right: 2px inset #F0F0FF;
                  background-color: rgba(60,255,2,0.05);
                }
            card:
              title: Production
              square: false
              type: grid
              columns: 2
              card_mod:
                style: |
                  card-header {
                    color: red !important;
                    background-color: rgba(60,80,250,0.05);
                  }
              cards:
                - type: gauge
                  name: Total
                  entity: sensor.envoy_122308022894_current_power_production
                  card_mod:
                    style: |
                      ha-card {
                        background-color: rgba(60,255,250,0.1);
                      }
                  min: 0
                  max: 3300
                  needle: true
                  segments:
                    - from: 0
                      color: '#FF0037'
                    - from: 300
                      color: '#FFA426'
                    - from: 1100
                      color: '#EEFF32'
                    - from: 2200
                      color: '#47FF4D'
                - type: vertical-stack
                  cards:
                    - type: gauge
                      name: Phase 1
                      entity: sensor.envoy_122308022894_current_power_production_l1
                      card_mod:
                        style: |
                          ha-card {
                            background-color: rgba(60,255,250,0.1);
                          }
                      min: 0
                      max: 1200
                      needle: true
                      segments:
                        - from: 0
                          color: '#FF0037'
                        - from: 100
                          color: '#FFA426'
                        - from: 400
                          color: '#EEFF32'
                        - from: 800
                          color: '#47FF4D'
                    - type: gauge
                      name: Phase 2
                      entity: sensor.envoy_122308022894_current_power_production_l2
                      card_mod:
                        style: |
                          ha-card {
                            background-color: rgba(60,255,250,0.1);
                          }
                      min: 0
                      max: 1200
                      needle: true
                      segments:
                        - from: 0
                          color: '#FF0037'
                        - from: 100
                          color: '#FFA426'
                        - from: 400
                          color: '#EEFF32'
                        - from: 800
                          color: '#47FF4D'
                    - type: gauge
                      name: Phase 3
                      entity: sensor.envoy_122308022894_current_power_production_l3
                      card_mod:
                        style: |
                          ha-card {
                            background-color: rgba(60,255,250,0.1);
                          }
                      min: 0
                      max: 900
                      needle: true
                      segments:
                        - from: 0
                          color: '#FF0037'
                        - from: 100
                          color: '#FFA426'
                        - from: 300
                          color: '#EEFF32'
                        - from: 600
                          color: '#47FF4D'
    badges: []
2

Bonjour,
utilise la balise texte préformaté ( icône image ) quand tu veux coller du code. Ça permet une meilleure visibilité et respecte les espaces.

J’ai modifié ton message, en ajoutant ton code directement au message, au lieu de devoir télécharger un fichier yaml pour voir ton code.

3

Bonjour,
tu pourrais utiliser la carte lovelace-layout-card, qui t’ajoute des vues supplémentaires et option de redimensionnement ( width: 450 ).

image
image584×854 32.3 KB

en vue horizontal :

image
image1911×654 285 KB

Tu fais trois cartes, chacune séparé.

4

Merci @WarC0zes !

  1. J’ai tenté de mettre du code sans trouver où se trouve la balise et au moment où j’écris je ne la trouve toujours pas (je n’ai peut-être pas encore les droits). J’ai l’habitude des forums, notamment de phpBB, je suis administrateur sur plusieurs forum et je suis même contributeur.
  2. J’ai lu quelques message (pas mal) et je n’avais pas remarqué les parties de code. Certains forums n’aiment pas ça, ça dépend des forums. Maintenant je sais que je peux utiliser le code mais je ne sais toujours pas comment.
  3. Je vais essayer ta solution et je te tiens au courant.
5

image
image787×97 3.07 KB

quand tu clic sur la balise, ca écris automatique ces lignes :

image

Ta juste à mettre ton code dans la balise .

Quand tu enregistres ton message, on verra le code comme telle :

saisissez ou collez du code ici

Sur mobile, c’est différent l’ordre de balise, c’est peut-être cacher dans la roue crantée.

image
image781×259 10.8 KB

6

Bon, c’est un échec… Grrrrrrrrrrr…
J’ai installé dans HACS le layout-card, j’ai créé 3 cartes. Et elles sont en dessous les unes des autres ! Encore !
Il y a un truc que j’ai pas compris !

      - type: custom:layout-card
        layout_type: masonry
        cards:
          - type: custom:mod-card
            square: false
            card_mod:
              style: |
                ha-card {
                  border-top: 2px outset #F0F0FF;
                  border-left: 2px outset #F0F0F0;
                  border-bottom: 2px inset #F0F0FF;
                  border-right: 2px inset #F0F0FF;
                  background-color: rgba(60,80,250,0.05);
                }
            card:
              title: Consommation Net
              type: grid
              square: false
              columns: 2
              card_mod:
                style: |
                  card-header {
                    color: red !important;
                    background-color: rgba(60,80,250,0.05);
                  }
              cards:
                - type: gauge
                  name: Total
                  entity: sensor.envoy_122308022894_current_net_power_consumption
                  card_mod:
                    style: |
                      ha-card {
                        background-color: rgba(60,255,250,0.1);
                      }
                  max: 4000
                  needle: true
                  segments:
                    - from: -5000
                      color: '#EB16FF'
                    - from: 0
                      color: '#47FF4D'
                    - from: 1000
                      color: '#EEFF32'
                    - from: 2000
                      color: '#FFA426'
                    - from: 3000
                      color: '#FF0037'
                  min: -1000
                - type: vertical-stack
                  cards:
                    - type: gauge
                      name: Phase 1
                      entity: >-
                        sensor.envoy_122308022894_current_net_power_consumption_l1
                      card_mod:
                        style: |
                          ha-card {
                            background-color: rgba(60,255,250,0.1);
                          }
                      max: 3000
                      needle: true
                      segments:
                        - from: -5000
                          color: '#EB16FF'
                        - from: 0
                          color: '#47FF4D'
                        - from: 500
                          color: '#EEFF32'
                        - from: 1000
                          color: '#FFA426'
                        - from: 2000
                          color: '#FF0037'
                      min: -500
                    - type: gauge
                      name: Phase 2
                      entity: >-
                        sensor.envoy_122308022894_current_net_power_consumption_l2
                      card_mod:
                        style: |
                          ha-card {
                            background-color: rgba(60,255,250,0.1);
                          }
                      max: 3000
                      needle: true
                      segments:
                        - from: -5000
                          color: '#EB16FF'
                        - from: 0
                          color: '#47FF4D'
                        - from: 500
                          color: '#EEFF32'
                        - from: 1000
                          color: '#FFA426'
                        - from: 2000
                          color: '#FF0037'
                      min: -500
                    - type: gauge
                      name: Phase 3
                      entity: >-
                        sensor.envoy_122308022894_current_net_power_consumption_l3
                      card_mod:
                        style: |
                          ha-card {
                            background-color: rgba(60,255,250,0.1);
                          }
                      max: 3000
                      needle: true
                      segments:
                        - from: -5000
                          color: '#EB16FF'
                        - from: 0
                          color: '#47FF4D'
                        - from: 500
                          color: '#EEFF32'
                        - from: 1000
                          color: '#FFA426'
                        - from: 2000
                          color: '#FF0037'
                      min: -500
      - type: custom:layout-card
        layout_type: masonry
        cards:
          - type: custom:mod-card
            square: false
            card_mod:
              style: |
                ha-card {
                  border-top: 2px outset #F0F0FF;
                  border-left: 2px outset #F0F0F0;
                  border-bottom: 2px inset #F0F0FF;
                  border-right: 2px inset #F0F0FF;
                  background-color: rgba(60,80,25,0.05);
                }
                #card-header {
                  color: red !important;
                  background-color: rgba(60,80,25,0.05);
                }
            card:
              type: grid
              square: false
              columns: 2
              title: Consommation
              cards:
                - type: gauge
                  name: Total
                  entity: sensor.envoy_122308022894_current_power_consumption
                  card_mod:
                    style: |
                      ha-card {
                        background-color: rgba(60,255,250,0.1);
                      }
                  min: 0
                  max: 4000
                  needle: true
                  segments:
                    - from: -5000
                      color: '#EB16FF'
                    - from: 0
                      color: '#47FF4D'
                    - from: 1000
                      color: '#EEFF32'
                    - from: 2000
                      color: '#FFA426'
                    - from: 3000
                      color: '#FF0037'
                - type: vertical-stack
                  cards:
                    - type: gauge
                      name: Phase 1
                      entity: sensor.envoy_122308022894_current_power_consumption_l1
                      card_mod:
                        style: |
                          ha-card {
                            background-color: rgba(60,255,250,0.1);
                          }
                      min: 0
                      max: 3000
                      needle: true
                      segments:
                        - from: -5000
                          color: '#EB16FF'
                        - from: 0
                          color: '#47FF4D'
                        - from: 500
                          color: '#EEFF32'
                        - from: 1000
                          color: '#FFA426'
                        - from: 2000
                          color: '#FF0037'
                    - type: gauge
                      name: Phase 2
                      entity: sensor.envoy_122308022894_current_power_consumption_l2
                      card_mod:
                        style: |
                          ha-card {
                            background-color: rgba(60,255,250,0.1);
                          }
                      min: 0
                      max: 3000
                      needle: true
                      segments:
                        - from: -5000
                          color: '#EB16FF'
                        - from: 0
                          color: '#47FF4D'
                        - from: 500
                          color: '#EEFF32'
                        - from: 1000
                          color: '#FFA426'
                        - from: 2000
                          color: '#FF0037'
                    - type: gauge
                      name: Phase 3
                      entity: sensor.envoy_122308022894_current_power_consumption_l3
                      card_mod:
                        style: |
                          ha-card {
                            background-color: rgba(60,255,250,0.1);
                          }
                      min: 0
                      max: 3000
                      needle: true
                      segments:
                        - from: -5000
                          color: '#EB16FF'
                        - from: 0
                          color: '#47FF4D'
                        - from: 500
                          color: '#EEFF32'
                        - from: 1000
                          color: '#FFA426'
                        - from: 2000
                          color: '#FF0037'
      - type: custom:layout-card
        layout_type: masonry
        cards:
          - type: custom:mod-card
            square: false
            card_mod:
              style: |
                ha-card {
                  border-top: 2px outset #F0F0FF;
                  border-left: 2px outset #F0F0F0;
                  border-bottom: 2px inset #F0F0FF;
                  border-right: 2px inset #F0F0FF;
                  background-color: rgba(60,255,2,0.05);
                }
            card:
              title: Production
              square: false
              type: grid
              columns: 2
              card_mod:
                style: |
                  card-header {
                    color: red !important;
                    background-color: rgba(60,80,250,0.05);
                  }
              cards:
                - type: gauge
                  name: Total
                  entity: sensor.envoy_122308022894_current_power_production
                  card_mod:
                    style: |
                      ha-card {
                        background-color: rgba(60,255,250,0.1);
                      }
                  min: 0
                  max: 3300
                  needle: true
                  segments:
                    - from: 0
                      color: '#FF0037'
                    - from: 300
                      color: '#FFA426'
                    - from: 1100
                      color: '#EEFF32'
                    - from: 2200
                      color: '#47FF4D'
                - type: vertical-stack
                  cards:
                    - type: gauge
                      name: Phase 1
                      entity: sensor.envoy_122308022894_current_power_production_l1
                      card_mod:
                        style: |
                          ha-card {
                            background-color: rgba(60,255,250,0.1);
                          }
                      min: 0
                      max: 1200
                      needle: true
                      segments:
                        - from: 0
                          color: '#FF0037'
                        - from: 100
                          color: '#FFA426'
                        - from: 400
                          color: '#EEFF32'
                        - from: 800
                          color: '#47FF4D'
                    - type: gauge
                      name: Phase 2
                      entity: sensor.envoy_122308022894_current_power_production_l2
                      card_mod:
                        style: |
                          ha-card {
                            background-color: rgba(60,255,250,0.1);
                          }
                      min: 0
                      max: 1200
                      needle: true
                      segments:
                        - from: 0
                          color: '#FF0037'
                        - from: 100
                          color: '#FFA426'
                        - from: 400
                          color: '#EEFF32'
                        - from: 800
                          color: '#47FF4D'
                    - type: gauge
                      name: Phase 3
                      entity: sensor.envoy_122308022894_current_power_production_l3
                      card_mod:
                        style: |
                          ha-card {
                            background-color: rgba(60,255,250,0.1);
                          }
                      min: 0
                      max: 900
                      needle: true
                      segments:
                        - from: 0
                          color: '#FF0037'
                        - from: 100
                          color: '#FFA426'
                        - from: 300
                          color: '#EEFF32'
                        - from: 600
                          color: '#47FF4D'
        layout: {}
7

Il faut éditer ta page

image
image1017×98 6.21 KB

et passer en vue Horizontal ( layout-card )

image
image584×854 32.3 KB

1 « J'aime »
8

Même sans donner le width ça marche nickel !
Fallait le savoir ça qu’il falait éditer ça, si ça se trouve, ce que j’ai fais au début fonctionnait bien avec cette technique !
Un énorme MERCI !!

Sinon, étape 2, j’ai ajouté des styles pour mettre un fond de couleur et ça fonctionne pas mal. Ça permet de voir les 3 blocs rapidement.
J’aimerais changer le texte Titre : le centrer, changer la couleur, j’ai tenté ça et ça ne fait rien :

type: custom:mod-card
square: false
card_mod:
  style: |
    ha-card { <-------------- ça ça fonctionne bien
      border-top: 2px outset #F0F0FF;
      border-left: 2px outset #F0F0F0;
      border-bottom: 2px inset #F0F0FF;
      border-right: 2px inset #F0F0FF;
      background-color: rgba(60,80,250,0.05);
    }
    card-header { <-------------- ça ne fait rien
      background-color: rgba(255,0,0,1);
    }

Etape 3 ça serait de changer un truc (la couleur peut-être) dynamiquement en fonction de la valeur des capteurs. On peut modifier un style css dynamiquement ?

9

Bonjour,
Dans un tableau de bord (en mode édition) j’ai modifié la couleur d’un titre comme ceci:

        title: Lumières
        card_mod:
          style: |
            ha-card .card-header {
              color: #ff9800;
            }

Vider le cache est toujours utile après modification de style.
Bob

10

@Feneck91
@Herbs à publié ceci très récemment :

Cela devrait t’aider :wink:
Bob

11

@Bob : ça ne fonctionne pas le style…
J’ai essayé de la placer un peu partout, avec des ‹ . ›, sans les ‹ . › bref c’est un échec.

12

Bonjour,

Tu devrais regarder custom:button-card : GitHub - custom-cards/button-card: ❇️ Lovelace button-card for home assistant

Avec la doc fournie, tu devrais pouvoir faire sans trop de difficultés ce que tu veux.

1 « J'aime »
13

image

type: custom:mod-card
square: false
card_mod:
  style:
    :first-child $: |
      .card-header {
        color: red !important;
      }
    .: |
      ha-card {
        border-top: 2px outset #F0F0FF;
        border-left: 2px outset #F0F0F0;
        border-bottom: 2px inset #F0F0FF;
        border-right: 2px inset #F0F0FF;
        background-color: rgba(60,80,250,0.05);
      }              
card:
  title: Consommation Net
  type: grid
  square: false
  columns: 2
  cards:
    - type: gauge
      name: Total
      entity: sensor.envoy_122308022894_current_net_power_consumption
      card_mod:
        style: |
          ha-card {
            background-color: rgba(60,255,250,0.1);
          }
14

@Cleya Je suis développeur mais pas client web. Je sais faire des choses mais je tâtonne un peu.
@WarC0zes Ça marche mais la syntaxe allo quoi !!!

Non franchement les gars, une fois que tu sais ça va mais ça ne s’invente pas !!!

  1. Pourquoi parfois on met style: | et parfois pas comme ici sur ce dernier exemple ? C’est quoi cette syntaxe ? :first-child $: |
  2. Je ne savais pas mais je pense que .: | c’est pour mettre plusieurs style à la suite ?

Bref ça fonctionne, je vais creuser maintenant que j’ai des billes, je vais centrer le texte.

Encore merci les gars !! (ou les filles)

15

Je ne suis ni développeur ni client web mais en tatonnant un peu et en testant les exemples de la documentation de RomRider, j’arrive maintenant à faire à peu près ce que je veux avec les custom:button-card. Et la syntaxe est beaucoup plus simple à comprendre et mettre en oeuvre que celle de custom:card_mod…

16

Tu as des explications dans la doc de card_mod :

tu peux regarder ce tuto :

Cadeau

tu as ce post, avec plein d’exemple pour card_mod et les différentes cartes qui existent.

17

Je vais arrêter de vous embêter pour le moment, je vais lire ça a tète reposée ce soir.
En vous remerciant bien, j’ai déjà bien avancé grâce à vous.

18

@Feneck91
Je l’ai ajouté comme ceci, c’était plus un test qu’une envie car je reste très dans les standards HA, je reste plus fonctionnel que design :wink:

type: entities
entities:
  - entity: light.color_temperature_light_caisson_22
    secondary_info: brightness
  - entity: light.ruban_led_color_light_21
    icon: mdi:led-strip-variant
    secondary_info: brightness
  - entity: light.ruban_led_color_light_26_sejour
    icon: mdi:led-strip-variant
    name: Ruban Led Séjour
    secondary_info: brightness
  - type: custom:slider-entity-row
    entity: light.salon_lights
    toggle: true
  - entity: sensor.nombre_lumieres_unavailable_bas
  - entity: sensor.derniere_automatisation
    secondary_info: last-changed
    icon: mdi:lastpass
state_color: true
show_header_toggle: false
title: Lumières
card_mod:
  style: |
    ha-card .card-header {
      color: #ff9800;
    }

Bob

19

Salut,
c’est pour la carte entities, pas pour la carte Grid. Pour Grid le code est différent.

1 « J'aime »
20

Si c’est bon pour toi, passe ton sujet en résolu. En cochant la case solution image sur le message qui l’apporte.