Lovelace: Timer bar with digital remaining time (hh:mm:ss)

[arboeh (Arend Böhmer)]

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;
          }

[klogg]

@arboeh

Integration of font “DJB Get Digital”

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)]

Solution is described here: Use TTF in Lovelace

[tom_l]

That’s a long thread of dead ends, the actual summarised solution is in this post:

Use TTF in Lovelace

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…

[klogg]

@tom_l

That’s a long thread of dead ends

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]

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]

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]

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

[mdlmarkham (Matt)]

It would be nice if there were a standard feature for this rather than all of these workarounds.