Mon problème
Bonjour, auparavant sous eeDomus et maintenant (débutant) sous HA depuis 6 mois.
dans mes dashboards, j’utilise des templates en mode yaml et j’ai dessiné un style d’UI interface réutilisable pour tout mes objets domotiques:
- lumières avec sans minuterie, commande journalière ou sur événements.
- volets roulants.
- modules raspberry pi et autres.
Aujourd’hui, je tente de réaliser une UI pour un thermostat en utilisant la custom:slider-button-card. J’ai un problème dans l’utilisation de cette carte pour le passage de variables tel que ci-dessous.
LE DASHBOARD
title: Dev Thermo
button_card_templates: !include_dir_merge_named ../me-templates/
views:
- title: Dev Thermo
path: dev_thermo
panel: false # true = toute la largeur ecran
cards:
- type: grid
columns: 1
square: false
cards:
- type: custom:button-card
template: thermo_main_ui
variables:
var_name: "Salle de Bains"
var_index: "tst"
var_switch: switch.fgw_04
LE TEMPLATE
thermo_main_ui:
styles:
grid:
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr
- grid-template-areas: '"west east"'
card:
- padding: 0px
- background-color: 'rgba(var(--color-theme),0.05)'
- border-radius: 8px 8px 8px 8px
- place-self: center
- height: 45px
custom_fields:
west: # partie AVEC template 'thermo_slider' et variables: var_index etc.
card:
type: custom:button-card
template: thermo_slider # with range background color
variables:
var_name: "[[[ return variables.var_name]]]"
var_switch: "[[[ return variables.var_switch]]]"
var_index: "[[[ return variables.var_index]]]"
east: # partie SANS template, avec variables: var_index etc.
card:
type: custom:slider-button-card # no range background color
entity: "[[[ return 'input_number.thermo_val_temps_' + variables.var_index]]]"
show_name: false
show_state: false
compact: true
slider:
direction: left-right
background: gradient
icon:
show: false
tap_action:
action: more-info
action_button:
show: false
thermo_slider:
template: slider_slider
custom_fields:
slider:
card:
type: custom:slider-button-card
entity: "[[[ return 'input_number.thermo_val_temps_' + variables.var_index]]]"
name: Salle de Bains
show_name: false
show_state: false
compact: true
slider:
direction: left-right
background: solid
use_percentage_bg_opacity: false
use_state_color: false
show_track: false
icon:
icon: mdi:radiator-off
show: false
tap_action:
action: call-service
service: switch.toggle
service_data:
entity_id: "[[[ return variables.var_switch]]]"
action_button:
mode: custom
tap_action:
action: none
show: false
style: |
:host {
{% set temp = states("input_number.thermo_val_temps_tst") | float %}
{% if temp < 20.0 %}
--slider-color: #3c9ab2 !important;
{% elif temp < 21.0 %}
--slider-color: #71b3c2 !important;
{% elif temp < 22.0 %}
--slider-color: #9ebe91 !important;
{% elif temp < 23.0 %}
--slider-color: #e8c520 !important;
{% elif temp < 24.0 %}
--slider-color: #e29e00 !important;
{% elif temp < 25.0 %}
--slider-color: #ea5c00 !important;
{% elif temp < 26.0 %}
--slider-color: red !important;
{% endif %}
}
slider_slider:
styles:
grid:
- grid-template-columns: 1fr
- grid-template-rows: 1fr
- grid-template-areas: '"slider"'
- column-gap: 5px
- row-gap: 0px
- border: solid 0px
- border-color: "#000"
- margin: 0px 0px
card:
- border-radius: 14px 8px 8px 14px
- box-shadow: none
- padding: 0px
custom_fields:
slider:
- box-shadow: none
- padding: 0px
Tout ce qui précède fonctionne parfaitement en ayant installé :
- custom:button-card
- custom:slider-button-card
En venant au fond du problème, le passage par variables : du var_index qui m’est indispensable pour vectoriser mes custom:slider-button-card est fonctionnel pour le champ entity mais ne l’est plus si je l’utilise pour le paramètre style: du slider.
Est fonctionnel
style: |
:host {
{% set temp = states("input_number.thermo_val_temps_tst") | float %}
N’est plus fonctionnel
style: |
:host {
{% set temp = states("[[[ return 'input_number.thermo_val_temps_' + variables.var_index]]]") | float %}
Est-ce des erreurs de syntaxe ou y-a-t’il une solution ?
Merci de pouvoir m’aider sur ce sujet exposé, j’ai exploré sur les forums mais je n’ai pas trouvé de situation similaires. Que ce soit avec decluttering-card, card-mod ou anchors
Cordialement.
Résultat de l’UI slider thermostat
Slider de gauche pour 20degrés, sur la droite slider-card de base(original)
Slider de gauche pour 22 degrés, sur la droite slider-card de base(original)
Couleur de bleu à rouge en fonction de la température (par pas de 1°c)
Ma configuration
| version | core-2023.11.2 |
|---|---|
| installation_type | Home Assistant OS |
| dev | false |
| hassio | true |
| docker | true |
| user | root |
| virtualenv | false |
| python_version | 3.11.6 |
| os_name | Linux |
| os_version | 6.1.59 |
| 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.33.0 |
| Stage | running |
| Available Repositories | 1381 |
| Downloaded Repositories | 21 |
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 11.1 |
|---|---|
| update_channel | stable |
| supervisor_version | supervisor-2023.12.1 |
| agent_version | 1.6.0 |
| docker_version | 24.0.6 |
| disk_total | 30.8 GB |
| disk_used | 8.0 GB |
| healthy | true |
| supported | true |
| board | ova |
| supervisor_api | ok |
| version_api | ok |
| installed_addons | Duck DNS (1.15.0), Z-Wave JS UI (3.3.1), Studio Code Server (5.15.0), File editor (5.7.0), Samba share (12.1.0), Hikvision Doorbell (3.0.14), Mosquitto broker (6.4.0), AppDaemon (0.16.3), ZeroTier One (0.18.0), Advanced SSH & Web Terminal (17.0.4) |
Dashboards
| dashboards | 25 |
|---|---|
| resources | 16 |
| views | 41 |
| mode | storage |
Recorder
| oldest_recorder_run | January 21, 2024 at 16:51 |
|---|---|
| current_recorder_run | January 31, 2024 at 10:50 |
| estimated_db_size | 142.31 MiB |
| database_engine | sqlite |
| database_version | 3.41.2 |
