Création d'un minuteur

fabb24 · Août 26, 2024, 3:14

Bonjour,

Mon problème

Je débute sur HA, et cherche à réaliser un minuteur qui est réglable directement via le dashboard, permettant d’activer une prise pendant un temps déterminé.

Le but étant de pouvoir régler un minuteur entre 1 et 20 minutes pour activer un petit chauffage soufflant électrique dans une salle de bain branché via une prise électrique connectée en zigbee.

J’ai réussi à tout paramétrer comme je le souhaite, et tout est fonctionnel, mais maintenant je n’arrive pas à mettre en forme une « belle » carte permettant de contrôler cet ensemble.

Voila où j’en suis :
chrome_uY5vsemziO

La carte 1 me permet d’activer/désactiver le soufflant et de voir le temps restant du minuteur avant coupure.
le code de cette carte est :

entity:
  - switch.0x00124b0024caab80
type: custom:timer-bar-card
icon: mdi:fan
name: Soufflant SDB
mushroom: null
duration:
  entity: input_number.timer_soufflant_sdb
  units: minutes
sync_issues: ignore
bar_direction: rtl
bar_background: '#2980b9'
bar_foreground: '#1c2833'
tap_action:
  action: call-service
  service: script.timer_soufflant_sdb

La carte 2 regroupe :

l’état de la prise connectée
Le timer (curseur) me permettant de régler la durée de mon minuteur
Et l’état actif ou non de mon automatisme permettant de couper le soufflant.

le code de cette carte est :

type: entities
entities:
  - entity: switch.0x00124b0024caab80
  - entity: input_number.timer_soufflant_sdb
  - entity: automation.timer_soufflant_sdb

Mon souhait serait de fusionner ces 2 cartes afin d’obtenir quelques chose de plus logique à utiliser. Dans l’état actuel avoir le statu dans la carte 1 et le réglage dans la carte 2 n’est pas du tout intuitif.
Idéalement j’aimerais avoir quelque chose dans ce style (montage photoshop) :

Mais je ne sais pas comment mis prendre pour mixer ces 2 éléments.
Si vous pouviez me guider sur cette étape cela serait fort aimable !

Merci

Ma configuration

System Information

version	core-2024.8.2
installation_type	Home Assistant OS
dev	false
hassio	true
docker	true
user	root
virtualenv	false
python_version	3.12.4
os_name	Linux
os_version	6.6.46-haos
arch	x86_64
timezone	Europe/Paris
config_dir	/config

Home Assistant Community Store

GitHub API	ok
GitHub Content	ok
GitHub Web	ok
GitHub API Calls Remaining	5000
Installed Version	1.34.0
Stage	running
Available Repositories	1385
Downloaded Repositories	14

Home Assistant Cloud

logged_in	false
can_reach_cert_server	ok
can_reach_cloud_auth	ok
can_reach_cloud	ok

Home Assistant Supervisor

host_os	Home Assistant OS 13.1
update_channel	stable
supervisor_version	supervisor-2024.08.0
agent_version	1.6.0
docker_version	26.1.4
disk_total	30.8 GB
disk_used	7.3 GB
healthy	true
supported	true
host_connectivity	true
supervisor_connectivity	true
ntp_synchronized	true
virtualization	kvm
board	ova
supervisor_api	ok
version_api	ok
installed_addons	File editor (5.8.0), Studio Code Server (5.15.0), Terminal & SSH (9.14.0), Matter Server (6.4.1), Samba share (12.3.2), AirCast (4.2.1), Mosquitto broker (6.4.1), Zigbee2MQTT (1.39.1-1)

Dashboards

dashboards	4
resources	10
views	10
mode	storage

Recorder

oldest_recorder_run	18 août 2024 à 18:41
current_recorder_run	23 août 2024 à 09:07
estimated_db_size	131.42 MiB
database_engine	sqlite
database_version	3.45.3

Spotify

api_endpoint_reachable	ok

BBE · Août 26, 2024, 3:23

Il te faut utiliser stack-in-card disponible dans HACS pour fusionner plusieurs cartes en une seule.

Tu peux regarder dans ma présentation le fil dédié à ma room-card, qui est un exemple d’utilisation de cette carte.

WarC0zes · Août 26, 2024, 3:30

Salut,
comme le mentionne @BBE , avec vertical-stack-in-card.

exemple :

type: custom:vertical-stack-in-card
cards:
  - type: custom:timer-bar-card
    entity:
      - switch.0x00124b0024caab80
    icon: mdi:fan
    name: Soufflant SDB
    mushroom: null
    duration:
      entity: input_number.timer_soufflant_sdb
      units: minutes
    sync_issues: ignore
    bar_direction: rtl
    bar_background: '#2980b9'
    bar_foreground: '#1c2833'
    tap_action:
      action: call-service
      service: script.timer_soufflant_sdb
  - type: entities
    entities:
      - entity: switch.0x00124b0024caab80
      - entity: input_number.timer_soufflant_sdb
      - entity: automation.timer_soufflant_sdb

fabb24 · Août 26, 2024, 3:58

Merci de votre aide !

J’ai installé Vertical Stack In Card et j’arrive à ce résultat (qui ce rapproche de ce que je souhaite)

Savez vous pourquoi il y a la ligne de la carte 1 visible au centre de la carte :

type: custom:vertical-stack-in-card
cards:
  - type: custom:timer-bar-card
    entity:
      - switch.0x00124b0024caab80
    icon: mdi:fan
    name: Soufflant SDB
    mushroom: null
    duration:
      entity: input_number.timer_soufflant_sdb
      units: minutes
    sync_issues: ignore
    bar_direction: rtl
    bar_background: '#2980b9'
    bar_foreground: '#1c2833'
    tap_action:
      action: call-service
      service: script.timer_soufflant_sdb
  - type: entities
    entities:
      - entity: input_number.timer_soufflant_sdb
        name: Réglage Timer
        icon: mdi:timer

GDX2 · Août 26, 2024, 7:22

Salut,
J’ai quelque chose de similaire mais avec une carte Custom Button card

type: custom:button-card
entity: switch.module_extracteur_sdb_tuya
icon: mdi:fan
name: Extracteur SDB
aspect_ratio: 2/1
styles:
  name:
    - font-weight: bold
    - position: absolute
    - left: 10%
    - top: 10%
    - animation: |
        [[[
          if (states['switch.module_extracteur_sdb_tuya'].state == 'on') return "blink 1s infinite";
        ]]]
    - color: |
        [[[
          if (states['switch.module_extracteur_sdb_tuya'].state == 'on') return "red";
          return "gray";
        ]]]
  img_cell:
    - justify-content: start
    - align-items: start
    - margin: none
    - align-self: stretch
    - text-align: stretch
    - position: absolute
    - left: 10%
    - top: 22%
    - width: 60%
    - height: 60%
  icon:
    - animation: |
        [[[
          if (states['switch.module_extracteur_sdb_tuya'].state == 'on') return "rotating 0.5s linear infinite";
        ]]]
    - color: |
        [[[
          if (states['switch.module_extracteur_sdb_tuya'].state == 'on') return "red";
          return "gray";
        ]]]
  custom_fields:
    humidity:
      - position: absolute
      - left: 5%
      - top: 85%
    tempsrelance:
      - position: absolute
      - left: 50%
      - top: 20%
    relance:
      - left: 40%
      - top: 40%
custom_fields:
  tempsrelance:
    card:
      type: custom:slider-entity-row
      entity: input_number.temps_relance_extract_sdb
      full_row: true
      hide_state: false
    overflow: unset
  relance:
    card:
      type: custom:button-card
      entity: script.manu_extract_sdb
      icon: mdi:fan-clock
      card_mod:
        style: |
          ha-card {
            border: none;
            background: none;
          }
      show_name: false
      size: 30%
      hold_action:
        action: call-service
        service: script.toggle
        service_data:
          entity_id: script.manu_extract_sdb
  humidity: |
    [[[
      return `<ha-icon
        icon="mdi:water-percent"
        style="width: 25px; height: 25px; color: yellow;">
        </ha-icon><span> ${states['sensor.sonde_temp_humid_sdb_tuya_humidity'].state} %  vs ${states['sensor.sonde_temp_humid_samtjrs_tuya_humidity'].state} %</span>`
    ]]]

WarC0zes · Août 27, 2024, 5:14

Bonjour,

Oui, c’est une bordure par défaut dans le thème de HA. Pour l’enlever, il faut passer par card_mod ( a installer de HACS ).

ajouter ce code a la carte timer-bar-card:

    card_mod:
      style: |
        ha-card {
          border: none;
        }

exemple :

type: custom:vertical-stack-in-card
cards:
  - type: custom:timer-bar-card
    entity:
      - switch.0x00124b0024caab80
    icon: mdi:fan
    name: Soufflant SDB
    mushroom: null
    duration:
      entity: input_number.timer_soufflant_sdb
      units: minutes
    sync_issues: ignore
    bar_direction: rtl
    bar_background: '#2980b9'
    bar_foreground: '#1c2833'
    tap_action:
      action: call-service
      service: script.timer_soufflant_sdb
    card_mod:
      style: |
        ha-card {
          border: none;
        }
  - type: entities
    entities:
      - entity: input_number.timer_soufflant_sdb
        name: Réglage Timer
        icon: mdi:timer

fabb24 · Août 29, 2024, 1:56

Merci à vous pour vos réponses.

Après quelques heures de test, j’ai réussi à obtenir ce que je voulais !

BBE · Août 29, 2024, 2:04

Parfait !

Tu peux éventuellement partager ton code si quelqu’un a le même besoin que toi…

fabb24 · Août 29, 2024, 3:30

Oui bien sur, voici le code :

type: custom:vertical-stack-in-card
cards:
  - type: custom:timer-bar-card
    entity:
      - switch.0x00124b0024caab80
    icon: mdi:fan
    name: Soufflant SDB
    mushroom: null
    duration:
      entity: input_number.timer_soufflant_sdb
      units: minutes
    sync_issues: ignore
    bar_direction: rtl
    bar_background: '#2980b9'
    bar_foreground: '#1c2833'
    tap_action:
      action: call-service
      service: script.timer_soufflant_sdb
    card_mod:
      style: |
        ha-card {
          border: none;
          width: 98%;
          margin: -8px;
        }
  - type: entities
    entities:
      - entity: input_number.timer_soufflant_sdb
        name: Réglage Timer
        icon: none
    card_mod:
      style: |
        ha-card {
          border: none; 
          width: 98%;
          margin: -11px;
        }

Je pinaille mais j’ai 2 choses qui me « chagrine » un peu et que je n’arrive pas à modifier :

La première est esthétique, je trouverais cela super de pouvoir animer le logo du ventilateur quand celui est actif avec une animation de rotation. J’ai vu que cela était possible avec card-mod et l’option « state » et « spin ». Mais je n’arrive pas à intégrer ce code dans le mien.
La deuxième correspond à couleur d’état de ce ventilateur.
En effet ce ventilateur devient bleu lorsque le timer est actif et NON en fonction de l’état réel de la prise.
Imaginons que si je désactive l’automation d’extinction de la prise et que je lance un timer d’une minute, le logo du ventilateur va devenir bleu car le timer se lance. Sauf qu’a la fin de ce timer d’une minute, il serait censé rester bleu (actif), car l’automatisation d’extinction est désactivée et donc la prise n’est PAS éteinte. Or il repasse gris (car le timer est terminé et se logo est lié au time et non à la prise). Ce qui pourrait induire en erreur (en pensant que la prise est éteinte alors que non)

BBE · Août 30, 2024, 7:49

Tu as cité la solution…

Par contre je ne connais pas la timer-bar-card. Donc je ne sais pas si c’est possible, mais il faudrait piloter la couleur de l’icone avec l’état de la prise et pas l’état du timer…

fabb24 · Août 30, 2024, 8:37

Oui mais c’est ça que j’ai du mal à faire avec la timer-bar-card

WarC0zes · Août 30, 2024, 8:46

Il va falloir utiliser carte-mod et inspecter la carte pour trouver quoi mettre pour modifier l’icone.

Tu as un tuto vidéo, sur le deuxième message:

edit:
la carte timer-bar-card, permet de changer d’icône suivant un état :

state_color Optional Change the icon’s color if the timer is active

Francois99 · Janvier 6, 2025, 6:21

Pour fabb24 : Un petit bout de code à partager pour le script ‹ script.timer_soufflant_sdb › ?
Merci

fabb24 · Janvier 6, 2025, 6:48

Le script est tout bête :

alias: timer_soufflant_sdb
sequence:
  - type: toggle
    device_id: dd4c6e961fa4d2250bfb8af2fd751b
    entity_id: 97c63b3dbf5e26cf7a15eb77c18acd
    domain: switch
description: ""
icon: mdi:timer

et l’automatisation est la suivante :

alias: timer_soufflant_sdb
description: ""
mode: single
triggers:
  - entity_id:
      - switch.0x00124b0024caab80
    to: "on"
    for:
      hours: 0
      minutes: "{{ states.input_number.timer_soufflant_sdb.state | int }}"
      seconds: 0
    trigger: state
conditions: []
actions:
  - type: turn_off
    device_id: dd4c6e961fa4d2250bfb8af2fd751b
    entity_id: 97c63b3dbf5e26cf7a15eb77c18acd
    domain: switch

Francois99 · Janvier 6, 2025, 10:07

Oh super !
Merci fabb24, je ne voyais pas le chemin…
Je vais adapter ça demain.
Bonne soirée

roumano · Janvier 7, 2025, 8:42

Bonjour,

J’ai fait la même chose mais je voulais pouvoir afficher plus d’info (mon sèche serviette ne s’allume pas toujours, donc j’affiche la puissance consommer).

On peut pas, de base, utiliser des sensors dans le name, je suis donc passer par custom:config-template-card, du coup, le code donne ça :

type: custom:vertical-stack-in-card
cards:
  - type: custom:config-template-card
    variables:
      POWER: states['sensor.emporiavue2_circuit_5_power'].state
    entities:
      - input_number.sdb
      - sensor.emporiavue2_circuit_5_power
    card:
      type: custom:timer-bar-card
      entities:
        - entity: switch.chauffage_sdb
          name: ${POWER + 'W SdB '}
          translations:
            "off": Pause
      duration:
        entity: input_number.sdb
        units: minutes
      sync_issues: ignore
      bar_direction: rtl
      bar_background: "#2980b9"
      bar_foreground: "#1c2833"
      compressed: true
      tap_action:
        action: toggle
  - type: entities
    entities:
      - entity: input_number.sdb
        type: custom:slider-entity-row
        step: 15
        min: 0
        max: 90
        grow: true
        full_row: true

par contre, il y a un « gros » mais dans ma solution
si on utiliser card_mod dans le custom:timer-bar-card, ça fait un gros glitch (quand le sensor se rafraichit, le dimensionnement de custom:timer-bar-card varie puis revient, ce qui pénible )