New post
0

Four time zones in one presentation

Avatar
Anja ....
None
Follow

Hi,

 

within our working Team we got a new Brightsign Box (XD234). Now I have to integrate four time zones into the presentation.

I found out, that I have to do this with HTML5. I also never worked with this.

Could someone help?

Date Votes

38 comments

  • 0
    Avatar
    acalleja

    Digital:

    https://www.codesdope.com/blog/article/how-to-create-a-digital-clock-using-javascript/

    Analog Version:
    https://www.w3schools.com/graphics/tryit.asp?filename=trycanvas_clock_start

  • 0
    Avatar
    Alex

    Acalleja, Thank you. I was able to get to this:

    --- Clock.html

    <!DOCTYPE html>
    <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>Digital Clock</title>
    <style>

    body {
      background-color: #000000;
    }

    #clock {
      font-family: 'Orbitron', sans-serif;
      color: #8B0000;
      font-size: 65px;
      text-align: center;
      padding-top: 10px;
      padding-bottom: 10px;
    }
    </style>

      <script>
      window.console = window.console || function(t) {};
    </script>

      <script>
      if (document.location.search.match(/type=embed/gi)) {
        window.parent.postMessage("resize", "*");
      }
    </script>

    </head>

    <body translate="no">
      <div id="clock"> </div>
     
          <script id="rendered-js">
    function currentTime() {
      var date = new Date(); /* creating object of Date class */
      var hour = date.getHours();
      var min = date.getMinutes();
      var sec = date.getSeconds();
      hour = updateTime(hour);
      min = updateTime(min);
      sec = updateTime(sec);
      document.getElementById("clock").innerText = "PST " + hour + " : " + min + " : " + sec;  /* adding time to the div */
      var t = setTimeout(function () {currentTime();}, 1000); /* setting timer */
    }

    function updateTime(k) {
      if (k < 10) {
        return "0" + k;
      } else
      {
        return k;
      }
    }

    currentTime(); 
        </script>
    </body></html>
     
    ---
    But after extensive googling I can't figure out how to successfully do a line break within .innertext in order for the PST to be centered above the time. Everything I've found says to use .innerHtml but when I try to use .innerHtml instead of .innertext nothing shows up. Any solutions on how to get the text "PST" above the clock? 
  • 0
    Avatar
    JRB Technical

    Change:

    .innerText = "PST " + hour 

    to

    .innerText = "PST\r\n" + hour

    And see if that works.

  • 0
    Avatar
    Zedekiah Dela Cruz

    Hi John @JRBtechnical, I'm using your html/js code for four clocks in different time zones.  I have changed it around so that the clocks are displayed horizontally but the dates/times seem to be not current.  They show 'Jan 2000' any idea why this is and how to fix it?

  • 0
    Avatar
    JRB Technical

    Zedekiah  - the time that code uses is the internal system time of the BrightSign player. If the the home clock is not correct (and the corresponding times zones also not correct), then most likely the internal clock on the player needs to be set to the current date, time, and timezone for your location.

    This should solve the issue.

  • 0
    Avatar
    Zedekiah Dela Cruz

    Good morning John, thanks for the quick reply!

     

    I tried changing the device timezone both in 'New Device Setup' and using the Brightsign Config Generator to generate a 'settings.json' file to put on the root folder of the SD card.  Neither attempts worked.  In fact, now it says 1999 for the date. 

    Also I was wondering, I was able to change tulsa time to Hawaii time but I also need Japan, Guam, and Zulu.  Any idea how to do those?  Like what names do I put.  I was able to do hawaii by changing America/Tulsa to America/Hawaii.

  • 0
    Avatar
    JRB Technical

    Sorry, I am not sure why you are having problems with the clock in the BrightSign player. Unfortunately this is not an easy thing to try and diagnose as to why the internal clock is not correct in this forum.

     

    As for changing the Time Zones, you need to change each of the four in 2 places (example America/Tulsa); one for the Date, and one for the Time, and then also change the City Text description later in the HTML (example Tulsa).

    I do not think America/Hawaii is a valid time zone in the TZ Database, so I listed the correct one below:

    Hawaii = Pacific/Honolulu

    Japan = Asia/Tokyo

    Guam = Pacific/Guam

    Zulu - UTC

     

    For others looking, here is the list of Time Zones:

    https://en.wikipedia.org/wiki/List_of_tz_database_time_zones

    Please use Time Zones with Canonical Status in the list.
    Alias and Deprecated Status Time Zones may not work or behave properly.

    Also if any countries have changed Time Zones recently, or change Time Zones at some time in the future (if the US gets rid of Daylight Saving Time for example), people may need to get an updated Moment Timezone file at some time in the future.

    You can download up to date versions here:

    https://momentjs.com/timezone/

    In most cases the Data 10 Year Range file will be fine, so you would replace...

    moment-timezone-with-data-2012-2022.min.js

    with the newer...

    moment-timezone-with-data-10-year-range.min.js

     

  • 0
    Avatar
    Matthew Hewson

    Hello I am Trying to create something similar using LG Ultra Strech Displays 3840x600 with 8 Time Zones

    Hawaii, Alaska, Pacific, Mountain, Central, Eastern, Atlantic, Zulu

    Would someone be able to help me with this?

Please sign in to leave a comment.