Sélection input_select avec un seul bouton

romu044 · Juillet 18, 2024, 1:45

Bonjour,

j’ai un input_select avec 2 valeurs : Auto et Manuel.
J’essaye désespérément de passer de Auto à Manuel et inversement avec un seul bouton.
Du style il y a

et lorsque je clique dessus il passe à

avec passage de l’input_select de Auto à Manuel.
J’ai réussi à faire une carte mais avec 2 boutons

quand je clique sur l’icone de gauche celle de droite passe de M à A et inversement

square: false
type: grid
cards:
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: call-service
      service: input_select.select_next
      target:
        entity_id:
          - input_select.volet_mode
      data:
        cycle: true
    entity: input_select.volet_mode
    name: Mode
  - type: custom:button-card
    entity: input_select.volet_mode
    state:
      - value: Auto
        icon: mdi:alpha-a-box
        color: yellow
      - value: Manuel
        icon: mdi:alpha-m-box
        color: green
    styles:
      name:
        - font-size: 10px
        - font-weight: bold
        - align-self: end
columns: 2
title: Mode Volets

mais je n’arrive pas à en faire une avec une seule icone

Tochy · Juillet 18, 2024, 2:01

Salut
Je ne connais pas la button-card mais je dirais :
Tu vires la première carte et tu mets la partie tap action que tu avais sur la deuxième.

Si jamais ce n’était pas ça tu attends que @Cleya débarque sur ton sujet

Cleya · Juillet 18, 2024, 2:10

Salut, si j’ai bien compris, tu voudrais une carte qui te permettent de changer d’icone (et de mode ) en fonction de la valeur d’un input_select ayant deux valeurs possibles, c’est bien ça ?

Déjà, pourquoi utiliser un input_select pour deux valeurs et pas simplement un input_boolean (« on » = automatique et « off » = manuel) ? Un input_boolean, tu fais simplement un toggle en tap_action et ça basculera d’une valeur à l’autre très simplement

Krull56 · Juillet 18, 2024, 2:11

Le champion des boutons est là

Cleya · Juillet 18, 2024, 2:33

essai

Là, c’est avec un input_boolean :

type: custom:button-card
aspect_ratio: 1/1
entity: input_boolean.essai_romu044
name: Mode volet
icon: mdi:alpha-m-box
state:
  - operator: '=='
  - value: 'on'
    icon: mdi:alpha-a-box
styles:
  card:
    - width: 100px
    - height: 100px
  icon:
    - width: 100%
tap_action:
  action: toggle

romu044 · Juillet 18, 2024, 3:20

bonjour,
@Cleya oui un bouton comme celui-là, mais il faut aussi que cela mette à jour le input_select

romu044 · Juillet 18, 2024, 3:25

Bonne question pourquoi un input_select
Je vais tester l’input_boolean.

Merci

romu044 · Juillet 19, 2024, 12:38

Bonjour,

Nickel ça fonctionne avec un input_boolean

voilà ce que ça donne :

square: true
type: grid
cards:
  - type: custom:button-card
    aspect_ratio: 1/1
    entity: input_boolean.mode_volets
    name: Volet
    icon: mdi:alpha-m-box
    state:
      - operator: '=='
      - value: 'on'
        icon: mdi:alpha-a-box
    styles:
      card:
        - width: 100px
        - height: 100px
      icon:
        - width: 100%
    tap_action:
      action: toggle
  - type: custom:button-card
    aspect_ratio: 1/1
    entity: input_boolean.presence
    name: Présence
    icon: mdi:alpha-p-box
    state:
      - operator: '=='
      - value: 'on'
        icon: mdi:alpha-a-box
    styles:
      card:
        - width: 100px
        - height: 100px
      icon:
        - width: 100%
    tap_action:
      action: toggle
title: Modes
columns: 4

j’ai quand même 2 autres questions :

je ne vois pas de notion de couleur pour les icones, comment la changer
comment faire un cadre pour la carte ?

Cleya · Juillet 19, 2024, 12:54

Je te montre ça dans la soirée

romu044 · Juillet 19, 2024, 12:55

pour la couleur j’ai ajouté

name: Présence
icon: mdi:alpha-a-box
color: red
state:
  - operator: '=='
  - value: 'on'
    icon: mdi:alpha-p-box
    color: green

Pour le « on » j’ai bien du vert, mais j’ai du bleu pour le « off »

Cleya · Juillet 19, 2024, 1:04

Il faut que tu détermines la couleur par défaut dans styles: icon

styles:
  card:
    - width: 100px
    - height: 100px
    - border: 2px lightgray 
  icon:
    - width: 100%
    - color: yellow

Sous width: 100% tu ajoutes une ligne (au même niveau) color: yellow par exemple.

romu044 · Juillet 19, 2024, 1:11

ok, mais à « on » ou « off » c’est toujours jaune

type: custom:button-card
aspect_ratio: 1/1
entity: input_boolean.presence
name: Présence
icon: mdi:account-off
state:
  - operator: '=='
  - value: 'on'
    icon: mdi:account
    color: green
styles:
  card:
    - width: 100px
    - height: 100px
  icon:
    - width: 100%
    - color: yellow
tap_action:
  action: toggle

Cleya · Juillet 19, 2024, 1:14

state:
  - operator: '=='
  - value: 'on'
    icon: mdi:account
    styles:
      icon:
        - color: green

Là ça devrait être bon

Gardes bien la mise en forme avec les tirets.

romu044 · Juillet 19, 2024, 1:26

Impeccable, ça fonctionne Merci.

reste le cadre de la carte grille

Cleya · Juillet 19, 2024, 1:31

Pour un cadre autour de chaque button-card, tu ajoutes simplement une bordure (border) en précisant l’épaisseur en pixel et la couleur.
Pour un cadre englobant le titre et les deux button-card il faut soit passer par card-mod, soit créer une button-card avec des custom_fields pour chaque bouton.

Cleya · Juillet 19, 2024, 1:42

Pour revenir à un input_select, ça peut avoir un intérêt si tu as plus de deux modes : par exemple un mode manuel, un mode automatique quand c’est une journée travaillée, un mode automatique pour les journées chômées (WE), etc.
Si tu as un besoin de ce type avec le changement de valeur à chaque appui sur le bouton (et donc le changement de valeur de l’input_select), dis le moi et je te ferai un exemple.
Pour un button-card avec des custom_fields par bouton, je peux te faire un exemple aussi.

romu044 · Juillet 19, 2024, 1:48

Oui j’aimerais un cadre englobant le titre et les deux button-card, mais je ne comprends pas card-mod, j’ai trouvé « custom:mod-card », mais pas mieux j’arrive à pas grand chose

Cleya · Juillet 19, 2024, 1:54

A mon sens, il vaut mieux faire une seule button-card avec deux custom_fields. Tu n’auras plus besoin de carte grille et tu auras la possibilité de tout gérer simplement, les custom _fields ayant les mêmes propriétés que la button-card les contenants. Je te fais un exemple d’ici 1 heure environ. Là je finis (ou je commence) ma sieste.

Cleya · Juillet 19, 2024, 4:04

Voilà un exemple :
essai
La carte conteneur a une bordure en 3D (impression de relief) dont l’épaisseur est réglable avec une ombre portée, réglable elle aussi. Tout est configurable, la couleur de fond, le nom (mode), sa couleur, la taille de police, l’écriture en gras (bold), la position dans la carte, etc.
La carte conteneur contient deux custom_fields (bouton_1 et bouton_2) qui sont configurables individuellement de la même manière que la carte conteneur et leurs positions sont déterminées dans les styles (custom_fields) en fin de code.

Le code de la carte :

type: custom:button-card
name: Mode
custom_fields:
  bouton_1:
    card:
      type: custom:button-card
      aspect_ratio: 1/1
      entity: input_boolean.essai_romu044_1
      name: Manuel
      icon: mdi:alpha-m-box
      state:
        - operator: '=='
        - value: 'on'
          icon: mdi:alpha-a-box
          name: Automatique
          styles:
            icon:
              - color: rgba(0,128,0,1.0)
      styles:
        card:
          - background-color: rgba(0,0,0,0.8)
          - border: 1px inset rgba(211,211,211,0.5)
          - box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
          - width: 100px
          - height: 100px
        icon:
          - width: 100%
          - color: rgba(255,255,0,1.0)
        name:
          - color: rgba(255,255,255,0.8)
          - font-size: 0.8em
          - padding-bottom: 4px
      tap_action:
        action: toggle
  bouton_2:
    card:
      type: custom:button-card
      aspect_ratio: 1/1
      entity: input_boolean.essai_romu044_2
      name: Absent
      icon: mdi:alpha-a-box
      state:
        - operator: '=='
        - value: 'on'
          icon: mdi:alpha-p-box
          name: Présent
          styles:
            icon:
              - color: rgba(0,0,255,1.0)
      styles:
        card:
          - background-color: rgba(0,0,0,0.8)
          - border: 1px inset rgba(211,211,211,0.5)
          - width: 100px
          - height: 100px
        icon:
          - width: 100%
          - color: rgba(255,0,0,1.0)
        name:
          - color: rgba(255,255,255,0.8)
          - font-size: 0.8em
          - padding-bottom: 4px
      tap_action:
        action: toggle
styles:
  card:
    - width: 230px
    - height: 140px
    - border: 2px outset rgba(32,32,32,0.5)
    - box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
    - background-color: rgba(0,0,0,0.8)
  name:
    - font-size: 0.9em
    - font-weight: bold
    - justify-self: start
    - align-self: start
    - color: rgba(255,255,255,0.8)
    - margin-top: '-3px'
    - padding-left: 10px
  custom_fields:
    bouton_1:
      - position: absolute
      - top: 28px
      - left: 10px
    bouton_2:
      - position: absolute
      - top: 28px
      - left: 115px

Si tu as des questions, n’hésite pas.

romu044 · Juillet 20, 2024, 8:26

@Cleya comme d’hab super.
J’ai pas de question pour le moment, surement quand j’essayerais de faire une nouvelle carte .
Encore merci.