arboeh
(Arend Böhmer)
September 2, 2021, 9:28am
1
I created a timer bar for remaining charging time of my ev.
Bar gets smaller with the remaining time and time is updated every second.
Requirements:
Custom component “Timer Bar Card”
Card mod integration
Integration of font “DJB Get Digital”
!YOU NEED A TRIGGER (Button) TO START THE TEST TIMER! THE CONDITIONAL CARD IS HIDDEN PER DEFAULT (state_not: idle)!
type: conditional
conditions:
- entity: timer.test_timer
state_not: idle
card:
type: custom:timer-bar-card
bar_direction: rtl
name: i3s | ladezeit
entities:
- entity: timer.test_timer
bar_foreground: var(--primary-background-color)
bar_background: var(--mdc-theme-primary)
bar_height: 16px
bar_width: 100%
text_width: 0px
full_row: true
card_mod:
style:
timer-bar-entity-row:
$: |
.text-content {
position: absolute;
top: 0;
right: 0;
width: 3em !important;
text-align: left;
line-height: 48px;
padding: 12px 12px 16px;
color: var(--ha-card-header-color, --primary-text-color) !important;
font-family: "DJBGetDigital";
font-size: var(--ha-card-header-font-size, 24px) !important;
opacity: inherit !important;
font-weight: inherit !important;
}
2 Likes
klogg
(Klogg)
September 3, 2021, 2:10pm
2
This is nice but I have a side question.
I know how to use fonts from the internet e.g. Google fonts:
- url: https://fonts.googleapis.com/css?family=Quicksand
type: css
but is there a way to use a local font?
arboeh
(Arend Böhmer)
September 3, 2021, 2:28pm
3
Solution is described here: Use TTF in Lovelace
tom_l
September 3, 2021, 2:35pm
4
That’s a long thread of dead ends, the actual summarised solution is in this post:
Download the ttf font from here: https://www.dafont.com/djb-get-digital.font
Convert it to a woff2 font here: online converter
Put the created djbgetdigital.woff2 file in config/www NOTE: the file-name needs to be all lowercase.
Create the following two files in config/www
fonts.css
@font-face {
font-family: "DJBGetDigital";
src: url(/local/djbgetdigital.woff2) format('woff2');
}
loadfonts.js
function loadcss() {
let css = '/local/fonts.css?v=0.005'
let link = docum…
1 Like
klogg
(Klogg)
September 3, 2021, 4:48pm
5
I wish I’d waited for your reply before I went to look at it.
I just spent way too long getting it to work. But I got there in the end!
Thanks tom_l and arboeh
sergio_pt
(Sergio_PT)
November 5, 2021, 10:26am
6
Hi all!!
Great card that I’m using to see the timers used to turn of lights after being triggered by motion
Quick question:
Is there a way to remove the padding around the progress bar?
Current card:
What I would like:
Updating the below works, but cant seem to be able to do it via cardmod:
My card code:
#################################
# #
# LIGHT PROGRESS #
# #
#################################
card_light_slider_collapse_timer:
variables:
ulm_card_light_slider_collapse_name: "[[[ return entity.attributes.friendly_name ]]]"
timer: "timer.hall_bedroom_timer"
show_icon: false
show_name: false
show_label: false
state:
- operator: template
value: "[[[ return entity.state == 'on' ]]]"
styles:
grid:
- row-gap: 12px
card:
- background-color: 'rgba(var(--color-background-yellow),var(--opacity-bg))'
styles:
grid:
- grid-template-areas: '"item1" "item2" "item3'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
card:
- border-radius: var(--border-radius)
- box-shadow: var(--box-shadow)
- padding: 12px
custom_fields:
item1:
card:
type: 'custom:button-card'
variables:
slider_background_color: 'rgba(0,0,0,0)'
template:
- icon_info
- light
entity: "[[[ return entity.entity_id ]]]"
name: "[[[ return variables.ulm_card_light_slider_name ]]]"
styles:
card:
- box-shadow: none
- border-radius: var(--border-radius) var(--border-radius) 0px 0px
- padding: 0px
state:
- styles:
card:
- background: transparent
value: 'on'
item2:
card:
type: conditional
conditions:
- entity: "[[[ return entity.entity_id ]]]"
state: 'on'
card:
type: 'custom:my-slider'
entity: '[[[ return entity.entity_id ]]]'
radius: 14px
height: 42px
mainSliderColor: rgba(var(--color-yellow),1)
secondarySliderColor: rgba(var(--color-yellow),0.2)
mainSliderColorOff: rgba(var(--color-theme),0.05)
secondarySliderColorOff: rgba(var(--color-theme),0.05)
thumbHorizontalPadding: '0px'
thumbVerticalPadding: '0px'
thumbWidth: 0px
card_mod:
style: |
ha-card {
border-radius: 14px;
box-shadow: none;
}
item3:
card:
type: 'custom:button-card'
template:
- yellow
- ulm_language_variables
show_name: false
show_state: false
show_icon: false
tap_action:
action: toggle
hold_action:
action: more-info
custom_fields:
progress:
card:
type: custom:timer-bar-card
bar_direction: rtl
entities:
- '[[[ return variables.timer ]]]'
full_row: true
text_width: 0px
bar_foreground: 'rgba(var(--color-background-yellow),var(--opacity-bg))'
bar_background: 'rgba(var(--color-yellow),1)'
card_mod:
style:
timer-bar-entity-row:
$: |
.card-content {
padding: 0px;
}
styles:
card:
- height: | #22px
[[[
if(states[variables.timer].state == 'active'){
return '22px';
} else{
return '0px';
}
]]]
- background-color: 'var(--primary-background-color)'
- padding: 0px !important
- border-radius: var(--border-radius)
- border: 0px solid
- -webkit-border: 0px
- margin: 0px 0px
- box-shadow: 0px 0px 0px 0px
grid:
- grid-template-areas: '"progress"'
- grid-template-columns: auto
- grid-template-rows: 22px
Okechuku
(Okechuku)
December 23, 2022, 3:24am
7
Could you please share only the code that pertains to the custom button card in your image above?
The code you shared has many button cards + templates + timer bar card + my slider card…
It’s hard to make sense of / replicate your button from the code you shared, since there are all sorts of other extra things going on not related to the button…
sergio_pt
(Sergio_PT)
December 23, 2022, 3:34pm
8
Hi,
This is defined as a template, and then I use it this way:
- type: 'custom:button-card'
template: card_light_slider_collapse_timer
variables:
ulm_card_light_slider_collapse_name: Bedroom Hall
timer: timer.hall_bedroom_timer
entity: light.hall_quarto_group
It would be nice if there were a standard feature for this rather than all of these workarounds.