home_automation/ha-dashboards
2
0
Fork 0
Code Issues 2 Pull Requests Projects Activity

Use new popup timer bubble card module

Browse Source
This commit is contained in:
Tony Stork
2025-07-07 21:58:15 -04:00
parent 70eff59703
commit 91a328058f
1 changed files with 3 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
mobile_dashboard.yaml
View File

@ -310,99 +310,9 @@ streamline_templates:
perform_action: timer.finish perform_action: timer.finish
target: target:
entity_id: '[[entity]]' entity_id: '[[entity]]'
styles: | modules:
:host{ - default
--circle-color: var(--bubble-accent-color, var(--accent-color)); - popup_timer_card
--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