Time is not updating on my dashboard

My clock on my dashboard is not updating frequently so the time is always behind, if i refresh it syncs to the current time. Does anyone know what could cause this?

I’m using a custom button card in a grid layout and this is my clock yaml - its combined with a weather card.

wide_header:
  template:
    - base
  aspect_ratio: 4/1
  show_name: false
  show_state: false
  show_label: true
  show_entity_picture: true
  variables:
    day: ''
    time: ''
    date: ''
    gpt: ''
    tilt_enable: >
      [[[ return false; ]]]
  tap_action: block
  custom_fields:
    # condition: >
    #   [[[ return states[variables.condition].state; ]]]
    gpt: >
      [[[
        let gpt = states[variables.condition].state;
        return `<span class="gpttext">${gpt}&nbsp;&nbsp;&nbsp;</span>`;
      ]]]
    time: >
      [[[ return states[variables.time].state; ]]]
    date: >
      [[[ return states[variables.day].state + " " + "/" + " " + states[variables.date].state; ]]]
    temp: >
      [[[
          var realtemp = Math.round(entity.attributes.temperature);
          return `<span class="high">${realtemp}</span><span class="unit">°C</span>`;
      ]]]
    overlay:
      card:
        type: picture-elements
        image: /local/img/svg/overlay.svg
        card_mod:
          style: |
            ha-card {
              --ha-card-background: none !important;
            }
        elements:
          - type: 'custom:button-card'
            aspect_ratio: 2/1
            show_name: false
            show_icon: false
            size: 100%
            style:
              top: 50%
              left: 20%
              height: 100%
              width: 40%
            tap_action: !include ../../popup/calendar.yaml

          - type: 'custom:button-card'
            aspect_ratio: 3/1
            show_name: false
            double_tap_action:
              action: fire-dom-event
              local_conditional_card:
                action: set
                ids:
                  - sidebar: hide
                  - windy: show          
            show_icon: false
            size: 100%
            style:
              top: 50%
              left: 70%
              height: 100%
              width: 60%
            tap_action: !include ../../popup/popup_weather.yaml

  label: >
    [[[
      return `
          <ha-icon icon="mdi:thermometer"></ha-icon><span>${entity.attributes.apparent_temperature} °C</span><br>
          <ha-icon icon="mdi:water-percent"></ha-icon><span>${entity.attributes.humidity} %</span><br>
          <ha-icon icon="mdi:weather-windy"></ha-icon><span>${entity.attributes.wind_speed} m/s</span><br>
          <ha-icon icon="mdi:gauge"></ha-icon><span>${entity.attributes.pressure} hPa</span><br>
      `
    ]]]
  entity_picture: >
    [[[
      let weather = entity.state.toLowerCase();
      if ((weather == 'sunny') && (states['sun.sun'].state == 'above_horizon'))
        return "/local/icons/weather_icons/animated/clear-day.svg";
        if (weather == 'clear-night')
          return "/local/icons/weather_icons/animated/clear-night.svg";
            if (weather == 'fog')
              return "/local/icons/weather_icons/animated/fog.svg";
                if ((weather == 'partlycloudy') && (states['sun.sun'].state == 'above_horizon'))
                  return "/local/icons/weather_icons/animated/partly-cloudy-day.png";
                    if ((weather == 'partlycloudy') && (states['sun.sun'].state == 'below_horizon'))
                      return "/local/icons/weather_icons/animated/partly-cloudy-night.png";
                        if (weather == 'rainy')
                          return "/local/icons/weather_icons/animated/rain.svg";
                            if (weather == 'sleet')
                              return "/local/icons/weather_icons/animated/sleet.svg";
                                if (weather == 'snowy')
                                  return "/local/icons/weather_icons/animated/snowy.svg";
                                    if (weather == 'cloudy')
                                      return "/local/icons/weather_icons/animated/cloudy.png";
                                        if (weather == 'pouring')
                                          return "/local/icons/weather_icons/animated/pouring.svg";
                                            if (weather == 'thunder')
                                              return "/local/icons/weather_icons/animated/thunder.svg";
      else (weather == 'wind')
        return "/local/icons/weather_icons/animated/wind.svg";
    ]]]

  styles:
    grid:
      - grid-template-areas: |                          
          "time   i       temp    l"
          "date   i       temp    l"
          "gpt    gpt     gpt    gpt"
      - grid-template-columns: 40% 25% 20% 15%
      - grid-template-rows: auto
      - gap: 0%
      - margin: 0
    card:
      - --mdc-ripple-color: none
      - --webkit-tap-highlight-color: none
    img_cell:
      - overflow: visible
    icon:
      - width: 80%
      - position: relative
      - right: -40%
    custom_fields:
      temp:
        - font-weight: 500
        - font-family: Futura
        # - position: relative
        # - top: 10%
        # - overflow: visible
      overlay:
        - display: inline
        - position: absolute
        - width: 100%
        - height: inherit
        - aspect-ratio: 4/1
  extra_styles: |
    [[[
      return `
        @keyframes marquee {
          0%,
          70% {
            transform: translateX(0%);
            scale: 0.9;
          }
          40%,
          100% {
            transform: translateX(-25%);
            scale: 1.1;
          }
        }
        @keyframes gptmarquee {
          from {
            transform: translateX(0%);
          }
          to {
            transform: translateX(-200%);
          }
        }
        #img-cell {
          animation: marquee 10s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
          animation-direction: alternate-reverse;
        }
        #card {
          padding: 0px 8px !important;
          border-width: 0;
          background: none !important;
        }
        #temp .high {
          font-size: 3.3vw;
        }
        #temp .unit {
          font-size: 2.4em;
          position: relative;
          left: -0.3vw;
          bottom: 0.9vw;
        }
        #label.ellipsis {
          font-size: 0.8em;
          text-align: left;
          place-self: center;
          line-height: 150%;
          overflow: visible;
        }
        #label ha-icon {
          width: 1.4em;
          height: 1.6em;
          padding-right: 10%;
        }
        #time {
          justify-self: center;
          align-self: start;
          line-height: 100%;
          font-size: 3.7vw;
          font-weight: 800;
          color: #97989c;
          font-family: auto;
          letter-spacing: 0.15vw;
        #gpt {
          padding: 1% 0 !important;
          overflow: visible !important;
          border-top: 0.04vw rgba(158, 158, 158, 0.1) solid;
        }
        .gpttext {
          font-size: 0.6vw;
          white-space: pre-wrap;
        }
        #date {
          font-size: 0.8vw;
          text-transform: uppercase;
          font-weight: 700;
          font-family: 'Raleway';
          letter-spacing: 1.5px;
          color: #97989c;
        }
        #overlay {
          padding: 0 !imporant;
          margin: 0 !important;
        }
      `;
    ]]]
```

Updates on the custom button card are controlled by state changes. No state changes, no updates. Add an entity that updates once a minute on the minute and your clock will update.

1 Like

ah okay, but is time entity state, not a change?

where should I add that entity?

to the triggers_update field for custom button card.

1 Like

yes okay
I add this

  triggers_update:
    - sensor.time

thanks for the help