Trigger refresh based on time

Feel free to dismiss this if you feel it’s out of scope for this custom card.

Is your feature request related to a problem? Please describe.

I have a button card for a switch entity where I want to show how long the switch has been on in the state_display. Showing the time was not hard, but getting it to refresh itself regularly isn’t as easy. This is what I have at the moment:

  - type: 'custom:button-card'
    entity: switch.biltak_motorvarmare
    name: Motorvärmare
    icon: 'mdi:car'
    show_state: true
    state_display: |
      [[[
        if (entity.state === 'on') {
          function humanReadableDuration(duration) {
              var hours = Math.floor(duration / 1000 / 60 / 60);
              var minutes = Math.floor((duration / 1000 / 60 / 60 - hours) * 60);

              var result = '';
              if (hours > 0) {
                  result += hours + ' h ';
              }
              
              return result + minutes + ' min';
          }

          var timeDiff = new Date().getTime() - new Date(entity.last_changed).getTime();
          return 'Stäng av (på i ' + humanReadableDuration(Math.abs(timeDiff)) + ')';
        }
        else
          return 'Lägg på';
      ]]]

Describe the solution you’d like

Native support for refreshing a card regularly. I would like to e.g. trigger a refresh every 10th second.

I’m intentionally not getting into suggestion how it should be configured here.

Describe alternatives you’ve considered

It should be possible to create some kind of time entity myself, and add it to triggers_update, but for example the built-in Time & Date sensor does not support entities that updates more often than once a minute.

[RomRider]

That should work (it’s a bit hacky, but who cares 😊 ):

  - type: 'custom:button-card'
    entity: switch.biltak_motorvarmare
    name: Motorvärmare
    icon: 'mdi:car'
    show_state: true
    state_display: |
      [[[
        if (entity.state === 'on') {
          if (this._myTimer === undefined) {
            this._myTimer = window.setInterval(() => { this.update() }, 1000 * 10) // That value 10*1000 is 10000 ms = 10 sec
          }
          function humanReadableDuration(duration) {
              var hours = Math.floor(duration / 1000 / 60 / 60);
              var minutes = Math.floor((duration / 1000 / 60 / 60 - hours) * 60);

              var result = '';
              if (hours > 0) {
                  result += hours + ' h ';
              }
              
              return result + minutes + ' min';
          }

          var timeDiff = new Date().getTime() - new Date(entity.last_changed).getTime();
          return 'Stäng av (på i ' + humanReadableDuration(Math.abs(timeDiff)) + ')';
        }
        else {
          if (this._myTimer !== undefined) {
            window.clearInterval(this._myTimer);
            delete this._myTimer;
          }
          return 'Lägg på';

        }
      ]]]

Edit: some code update

[slovdahl]

Works very well, awesome. I’ll live with this until or if the native support is ever added 👍🙇