Configuration Lovelace

pyloutom · Septembre 28, 2022, 8:15

Mon problème

Bonjour, je souhaite faire un tableau lovelace qui soit lisible et agréable à regarder, car avec le temps, c’est un peu le bazar.

J’aimerais savoir s’il est possible de créer un bouton pour une lumière par exemple avec à côté l’information de la consommation.

J’utilise " Mushroom" j’ai trouvé des boutons avec les animations qui me conviennent, mais je n’arrive pas a jouté une autre entité sur le même bouton.

Exemple avec ce bouton de ventilation, j’aimerais ajouter a coté la consommation instantanée, comme pour pas mal de mes autres devices.
Fan lovelace

Il y a de la place à droite, une idée pour ajouté la consomation?

pyloutom · Septembre 28, 2022, 8:44

J’ai utilisé la card « pile horizontale » pour avoir l’entité sur la même ligne, je ne sais s’il existe un moyen plus approprier celui-ci est déjà bien dommage qu’il y a une ligne noir qui sépare les deux indications.

Fan 1

type: horizontal-stack
cards:
  - type: custom:mushroom-fan-card
    entity: switch.ventilateur_onduleur
    icon: mdi:fan
    primary_info: name
    secondary_info: last-changed
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-fan-card
        entity: sensor.ventilateur_onduleur_power
        icon: ''
        icon_type: none
        icon_animation: false
        fill_container: true
        layout: vertical
        primary_info: none
        secondary_info: state
        collapsible_controls: false

Pulpy-Luke · Septembre 28, 2022, 8:45

Salut,

De base avec Mushroom, c’est pas prévu pour sauf à tout refaire à la main…

pyloutom · Septembre 28, 2022, 8:48

Bonsoir Pulpy . J’ai regardé si je pouvais modifier, mais je n’ai pas trouvé. Peut-être, il existe d’autres cartes ou l’on peut mettre deux entités sur une même ligne (dans un souci de ne pas surcharger le tableau). J’ai fouiné dans les card, mais je n’ai pas trouvé.

Pulpy-Luke · Septembre 28, 2022, 9:00

Il y a une carte mushroom template avec sa doc qui sert de base aux autres.

Pulpy-Luke · Septembre 28, 2022, 9:01

J’ai posté sur le forum io un exemple bricolé pour des volets sinon.
Je retrouverai le lien demain

pyloutom · Septembre 28, 2022, 9:04

D’accord c’est sympa une fois de plus je vais voir ce que je trouve merci

Herbs · Septembre 28, 2022, 9:09

Salut @pyloutom,

Alors c’est pas forcement le code le plus "beau " possible mais en trichant un peu on peut arriver à ça :

Le code :

type: custom:mod-card
style:
  .: |
    ha-card {
      background-color: rgba(10,10,10,0.4);
      box-shadow: var( --ha-card-box-shadow, 0px 2px 1px -1px rgba(255, 255, 255, 0.2), 0px 1px 1px 0px rgba(255, 255, 255, 0.14), 0px 1px 3px 0px rgba(255, 255, 255, 0.12) ); 
    }
card:
  type: horizontal-stack
  cards:
    - type: custom:mushroom-fan-card
      entity: fan.ventilateurs_baie
      icon: mdi:fan
      primary_info: name
      secondary_info: last-changed
      icon_animation: false
      card_mod:
        style: |
          ha-card {
            background: transparent;
            box-shadow: none;
          }
    - type: custom:mushroom-template-card
      entity: sensor.fan_esp_ip_address
      primary: |
        @ip : {{ states('sensor.fan_esp_ip_address') }}
      fill_container: true
      layout: vertical
      tap_action:
        action: none
      card_mod:
        style: |
          ha-card {
            background: transparent;
            box-shadow: none;
          }

Les directives « style » sur les cartes mushroom permettent d’inhiber une partie des mises en forme pour les réappliquer à la « custom:mod-card ».
C’est à adapter en fonction de ton thème de base.
Sans ce tour de passe passe le style est un peu « flingué »

Et si jamais tu n’es pas bloqué sur le fait d’utiliser autre chose que du mushroom, je pense que tu peux essayer ça :

pyloutom · Septembre 28, 2022, 9:23

Salut Herbs,

Superbe toutes ces informations effectivement, je ne suis pas bloqué sur mushroom, mais la modif est très bien et je n’avais pas vu ce « Multiple entity » Génial je vais étudier tout cela. Merci pour cette réponse très complète qui va me permettre de configurer mon tableau comme je le souhaite, bien qu’il me reste pas mal de questions sans réponse, mais chaque chose en son temps. @ bientôt merci

pyloutom · Septembre 28, 2022, 9:58

J’ai réussi à l’adapter à mon besoin, c’est superbe, je souhaiterais juste ajouter un W après la conso et que celui-ci apparaisse uniquement quand il y a de la conso, j’ai essayé, mais des que je mets le W il y a 0 w en permanence.

type: custom:mod-card
style:
  .: |
    ha-card {
      background-color: rgba(10,10,10,0.4);
      box-shadow: var( --ha-card-box-shadow, 0px 2px 1px -1px rgba(255, 255, 255, 0.2), 0px 1px 1px 0px rgba(255, 255, 255, 0.14), 0px 1px 3px 0px rgba(255, 255, 255, 0.12) ); 
    }
card:
  type: horizontal-stack
  cards:
    - type: custom:mushroom-fan-card
      entity: switch.ventilateur_onduleur
      icon: mdi:fan
      primary_info: name
      secondary_info: last-changed
      icon_animation: true
      card_mod:
        style: |
          ha-card {
            background: transparent;
            box-shadow: none;
          }
    - type: custom:mushroom-template-card
      entity: sensor.ventilateur_onduleur_power
      primary: |
        {{ states ('sensor.ventilateur_onduleur_power') }} 
      fill_container: true
      layout: vertical
      tap_action:
        action: none
      card_mod:
        style: |
          ha-card {
            background: transparent;
            box-shadow: none;
          }

Herbs · Septembre 29, 2022, 4:52

Essaies ça :

    - type: custom:mushroom-template-card
      entity: sensor.ventilateur_onduleur_power
      primary: |
        {% if states('sensor.ventilateur_onduleur_power') | float == 0 %}
        {{ states('sensor.ventilateur_onduleur_power') }}
        {% else %}
        {{ states('sensor.ventilateur_onduleur_power') }} W
        {% endif %} 
      fill_container: true
      layout: vertical
      tap_action:
        action: none
      card_mod:
        style: |
          ha-card {
            background: transparent;
            box-shadow: none;
          }

Ca devrait fonctionner si la valeur de conso est bien un « float », et à la limite faudrait juste prévoir le cas où le capteur serait indispo.

Mais là c’est encore tôt pour faire des templates

WarC0zes · Septembre 29, 2022, 5:06

Encore une solution de triche, heureusement qu’il y a pas d’anticheat dans HA sinon ont serais mal barré .

Herbs · Septembre 29, 2022, 7:58

Haha

J’ai beaucoup triché le week-end passé pour créer cette carte :

Je crois que je suis à la limite du « ban perm » là

pyloutom · Septembre 29, 2022, 8:05

Super cela fonctionne très bien . Il faut que je l’adapte a tout mes sensor donc il y a du taf mais le rendu est parfait, je trouve un grand merci …

pyloutom · Septembre 29, 2022, 8:06

Terrible la carte tu maitrise quand même bravo