Quelle carte pour l’interrupteur d’une prise connectée?

[MilesTEG1]

Quelle carte pour l’interrupteur d’une prise connectée ?

Bonjour
De la même manière que pour l’affichage des valeurs d’énergie consommées, je viens chercher de l’inspiration pour faire des interrupteurs dans HA pour allumer et éteindre ce qui est branché sur une prise connectée.
Actuellement j’ai ce qui suit mais je n’en suis guère satisfait.

C’est un peu grossier.
J’ai une couleur différente quand la prise est allumée et sur la carte du haut j’ai aussi la valeur de la puissance soutirée.

code carte haut

type: custom:button-card
name: Coin TV
entity: switch.smartplug_cointv
label: >
  [[[ return 'Consommation : ' + states['sensor.smartplug_cointv_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: 120%
  label:
    - color: gray
    - font-size: 80%
  icon:
    - color: |
        [[[
          if (states['sensor.smartplug_cointv_power'].state > 90) return "red";
          if (states['sensor.smartplug_cointv_power'].state > 75) return "rgb(252, 152, 3)";
          if (states['sensor.smartplug_cointv_power'].state > 30) return "#0ec91e";
          if (states['sensor.smartplug_cointv_power'].state > 10) return "#6054ff";
          if (states['sensor.smartplug_cointv_power'].state > 0) return "#71e8f5";
          return "#b8b8b8";
        ]]]
  card:
    - height: 150px
layout: icon_name_state2nd
tap_action:
  action: toggle
lock:
  enabled: true
  unlock: double_tap

code carte bas

show_name: true
show_icon: true
type: button
tap_action:
  action: toggle
entity: switch.smartplug_cointv
name: CoinTV
icon: mdi:television
show_state: true
icon_height: 40px

Vous utilisez quoi comme carte pour ça ?

Bonne journée

Edit : en fonctionnement :

[pascal_ha]

Bonjour

J’utilise ce code :

type: custom:button-card
entity: switch.plug_18
name: P18 - HAOS
aspect_ratio: 3/1
label: >
  [[[ return 'Consommation : ' + states['sensor.puissance_plug_18'].state + '
  W'; ]]]
tap_action:
  action: toggle
show_state: true
show_last_changed: false
show_label: true
styles:
  card:
    - background-color: auto
    - border-radius: 10%
    - filter: opacity(70%)
    - padding: 2px
    - text-transform: null
    - font-size: 11px
state:
  - value: 'on'
    icon: mdi:home-assistant
    styles:
      card:
        - border: 2px solid green
        - color: green
      name:
        - color: grey
      label:
        - color: gray
        - font-size: 80%
      icon:
        - color: |
            [[[
              if (states['sensor.puissance_plug_18'].state > 90) return "red";
              if (states['sensor.puissance_plug_18'].state > 75) return "rgb(252, 152, 3)";
              if (states['sensor.puissance_plug_18'].state > 30) return "#0ec91e";
              if (states['sensor.puissance_plug_18'].state > 10) return "#6054ff";
              if (states['sensor.puissance_plug_18'].state > 0) return "#71e8f5";
              return "#b8b8b8";
            ]]]
  - value: 'off'
    icon: mdi:home-assistant
    styles:
      card:
        - border: 2px solid grey
      icon:
        - color: grey
  - value: unavailable
    icon: mdi:alert
    styles:
      card:
        - border: 2px solid orange
      icon:
        - color: orange
lock:
  enabled:
    - - - return entity.state === 'on';
  duration: 3
  unlock: double_tap

[MilesTEG1]

Merci @pascal_ha
Comment rend elle en mode sombre ?
En tout cas elle me donne des idées

[pascal_ha]

@MilesTEG1

Comment rend elle en mode sombre ?

Aucune idée, je n’utilise pas le mode sombre.
Il faut essayer et adapter.

[MilesTEG1]

Je testerais prochainement et je posterai une capture

[MilesTEG1]

@pascal_ha
Testé en mode sombre (thème draculaish) :

Ça manque un peu de contraste

Comment faire pour réduire la taille horizontale de la carte ?

[MilesTEG1]

Petite amélioration

Code YAML

type: horizontal-stack
cards:
  - type: custom:button-card
    entity: switch.smartplug_cointv
    name: Prise Coin TV
    aspect_ratio: 2/1
    label: >
      [[[ return 'Consommation : ' +
      states['sensor.smartplug_cointv_power'].state + ' W'; ]]]
    tap_action:
      action: toggle
    show_state: true
    show_last_changed: false
    show_label: true
    styles:
      card:
        - background-color: auto
        - border-radius: 10%
        - filter: opacity(70%)
        - padding: 2px
        - text-transform: null
        - font-size: 11px
    state:
      - value: 'on'
        icon: mdi:television
        styles:
          card:
            - border: 2px solid green
            - color: pink
          name:
            - color: grey
          label:
            - color: gray
            - font-size: 80%
          icon:
            - color: |
                [[[
                  if (states['sensor.smartplug_cointv_power'].state > 120) return "#ff99e6";
                  if (states['sensor.smartplug_cointv_power'].state > 90) return "#ffb399";
                  if (states['sensor.smartplug_cointv_power'].state > 60) return "#99ff99";
                  if (states['sensor.smartplug_cointv_power'].state > 30) return "#9999ff";
                  if (states['sensor.smartplug_cointv_power'].state > 0) return "#99ffff";
                  return "#cccccc";
                ]]]
      - value: 'off'
        icon: mdi:television-off
        styles:
          card:
            - border: 2px solid grey
          icon:
            - color: grey
      - value: unavailable
        icon: mdi:alert
        styles:
          card:
            - border: 2px solid orange
          icon:
            - color: orange
    lock:
      enabled:
        - - - return entity.state === 'on';
      duration: 3
      unlock: double_tap
  - type: custom:button-card
    color_type: blank-card