Compare commits

...

14 Commits

24 changed files with 806 additions and 30 deletions

View File

@@ -1 +1 @@
2025.6.2
2025.7.1

1
.gitignore vendored
View File

@@ -20,6 +20,7 @@
/glances/
/downloads/
/lightwand/
/bubble/Scratchpad/
# ignore any of these files no matter where they are using double *
**.DS_Store

View File

@@ -5587,53 +5587,59 @@
- id: '1722386174249'
alias: Tina Meds Cleanup
description: Handles the setting/clearing of medication configs for Tina
trigger:
- platform: state
entity_id:
triggers:
- entity_id:
- input_boolean.tina_morning_meds_reminder
from: 'on'
to: 'off'
id: morning-reminders-off
alias: Morning reminders off
trigger: state
- alias: Night reminders off
platform: state
entity_id:
- input_boolean.tina_night_meds_reminder
from: 'on'
to: 'off'
id: night-reminders-off
- platform: event
event_type: ios.notification_action_fired
trigger: state
- event_type: ios.notification_action_fired
event_data:
actionName: TINA_MORNING_MEDS_TAKEN
id: morning-taken
alias: Morning taken
trigger: event
- alias: Night taken
platform: event
event_type: ios.notification_action_fired
event_data:
actionName: TINA_NIGHT_MEDS_TAKEN
id: night-taken
trigger: event
- alias: Morning skipped
platform: event
event_type: ios.notification_action_fired
event_data:
actionName: TINA_MORNING_MEDS_SKIPPED
id: morning-skipped
trigger: event
- alias: Night skipped
platform: event
event_type: ios.notification_action_fired
event_data:
actionName: TINA_NIGHT_MEDS_SKIPPED
id: night-skipped
- platform: state
entity_id:
trigger: event
- entity_id:
- person.christina_stork
from: home
id: left
alias: Left
condition: []
action:
trigger: state
- trigger: state
entity_id:
- person.christina_stork
to: Bob Evans
id: at-work
alias: At Work
conditions: []
actions:
- alias: Routing
choose:
- conditions:
@@ -5642,19 +5648,19 @@
- morning-reminders-off
alias: Morning Reminders Off
sequence:
- service: counter.reset
metadata: {}
- metadata: {}
data: {}
target:
entity_id: counter.tina_morning_meds_reminder_count
alias: Reset morning reminder count
- service: script.text_notify
data:
action: counter.reset
- data:
type: alert
who: tina
message: clear_notification
tag: tina-morning-meds
alias: Clear morning notification
action: script.text_notify
- conditions:
- condition: trigger
id:
@@ -5662,66 +5668,66 @@
alias: Night reminders off
sequence:
- alias: Reset night reminder count
service: counter.reset
metadata: {}
data: {}
target:
entity_id: counter.tina_night_meds_reminder_count
- service: script.text_notify
data:
action: counter.reset
- data:
type: alert
who: tina
message: clear_notification
tag: tina-night-meds
alias: Clear night notification
action: script.text_notify
- conditions:
- condition: trigger
id:
- morning-taken
alias: Morning taken
sequence:
- service: input_boolean.turn_on
metadata: {}
- metadata: {}
data: {}
target:
entity_id: input_boolean.tina_morning_meds_taken
alias: Turn on morning meds taken
action: input_boolean.turn_on
- conditions:
- condition: trigger
id:
- night-taken
alias: Night taken
sequence:
- service: input_boolean.turn_on
metadata: {}
- metadata: {}
data: {}
target:
entity_id: input_boolean.tina_night_meds_taken
alias: Turn on night meds taken
action: input_boolean.turn_on
- conditions:
- condition: trigger
id:
- morning-skipped
alias: Morning skipped
sequence:
- service: input_boolean.turn_off
metadata: {}
- metadata: {}
data: {}
target:
entity_id: input_boolean.tina_morning_meds_reminder
alias: Deactivate morning reminders
action: input_boolean.turn_off
- conditions:
- condition: trigger
id:
- night-skipped
alias: Night skipped
sequence:
- service: input_boolean.turn_off
metadata: {}
- metadata: {}
data: {}
target:
entity_id: input_boolean.tina_night_meds_reminder
alias: Deactivate night reminders
action: input_boolean.turn_off
- conditions:
- condition: trigger
id:
@@ -5743,7 +5749,6 @@
alias: Night meds reminder active
then:
- alias: Send critical TTS notification
service: script.text_notify
metadata: {}
data:
type: critical
@@ -5751,6 +5756,19 @@
title: HEY DUMBASS
message: YOU FORGOT TO TAKE YOUR MEDS!!!!!
tag: tina-left-meds
action: script.text_notify
- conditions:
- condition: trigger
id:
- at-work
alias: At Work
sequence:
- action: input_boolean.turn_off
metadata: {}
data: {}
target:
entity_id: input_boolean.tina_night_meds_taken
alias: Turn off Night Meds Taken
mode: queued
max: 10
- id: '1722387020007'

View File

@@ -0,0 +1,42 @@
`${(() => {
const occupancy = hass?.states[this.config?.main_button_floors?.occupancy_entity]?.state || '';
const hot = hass?.states[this.config?.main_button_floors?.hot_entity]?.state || '';
const cold = hass?.states[this.config?.main_button_floors?.cold_entity]?.state || '';
let bg_color = 'var(--bubble-main-background-color)';
let occupied_color = 'var(--accent-color)';
let hot_color = 'var(--error-color)';
let cold_color = 'var(--purple-color)';
// Main button background
const mainButton = card?.querySelector('.bubble-button-background');
if (mainButton) {
mainButton.style.opacity = '1';
mainButton.style.backgroundColor = occupancy === 'on' ? occupied_color : bg_color;
mainButton.style.transition = 'background-color 1s';
}
// Sub button 1
const subButton1 = card?.querySelector('.bubble-sub-button-1');
if (subButton1) {
if (hot === 'on') {
subButton1.style.backgroundColor = hot_color;
} else if (cold === 'on') {
subButton1.style.backgroundColor = cold_color;
} else if (occupancy === 'on') {
subButton1.style.backgroundColor = occupied_color;
} else {
subButton1.style.backgroundColor = bg_color;
}
}
// Unavailable state
if (mainButton && occupancy === 'unavailable') {
mainButton.classList.add('is-unavailable');
} else if (mainButton) {
mainButton.classList.remove('is-unavailable');
}
// No CSS string needed
return '';
})()}`

View File

@@ -0,0 +1,22 @@
- type: expandable
title: Entity Configuration
icon: mdi:format-list-bulleted
schema:
- name: occupancy_entity
label: Occupancy Entity
selector:
entity:
device_class: occupancy
required: false
- name: hot_entity
label: Hot Entity
selector:
entity:
device_class: heat
required: false
- name: cold_entity
label: Cold Entity
selector:
entity:
device_class: cold
required: false

View File

@@ -0,0 +1,73 @@
main_button_floors:
name: Main Button Floors
version: '1.1'
creator: Tony Stork
supported:
- button
description: Module to provide theming for the main indoor floor buttons
code: |
${(() => {
const occupancy = hass?.states[this.config?.main_button_floors?.occupancy_entity]?.state || '';
const hot = hass?.states[this.config?.main_button_floors?.hot_entity]?.state || '';
const cold = hass?.states[this.config?.main_button_floors?.cold_entity]?.state || '';
let bg_color = 'var(--bubble-main-background-color)';
let occupied_color = 'var(--accent-color)';
let hot_color = 'var(--error-color)';
let cold_color = 'var(--purple-color)';
// Main button background
const mainButton = card?.querySelector('.bubble-button-background');
if (mainButton) {
mainButton.style.opacity = '1';
mainButton.style.backgroundColor = occupancy === 'on' ? occupied_color : bg_color;
mainButton.style.transition = 'background-color 1s';
}
// Sub button 1
const subButton1 = card?.querySelector('.bubble-sub-button-1');
if (subButton1) {
if (hot === 'on') {
subButton1.style.backgroundColor = hot_color;
} else if (cold === 'on') {
subButton1.style.backgroundColor = cold_color;
} else if (occupancy === 'on') {
subButton1.style.backgroundColor = occupied_color;
} else {
subButton1.style.backgroundColor = bg_color;
}
}
// Unavailable state
if (mainButton && occupancy === '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: occupancy_entity
label: Occupancy Entity
selector:
entity:
device_class: occupancy
required: false
- name: hot_entity
label: Hot Entity
selector:
entity:
device_class: heat
required: false
- name: cold_entity
label: Cold Entity
selector:
entity:
device_class: cold
required: false

View File

@@ -0,0 +1,24 @@
`${(() => {
const occupancy = hass?.states[this.config?.main_button_outdoors?.occupancy_entity]?.state || '';
let bg_color = 'var(--bubble-main-background-color)';
let occupied_color = 'var(--accent-color)';
// Main button background
const mainButton = card?.querySelector('.bubble-button-background');
if (mainButton) {
mainButton.style.opacity = '1';
mainButton.style.backgroundColor = occupancy === 'on' ? occupied_color : bg_color;
mainButton.style.transition = 'background-color 1s';
}
// Unavailable state
if (mainButton && occupancy === 'unavailable') {
mainButton.classList.add('is-unavailable');
} else if (mainButton) {
mainButton.classList.remove('is-unavailable');
}
// No CSS string needed
return '';
})()}`

View File

@@ -0,0 +1,10 @@
- type: expandable
title: Entity Configuration
icon: mdi:format-list-bulleted
schema:
- name: occupancy_entity
label: Occupancy Entity
selector:
entity:
device_class: occupancy
required: false

View File

@@ -0,0 +1,43 @@
main_button_outdoors:
name: Main Button Outdoors
version: '1.1'
creator: Tony Stork
supported:
- button
description: Module to provide theming for outdoor floor buttons
code: |
${(() => {
const occupancy = hass?.states[this.config?.main_button_outdoors?.occupancy_entity]?.state || '';
let bg_color = 'var(--bubble-main-background-color)';
let occupied_color = 'var(--accent-color)';
// Main button background
const mainButton = card?.querySelector('.bubble-button-background');
if (mainButton) {
mainButton.style.opacity = '1';
mainButton.style.backgroundColor = occupancy === 'on' ? occupied_color : bg_color;
mainButton.style.transition = 'background-color 1s';
}
// Unavailable state
if (mainButton && occupancy === '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: occupancy_entity
label: Occupancy Entity
selector:
entity:
device_class: occupancy
required: false

View File

@@ -0,0 +1,24 @@
`${(() => {
const state = hass?.states[this.config?.entity]?.state || '';
let bg_color = 'var(--background-color-2)';
let accent_color = 'var(--accent-color)';
// Main button background
const mainButton = card?.querySelector('.bubble-button-background');
if (mainButton) {
mainButton.style.opacity = '1';
mainButton.style.backgroundColor = state === 'on' ? accent_color : 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 '';
})()}`

View File

@@ -0,0 +1,33 @@
popup_accent_color_button:
name: Popup Accent Color Button
version: '1.0'
creator: Tony Stork
supported:
- button
description: Will turn the button to accent color variable if config entity is on, otherwise default style applies
code: |-
${(() => {
const state = hass?.states[this.config?.entity]?.state || '';
let bg_color = 'var(--background-color-2)';
let accent_color = 'var(--accent-color)';
// Main button background
const mainButton = card?.querySelector('.bubble-button-background');
if (mainButton) {
mainButton.style.opacity = '1';
mainButton.style.backgroundColor = state === 'on' ? accent_color : 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: ''

View File

@@ -0,0 +1,24 @@
`${(() => {
const state = hass?.states[this.config?.entity]?.state || '';
let bg_color = 'var(--background-color-2)';
let red_color = 'var(--error-color)';
// Main button background
const mainButton = card?.querySelector('.bubble-button-background');
if (mainButton) {
mainButton.style.opacity = '1';
mainButton.style.backgroundColor = state === 'on' ? red_color : 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 '';
})()}`

View File

@@ -0,0 +1,33 @@
popup_security_button:
name: Popup Security Button
version: '1.0'
creator: Tony Stork
supported:
- button
description: Will turn the button red if there is a security fault, otherwise default style applies
code: |-
${(() => {
const state = hass?.states[this.config?.entity]?.state || '';
let bg_color = 'var(--background-color-2)';
let red_color = 'var(--error-color)';
// Main button background
const mainButton = card?.querySelector('.bubble-button-background');
if (mainButton) {
mainButton.style.opacity = '1';
mainButton.style.backgroundColor = state === 'on' ? red_color : 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: ''

View File

@@ -0,0 +1,32 @@
`${(() => {
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 '';
})()}`

View File

@@ -0,0 +1,14 @@
- 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

View File

@@ -0,0 +1,55 @@
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

View File

@@ -0,0 +1,92 @@
:host{
--circle-color: var(--bubble-accent-color, var(--accent-color));
--percentage: ${(() => {
card.timerEntity = hass.states[entity];
const now = new Date();
const endTime = new Date(card.timerEntity.attributes.finishes_at);
const runningTime = Math.round((endTime - now) / 1000);
const maxtime = Math.round(new Date("1970-01-01 " + card.timerEntity.attributes.duration + " UTC") / 1000);
const remainingTime = Math.round(new Date("1970-01-01 " + card.timerEntity.attributes.remaining + " UTC") / 1000);
var percentage = 0;
if (isNaN(runningTime)) {
percentage = 100 - Math.round( 100.0 * remainingTime / maxtime);
} else {
percentage = 100 - Math.round( 100.0 * runningTime / maxtime);
}
if (isNaN(percentage)) {
return "0%";
} else {
return "" + percentage +"%";
}
})()};
}
.bubble-icon-container {
background: radial-gradient(
var(--card-background-color) 60%,
transparent 0%
), conic-gradient(
var(--circle-color) var(--percentage) 0%,
var(--card-background-color) 0% 100%
) !important;
}
.bubble-icon-container:after {
content: "" !important;
height: 100% !important;
width: 100% !important;
position: absolute !important;
border-radius: 50% !important;
background: (var(--bubble-button-icon-background-color), 0.1) !important;
}
${(() => {
function UpdateState(){
try {
let now = new Date();
let endTime = new Date(card.timerEntity.attributes.finishes_at);
let runningTime = Math.round((endTime - now)/1000);
let hours = Math.floor(runningTime / 3600);
let minutes = Math.floor((runningTime - (hours * 3600)) / 60);
let remainingSeconds = runningTime % 60;
card.querySelector('.bubble-state').innerText =
(hours > 0 ? (hours + ":") : "") +
("0" + minutes).slice(-2) + ":" +
("0" + remainingSeconds).slice(-2);
} catch (error) {
card.querySelector('.bubble-state').innerText = card.timerEntity.attributes.duration;
}
};
if (card.timer == null && card.timerEntity.state === 'active') {
card.timer = setInterval(()=>{UpdateState()}, 500);
}else if (card.timerEntity.state != 'active'){
clearInterval(card.timer);
card.timer = null;
if (card.timerEntity.state !='paused') {
card.querySelector('.bubble-state').innerText = card.timerEntity.attributes.duration;
} else if(card.timerEntity.state==='paused') {
card.querySelector('.bubble-state').innerText = card.timerEntity.attributes.remaining;
}
}
})()}
${(() => {
subButtonIcon[0].setAttribute("icon",card.timerEntity.state != 'active' ?'mdi:play' : 'mdi:replay');
})()}
${(() => {
if (card.timerEntity.state != 'active') {
card.querySelector('.bubble-sub-button-2').classList.add("hidden");
}
})()}
${(() => {
if (card.timerEntity.state === 'idle') {
card.querySelector('.bubble-sub-button-3').classList.add("hidden");
}
})()}
${(() => {
if (card.timerEntity.state === 'idle') {
card.querySelector('.bubble-sub-button-4').classList.add("hidden");
}
})()}

View File

@@ -0,0 +1,101 @@
popup_timer_card:
name: Popup Timer Card
version: '1.0'
creator: Tony Stork
supported:
- button
description: Will turn the button red if the entity state is on, otherwise default style applies
code: |-
:host{
--circle-color: var(--bubble-accent-color, var(--accent-color));
--percentage: ${(() => {
card.timerEntity = hass.states[entity];
const now = new Date();
const endTime = new Date(card.timerEntity.attributes.finishes_at);
const runningTime = Math.round((endTime - now) / 1000);
const maxtime = Math.round(new Date("1970-01-01 " + card.timerEntity.attributes.duration + " UTC") / 1000);
const remainingTime = Math.round(new Date("1970-01-01 " + card.timerEntity.attributes.remaining + " UTC") / 1000);
var percentage = 0;
if (isNaN(runningTime)) {
percentage = 100 - Math.round( 100.0 * remainingTime / maxtime);
} else {
percentage = 100 - Math.round( 100.0 * runningTime / maxtime);
}
if (isNaN(percentage)) {
return "0%";
} else {
return "" + percentage +"%";
}
})()};
}
.bubble-icon-container {
background: radial-gradient(
var(--card-background-color) 60%,
transparent 0%
), conic-gradient(
var(--circle-color) var(--percentage) 0%,
var(--card-background-color) 0% 100%
) !important;
}
.bubble-icon-container:after {
content: "" !important;
height: 100% !important;
width: 100% !important;
position: absolute !important;
border-radius: 50% !important;
background: (var(--bubble-button-icon-background-color), 0.1) !important;
}
${(() => {
function UpdateState(){
try {
let now = new Date();
let endTime = new Date(card.timerEntity.attributes.finishes_at);
let runningTime = Math.round((endTime - now)/1000);
let hours = Math.floor(runningTime / 3600);
let minutes = Math.floor((runningTime - (hours * 3600)) / 60);
let remainingSeconds = runningTime % 60;
card.querySelector('.bubble-state').innerText =
(hours > 0 ? (hours + ":") : "") +
("0" + minutes).slice(-2) + ":" +
("0" + remainingSeconds).slice(-2);
} catch (error) {
card.querySelector('.bubble-state').innerText = card.timerEntity.attributes.duration;
}
};
if (card.timer == null && card.timerEntity.state === 'active') {
card.timer = setInterval(()=>{UpdateState()}, 500);
}else if (card.timerEntity.state != 'active'){
clearInterval(card.timer);
card.timer = null;
if (card.timerEntity.state !='paused') {
card.querySelector('.bubble-state').innerText = card.timerEntity.attributes.duration;
} else if(card.timerEntity.state==='paused') {
card.querySelector('.bubble-state').innerText = card.timerEntity.attributes.remaining;
}
}
})()}
${(() => {
subButtonIcon[0].setAttribute("icon",card.timerEntity.state != 'active' ?'mdi:play' : 'mdi:replay');
})()}
${(() => {
if (card.timerEntity.state != 'active') {
card.querySelector('.bubble-sub-button-2').classList.add("hidden");
}
})()}
${(() => {
if (card.timerEntity.state === 'idle') {
card.querySelector('.bubble-sub-button-3').classList.add("hidden");
}
})()}
${(() => {
if (card.timerEntity.state === 'idle') {
card.querySelector('.bubble-sub-button-4').classList.add("hidden");
}
})()}
editor: ''

View File

@@ -0,0 +1,21 @@
rotating_icon:
name: Rotating Icon
version: '0.1'
creator: Tony Stork
supported:
- button
- climate
- media-player
- pop-up
- separator
- horizontal-buttons-stack
description: Simple, make the icon rotate when the config entity is on
code: |-
.bubble-icon {
animation: ${state === 'on' ? 'slow-rotate 2s linear infinite' : ''};
}
@keyframes slow-rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
editor: ''

View File

@@ -0,0 +1,34 @@
`${(() => {
let state;
if (this.config?.state_color_button?.alt_entity) {
state = hass?.states[this.config?.state_color_button?.alt_entity]?.state || '';
} else {
state = hass?.states[this.config?.entity]?.state || '';
}
let bg_color = 'var(--bubble-main-background-color)';
// Use the configured color or default to accent color
let on_color = this.config?.state_color_button?.color
? `var(--${this.config.state_color_button.color})`
: 'var(--accent-color)';
// Main button background
const mainButton = card?.querySelector('.bubble-button-background');
if (mainButton) {
mainButton.style.opacity = '1';
mainButton.style.backgroundColor = state === 'on' ? on_color : bg_color;
mainButton.style.transition = 'background-color 1s';
}
// Unavailable state
if (mainButton && state === 'unavailable') {
mainButton.style.opacity = '0.5';
mainButton.classList.add('is-unavailable');
} else if (mainButton) {
mainButton.classList.remove('is-unavailable');
}
// No CSS string needed
return '';
})()}`

View File

@@ -0,0 +1,10 @@
- name: color
label: Color (CSS Variable)
selector:
text: {}
required: false
- name: alt_entity
label: Entity (Optional, overrides main config)
selector:
entity: {}
required: false

View File

@@ -0,0 +1,61 @@
state_color_button:
name: State Color Button
version: 1.1.2
creator: Tony Stork
supported:
- button
description: |-
Module for status buttons that turn a color based on the state of the config entity. Will default to the accent color in your theme. Use the name of a CSS variable. You can also specify an alternate entity to get state from, this will override the main card config.
<br><br>
Example:
<br><br>
<code-block><pre>
color: error-color
alt_entity: sensor.your_face
</pre></code-block>
code: |-
${(() => {
let state;
if (this.config?.state_color_button?.alt_entity) {
state = hass?.states[this.config?.state_color_button?.alt_entity]?.state || '';
} else {
state = hass?.states[this.config?.entity]?.state || '';
}
let bg_color = 'var(--bubble-main-background-color)';
// Use the configured color or default to accent color
let on_color = this.config?.state_color_button?.color
? `var(--${this.config.state_color_button.color})`
: 'var(--accent-color)';
// Main button background
const mainButton = card?.querySelector('.bubble-button-background');
if (mainButton) {
mainButton.style.opacity = '1';
mainButton.style.backgroundColor = state === 'on' ? on_color : bg_color;
mainButton.style.transition = 'background-color 1s';
}
// Unavailable state
if (mainButton && state === 'unavailable') {
mainButton.style.opacity = '0.5';
mainButton.classList.add('is-unavailable');
} else if (mainButton) {
mainButton.classList.remove('is-unavailable');
}
// No CSS string needed
return '';
})()}
editor:
- name: color
label: Color (CSS Variable)
selector:
text: {}
required: false
- name: alt_entity
label: Entity (Optional, overrides main config)
selector:
entity: {}
required: false

View File

@@ -13,3 +13,10 @@ sensor:
state_characteristic: mean
max_age:
hours: 24
binary_sensor:
- platform: trend
sensors:
local_average_gas_trend:
entity_id: sensor.local_average_gas_price
friendly_name: Local Average Gas Trend
unique_id: 3405a536-1e02-412f-916b-1a62c9cb8a2e

View File

@@ -57,6 +57,7 @@ ## HACS Components
- [GasBuddy](https://github.com/firstof9/ha-gasbuddy)
- [Union Pacific Big Boy Tracker](https://github.com/jheizer/up_4014_tracker)
- [WeatherFlow Forecast](https://github.com/briis/weatherflow_forecast)
- [NWS SPC Outlook](https://github.com/sedward5/nws_spc_outlook)
</details>
@@ -111,6 +112,7 @@ ## HACS Lovelace Cards
- [Weather Chart Card](https://github.com/mlamberts78/weather-chart-card)
- [Comfortable Environment Card](https://github.com/argaar/comfortable-environment-card)
- [Versatile Thermostat UI Card](https://github.com/jmcollin78/versatile-thermostat-ui-card)
- [Gauge Card Pro](https://github.com/benjamin-dcs/gauge-card-pro)
</details>