Custom:button-card et input_boolean.toggle

Bonjour à tous,

J’ai un input boolean qui me permet de savoir si je dois gérer automatiquement mon volet roulant. Je souhaite donc ajouter un bouton pour afficher l’état de cet input et de pouvoir cliquer dessus pour passer de on à off et inversement. J’ai donc écrit le code suivant mais cela ne marche pas.

Quand je suis à off, le clique passe bien mon icon à jaune sans changer l’état du boolean puis aprés les clique suivant ne font plus rien… Ca doit être une connerie toute simple mais là j’ai beau relire mon YAML, je ne vois pas mon erreur.

type: custom:button-card
show_name: false
entity: input_boolean.cover_auto_etage_couloir
aspect_ratio: 1/1
icon: mdi:weather-sunset-up
state:
  - value: 'off'
    styles:
      icon:
        - color: auto
  - value: 'on'
    styles:
      icon:
        - color: |
            [[[ return `rgba(var(--color-yellow), 1)`; ]]]
tap_action:
  action: call-service
  service: input_boolean.toggle
  service_data:
    entity_id: entity

Merci d’avance et bonne journée.

Salut,

Vu comme ça c’est pas déconnant.
Tu as vérifié que la première bascule fonctionne avec le service appelé depuis les outils dev ? Et que la seconde aussi ?

Avec cet appel je passe bien du on à off puis du off à on :

ok, donc vire la custo ‹ state › de la carte temporairement et compare

Quand je vire la partie state, cella fonctionne !!!

Bon par défaut chez moi, c’est jaune quand on, c’est ton cas aussi ?

Oui mais là je voulais customiser le truc. J’ai ca du coup actuellement (un jaune ou un bleu au lieu du noir) :

Mais je veux à la place de juste changer la couleur de l’icone faire comme sur mes boutons de favoris sur l’accueil et avoir le fond d’une couleur et l’icone d’une couleur si activé et noir sur fond blanc si non activé

J’ai pas mushroom ici mais je fais comme ça de mon coté pour jaune (issue du thème)

      type: custom:button-card
      state:
        - value: 'on'
          styles:
            icon:
              - color: var(--paper-item-icon-active-color)

Pas besoin de reconvertir la couleur

Merci pour tes conseils @Pulpy-Luke !!! Il fallait que je définisse mes styles par défaut puis le style du on. Avec les variables, je peux définir la couleur et donc si on est en automatisation été ou hiver :+1:

Par contre je ne sais pas ce qu’est le mushroom dont tu parles.

Voici le code qui fonctionne :

card:
  show_name: false
  type: "custom:button-card"
  entity: "[[[ return variables.automatic ]]]"
  aspect_ratio: 1/1
  icon: mdi:weather-sunset-up
  styles:
    icon:
      - color: black
  state:
    - value: 'on'
      styles:
        card:
          - background-color: "[[[ return `rgba(var(--color-${variables.automatic_color}), var(--opacity-bg))`;]]]"
        icon:
          - color: >
              [[[
                if (hass.themes.darkMode){
                  return "#FFFFFF";
                } else {
                  return `rgba(var(--color-${variables.automatic_color}), 1)`;
                }
              ]]]
  tap_action:
    action: "call-service"
    service: "input_boolean.toggle"
    service_data:
      entity_id: entity

je parle du thème
Mushroom ou minimalism peut-être ?

Je m’inspire de minimalist comme thème mais je fais tous moi même. Là c’est un premier écran pour les volets mais visuellement il ne me plait pas encore.

Voila un écran dont je suis a peu prêt fière :

2 « J'aime »

Je suis loin d’avoir un truc aussi sympa de mon coté :sweat_smile:

Merci :slight_smile: J’ai à cœur de faire un truc jolie et fonctionnel. Mais du coup je passe des dizaines d’heures pour chaque écran au minimum !!!

Si tu pouvais partager le button card de Filtration et Polaris (surtout avec les horaires), ce serait cool).

Moi, ca donne cela, c’est moins beau…

Pour les boutons, ce sont de simples custom :

button_pool_action:
  variables:
    schedules: "-"
  show_name: true
  show_label: true
  show_icon: true
  styles:
    card:
      - padding: "5px 0px"
      - box-shadow: none
      - background-color: var(--primary-background-color)
    grid:
      - grid-template-areas: "'n' 'l' 'i' 'schedules'"
      - grid-template-columns: "1fr"
      - grid-template-rows: "min-content min-content min-content min-content"
    name:
      - font-size: "12px"
      - place-self: center
      - font-weight: "bold"
    label:
      - font-size: "10px"
      - place-self: center
      - filter: "opacity(40%)"
    icon:
      - color: var(--primary-text-color)
    custom_fields:
      schedules:
        - font-size: "10px"
        - place-self: center
        - filter: "opacity(40%)"
  state:
    - value: 'on'
      styles:
        icon:
          - color: var(--accent-color)
  custom_fields:
    schedules: "[[[ return `${variables.schedules}`; ]]]"

Que j’appel de la façon suivante :

card:
  type: custom:button-card
  template: button_pool_action 
  entity: switch.piscine_filtration
  name: Filtration
  icon: mdi:engine
  label: "[[[ return states['sensor.pool_pump_duration'].state; ]]]"
  variables:
    schedules: "[[[ return states['sensor.pool_pump_hours'].state; ]]]"

Les heures de début et de fin sont calculées chaque jour à minuit à partir de la température de la veille.

1 « J'aime »

J’aime bien le rendu de ce(s) thème(s) mais sur un écran 15"/FHD qui me sert de point de contrôle, c’est beaucoup trop petit.
Donc tout réécrire, c’est mort pour moi