Time Zone Implementation

[rjoel98]

Hey All,

So I noticed that this block does not have the capability for the user to set the time zone. And for a browser, I feel like this is a key need, so I figured I would bring it up.

I will try my hardest to start looking into ways to get this implemented, but I am fairly new to this arena so I figured I would reach out and see if anyone with a bit more experience would be able to get a PR together sooner, and then I could learn that way also.

Anyways, suggestions would be appreciated too. Thank you!

[phil-d-wilson]

Hey Ryan,

Well today I learned that because the browser block is using Raspbian as a base image, which is Debian based, you can use the TZ environment variable to set it to a TZ database name. Just make sure you set it on the correct service (KIOSK if you're running balenaDash) or as a device variable - to make sure the browser block picks it up. I just tested it on my Pi4 running this block, and placed it in Africa.

Hopefully this fixes the issue for you too.

[rjoel98]

HI Phil,

Thank you for following me over! So I have been testing what you said above, and I found that you are 100% correct!

The issue I guess more specifically I am having is that JavaScript is pulling its time from the Host OS, instead of the browser container. I can set every since one of the containers to the correct time, and on the terminal it shows this to be true. But the Host OS is still set to central time, and I can not figure out how to change that. Any suggestions for this or a workaround?

[phil-d-wilson]

Closing as this is not an issue with the block. The block honours the TZ envar.

[edorgeville]

I'm having the same issue, using new Date() returns the UTC time instead of local time:

const currentDate = new Date()
console.log(currentDate.getTimezoneOffset()) // returns 0 instead of 300 for `TZ=America/New_York`

@phil-d-wilson I see you closed this issue, but I can't find any workaround, any idea?

[phil-d-wilson]

@edorgeville did you try setting an environment variable called TZ in your balenaCloud device configuration variables?

[edorgeville]

I tried adding a Device configuration environment variable but it gives this error:

Instead, I set a Device variable:

Still doesn't work. I put together a mini-repo to showcase the issue: https://github.com/edorgeville/balena-browser-timezone-bug

Thanks for answering so fast!

[phil-d-wilson]

@edorgeville no problem. Thanks for the repro. I'll try and take a look at this next week.

[edorgeville]

Hi @phil-d-wilson, just pinging in case this one slipped through the cracks. Totally fine if you're busy. Thanks! 🙂

[phil-d-wilson]

@edorgeville - I've just tested again and the TZ variable, set as a device service variable on my browser service, is pulled through into the container and works fine. I set my TZ to New York and date now returns me UTC-4 as expected.

Can you retest your mini-repo? I think the recent move to version 2 of the browser block has sorted this.

[FirbyKirby]

I think I may have the same (or a related issue.) I'm new to Balena and I'm deploying an application I didn't write, so bear with me.

I'm attempting to deploy NetStatus from balenaHub to an old RPi 2B. The release was built without an issue and the container pushed and executed without any log errors. The application hosts a page in one container and renders it using the browser balenablock. One of the functions of the application is to display a page via the browser when it detects a disconnected network. The page includes a timestamp of the last known good connection.

What I've noticed is that if I access the HTTP server using my development computer's browser, the timestamp displayed on this page is properly formatted using the local time (for me, central daylight time or CDT.) But when the same page is rendered through the browser balenablock, it only shows UTC time.

Just as observed here, I've set a device-wide environment variable for TZ (set to America/Chicago) and confirmed through SSHing into all containers of the application and executing the date command that local time is returned properly. But for some reason, this isn't translating to the rendered page in the browser container.

I've opened a ticket with the NetStatus project as well, for reference. I've made no changes to this project in my deployment, so you should be able to attempt to replicate fairly easily.

[Ryandev]

In response to @FirbyKirby I'm seeing this too. As above, setting balena device env TZ=America/Chicago & LAUNCH_URL=https://codepen.io/jcicaro/full/jBQGRL doesn't show the correct time.

However it does on my Mac running:

export TZ="America/Chicago" && open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args --user-data-dir="/tmp/chrome_dev_test" https://codepen.io/jcicaro/full/jBQGRL

The codepen link, shows the datetime from js

[gh0st]

Same issues as everyone else. Setting TZ=America/Los_Angeles and running date on the browser console yields UTC-7 but does not display time in UTC-7 in the browser on time data on the device itself. It still shows UTC-0.

[phil-d-wilson]

@Ryandev & @gh0st

A fix went in for this under #65 - this will be in version 2.0.3 The version of the block is now echo'ed in the logs at start-up, so you should be able to tell which version you're running from now on. I've just tested with 2.0.3 and the LAUNCH_URL @Ryandev provided. I can see that the current date is reported as UTC without the TZ variable, and UTC-6 when I set it to America/Los_Angeles

Please could you redeploy to your device(s) to ensure the latest version of this block is pulled, and retest? To be verbose: you will need to pull from this repo if you're pushing the code, or make sure your docker-compose is referencing balenablocks/browser:latest to get the latest build image.

Thanks for the help here! Phil

[gh0st]

Sweet, thanks @phil-d-wilson! I pulled and redeployed. Under my Releases I have the Devices on release and Release version columns showing 1 and 2.0.3 respectively. However, in the device logs it's not echo'ing the version as you mention.

06.05.21 19:07:31 (-0400) Started service 'browser sha256:fa7ca3bc2ac4314d5f68595bb8cb219c1b9259cffa39ae6f4617f1024543104c'
06.05.21 19:07:33 (-0400)  browser  setting xserver-xorg-legacy/xwrapper/allowed_users from configuration file
06.05.21 19:07:35 (-0400)  browser  Using default chromium flags
06.05.21 19:07:35 (-0400)  browser  Disabling GPU acceleration
06.05.21 19:07:35 (-0400)  browser  Using fullscreen: 3840,2160
06.05.21 19:07:35 (-0400)  browser  Using default window position
06.05.21 19:07:35 (-0400)  browser  Display rotated to portait. Reversing screen coordinates
06.05.21 19:07:35 (-0400)  browser  Reversed window size: 2160,3840
06.05.21 19:07:35 (-0400)  browser  Enabling kiosk mode
06.05.21 19:07:35 (-0400)  browser  Enabling cursor

However, the browser is still displaying times in UTC-0.

When you check your date with the TZ variable, how are you checking it? Just by running

/usr/src/app# date
Thu May  6 16:48:58 PDT 2021

?

[gh0st]

Is it true that the browser is pulling the current time from the host os? Because if true, even though the TZ env var is set to America/Los_Angeles on the device, if you date from the Host OS console, it still reads in UTC...

[edorgeville]

you will need to pull from this repo if you're pushing the code, or make sure your docker-compose is referencing balenablocks/browser:latest to get the latest build image.

@phil-d-wilson I think the balenaCloud builder doesn't automatically pull unchanged tags. Made a new release in an existing app using :latest, doesn't seem to have pulled the latest. I checked on Dockerhub for the published tags, I think publishing tags for each version would help ensuring people are pulling the right version.

[phil-d-wilson]

@edorgeville I've just pushed balenablocks/browser:latest to a Pi400 in a docker-compose file, and I get the latest version:

10.05.21 11:21:04 (+0000)  browser  balenaBlocks browser version: 2.0.3

The device was already running the same image, but was turned off, so hadn't got any updates. It's now running the latest version happily.

[phil-d-wilson]

@gh0st - the browser will pull the date from the X session which was started from the container running the browser block. The hostOS date is completely separate.

[FirbyKirby]

Confirming that the latest balenablocks browser version solves my issue with @Ryandev excellent NetStatus project. Setting TZ is properly pulled forward to chromium now and my connection lost warning properly shows the local time.