Une carte Gauge dans une vue Panneau avec une carte picture-elements

Entraide Home Assistant
1

Bonjour à tous,

J’ai pas mal d’écrans avec des vues « Panneau » et sur ces vues, j’affiche mes différentes cartes dans une carte picture-elements.

Je m’en sort plutôt bien, aujourd’hui, je bloque sur les gauges.

Quand j’utilise des mini cartes toutes simples, de type mini-gauge-card, j’arrive à les implanter dans picture-elements.
https://github.com/radimkeseg/lovelace-mini-gauge-card

Mais quand j’utilise la carte Gauge inclue dans HA, elle ne s’intègre pas dans une picture-elements.

J’ai du mal à comprendre pourquoi certaines cartes sont acceptées dans picture-elements et pas d’autres.
Pourquoi les développeurs ne rendent pas possible cette intégration ? La gauge intégrée à HA parmi d’autres, c’est vraiment vraiment dommage. Je dois tester souvent les cartes qui fonctionnent seules mais pas dans une picture-elements.

Pour l’instant, à chaque fois que j’ai bloqué sur une carte qui ne s’intégrait pas, j’ai continué à chercher et j’ai trouvé une autre qui ne provoquait pas d’erreur.

Deux questions :

  • Peut on forcer Gauge à passer dans une picture-elements carte ?
  • Connaissez vous une jauge qui est bien mais ne soit pas celle intégrée à HA ?

Merci

2

Bonjour,
voici quelques cartes gauge :

3

Salut

En dehors des cartes par défaut (celles de la doc) , les seules cartes qui fonctionnent en intégration direct sont les cartes custom. Si on veut ajouter une carte de base ha, ça marche pas (j’ai jamais réussi du moins). La seule astuce pour contourner ça, c’est de faire une combinaison de cartes avec un stack custom avant

4

Merci @WarC0zes , j’ai testé, c’est pas ça. Soit ça bug soit c’est pas adapté à ce que je veux faire.
C’est étrange qu’il n’y ait pas une chouette gauge dans HA. En fait, il y en a une mais pas intégrable dans un picture-elements.

5

Faut inclure dans une stack card GitHub - custom-cards/stack-in-card: 🛠 group multiple cards into one card without the borders la carte qui ne passe pas dans un picture-elements ?

6

Oui, ou avec mod-card ( c’est card-mod qui dispose d’une carte spéciale pour appliquer du CSS quand ca fonctionne pas sur une carte ) ca peu ce faire.

  - type: custom:mod-card
    card_mod:
      style: |
        ha-card {
          margin: 25px 10px 25px 10px;
        }
    card:
      - type: custom:button-card

ou simplement sans style:

  - type: custom:mod-card
    card:
      - type: custom:button-card
7

Dans une custom:mod-card je peux mettre une type: gauge ? pour pouvoir ensuite le mettre dans une carte picture-elements ?

8

Oui, je viens de tester.

type: picture-elements
elements:
  - type: state-badge
    entity: sensor.zlinky_current_summation_derived_one_minute
    style:
      top: 32%
      left: 40%
  - type: custom:mod-card
    card:
      type: gauge
      entity: sensor.0x00158d0005d299cf_papp
    style:
      top: 32%
      left: 60%      
image: https://demo.home-assistant.io/stub_config/floorplan.png

picture elements
picture elements505×587 74 KB

ou avec stack in card:

type: picture-elements
elements:
  - type: state-badge
    entity: sensor.zlinky_current_summation_derived_one_minute
    style:
      top: 32%
      left: 40%
  - type: custom:mod-card
    card:
      type: gauge
      entity: sensor.0x00158d0005d299cf_papp
    style:
      top: 32%
      left: 60%
  - type: custom:stack-in-card
    mode: vertical
    keep:
      box_shadow: false
      margin: true
      border_radius: false
      background: false
      outer_padding: false
    cards:
      - type: gauge
        entity: sensor.0x00158d0005d299cf_papp
      - type: gauge
        entity: sensor.0x00158d0005d299cf_papp
    style:
      top: 72%
      left: 20%
image: https://demo.home-assistant.io/stub_config/floorplan.png

picture elements2
picture elements2503×583 67.6 KB

Une carte Gauge dans une vue Panneau avec une carte picture-elements (solved :grin:):

picture elements3
picture elements31863×885 108 KB

1 « J'aime »
9

Trop trop bien !!! Bravo, jolie combine !!

Je cherche juste à arriver à mettre un fond transparent pour éviter le rectangle sur le plan et je suis bon…

10

essaye:

type: picture-elements
elements:
  - type: state-badge
    entity: sensor.zlinky_current_summation_derived_one_minute
    style:
      top: 32%
      left: 40%
  - type: custom:mod-card
    card:
      type: gauge
      entity: sensor.0x00158d0005d299cf_papp
      card_mod:
        style: |
          ha-card {
            background: transparent;
          }
    style:
      top: 32%
      left: 60%
11

Ha oui, très bien, donc si je comprends bien, on peut ainsi passer du css en paramètre.
J’en découvre tous les jours.
Je peux changer la couleur du titre ou le passer transparent j’imagine.

(on ne peut pas le passe à null car la largeur de la tuile se cale sur la longueur du titre, étrange mais malin)

12

Voilà, un truc du genre

        style: |
          ha-card {
            background: transparent; 
          }
          .name{color: green !important}

ou encore

        style: |
          ha-card {
            background: transparent; 
          }
          .name{opacity: 0}
13

Oui, ta tout compris.

picture elements4
picture elements41083×673 78.4 KB

14

Oula, il est pas trop d’accord

image

15

Bien vu, mais il y a des limites , comme moi en connaissance CSS.
Peu être que @Herbs (pro du CSS :stuck_out_tongue: ) aurrait une solution de contournement plus propre.

16

Après, il aime pas, mais ça passe.
Visiblement, il y a un conflit de balises j’imagine si les deux utilisent ha-card, mais ça passe…

17

Oui, j’ai le message des fois aussi sur ma config mais tout fonctionne :sweat_smile:

18

:shushing_face:
chuuuuuuuuuuuuuttttttttttttttttttt

19

Je suis flatté, mais c’est loin d’être le cas :laughing:

Mais comme tu m’as mis au défis …

On peut arriver au même résultat sans le message d’erreur, mais sans « custom:mod-card ».

Il faut jouer avec " Config Template Card" à la place.

J’ai coloré la valeur de la jauge aussi pour que ce soit plus lisible, et ajouter de quoi virer les box-shadow de mon thème :

image
image460×537 47.5 KB

le code 
type: picture-elements
elements:
  - type: state-badge
    entity: sensor.1200_pro_battery_charge
    style:
      top: 32%
      left: 40%
  - type: custom:config-template-card
    entities: sensor.1200_pro_load
    card:
      type: gauge
      entity: sensor.1200_pro_load
      card_mod:
        style:
          ha-gauge$: |
            text {
              fill: green !important;
            }
          .: |
            ha-card {
              background: transparent;
              box-shadow: none;
            }
            .name{color: green !important}      
    style:
      top: 32%
      left: 60%
image: https://demo.home-assistant.io/stub_config/floorplan.png

Bref à voir …

20

Tu vois, je savait que tu aurait une solution, plus propre.
en plus je découvre une carte :+1:
merci