Autoentities avec une carte button-card qui contient des templates pour le label et la couleur de l'icone

Bonjour,

Mon problème

Je n’arrive pas à faire une carte avec autoentities pour gérer les multiples prises connectées.
J’ai cette carte de base :

code yaml
type: custom:button-card
name: Smart Plug Laser Bureau
entity: switch.smartplug_laser_bureau
label: >
  [[[ return 'Puissance : ' +
  states['sensor.smartplug_laser_bureau_power'].state + ' W'; ]]]
show_name: true
show_last_changed: false
show_state: false
show_label: true
color: auto
color_type: icon
icon: mdi:power-socket-fr
styles:
  name:
    - font-size: 95%
    - letter-spacing: 0em
    - font-familly: cursive
    - justify-self: start
    - padding: 0px 0px
  label:
    - color: gray
    - font-size: 90%
    - justify-self: left
    - padding: 0px 0px
  icon:
    - color: |
        [[[
          if (states['sensor.smartplug_laser_bureau_power'].state > 90) return "red";
          if (states['sensor.smartplug_laser_bureau_power'].state > 75) return "rgb(252, 152, 3)";
          if (states['sensor.smartplug_laser_bureau_power'].state > 30) return "#0ec91e";
          if (states['sensor.smartplug_laser_bureau_power'].state > 10) return "#6054ff";
          if (states['sensor.smartplug_laser_bureau_power'].state > 0) return "#71e8f5";
          return "#b8b8b8";
        ]]]
  card:
    - height: 80px
layout: icon_name_state2nd
tap_action:
  action: toggle
lock:
  enabled: true
  unlock: double_tap

Je ne sais donc pas comment faire pour le code qui génère le label qui me donne la puissance rapportée par la prise, et donc aussi la couleur de l’icône qui dépend de la valeur de la puissance consommée.
Est-ce faisable ? Si oui comment ?

Merci d’avance :wink:
Bonne journée

Salut,

Ben tu utilises cette carte et tu fais un template avec les fonctions. Actuellement, elle ne contient pas de template, juste des expressions pour avoir la puissance dans un label et faire varier la couleur de l’icône. Tu peux donc faire un template à partir de ça avec en variable l’entité de la prise et afficher dans des custom_fields tes différentes prises.

Ha je pensais qu’on appelais template ce que j’avais fait :sweat_smile:
OK.
Mais je n’ai pas trop compris ce que je devais faire…

Tu crées un template de button-card :
Sur le tableau de bord où tu veux mettre ta carte avec les prises connectées, tu cliques sur le crayon en haut à droite :

ensuite tu cliques sur « Ouvrir le menu du tableau de bord » (les trois petits points en haut à droite) :

puis tu cliques sur « Editeur de configuration » :

Tu vas arriver sur une fenêtre de ce type :

Là, avant « views: », tu vas pouvoir créer ton template.

Ton template sera ça :

button_card_templates:
  bouton_prise:
    type: custom:button-card
    show_name: true
    show_last_changed: false
    show_state: false
    show_label: true
    color: auto
    color_type: icon
    icon: mdi:power-socket-fr
    layout: icon_name_state2nd
    tap_action:
      action: toggle
    lock:
      enabled: true
      unlock: double_tap
    styles:
      name:
        - font-size: 95%
        - letter-spacing: 0em
        - font-familly: cursive
        - justify-self: start
        - padding: 0px 0px
      label:
        - color: gray
        - font-size: 90%
        - justify-self: left
        - padding: 0px 0px
      icon:
        - color: |
            [[[
              const power = states[variables.sensor_power]?.state || 0;
              if (power > 90) return "red";
              if (power > 75) return "rgb(252, 152, 3)";
              if (power > 30) return "#0ec91e";
              if (power > 10) return "#6054ff";
              if (power > 0) return "#71e8f5";
              return "#b8b8b8";
            ]]]
      card:
        - height: 80px
    label: |
      [[[
        return 'Puissance : ' + (states[variables.sensor_power]?.state || '0') + ' W';
      ]]]

Tu copies et colles le code du template ci-dessus avant « views » et ton template sera créé. Tu pourras l’utiliser dans une custom:button-card pour ajouter tes prises dans des custom_fields de la manière suivante :

custom_fields:
  prise_1:
    card:
      type: custom:button-card
      template: bouton_prise
      entity: switch.salon_prise_eclairage_aquarium
      variables:
        sensor_power: sensor.salon_prise_eclairage_aquarium_power

Tu détermine simplement l’entité (« switch.salon_prise_eclairage_aquarium ») et la variable (« sensor.salon_prise_eclairage_aquarium_power ») pour chaque prise que tu voudras ajouter.

Il te suffiras ensuite d’ajouter tes différentes prises et de calculer leurs positions verticales.

Le code de la carte :

type: custom:button-card
custom_fields:
  prise_1:
    card:
      type: custom:button-card
      template: bouton_prise
      entity: switch.salon_prise_eclairage_aquarium
      variables:
        sensor_power: sensor.salon_prise_eclairage_aquarium_power
  prise_2:
    card:
      type: custom:button-card
      template: bouton_prise
      entity: switch.salle_a_manger_prise_vaisselier
      variables:
        sensor_power: sensor.salle_a_manger_prise_vaisselier_power
  prise_3:
    card:
      type: custom:button-card
      template: bouton_prise
      entity: switch.cuisine_prise_plan_de_travail
      variables:
        sensor_power: sensor.cuisine_prise_plan_de_travail_power
styles:
  card:
    - border: none
    - border-radius: 0
    - height: 270px
  custom_fields:
    prise_1:
      - position: absolute
      - top: 10px
      - left: 2%
      - width: 96%
    prise_2:
      - position: absolute
      - top: 95px
      - left: 2%
      - width: 96%
    prise_3:
      - position: absolute
      - top: 180px
      - left: 2%
      - width: 96%

Salut,
j’ai pas de solution avec auto-entities et button-card avec deux entités différentes. Il te faudrait utiliser un template dans le filtre de auto-entites, mais je n’y connais rien.

Tu pourrais utiliser décluterring-card ou streamline-card et faire un template de ta carte button-card et l’utiliser dans ton dasboard , juste en mettant les entités de t’es prises

decluterring template:

decluttering_templates:
  prises:
    card:
      type: custom:button-card
      name: '[[name]]'
      entity: '[[switch]]'
      label: |
        [[[ return 'Puissance : ' + states['[[sensor]]'].state + ' W'; ]]]
      show_name: true
      show_last_changed: false
      show_state: false
      show_label: true
      color: auto
      color_type: icon
      icon: mdi:power-socket-fr
      styles:
        name:
          - font-size: 95%
          - letter-spacing: 0em
          - font-familly: cursive
          - justify-self: start
          - padding: 0px 0px
        label:
          - color: gray
          - font-size: 90%
          - justify-self: left
          - padding: 0px 0px
        icon:
          - color: |
              [[[
                if (states['[[sensor]]'].state > 90) return "red";
                if (states['[[sensor]]'].state > 75) return "rgb(252, 152, 3)";
                if (states['[[sensor]]'].state > 30) return "#0ec91e";
                if (states['[[sensor]]'].state > 10) return "#6054ff";
                if (states['[[sensor]]'].state > 0) return "#71e8f5";
                return "#b8b8b8";
              ]]]          
        card:
          - height: 80px
      layout: icon_name_state2nd
      tap_action:
        action: toggle
      lock:
        enabled: true
        unlock: double_tap

le code à utiliser dans le dashboard :

type: custom:decluttering-card
template: prises
variables:
  - switch: switch.0x54ef44100050f9c3
  - sensor: sensor.0x54ef44100050f9c3_power
  - name: Prise salon

Salut @WarC0zes

Pourquoi utiliser une carte custom supplémentaire alors qu’il peut faire son template avec custom:button-card et ne rien avoir besoin d’autre ?

Pour te faire réagir :rofl:
Aucun, intérêt mais tu peut utiliser d’autre carte dans decluterring. Ca servira d’exemple pour d’autre.

1 « J'aime »

Lol, tu vas embrouiller ce pov’ @MilesTEG1 avec ton decluterring-card :grin:

Il y a d’autres cartes que custom:button-card ??? A quoi ça sert ? :crazy_face:

Tu t’en sors avec mes explications @MilesTEG1 ?

À afficher un robot aspirateur avec ça map par exemple :rofl:

Pourquoi utiliser valetudo-map-card ?
button-card ne suffit pas ?

Même pas vu que la bordure qui faisait ch… a été supprimée sans avoir besoin de card-mod (encore une possibilité de custom:button-card)

EDIT : ah oui, j’avais oublié valetudo-map-card :grin: et effectivement il y a plein d’autres custom cards qui sont très utiles ne serait-ce que pour simplifier l’affichage de graphiques.

Sinon :

1 « J'aime »

Pour reprendre le sujet, @MilesTEG1 veut utiliser auto-entities avec button-card et deux entités différentes.

un exemple avec un template auto-entities et bubble-card:

Ça permet de limiter des lignes de codes. Je sais que t’aime avoir des milliers de lignes de codes, mais on n’est pas tous comme toi.

Ca c’est un autre sujet, je ne cautionne pas le systeme de patreon pour avoir des codes de cartes.
C’est comme si tu demandais de l’argent pour montrer les code de button-card que tu fais ou utilise…

Des sous ?!? Non, non, juste l’apéro :grin:

Salut :wave:t2:
Je n’ai pas encore eu le temps de tester vos solutions :blush:
Ça va venir :grin:

Ho punaise ! Il a rendu verrouillé le code des carte si on ne patreon-pas ??
Merde…
J’aimais bien les bubble cards !!!

Par contre c’est où que tu as vu un blocage du code si tu ne payes pas ?

Non, il propose des codes avancés avec son patreon.

1 « J'aime »

Salut :wave:t2:
Je reviens donner des nouvelles :blush:
J’ai commencé hier soir à revoir mes cartes de prises électriques.
Et bien que la politique de bubble card n’est pas fameuse, je vais quand même continuer à les utiliser :sweat_smile:
Ce que je voulais avec la carte burton-card c’était le verrouillage contre le clic accidentel.
La bubble card ne permet pas de le faire mais je peux avoir une invite de confirmation qui me permet d’éviter les clic accidentel :

Bon jusque là, ça va.
Mais pour auto-entities… :rofl:

Quelqu’un sait quel est la variable qui contient l’entité en cours quand on utilise autoentities ?
Car avec ça, je devrais pouvoir adapter le code :wink:
D’ailleurs voici ce que j’ai :

Code YAML
type: custom:bubble-card
card_type: button
button_type: switch
entity: switch.smartplug_bureau
tap_action:
  confirmation:
    text: Allumer/Éteindre la prise ?
  action: toggle
  target:
    entity_id: switch.smartplug_bureau
  show_state: false
button_action:
  tap_action:
    confirmation:
      text: Allumer/Éteindre la prise ?
    action: toggle
    target:
      entity_id: switch.smartplug_bureau
    show_state: false
  double_tap_action:
    action: none
  hold_action:
    action: none
double_tap_action:
  action: none
hold_action:
  action: none
icon: mdi:power-socket-fr
force_icon: false
show_state: true
show_last_changed: true
show_last_updated: false
sub_button:
  - entity: sensor.smartplug_bureau_power
    name: Puissance
    show_name: true
    show_state: true
    show_last_changed: false
    show_attribute: false
    show_background: true
    state_background: false
    visibility:
      - condition: state
        entity: switch.smartplug_bureau
        state: "on"
modules:
  - "!default"
card_layout: large
grid_options:
  rows: auto
  columns: 12
get_state_attribute:
  - entity: sensor.smartplug_bureau_power
flat_style:
  card_styles:
    prime_color:
      - 25
      - 23
      - 140
icon_container_color:
  color: accent
bubble_chips:
  gap: 30
  justify-content: space-evenly
izequbes_custom_colors:
  main_icon:
    background_color: dark-grey
    icon_color: teal
    icon_opacity: 0.9
subbutton_colors:
  subbutton1:
    color: brown
visual_styling_center:
  height_multiplier: 2.1
  inner_padding: 8
  icon_vertical_margin: -4
styles: |
  .bubble-button-background {
    background-color: ${ hass.states['switch.smartplug_bureau'].state === 'on'
        ? 'rgba(0, 255, 255, 0.35)'
        : hass.states['switch.smartplug_bureau'].state === 'off'
          ? 'rgba(30, 30, 30, 0.35)'
          : 'rgba(200, 200, 200, 0.35)'
      } !important;
  }

  .bubble-icon-container{
    opacity: 0.8 !important;
    background-color: rgba(0, 0, 0) !important;
  }

  .bubble-icon {
    color: 
      ${ hass.states['switch.smartplug_bureau'].state === 'on'
        ? 'rgba(0, 255, 255, 0.55)'
        : hass.states['switch.smartplug_bureau'].state === 'off'
          ? 'rgba(30, 30, 30, 0.55)'
          : 'rgba(200, 200, 200, 0.55)'
      } !important;
  }


  .bubble-sub-button-1 > ha-icon {
    color: 
        ${hass.states['sensor.smartplug_bureau_power'].state > 110
          ? 'rgb(255, 0, 212)' 
          : hass.states['sensor.smartplug_bureau_power'].state > 100
          ? 'rgb(255, 0, 0)' 
            : hass.states['sensor.smartplug_bureau_power'].state > 90
            ? 'rgb(252, 152, 3)'
            : hass.states['sensor.smartplug_bureau_power'].state > 80
              ? 'rgb(255, 255, 0)'
              : hass.states['sensor.smartplug_bureau_power'].state > 60
                ? 'rgb(87, 255, 0)'
                : hass.states['sensor.smartplug_bureau_power'].state > 40
                  ? 'rgb(0, 255, 127)'
                  : hass.states['sensor.smartplug_bureau_power'].state > 20
                    ? 'rgb(0, 203, 255)'
                    : hass.states['sensor.smartplug_bureau_power'].state > 10
                      ? 'rgb(0, 77, 255)'
                      : hass.states['sensor.smartplug_bureau_power'].state > 0
                        ? 'rgb(0, 0, 255)'
                        : 'rgb(145, 145, 145)'
        } !important;
  }

  .bubble-sub-button-1 {
    opacity: 0.8 !important;
    background-color: rgb(0, 0, 0) !important;
    font-weight: bold;
    color:
        ${hass.states['sensor.smartplug_bureau_power'].state > 110
          ? 'rgb(255, 0, 212)' 
          : hass.states['sensor.smartplug_bureau_power'].state > 100
          ? 'rgb(255, 0, 0)' 
            : hass.states['sensor.smartplug_bureau_power'].state > 90
            ? 'rgb(252, 152, 3)'
            : hass.states['sensor.smartplug_bureau_power'].state > 80
              ? 'rgb(255, 255, 0)'
              : hass.states['sensor.smartplug_bureau_power'].state > 60
                ? 'rgb(87, 255, 0)'
                : hass.states['sensor.smartplug_bureau_power'].state > 40
                  ? 'rgb(0, 255, 127)'
                  : hass.states['sensor.smartplug_bureau_power'].state > 20
                    ? 'rgb(0, 203, 255)'
                    : hass.states['sensor.smartplug_bureau_power'].state > 10
                      ? 'rgb(0, 77, 255)'
                      : hass.states['sensor.smartplug_bureau_power'].state > 0
                        ? 'rgb(0, 0, 255)'
                        : 'rgb(145, 145, 145)'
        } !important;
  }

J’ai donc un changement de couleur du texte du sous-bouton ainsi que son icône quand la puissance prend des valeurs particulière.
Sachant sur la prise est nommée switch.smartplug_bureau et l’entité de sa puissance est sensor.smartplug_bureau_power.
Vous pensez que c’est possible de faire du auto-entites ?

Le decluttering-card c’est un peu complexe pour moi…

Custom:button-card aussi apparemment :grin: