Création d'un minuteur

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) :

chrome_Bb0H364rEa

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
1 « J'aime »

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.

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

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 :
chrome_x1ekbCTyeG

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

1 « J'aime »

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

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>`
    ]]]

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

Merci à vous pour vos réponses.

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

chrome_Qs9ymANs4Q

2 « J'aime »

Parfait !

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

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)

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…

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

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

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

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


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

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 )