New modules I wrote for bubble cards
This commit is contained in:
73
bubble/main_button_floors.yaml
Normal file
73
bubble/main_button_floors.yaml
Normal 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
|
43
bubble/main_button_outdoors.yaml
Normal file
43
bubble/main_button_outdoors.yaml
Normal 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
|
17
bubble/main_button_state_red.yaml
Normal file
17
bubble/main_button_state_red.yaml
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
main_button_state_red:
|
||||||
|
name: Main Button State Red
|
||||||
|
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: |-
|
||||||
|
.is-unavailable {
|
||||||
|
opacity: 0.5 !important;
|
||||||
|
}
|
||||||
|
.bubble-button-background {
|
||||||
|
opacity: 1 !important;
|
||||||
|
background-color: ${state === 'on' ? 'var(--error-color)' : 'var(--bubble-main-background-color)'} !important;
|
||||||
|
transition: background-color 1s !important;
|
||||||
|
}
|
||||||
|
editor: ''
|
Reference in New Issue
Block a user