Re,
Amélioration du “state badge” custom button-card à x états avec un input select
info 1 > clic > info 2 > clic info x > clic > retour à l’info 1
le double clic déclenche le more info sur toutes les entités
info 1 > clic > info 2 > clic info x > clic > retour à l’info 1
le double clic déclenche le more info sur toutes les entités
Code de la carte
type: custom:button-card
entity: input_select.toggle_temp_hum_lux_esp1_entree
style:
top: 64.5%
left: 70.7%
tap_action:
action: call-service
service: input_select.select_next
service_data:
entity_id: input_select.toggle_temp_hum_lux_esp1_entree
double_tap_action:
action: more-info
entity: |
[[[
const toggle = states['input_select.toggle_temp_hum_lux_esp1_entree'];
if (!toggle) return 'sensor.esp1_entree_temperature1';
switch(toggle.state) {
case 'Lumiere':
return 'sensor.esp1_entree_lumiere1';
case 'Humidite':
return 'sensor.esp1_entree_humidite1';
case 'Temperature':
default:
return 'sensor.esp1_entree_temperature1';
}
]]]
show_icon: false
show_name: false
show_state: true
state_display: |
[[[
const temp = states['sensor.esp1_entree_temperature1'];
const lux = states['sensor.esp1_entree_lumiere1'];
const humidity = states['sensor.esp1_entree_humidite1'];
const toggle = states['input_select.toggle_temp_hum_lux_esp1_entree'];
if (!temp || !lux || !humidity || !toggle) return '-';
const tempValue = parseFloat(temp.state);
const luxValue = parseFloat(lux.state);
const humidityValue = parseFloat(humidity.state);
if (isNaN(tempValue) || isNaN(luxValue) || isNaN(humidityValue)) return '-';
switch(toggle.state) {
case 'Lumiere':
return Math.round(luxValue) + 'lx';
case 'Humidite':
return humidityValue.toFixed(0) + '%';
case 'Temperature':
default:
return tempValue.toFixed(1) + '°';
}
]]]
styles:
card:
- border-radius: 50%
- height: 38px
- width: 38px
- display: flex
- align-items: center
- justify-content: center
- background-color: var(--label-badge-background-color)
- box-shadow: var(--ha-card-box-shadow)
- border: 2px solid var(--primary-color)
state:
- font-size: 13px
- text-align: center
- color: var(--primary-text-color)
card_mod:
style: |
:host {
--border-color:
{% set temp = states('sensor.esp1_entree_temperature1') | float %}
{% set lux = states('sensor.esp1_entree_lumiere1') | int %}
{% set humidity = states('sensor.esp1_entree_humidite1') | float %}
{% set toggle = states('input_select.toggle_temp_hum_lux_esp1_entree') %}
{% if toggle == 'Lumiere' %}
{% if lux <= 50 %}
black
{% elif lux <= 250 %}
orange
{% else %}
white
{% endif %}
{% elif toggle == 'Humidite' %}
{% if humidity <= 30 %}
red
{% elif humidity <= 40 %}
orange
{% elif humidity <= 60 %}
green
{% elif humidity <= 70 %}
blue
{% else %}
purple
{% endif %}
{% else %}
{% if temp <= 15 %}
skyblue
{% elif temp <= 20 %}
green
{% elif temp <= 25 %}
orange
{% elif temp <= 29 %}
red
{% else %}
brown
{% endif %}
{% endif %};
}
ha-card {
border: 2px solid var(--border-color) !important;
}
cdt