Files
Home-Assistant-Configs/bubble/Popup Temperature Button/import.yaml

56 lines
1.8 KiB
YAML

popup_temperature_button:
name: Popup Temperature Button
version: '1.0'
creator: Tony Stork
supported:
- button
description: Will turn the button red if the room is too hot, cyan if too cold, otherwise default style applies
code: |-
${(() => {
const hot = hass?.states[this.config?.popup_temperature_button?.hot_entity]?.state || '';
const cold = hass?.states[this.config?.popup_temperature_button?.cold_entity]?.state || '';
let bg_color = 'var(--background-color-2)';
let hot_color = 'var(--error-color)';
let cold_color = 'var(--cyan-color)';
// Main button background
const mainButton = card?.querySelector('.bubble-button-background');
if (mainButton) {
mainButton.style.opacity = '1';
if (hot === 'on') {
mainButton.style.backgroundColor = hot_color;
} else if (cold === 'on') {
mainButton.style.backgroundColor = cold_color;
} else {
mainButton.style.backgroundColor = bg_color;
}
mainButton.style.transition = 'background-color 1s';
}
// Unavailable state
if (mainButton && state === 'unavailable') {
mainButton.classList.add('is-unavailable');
} else if (mainButton) {
mainButton.classList.remove('is-unavailable');
}
// No CSS string needed
return '';
})()}
editor:
- type: expandable
title: Entity Configuration
icon: mdi:format-list-bulleted
schema:
- name: hot_entity
label: Hot Entity
selector:
entity:
device_class: heat
- name: cold_entity
label: Cold Entity
selector:
entity:
device_class: cold