0

Four time zones in one presentation

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?

33 comments

  • 0
    Avatar
    JRB Technical

    Can you elaborate a little more?

    Do you just need 4 clocks, 1 for each time zone?

    Please describe what you visually need to see on the display.

  • 0
    Avatar
    Anja ....

    Hi JRB Technical,

    yes exactly. I have a Display, which Looks like this. Number 8 and 9 are currently pictures and should stay like this. Within the squares 3-6 we would like to have the time of (3: Hamburg), (4:Shenzhen), (5: Tulsa), (6: Montreal). It would be great if we would have the letter codes for those cities somewhere included in the clock (behind, under or whatever) This is HAM for Hamburg, SZX for Shenzhen, TUL for Tulsa und YUL for Montreal.Thanks for your help

  • 0
    Avatar
    JRB Technical

    OK, so I had to see if it could be done first.

    This is what I have:

    I didn't know zone sizes, so I made a guess at 250x720.

    What you would need to do is delete Zones 3-6 and create a new single Images zone in the size of all 4 combined.

    Then you can add a HTML5 event to that zone, and add a HTML Site with the following URL (for testing):

    http://ds-feed.info/html5/testing-only/4-zone-clock-test.html

    Make sure you check the box for 'Enable external data' for the HTML Event as well.

     

    I can change background color, font color, etc, and match to what your zone size actually is when I know the actual pixel size it ends up.

    I just wanted to make sure this would work on a BrightSign as a starting point first, and it is working.

     

    John

     

  • 0
    Avatar
    Anja ....

    Hi John,

     

    that is how I try to enter your HTML side. Unfortunatelly it still doesn´t show up on my Screen when I publish it.

    It only shows an empty black side.

    Anja

  • 0
    Avatar
    Anja ....

    And when I save the HTML5 Scrips localy, only the Name of the cities appears on the Screen

  • 0
    Avatar
    JRB Technical

    Anja,

    My apologies, I didn't ask if the player was connected to the Internet or not. This does not need the internet connection to work as written.

    It will work also as Local Content (when you add HTML site) but I am assuming it didn't work because you were missing the 2 moment-js files that are also needed.

    You can download all 3 files here:

    https://app.box.com/s/v07pgf3k2weo6ddn2gyc367srawysesq

    Put them all in the same folder, and then do a Add HTML Site, and select the HTML file. The 2 .js files will not show up when you add the html file, but they should be added and transferred to the player automatically when you publish, as long as they are all in the same folder when you add.

    Hopefully that will solve the issue. Please let me know if not, but that way worked for me here as well just now.

    John 

     

     

     

  • 0
    Avatar
    Anja ....

    Hi John,

    Thank you so much. It works perfectly. I could change the colour and the size by myself.

    Hope you are having a great day :)

  • 0
    Avatar
    JRB Technical

    Glad to hear! Thanks Anja!

  • 0
    Avatar
    Jake Cairns

    Hello, i think i am trying to do something similar to this except i am displaying two time zones. first one is the default timezone of the player which i did and the second one is the standard UTC time? i would also like to display the time zone in 24 hour format? 

     

    could you advise me please?

     

     

    thanks jake

  • 0
    Avatar
    JRB Technical

    Jake:

     

    For 24 hour time, in the HTML code referenced above, look for:

    .format('h:mm a');

    and change it to

    .format('k:mm');

    to display 24 hour time. 

    'k' is for 1 2 ... 23 24

    us 'kk' if you want 01 02 ... 23 24

     

    For the TimeZone, in the HTML code referenced above, look for the time zone setting that looks similar to this:

    .tz('America/Chicago')

    and to display UTC time, change it to this:

    .tz('UTC')

     

    I hope that helps!

    John

     

  • 0
    Avatar
    Jake Cairns

    thanks for the quick response,

     

    i have attempted the above instructions but when i add the HTML file all i seem to get is the names of the timezones showing but not the actual times. do you know where i might be going wrong?

     

    thanks jake 

  • 0
    Avatar
    Jake Cairns
    All i get is is following text:
     
     
    "Hamburg
     
     
    Shenzhen
     
     
    Tulsa
     
     
    Montréal"
     
     
     
    thanks again for your help
     
    jake
     
  • 0
    Avatar
    JRB Technical

    Sounds like you are missing the .js files, you need both .js files in the same folder as the html file.

     

    You can download all 3 files here:

    https://app.box.com/s/v07pgf3k2weo6ddn2gyc367srawysesq

     

     

  • 0
    Avatar
    Jake Cairns

    good morning,

    I managed to get this working thank you very much. just one more thing i wanted to ask is what would i need to change in the HTML Code to display the Cyprus time zone? 

    thanks Jake 

  • 0
    Avatar
    JRB Technical

    Sorry, it's been a busy week.

    Instead of America/Chicago or UTC

    .tz('America/Chicago')

    .tz('UTC')

     

    You would change to Europe/Nicosia for Cyprus (most areas)

    or change to Asia/Famagusta for Northern Cyprus

    .tz('Europe/Nicosia')
    .tz('Asia/Famagusta')

     

     

  • 0
    Avatar
    Matthew Whyatt

    Hi, 

    trying to do something similar with the clocks but different location and time zones. 

    looking at all 4 work clocks in zone 3: 

     

    looking for time zones of UK / EAST COAST US / SHANGHAI / MUMBAI

     

    is this something you can advise on it would be much appreciated.

    Matt 

  • 0
    Avatar
    Jake Cairns

    Good Evening Matt, 

    To add 4 time zones to your zone you will need to add a HTML5 Event to your zone 3. 

    Download the files from the link below, i would suggest putting them in the same folder as your bright-sign presentation. These are the same files that JRB Technical is providing in the above comments except these ones have been edited for the time zones you require

    www.we.tl/t-qTB6byrlTq

    unlike the comments above you are going to select local content and navigate to the file called "4-zone-clock-test.html

    when you now publish your content you should then get something along the lines of the following displaying.

     

    once you've got this please message back with the size of your zone 3 in pixels. Then i will size the text accordingly and resend you the files without a background.

     

    Thanks Jake

  • 0
    Avatar
    Matthew Whyatt

    Hi Jake, 

    Thank you for coming back to me on this so quickly. 

    With regards to the Clock i would be using them in a different orientation, not in a portrait layout but in a landscape so would need them next to one and other not on top. 

    My Zone Dims: 1090x150

    If you can change the layout to Side by Side that would be much appreciated. 

    Thanks

    Matt 

     

     

  • 0
    Avatar
    Jake Cairns

    Heres the best i could do. if you want to align it you will need to amend the CSS. Bright sign support may be ale to help you do this. you are effectively just displaying a webpage on the bright sign player

    https://we.tl/t-uOg6WE07kn

    Thanks Jake

     

  • 0
    Avatar
    Christian Brzys

    Hi,

    Wondering if someone may be able to help me out as well.  I have a need for 4 horizontal clocks as above except in 24hr format.

     

    Clocks would be as follows:

    Fort Bliss, TX

    Washington, DC

    Kabul

    Seoul

     

    Zone resolution is 1920x324

     

  • 0
    Avatar
    Jake Cairns

    Good Morning, do you still need help with this? i can send you the files i did previously once i'm home tonight.

     

    jake

  • 0
    Avatar
    Jake Cairns

    Managed to find the files you need Christian and have amended the time zones to be the ones i think you require. Here is the download link. 

    https://we.tl/t-ukjCWp88Ni

    you may need to play around with the CSS for spacing corrections. also the screenshot below has a coral background in. i have removed this. you can change the text colour in the HTML File.

     

    Thanks Jake

     

  • 0
    Avatar
    Christian Brzys

    Jake,

    Thank you so much for getting back to me so quickly. I will test it out today and let you know if I have any other questions.

    Thanks again,

    Christian

  • 0
    Avatar
    Patrick Dudiak

    Hello,

     

    I have made a test file to test publishing a file with multiple timezones via the HTML5 files JRB posted a while back. I currently do not have a device to test with, so I am trying to use the preview feature in BrightAuthor. Should I be able to see the timezone information in preview? I only see a white box where the timezones should be, and I'm unsure if this is a Programming issue or a Preview issue.

     

    Thank you

  • 1
    Avatar
    JRB Technical

    Unfortunately the BrightAuthor preview doesn't work for many things. BrightSign developers never seemed to really finish that feature, and now it looks like they are abandoning BrightAuthor development completely.

    If works in Chrome, it should work on a BrightSign player with HTML5 capabilities, but the only way to really test is to publish to a player.

  • 0
    Avatar
    Brandon

    The BrightAuthor preview is not an accurate representation of the play's output, especially for HTML.

    BrightAuthor and BrightSign Network are still being maintained.  However, I would not expect any major feature additions as new development is focused on BrightAuthor:connected and BSN.cloud

    _________________________________________________________________________

    Friendly reminder, the community forum is intended for user-to-user discussion.  It is not regularly monitored. For troubleshooting problems and to ensure a timely answer from a BrightSign representative, please submit a support ticket.

  • 0
    Avatar
    Patrick Dudiak

    Hi All,

    I'm in the process of trying to publish a show file with the .js files from earlier in this thread. I had success publishing this on to one XT244 by publishing local to an SD card. I tried this again on another machine, with the same files, and I'm getting a prompt that says the html site 'contains 788 files. Would you like to proceed?'. I did not get this prompt the first time, but after clicking continue on the second device, I can't get the file to publish. Any ideas what may have happened?

  • 0
    Avatar
    Lyndon

     

    Brightauthor assumes the html file you publish needs all files in the same folder as that file. So, if you dropped your html file in the documents folder, it would try to publish everything in the documents folder. So, your html file needs to be in a subfolder with just it's assets, and nothing else. 

  • 0
    Avatar
    Patrick Dudiak

    Thank you. That was the issue. I'm now having issues getting all of the data from the html site to play from the player. Is there someone where specific the .js files need loaded? FYI, I'm using BrightAuthor, not BrightAuthor: Connected.

  • 0
    Avatar
    Alex

    Can someone post the HTML5 code to build a widget that displays a time zone text and the MM:HH under it? I would like to ultimately build two (bottom and top of displa) or 8 zones (one for each time zone), whichever will be easier that look like:

    Appreciate any help that can be provided. 

Please sign in to leave a comment.