Mini graph card & button card

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

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 ??

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

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

@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:

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

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.

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

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.

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 )

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 !

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