[Resolu] Largeur des button

sg72 · Juin 16, 2023, 8:21

Bonjour
Je viens de finir ma première carte concernant ma TV Philips

type: vertical-stack
title: Philips
cards:
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        icon: mdi:numeric-1-box
        styles:
          icon:
            - width: 20px
            - height: 20px
      - type: custom:button-card
        icon: mdi:numeric-2-box
        styles:
          icon:
            - width: 20px
            - height: 20px
      - type: custom:button-card
        icon: mdi:numeric-3-box
        styles:
          icon:
            - width: 20px
            - height: 20px
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        icon: mdi:numeric-4-box
        styles:
          icon:
            - width: 20px
            - height: 20px
      - type: custom:button-card
        icon: mdi:numeric-5-box
        styles:
          icon:
            - width: 20px
            - height: 20px
      - type: custom:button-card
        icon: mdi:numeric-6-box
        styles:
          icon:
            - width: 20px
            - height: 20px
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        icon: mdi:numeric-7-box
        styles:
          icon:
            - width: 20px
            - height: 20px
      - type: custom:button-card
        icon: mdi:numeric-8-box
        styles:
          icon:
            - width: 20px
            - height: 20px
      - type: custom:button-card
        icon: mdi:numeric-9-box
        styles:
          icon:
            - width: 20px
            - height: 20px
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        icon: mdi:cog
        styles:
          icon:
            - width: 20px
            - height: 20px
      - type: custom:button-card
        icon: mdi:numeric-0-box
        styles:
          icon:
            - width: 20px
            - height: 20px
      - type: custom:button-card
        icon: mdi:power
        styles:
          icon:
            - width: 20px
            - height: 20px
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        icon: mdi:arrow-down-bold
        styles:
          icon:
            - width: 20px
            - height: 20px
      - type: custom:button-card
        icon: mdi:menu-up
        styles:
          icon:
            - width: 20px
            - height: 20px
      - type: custom:button-card
        icon: mdi:arrow-up-bold
        styles:
          icon:
            - width: 20px
            - height: 20px
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        icon: mdi:menu-left
        styles:
          icon:
            - width: 20px
            - height: 20px
      - type: custom:button-card
        icon: mdi:chevron-down-circle-outline
        styles:
          icon:
            - width: 20px
            - height: 20px
      - type: custom:button-card
        icon: mdi:menu-right
        styles:
          icon:
            - width: 20px
            - height: 20px
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        icon: mdi:cog
        styles:
          icon:
            - width: 20px
            - height: 20px
      - type: custom:button-card
        icon: mdi:menu-down
        styles:
          icon:
            - width: 20px
            - height: 20px
      - type: custom:button-card
        icon: mdi:hdmi-port
        styles:
          icon:
            - width: 20px
            - height: 20px
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        icon: mdi:volume-minus
        styles:
          icon:
            - width: 20px
            - height: 20px
      - type: custom:button-card
        icon: mdi:volume-mute
        styles:
          icon:
            - width: 20px
            - height: 20px
      - type: custom:button-card
        icon: mdi:volume-plus
        styles:
          icon:
            - width: 20px
            - height: 20px

Le problème c’est qu’elle est responsive.Comment je peux centrer et attribuer une largeur fixe ?
Merci

sg72 · Juin 16, 2023, 9:19

J’ai donc réussi à déterminé une largeur pour chaque action

type: vertical-stack
title: Philips
cards:
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        icon: mdi:numeric-1-box
        tap_action:
          action: call-service
          service: null
          target: {}
        styles:
          card:
            - width: 100px
            - height: 50px
          icon:
            - width: 20px
            - height: 20px
      - type: custom:button-card
        icon: mdi:numeric-2-box
        tap_action:
          action: call-service
          service: null
          target: {}
        styles:
          card:
            - width: 100px
            - height: 50px
          icon:
            - width: 20px
            - height: 20px
      - type: custom:button-card
        icon: mdi:numeric-3-box
        tap_action:
          action: call-service
          service: null
          target: {}
        styles:
          card:
            - width: 100px
            - height: 50px
          icon:
            - width: 20px
            - height: 20px
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        icon: mdi:numeric-4-box
        tap_action:
          action: call-service
          service: null
          target: {}
        styles:
          card:
            - width: 100px
            - height: 50px
          icon:
            - width: 20px
            - height: 20px
      - type: custom:button-card
        icon: mdi:numeric-5-box
        tap_action:
          action: call-service
          service: null
          target: {}
        styles:
          card:
            - width: 100px
            - height: 50px
          icon:
            - width: 20px
            - height: 20px
      - type: custom:button-card
        icon: mdi:numeric-6-box
        tap_action:
          action: call-service
          service: null
          target: {}
        styles:
          card:
            - width: 100px
            - height: 50px
          icon:
            - width: 20px
            - height: 20px
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        icon: mdi:numeric-7-box
        tap_action:
          action: call-service
          service: null
          target: {}
        styles:
          card:
            - width: 100px
            - height: 50px
          icon:
            - width: 20px
            - height: 20px
      - type: custom:button-card
        icon: mdi:numeric-8-box
        tap_action:
          action: call-service
          service: null
          target: {}
        styles:
          card:
            - width: 100px
            - height: 50px
          icon:
            - width: 20px
            - height: 20px
      - type: custom:button-card
        icon: mdi:numeric-9-box
        tap_action:
          action: call-service
          service: null
          target: {}
        styles:
          card:
            - width: 100px
            - height: 50px
          icon:
            - width: 20px
            - height: 20px
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        icon: mdi:cog
        styles:
          card:
            - width: 100px
            - height: 50px
          icon:
            - width: 20px
            - height: 20px
      - type: custom:button-card
        icon: mdi:numeric-0-box
        styles:
          card:
            - width: 100px
            - height: 50px
          icon:
            - width: 20px
            - height: 20px
      - type: custom:button-card
        icon: mdi:power
        styles:
          card:
            - width: 100px
            - height: 50px
          icon:
            - width: 20px
            - height: 20px
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        icon: mdi:arrow-down-bold
        styles:
          card:
            - width: 100px
            - height: 50px
          icon:
            - width: 20px
            - height: 20px
      - type: custom:button-card
        icon: mdi:menu-up
        styles:
          card:
            - width: 100px
            - height: 50px
          icon:
            - width: 20px
            - height: 20px
      - type: custom:button-card
        icon: mdi:arrow-up-bold
        styles:
          card:
            - width: 100px
            - height: 50px
          icon:
            - width: 20px
            - height: 20px
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        icon: mdi:menu-left
        styles:
          card:
            - width: 100px
            - height: 50px
          icon:
            - width: 20px
            - height: 20px
      - type: custom:button-card
        icon: mdi:chevron-down-circle-outline
        styles:
          card:
            - width: 100px
            - height: 50px
          icon:
            - width: 20px
            - height: 20px
      - type: custom:button-card
        icon: mdi:menu-right
        styles:
          card:
            - width: 100px
            - height: 50px
          icon:
            - width: 20px
            - height: 20px
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        icon: mdi:cog
        styles:
          card:
            - width: 100px
            - height: 50px
          icon:
            - width: 20px
            - height: 20px
      - type: custom:button-card
        icon: mdi:menu-down
        styles:
          card:
            - width: 100px
            - height: 50px
          icon:
            - width: 20px
            - height: 20px
      - type: custom:button-card
        icon: mdi:hdmi-port
        styles:
          card:
            - width: 100px
            - height: 50px
          icon:
            - width: 20px
            - height: 20px
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        icon: mdi:volume-minus
        styles:
          card:
            - width: 100px
            - height: 50px
          icon:
            - width: 20px
            - height: 20px
      - type: custom:button-card
        icon: mdi:volume-mute
        styles:
          card:
            - width: 100px
            - height: 50px
          icon:
            - width: 20px
            - height: 20px
      - type: custom:button-card
        icon: mdi:volume-plus
        styles:
          card:
            - width: 100px
            - height: 50px
          icon:
            - width: 20px
            - height: 20px

Seulement je n’arrive pas à centrer la télecommande

Abel · Juin 16, 2023, 1:19

Bonjour,

As-tu regardé dans HACS, il y a quelques cartes dispo pour des télécommandes.
https://github.com/abualy/philips-tv-remote-card

Je ne sais pas s’il est possible d’y ajouter d’autre boutons pour gérer les lumières, rideaux, … (mais ça peux se faire automatiquement lorsque la télé est en marche)

Juste une idée

Abel

sg72 · Juin 16, 2023, 1:25

Bonjour
Oui on m’en a parlé mais ca m’embête de passer par ca car là ma télécommande est visuellement prête.

WarC0zes · Juin 16, 2023, 2:19

Bonjour,
tu es en quel vue sur ta page ?
j’ai pas d’espace en vue normal.
test télécommande

sg72 · Juin 16, 2023, 2:33

Et ben voilà

Abel · Juin 16, 2023, 2:56

Pour mes télécomandes, j’ai défini la largeur des colonnes dans the yaml du dashboard ( {} Raw Configuration Editor )

et j’ai ajouté

    type: custom:vertical-layout
    layout:
      width: 220

views:
  - theme: Backend-selected
    title: Remote
    type: custom:vertical-layout
    layout:
      width: 220
    badges: []

Mais je n’ai qu’une seule télécomande à la fois .

Abel

sg72 · Juin 16, 2023, 3:05

C’est quoi que tu appel dashboard ?

Abel · Juin 16, 2023, 3:10

J’ai un home assistant en Anglais … Click sur les 3 points verticaux en haut à droite

puis une seconde fois

ou click sur le crayon d’ édition

et sélectionne le type de vue souhaitée

sg72 · Juin 17, 2023, 7:39

Bonjour abel
Je viens de faire comme vous dit, mais je ne vois pas comment déterminer la largeur comme vous ?

WarC0zes · Juin 17, 2023, 8:55

Il a oublier de dire qui te faut installer GitHub - thomasloven/lovelace-layout-card: 🔹 Get more control over the placement of lovelace cards. pour avoir ces fameuses vue et la possibilité d’utiliser des options.

6112f02cdb60089116fd4f2a9b9dbd55a450d383_2_342x500

sg72 · Juin 17, 2023, 1:08

Et ben voilà