New timer cards for mobile dashboard
This commit is contained in:
@ -305,6 +305,150 @@ decluttering_templates:
|
|||||||
opacity: ${hass.states['[[hot_entity]]'].state === 'on' ? 0.3 : 0} !important;
|
opacity: ${hass.states['[[hot_entity]]'].state === 'on' ? 0.3 : 0} !important;
|
||||||
transition: all 1s !important;
|
transition: all 1s !important;
|
||||||
}
|
}
|
||||||
|
popup_timer_card:
|
||||||
|
defaults:
|
||||||
|
name: ''
|
||||||
|
entity: ''
|
||||||
|
card:
|
||||||
|
type: conditional
|
||||||
|
conditions:
|
||||||
|
- condition: state
|
||||||
|
entity: '[[entity]]'
|
||||||
|
state_not: idle
|
||||||
|
card:
|
||||||
|
type: custom:bubble-card
|
||||||
|
card_type: button
|
||||||
|
button_type: state
|
||||||
|
entity: '[[entity]]'
|
||||||
|
name: '[[name]]'
|
||||||
|
icon: mdi:timer
|
||||||
|
sub_button:
|
||||||
|
- entity: '[[entity]]'
|
||||||
|
tap_action:
|
||||||
|
action: perform-action
|
||||||
|
perform_action: timer.start
|
||||||
|
target:
|
||||||
|
entity_id: '[[entity]]'
|
||||||
|
name: Start
|
||||||
|
icon: mdi:play
|
||||||
|
visibility: []
|
||||||
|
- entity: '[[entity]]'
|
||||||
|
name: Pause
|
||||||
|
icon: mdi:pause
|
||||||
|
tap_action:
|
||||||
|
action: perform-action
|
||||||
|
perform_action: timer.pause
|
||||||
|
target:
|
||||||
|
entity_id: '[[entity]]'
|
||||||
|
- entity: '[[entity]]'
|
||||||
|
name: Cancel
|
||||||
|
icon: mdi:cancel
|
||||||
|
tap_action:
|
||||||
|
action: perform-action
|
||||||
|
perform_action: timer.cancel
|
||||||
|
target:
|
||||||
|
entity_id: '[[entity]]'
|
||||||
|
- entity: '[[entity]]'
|
||||||
|
name: Finish
|
||||||
|
icon: mdi:clock-end
|
||||||
|
tap_action:
|
||||||
|
action: perform-action
|
||||||
|
perform_action: timer.finish
|
||||||
|
target:
|
||||||
|
entity_id: '[[entity]]'
|
||||||
|
styles: |
|
||||||
|
: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");
|
||||||
|
}
|
||||||
|
})()}
|
||||||
views:
|
views:
|
||||||
- title: Home
|
- title: Home
|
||||||
path: home
|
path: home
|
||||||
@ -1657,27 +1801,11 @@ views:
|
|||||||
variables:
|
variables:
|
||||||
- name: Occupied
|
- name: Occupied
|
||||||
- entity: binary_sensor.living_room_occupied
|
- entity: binary_sensor.living_room_occupied
|
||||||
- type: custom:timer-bar-card
|
- type: custom:decluttering-card
|
||||||
filter: true
|
template: popup_timer_card
|
||||||
entities:
|
variables:
|
||||||
|
- name: Lights Timer
|
||||||
- entity: timer.living_room_motion_timer
|
- entity: timer.living_room_motion_timer
|
||||||
name: Motion Timer
|
|
||||||
sync_issues: ignore
|
|
||||||
tap_action:
|
|
||||||
action: call-service
|
|
||||||
service: timer.finish
|
|
||||||
target:
|
|
||||||
entity_id: timer.living_room_motion_timer
|
|
||||||
hold_action:
|
|
||||||
action: more-info
|
|
||||||
double_tap_action:
|
|
||||||
action: none
|
|
||||||
modifications:
|
|
||||||
- elapsed: 40%
|
|
||||||
bar_foreground: orange
|
|
||||||
- elapsed: 80%
|
|
||||||
bar_foreground: red
|
|
||||||
compressed: true
|
|
||||||
- type: custom:bubble-card
|
- type: custom:bubble-card
|
||||||
card_type: separator
|
card_type: separator
|
||||||
name: Security
|
name: Security
|
||||||
@ -1841,27 +1969,11 @@ views:
|
|||||||
variables:
|
variables:
|
||||||
- name: Side
|
- name: Side
|
||||||
- entity: binary_sensor.downstairs_bathroom_window_2
|
- entity: binary_sensor.downstairs_bathroom_window_2
|
||||||
- type: custom:timer-bar-card
|
- type: custom:decluttering-card
|
||||||
filter: true
|
template: popup_timer_card
|
||||||
entities:
|
variables:
|
||||||
|
- name: Lights Timer
|
||||||
- entity: timer.downstairs_bathroom_lights_timer
|
- entity: timer.downstairs_bathroom_lights_timer
|
||||||
name: Motion Timer
|
|
||||||
sync_issues: ignore
|
|
||||||
tap_action:
|
|
||||||
action: call-service
|
|
||||||
service: timer.finish
|
|
||||||
target:
|
|
||||||
entity_id: timer.downstairs_bathroom_lights_timer
|
|
||||||
hold_action:
|
|
||||||
action: more-info
|
|
||||||
double_tap_action:
|
|
||||||
action: none
|
|
||||||
modifications:
|
|
||||||
- elapsed: 40%
|
|
||||||
bar_foreground: orange
|
|
||||||
- elapsed: 80%
|
|
||||||
bar_foreground: red
|
|
||||||
compressed: true
|
|
||||||
- type: vertical-stack
|
- type: vertical-stack
|
||||||
cards:
|
cards:
|
||||||
- type: custom:bubble-card
|
- type: custom:bubble-card
|
||||||
@ -2055,27 +2167,11 @@ views:
|
|||||||
variables:
|
variables:
|
||||||
- name: Window
|
- name: Window
|
||||||
- entity: binary_sensor.mud_room_window
|
- entity: binary_sensor.mud_room_window
|
||||||
- type: custom:timer-bar-card
|
- type: custom:decluttering-card
|
||||||
filter: true
|
template: popup_timer_card
|
||||||
entities:
|
variables:
|
||||||
|
- name: Lights Timer
|
||||||
- entity: timer.mud_room_motion_timer
|
- entity: timer.mud_room_motion_timer
|
||||||
name: Motion Timer
|
|
||||||
sync_issues: ignore
|
|
||||||
tap_action:
|
|
||||||
action: call-service
|
|
||||||
service: timer.finish
|
|
||||||
target:
|
|
||||||
entity_id: timer.mud_room_motion_timer
|
|
||||||
hold_action:
|
|
||||||
action: more-info
|
|
||||||
double_tap_action:
|
|
||||||
action: none
|
|
||||||
modifications:
|
|
||||||
- elapsed: 40%
|
|
||||||
bar_foreground: orange
|
|
||||||
- elapsed: 80%
|
|
||||||
bar_foreground: red
|
|
||||||
compressed: true
|
|
||||||
- type: vertical-stack
|
- type: vertical-stack
|
||||||
cards:
|
cards:
|
||||||
- type: custom:bubble-card
|
- type: custom:bubble-card
|
||||||
@ -2155,27 +2251,11 @@ views:
|
|||||||
- entity: binary_sensor.stairway_window_lower
|
- entity: binary_sensor.stairway_window_lower
|
||||||
- type: custom:bubble-card
|
- type: custom:bubble-card
|
||||||
card_type: empty-column
|
card_type: empty-column
|
||||||
- type: custom:timer-bar-card
|
- type: custom:decluttering-card
|
||||||
filter: true
|
template: popup_timer_card
|
||||||
entities:
|
variables:
|
||||||
|
- name: Lights Timer
|
||||||
- entity: timer.stairwell_motion_timer
|
- entity: timer.stairwell_motion_timer
|
||||||
name: Motion Timer
|
|
||||||
sync_issues: ignore
|
|
||||||
tap_action:
|
|
||||||
action: call-service
|
|
||||||
service: timer.finish
|
|
||||||
target:
|
|
||||||
entity_id: timer.stairwell_motion_timer
|
|
||||||
hold_action:
|
|
||||||
action: more-info
|
|
||||||
double_tap_action:
|
|
||||||
action: none
|
|
||||||
modifications:
|
|
||||||
- elapsed: 40%
|
|
||||||
bar_foreground: orange
|
|
||||||
- elapsed: 80%
|
|
||||||
bar_foreground: red
|
|
||||||
compressed: true
|
|
||||||
- type: grid
|
- type: grid
|
||||||
cards:
|
cards:
|
||||||
- type: vertical-stack
|
- type: vertical-stack
|
||||||
@ -2245,36 +2325,11 @@ views:
|
|||||||
variables:
|
variables:
|
||||||
- name: Occupied
|
- name: Occupied
|
||||||
- entity: binary_sensor.upstairs_hallway_occupied
|
- entity: binary_sensor.upstairs_hallway_occupied
|
||||||
- type: custom:timer-bar-card
|
- type: custom:decluttering-card
|
||||||
filter: true
|
template: popup_timer_card
|
||||||
entities:
|
variables:
|
||||||
|
- name: Lights Timer
|
||||||
- entity: timer.upstairs_hallway_motion_timer
|
- entity: timer.upstairs_hallway_motion_timer
|
||||||
name: Motion Timer
|
|
||||||
sync_issues: ignore
|
|
||||||
tap_action:
|
|
||||||
action: call-service
|
|
||||||
service: timer.finish
|
|
||||||
target:
|
|
||||||
entity_id: timer.upstairs_hallway_motion_timer
|
|
||||||
hold_action:
|
|
||||||
action: more-info
|
|
||||||
double_tap_action:
|
|
||||||
action: none
|
|
||||||
modifications:
|
|
||||||
- elapsed: 40%
|
|
||||||
bar_foreground: orange
|
|
||||||
- elapsed: 80%
|
|
||||||
bar_foreground: red
|
|
||||||
compressed: true
|
|
||||||
visibility:
|
|
||||||
- condition: or
|
|
||||||
conditions:
|
|
||||||
- condition: state
|
|
||||||
entity: timer.upstairs_hallway_motion_timer
|
|
||||||
state: running
|
|
||||||
- condition: state
|
|
||||||
entity: timer.upstairs_hallway_motion_timer
|
|
||||||
state: paused
|
|
||||||
- type: vertical-stack
|
- type: vertical-stack
|
||||||
cards:
|
cards:
|
||||||
- type: custom:bubble-card
|
- type: custom:bubble-card
|
||||||
@ -2373,39 +2428,16 @@ views:
|
|||||||
variables:
|
variables:
|
||||||
- name: Occupied
|
- name: Occupied
|
||||||
- entity: binary_sensor.upstairs_bathroom_occupied
|
- entity: binary_sensor.upstairs_bathroom_occupied
|
||||||
- type: custom:timer-bar-card
|
- type: custom:decluttering-card
|
||||||
filter: true
|
template: popup_timer_card
|
||||||
entities:
|
variables:
|
||||||
|
- name: Lights Timer
|
||||||
- entity: timer.upstairs_bathroom_motion_timer
|
- entity: timer.upstairs_bathroom_motion_timer
|
||||||
name: Motion Timer
|
- type: custom:decluttering-card
|
||||||
sync_issues: ignore
|
template: popup_timer_card
|
||||||
tap_action:
|
variables:
|
||||||
action: call-service
|
- name: Shower Mode Cooldown
|
||||||
service: timer.finish
|
|
||||||
target:
|
|
||||||
entity_id: timer.upstairs_bathroom_motion_timer
|
|
||||||
hold_action:
|
|
||||||
action: more-info
|
|
||||||
double_tap_action:
|
|
||||||
action: none
|
|
||||||
- entity: timer.shower_mode_cooldown
|
- entity: timer.shower_mode_cooldown
|
||||||
name: Cooldown
|
|
||||||
sync_issues: ignore
|
|
||||||
tap_action:
|
|
||||||
action: call-service
|
|
||||||
service: timer.finish
|
|
||||||
target:
|
|
||||||
entity_id: timer.shower_mode_cooldown
|
|
||||||
hold_action:
|
|
||||||
action: more-info
|
|
||||||
double_tap_action:
|
|
||||||
action: none
|
|
||||||
modifications:
|
|
||||||
- elapsed: 40%
|
|
||||||
bar_foreground: orange
|
|
||||||
- elapsed: 80%
|
|
||||||
bar_foreground: red
|
|
||||||
compressed: true
|
|
||||||
- type: vertical-stack
|
- type: vertical-stack
|
||||||
cards:
|
cards:
|
||||||
- type: custom:bubble-card
|
- type: custom:bubble-card
|
||||||
@ -2670,39 +2702,16 @@ views:
|
|||||||
variables:
|
variables:
|
||||||
- name: Occupied
|
- name: Occupied
|
||||||
- entity: binary_sensor.master_bedroom_occupied
|
- entity: binary_sensor.master_bedroom_occupied
|
||||||
- type: custom:timer-bar-card
|
- type: custom:decluttering-card
|
||||||
filter: true
|
template: popup_timer_card
|
||||||
entities:
|
variables:
|
||||||
|
- name: Lights Timer
|
||||||
- entity: timer.master_bedroom_motion_timer
|
- entity: timer.master_bedroom_motion_timer
|
||||||
name: Motion Timer
|
- type: custom:decluttering-card
|
||||||
sync_issues: ignore
|
template: popup_timer_card
|
||||||
tap_action:
|
variables:
|
||||||
action: call-service
|
- name: Shower Mode Cooldown
|
||||||
service: timer.finish
|
|
||||||
target:
|
|
||||||
entity_id: timer.master_bedroom_motion_timer
|
|
||||||
hold_action:
|
|
||||||
action: more-info
|
|
||||||
double_tap_action:
|
|
||||||
action: none
|
|
||||||
- entity: timer.shower_mode_cooldown
|
- entity: timer.shower_mode_cooldown
|
||||||
name: Cooldown
|
|
||||||
sync_issues: ignore
|
|
||||||
tap_action:
|
|
||||||
action: call-service
|
|
||||||
service: timer.finish
|
|
||||||
target:
|
|
||||||
entity_id: timer.shower_mode_cooldown
|
|
||||||
hold_action:
|
|
||||||
action: more-info
|
|
||||||
double_tap_action:
|
|
||||||
action: none
|
|
||||||
modifications:
|
|
||||||
- elapsed: 40%
|
|
||||||
bar_foreground: orange
|
|
||||||
- elapsed: 80%
|
|
||||||
bar_foreground: red
|
|
||||||
compressed: true
|
|
||||||
- type: vertical-stack
|
- type: vertical-stack
|
||||||
cards:
|
cards:
|
||||||
- type: custom:bubble-card
|
- type: custom:bubble-card
|
||||||
@ -2876,27 +2885,11 @@ views:
|
|||||||
variables:
|
variables:
|
||||||
- name: Occupied
|
- name: Occupied
|
||||||
- entity: binary_sensor.kallen_bedroom_occupied
|
- entity: binary_sensor.kallen_bedroom_occupied
|
||||||
- type: custom:timer-bar-card
|
- type: custom:decluttering-card
|
||||||
filter: true
|
template: popup_timer_card
|
||||||
entities:
|
variables:
|
||||||
|
- name: Lights Timer
|
||||||
- entity: timer.kallen_bedroom_motion_timer
|
- entity: timer.kallen_bedroom_motion_timer
|
||||||
name: Motion Timer
|
|
||||||
sync_issues: ignore
|
|
||||||
tap_action:
|
|
||||||
action: call-service
|
|
||||||
service: timer.finish
|
|
||||||
target:
|
|
||||||
entity_id: timer.kallen_bedroom_motion_timer
|
|
||||||
hold_action:
|
|
||||||
action: more-info
|
|
||||||
double_tap_action:
|
|
||||||
action: none
|
|
||||||
modifications:
|
|
||||||
- elapsed: 40%
|
|
||||||
bar_foreground: orange
|
|
||||||
- elapsed: 80%
|
|
||||||
bar_foreground: red
|
|
||||||
compressed: true
|
|
||||||
- type: vertical-stack
|
- type: vertical-stack
|
||||||
cards:
|
cards:
|
||||||
- type: custom:bubble-card
|
- type: custom:bubble-card
|
||||||
@ -3087,27 +3080,11 @@ views:
|
|||||||
variables:
|
variables:
|
||||||
- name: Occupied
|
- name: Occupied
|
||||||
- entity: binary_sensor.emma_bedroom_occupied
|
- entity: binary_sensor.emma_bedroom_occupied
|
||||||
- type: custom:timer-bar-card
|
- type: custom:decluttering-card
|
||||||
filter: true
|
template: popup_timer_card
|
||||||
entities:
|
variables:
|
||||||
|
- name: Lights Timer
|
||||||
- entity: timer.emma_bedroom_motion_timer
|
- entity: timer.emma_bedroom_motion_timer
|
||||||
name: Motion Timer
|
|
||||||
sync_issues: ignore
|
|
||||||
tap_action:
|
|
||||||
action: call-service
|
|
||||||
service: timer.finish
|
|
||||||
target:
|
|
||||||
entity_id: timer.emma_bedroom_motion_timer
|
|
||||||
hold_action:
|
|
||||||
action: more-info
|
|
||||||
double_tap_action:
|
|
||||||
action: none
|
|
||||||
modifications:
|
|
||||||
- elapsed: 40%
|
|
||||||
bar_foreground: orange
|
|
||||||
- elapsed: 80%
|
|
||||||
bar_foreground: red
|
|
||||||
compressed: true
|
|
||||||
- type: grid
|
- type: grid
|
||||||
cards:
|
cards:
|
||||||
- type: vertical-stack
|
- type: vertical-stack
|
||||||
|
|||||||
Reference in New Issue
Block a user