Display a timer entity remaining time

[RichardUUU]

If I create an entities card, the following will show the remaining time on a timer:

• entity: timer.mytimer

Is there any way to display that information inside a bubble card? e.g. as a sub-button, template etc.

Entering timer.mytimer as the entity in a sub-button shows me Active or Idle. No combination of showing state, icon, attribute etc. gives me the same output as the entities card, i.e. simply the remaining time.

[Clooos]

Hi! Indeed Bubble Card doesn't supports timers yet (I really need to work on that), but someone did find a way to do it with custom styling and templates, here is the link:

https://www.reddit.com/r/BubbleCard/s/JwNLqRleWV

[brussene]

Based on this and my template sensor (mentioned in my post) which has the remaining time of a timer helper in percentage I am nearly there to create a circular progress bar around the main bubble card icon using:

card_mod:
  style: |
    .bubble-icon-container {
      background: radial-gradient(var(--card-background-color) 60%, transparent 0%), conic-gradient(rgb(252,109,9) ${hass.states['sensor.aanrecht_remaining_percentage_sensor2'].state}% 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;
    }

Problem for now is that it does not show any icon background anymore and no circular progress bar when the timer is running.

With card_mod:

Without card_mod:

In both screenshots the timer is active and percentage for the template sensor is counting down (shown on the right)
So close yet so far...

[RichardUUU]

Thanks. For what it's worth, the native entities card by default displays the remaining time of a timer, but the native entity card does not. You can also see the remaining time in a badge for the new heading card.

[brussene]

I created two template sensors that have the remaining time of a timer helper as value (one in MM:SS the other in %) so it can be used as a sub button within a bubble card:

With the light off:

With the light on:

The problem with these template sensors is that they are not updated every second so I had to create an automation to fix that.
In this automation these template sensors are updated every second when the actual timer helper (used for the light) is running.

the code for the template sensors in configuration.yaml:

template:
  - sensor:
      - name: "aanrecht_remaining_time_sensor"
        unique_id: "aanrecht_remaining_time_sensor"
        state: >
          {% set finish_time = state_attr('timer.aanrecht_verlichting', 'finishes_at') %}
          {% if finish_time %}
            {% set remaining = (as_datetime(finish_time) - now()).total_seconds() %}
            {% if remaining > 0 %}
              {% set minutes = (remaining // 60) | int %}
              {% set seconds = (remaining % 60) | int %}
              {{ '%02d:%02d' | format(minutes, seconds) }}
            {% else %}
              Done
            {% endif %}
          {% else %}
            --:--
          {% endif %}

  - sensor:
      - name: "aanrecht_remaining_percentage_sensor2"
        unique_id: "aanrecht_remaining_percentage_sensor2"
        state: >
          {% set finish_time = state_attr('timer.aanrecht_verlichting', 'finishes_at') %}
          {% set duration_str = state_attr('timer.aanrecht_verlichting', 'duration') %}
          {% if finish_time and duration_str %}
            {% set remaining = (as_datetime(finish_time) - now()).total_seconds() %}
            
            {% set duration_parts = duration_str.split(':') %}
            {% set duration_seconds = (duration_parts[0] | int) * 3600 + (duration_parts[1] | int) * 60 + (duration_parts[2] | int) %}
            
            {% if remaining > 0 %}
              {% set percentage = (remaining / duration_seconds) * 100 %}
              {{ percentage | round(0) }}
            {% else %}
              0
            {% endif %}
          {% else %}
            --:--
          {% endif %}
        unit_of_measurement: "%"

The code for the automation:

alias: Verlichting - Keuken - Aanrecht  (Timer Sensor Update)
description: ""
triggers:
  - trigger: state
    entity_id:
      - timer.aanrecht_verlichting
    to: active
    id: Aanrecht_Timer_Active
  - trigger: state
    entity_id:
      - timer.aanrecht_verlichting
    to: idle
    id: Aanrecht_Timer_Idle
actions:
  - choose:
      - conditions:
          - condition: trigger
            id:
              - Aanrecht_Timer_Active
        sequence:
          - repeat:
              sequence:
                - action: homeassistant.update_entity
                  metadata: {}
                  data:
                    entity_id:
                      - sensor.aanrecht_remaining_time_sensor
                      - sensor.aanrecht_remaining_percentage_sensor2
                - delay:
                    hours: 0
                    minutes: 0
                    seconds: 1
                    milliseconds: 0
              while:
                - condition: state
                  entity_id: timer.aanrecht_verlichting
                  state: active
      - conditions:
          - condition: trigger
            id:
              - Aanrecht_Timer_Idle
        sequence:
          - action: homeassistant.update_entity
            metadata: {}
            data:
              entity_id:
                - sensor.aanrecht_remaining_time_sensor
                - sensor.aanrecht_remaining_percentage_sensor2
mode: restart

When the actual timer helper is done (idle) it updates both template sensors one last time for the final state.

This is the code for the bubble card that shows both template sensors:

type: custom:bubble-card
card_type: button
button_type: slider
entity: light.verlichting_keuken_aanrecht
name: Aanrecht
icon: mdi:wall-sconce-flat
show_attribute: true
attribute: brightness
card_layout: large
double_tap_action:
  action: none
hold_action:
  action: none
sub_button:
  - entity: binary_sensor.motion_keuken_occupancy
    icon: mdi:motion-sensor
    show_background: false
    tap_action:
      action: none
    name: Motion
  - entity: sensor.aanrecht_remaining_time_sensor
    show_background: false
    show_icon: true
    show_state: true
    name: Timer
    icon: mdi:timer
  - entity: sensor.aanrecht_remaining_percentage_sensor2
    show_icon: false
    show_background: false
    show_state: true
    name: Timer - Percentage
    tap_action:
      action: none
  - entity: light.verlichting_keuken_aanrecht
    name: Power
    icon: mdi:power
    tap_action:
      action: toggle
    show_background: false
styles: |2
    .bubble-sub-button-1 {
      display: ${hass.states['binary_sensor.motion_keuken_occupancy'].state === 'on' ? '' : 'none'} !important;
      color: ${hass.states['binary_sensor.motion_keuken_occupancy'].state === 'on' ? 'red' : ''} !important;
    }
    
    .bubble-sub-button-2 {
      display: ${hass.states['timer.aanrecht_verlichting'].state === 'active' ? '' : 'none'} !important;
    }

    .bubble-sub-button-3 {
      display: ${hass.states['timer.aanrecht_verlichting'].state === 'active' ? '' : 'none'} !important;
    }

Both template sensors are hidden when the timer helper is not active.

It ain't pretty but it works....