PIXILAB Wiki

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision 		Previous revision
blocks:app-note:world_clock [2020-10-16 15:15]
mattias [World Clock] 		blocks:app-note:world_clock [2022-06-22 19:06] (current)
admin removed atom references
Line 1: Line 1:
 +====== World Clock ======
  
-This application note describes the use of a web block to show a locally stored webpage showing a corporate reception style world clock.+This application note shows how to use a Web Block to show a reception-style world clock. The web page shown uses the local player's time, interpreted using multiple time zones. This applies Daylight Savings Time and GMT offset as appropriate.
  
-This application uses a client-side script to fetch the local computer time. The value is parsed out using a time zone setting and applies Daylight Savings Time and GMT offset according to the time zone setting in the configuration. +:!: This assumes your player's clock is set properly. 
-:!: It is important to have a correct computer time. +
-Most computers, mobile devices and tablets will fetch this automatically via internet using NTP servers or by other means. Pixilab Player kiosks must be configured to use NTP server to set the computer time. [[blocks:porteus_kiosk#automatic_configuration|See this section for details. +
-]] +
-Hardware RTC clocks will drift away substancially over time if doesent get sync from the internet.. +
-In the case of a offline installation with no access to the internet there are at least two options. Setup a [[https://www.gude.info/en/radio-time-systems/dcf77-time-server/emc-professional-3011.html|dedicated hardware NTP server]] on the local network that synchronises its built-in clock via radio or GPS. Even without any means to synchronise such device it has a high-quality temperature compensated machine clock that outperforms any PC clock in terms of stability.+
  
 ===== Installation ===== ===== Installation =====
  
-First follow this [[blocks:app-note:start|general setup]]. Use this {{:blocks:app-note:cou{{ :blocks:app-note:world_clock:worldclock-root.zip|PIXILAB-Blocks-root}}, which contains all you need for this application note.  +First follow this [[blocks:app-note:start|general setup]]. Use this {{ :blocks:app-note:world_clock:worldclock-root.zip |PIXILAB-Blocks-root}}, which contains all you need for this application note. Once that is done, follow these steps:
-Once that is done, follow these steps:+
  
  
Line 20: Line 15:
   - Open a second browser window and type in the URL: http://localhost:8080/spot/. If this fails, you may be using a different port on your system. Check the URL bar of the editor window opened before to find the correct port number.   - Open a second browser window and type in the URL: http://localhost:8080/spot/. If this fails, you may be using a different port on your system. Check the URL bar of the editor window opened before to find the correct port number.
   - Locate the main display in the editor, double-click it and reassign it to the ID shown in the test spot window opened in the previous step.   - Locate the main display in the editor, double-click it and reassign it to the ID shown in the test spot window opened in the previous step.
-. 
  
 You should now see the world clock on the display spot.  You should now see the world clock on the display spot. 
Line 34: Line 28:
 ===== Configure locations ===== ===== Configure locations =====
  
-Open the root folder in Atom (or your favourite editor) and open the /public/html/WorldClock/config.json file.+Open the root folder a [[blocks:drivers:tools|code editor]] and open the /public/html/WorldClock/config.json file.
  
 {{:blocks:app-note:world_clock:configtimezones.png?nolink&800|}} {{:blocks:app-note:world_clock:configtimezones.png?nolink&800|}}
Line 45: Line 39:
  
 The default styling is found inline in the index.html file. This can be edited as required or a separate stylesheet can be linked from the index.html file to suit your project.  The default styling is found inline in the index.html file. This can be edited as required or a separate stylesheet can be linked from the index.html file to suit your project. 
-