Countdown in real time

georgijs

I want to create a function that will calculate the remaining time until a set date, updating the days, hours, minutes, and seconds in real-time, displaying it on the screen. I think I could use a query for this task, but how can I achieve the result of updating the remaining time on the screen in real-time?

lukas

Hello,
this can be achieved using a text layer with a dynamic value. Here is an example that will count down to the 20th of September 2023:

{
  "type": "text",
  "value": {
    "left": {
      "left": {
        "left": "20230920T120000",
        "right": "yyyyMMdd'T'HHmmss",
        "transform": "parseDate"
      },
      "right": {
        "context": "date",
        "updateInterval": 1
      },
      "transform": "sub"
    },
    "right": "dd' Days 'HH' Hours 'mm' Minutes 'ss' Seconds'",
    "transform": "formatDate"
  }
}

Note, that in order for the value to automatically update every second the updateIntverval has to be set to 1 or the desired update interval time in seconds.

For a full list of all contexts as well as transformation types and how to use them please refer to the "dynamic value" section in the Wiki.

Regards

georgijs

I have implemented these conditions into the app, but now I am facing a problem where the days are being counted incorrectly. At first, I thought it was a problem with the received data from API because the timestamp was formatted in a specific way. An example of the data: 2023-12-01 11:00:00.000000 .
After that, I attempted to create another subtree to execute substring operations and eliminate the 6-digit milliseconds, using this:
"left": "2023-08-01 10:00:00.000000", "transform": "substring", "right": "0:19"
but unfortunately it didn't solve the problem and days are still being counted wrong.
Full code piece:

            "left": {
              "left": {
                "left": "2023-08-01 10:00:00.000000",
                "transform": "substring",
                "right": "0:19"
              },
              "transform": "parseDate",
              "right": "yyyy'-'MM'-'dd' 'HH':'mm':'ss"
            },
            "transform": "sub",
            "right": {
              "context": "date",
              "updateInterval": 1
            }
          },
          "transform": "formatDate",
          "right": "dd' T 'HH' Std 'mm' Min 'ss' Sek'"
        }

f19benjamin

The main issue here is, that the resulting date will be formatted as a date and not a time difference.
The first problem is, that dd will display the days of the month. So if the time difference is more than 31 days this will always be wrong. D could work if the time difference is always below one year.
The second problem is, that even if you use D it is always wrong by 1 day. Because a difference below one day means that the resulting "date" is Jan 1st 1970. So D would be 1 and not 0.