Mini graph card & button card

Entraide Home Assistant
1

Bonsoir,.
J’avance dans Lovelace petit à petit.
J’ai réussi à faire des graphiques ! Top je suis trop content.

Screenshot_20210412-205823
Screenshot_20210412-2058231080×2400 266 KB

Par contre une question, j’ai fait aussi un button card, mais au lieu de mettre un autre bouton à côté, je souhaiterais mettre les info comme les graphiques. En fait sur un Shelly, il y a le bouton, puis les puissances et conso.
Vous voyez ce que je veux dire ? J’ai essayé de copier ce que j’ai dans mini graph, mais ça marche pas.

Quelqu’un pourrait m’aider ??

Screenshot_20210412-205833
Screenshot_20210412-2058331080×2400 75.7 KB 

type: 'custom:button-card'
entity: switch.cafetiere
icon: 'mdi:coffee-maker'
color: 'rgb(255, 131, 0)'
state:
  - value: 'off'
    color: 'rgb(160, 161, 160)'
name: Cafetière
2

Pas sûr :innocent:

Si tu souhaites organiser tes cartes en lignes c’est avec la carte Pile horizontale (horizontal-stack).

Tu peux combiner des cartes entre elles et donc avoir un carte verticale contenant 2 cartes horizontales contenant chacune des cartes uniques :

animate

Code de la carte 
type: vertical-stack
cards:
  - type: horizontal-stack
    cards:
      - type: button
        tap_action:
          action: toggle
        entity: switch.interrupteur_01
      - type: light
        entity: light.bed_light
      - type: button
        tap_action:
          action: toggle
        entity: switch.interrupteur_01
  - type: horizontal-stack
    cards:
      - type: entities
        entities:
          - switch.interrupteur_01
          - switch.interrupteur_02
          - switch.interrupteur_03
      - type: entities
        entities:
          - switch.interrupteur_01
          - switch.interrupteur_02
          - switch.interrupteur_03
  - type: alarm-panel
    states:
      - arm_home
      - arm_away
    entity: alarm_control_panel.alarm
1 « J'aime »
3

@Clemalex super ça répond à une de mes questions en effet.

Par contre modifier les couleurs du baregraphes ou courbes ? J’ai mis les couleurs en orange pour la cefetière pour essayer, mais le baregraph reste bleu.
Ah oui, et gérer aussi la taille des boutons, car ils sont énormes …

Tu vois c’est moche là :smile:

tttttt
tttttt788×358 23.7 KB

4

Faut partager le code car sans on ne peut rien faire…

6

Bonjour,

Je rebondis sur le sujet car, j’ai une demande similaire.
Je voudrais augmenter la taille d’une Glance Card pour qu’elle soit égale a une Light Card:
image

  - type: glance
    show_name: true
    show_state: true
    columns: 1
    entities:
      - entity: input_boolean.light_pool
        name: Piscine
        tap_action:
          action: toggle
        show_state: false

Je suppose que c’est possible avec Card-Mod mais je ne sais pas ou modifier…
Une autre question, est-il possible de « transformer » cet input en light pour utiliser une Light Card ?

Merci d’avance.

7

Il faut que tu partages tout ton code (toutes les cartes au moins impactées pour partager la configuration de la vue)

8

Ok, le voici:

Pour ma card « Lumieres »:

type: custom:swipe-card
card_width: 185px
start_card: 1
parameters:
  effect: coverflow
  grabCursor: true
  centeredSlides: true
  slidesPerView: auto
  coverflowEffect:
    rotate: 50
    stretch: 0
    depth: 100
    modifier: 1
    slideShadows: true
  pagination:
    type: bullets
cards:
  - type: light
    entity: light.salle_a_manger
    name: Salon
  - type: light
    entity: light.entree
    name: Entrée
  - type: light
    entity: light.chambre_parentale
    name: Suite Parentale
  - type: light
    entity: light.tv
    name: TV

Pour ma card « Piscine »:

type: custom:swipe-card
card_width: 185px
start_card: 1
parameters:
  effect: coverflow
  grabCursor: true
  centeredSlides: true
  slidesPerView: auto
  coverflowEffect:
    rotate: 50
    stretch: 0
    depth: 100
    modifier: 1
    slideShadows: true
  pagination:
    type: bullets
cards:
  - type: glance
    show_name: true
    show_state: true
    columns: 1
    entities:
      - entity: input_boolean.light_pool
        name: Piscine
        tap_action:
          action: toggle
        show_state: false
  - type: glance
    show_name: true
    show_state: true
    columns: 1
    entities:
      - entity: input_boolean.filter_pool_manual
        name: Filtration Manuelle
        tap_action:
          action: toggle
        show_state: false
  - type: glance
    show_name: true
    show_state: true
    columns: 1
    entities:
      - entity: input_boolean.filter_pool_auto
        name: Filtration Auto
        tap_action:
          action: toggle
        show_state: false
  - type: glance
    show_name: true
    show_state: true
    columns: 1
    entities:
      - entity: input_boolean.winter_pool
        name: Hivernage
        show_state: false
        state_color: true
  - type: glance
    show_name: true
    show_state: true
    columns: 1
    entities:
      - entity: sensor.pool_filtre_time_rest
        name: Clean du filtre dans
        icon: mdi:calendar
        show_state: true
        state_color: true

Donc comme elles sont cote a cote, l’idée serait qu’elle soit de la même taille.

9

animate

Ajoute ceci sur la carte piscine :

    style: |
      ha-card {
        height: 201px !important;
      }

ce qui donne :

type: custom:swipe-card
card_width: 185px
start_card: 1
parameters:
  effect: coverflow
  grabCursor: true
  centeredSlides: true
  slidesPerView: auto
  coverflowEffect:
    rotate: 50
    stretch: 0
    depth: 100
    modifier: 1
    slideShadows: true
  pagination:
    type: bullets
cards:
  - type: glance
    style: |
      ha-card {
        height: 201px !important;
      }
    show_name: true
    show_state: true
    columns: 1
    entities:
      - entity: input_boolean.light_pool
        name: Piscine
        tap_action:
          action: toggle
        show_state: false
  - type: glance
    style: |
      ha-card {
        height: 201px !important;
      }
    show_name: true
    show_state: true
    columns: 1
    entities:
      - entity: input_boolean.filter_pool_manual
        name: Filtration Manuelle
        tap_action:
          action: toggle
        show_state: false
  - type: glance
    style: |
      ha-card {
        height: 201px !important;
      }
    show_name: true
    show_state: true
    columns: 1
    entities:
      - entity: input_boolean.filter_pool_auto
        name: Filtration Auto
        tap_action:
          action: toggle
        show_state: false
  - type: glance
    style: |
      ha-card {
        height: 201px !important;
      }
    show_name: true
    show_state: true
    columns: 1
    entities:
      - entity: input_boolean.winter_pool
        name: Hivernage
        show_state: false
        state_color: true
  - type: glance
    style: |
      ha-card {
        height: 201px !important;
      }
    show_name: true
    show_state: true
    columns: 1
    entities:
      - entity: sensor.pool_filtre_time_rest
        name: Clean du filtre dans
        icon: mdi:calendar
        show_state: true
        state_color: true

Il faudrait peut être descendre des éléments qui se retrouvent en haut du coup…
Si tu le souhaites fais ta demande ici : https://forum.hacf.fr/t/personnaliser-ses-cartes-avec-card-mod/4447 (après avoir visionner la video d’explication )

10

Ah top!!
Je savais bien qu’il fallait utiliser la card-mod!

Le !Important, c’est quoi en fait?

J’ai transformé les Glance en Button, cela me semble plus logique et par conséquent plus esthétique.

Merci @Clemalex !

11

Une clé pour indiquer d’outrepasser tous les styles.