This page has instructions and notes about adding the UDT clock to a web page. See the clock in action on the UDT clock explanation page.
The graphical UDT clock uses JavaScript and requires support for the canvas element of HTML5. This means that it will not display for users who are using outdated web browsers such as Internet Explorer versions 6, 7, or 8. And quite a few users are still stuck with these dire old browsers (for instance, just under 10% of all visitors to this site in December 2012). So the graphical UDT clock may not suit your site right now if you need to present a consistent view to all users regardless of their browser version.
The text-only UDT clock should work fine in almost all browsers in common use, but make sure to conduct your own testing if failure is unacceptable. I have no realistic way of testing pages in Internet Explorer while I'm developing my site, so I gave up trying years ago and now concentrate on developing standards-compliant pages that any decent, up-to-date browser should render correctly.
The download bundle includes the udt.js file (which contains the JavaScript source code) and the RED_LED_270 image set (containing the digits and percent symbol graphics used for the clock display).
Once you've downloaded the file from this page, unpack it into a suitable directory which is accessible to the pages on which you want to display the UDT clock. The instructions below generally assume that the path to the udt.js file is "www/public_html/" and that the path to the digit graphic files is "www/public_html/digits/RED_LED_270/" but replace these paths with your own target directories.
With the files in place, add the following line to the end of the HTML page where you want to use the UDT clock.
<script src="udt.js"></script>Put this line within the body element of the page, but right at the end so that the page content is loaded first. This line tells the browser to load the udt.js file which contains the UDT code so that it's ready for use, but it does not actually cause anything to be displayed. Next you need to decide which clock you want to appear on the page.
Remember to modify the path if the udt.js file is not in the same directory as the page. For instance, if the page is in the "www/public_html/subdirectory/" path, but the udt.js file is in the "www/public_html/" path, then the src attribute in the above code would need to change to src="../udt.js" to refer to the parent directory.
If you want a graphical UDT clock to appear on the page, you firstly need to make sure that the page uses HTML5 markup, so that web browsers know that they should use new HTML5 rendering rules.
Next you need to decide where in the page the graphical clock should appear. At this location in the page you need to add a canvas element and give it a unique id attribute. For instance, to get the graphical UDT clock to appear between two paragraphs you might use the following code:
<p>Paragraph one</p>
<canvas id="udt_graphical_clock" width="700" height="133">
The UDT clock cannot be displayed because
JavaScript and HTML5 Canvas support are both required.
</canvas>
<p>Paragraph two</p>This will create a canvas element with an id of "udt_graphical_clock" and dimensions of 700 pixels wide by 133 pixels high. Set the dimensions to anything which suits your page. The UDT code scales the graphics so that they will always fit within the space available. Bear in mind that if the canvas shape is a different aspect ratio to the actual digit display, you will end up with blank space above/below or left/right of the digit line. Tweak the dimensions to suit your page and to suit the digit graphics you use.
The text placed inside the canvas element is known as fallback content. This text will be displayed if the visitor's web browser does not support HTML5 or if JavaScript is not enabled in the visitor's browser. A simple message explaining that the clock cannot be displayed lets the user know that their browser is the reason for the trouble.
Once the canvas element is in place within the page, add the following to the end of the body element, and make sure it appears after the line which loads the udt.js file:
<script type="text/javascript">
showCanvasUDT("udt_graphical_clock", "digits/RED_LED_270/", "png");
</script>This calls the showCanvasUDT function which is found in the udt.js file, and it causes the content of the canvas with id "udt_graphical_clock" to be filled with a UDT clock which uses the digit graphic files found in the "digits/RED_LED_270/" path (relative to the current page, so remember to update this path if you use digit graphics in a different directory or if you copy and paste the code to a page in a different part of the website directory tree, and make sure to end the path with a forward-slash), and specifies that the graphic digit files have the file extension "png".
If you just want the UDT graphical clock to appear on your page in a canvas of your chosen size, using the RED_LED_270 graphics bundled with the code, then that's all you need to do. If you want to use custom graphic files, see the section further down this page.
Decide where in the page you want the text-only clock to appear and insert an element with a unique id attribute value, something like the span element in this example:
<div>
<p>UDT is
<span id="udt_text_clock">(unavailable without JavaScript)</span>
</p>
</div>The target element can be an inline or a block element, and can contain any fallback content which is permitted within that type of element. The fallback content will be visible if JavaScript is not enabled in the visitor's web browser. However, note that the entire contents of the targeted element will be completely replaced by the textual UDT clock, so do not target an element which contains content you want to remain visible on the page at the same time as the UDT clock is visible.
Now add the following to the end of the body element of the page, making sure it appears after the line which loads the udt.js file:
<script type="text/javascript">
showTextualUDT("udt_text_clock");
</script>This calls the showTextualUDT function which is found in the udt.js file, and it causes the contents of the element with id "udt_text_clock" to be completely replaced with the output of the UDT text-only clock.
To allow you to customise the look of the text-only UDT clock, the class attribute of the target element is set to "udt_textual_output" and the UDT value it contains is wrapped in span elements with class attributes that you can target with CSS selectors. For example, when the UDT value is 12%3456, the structure of the target element effectively becomes as follows:
<span id="udt_text_clock" class="udt_textual_output">
<span class="udt_mostSig">12</span>
<span class="udt_percentSign">%</span>
<span class="udt_midSig">34</span>
<span class="udt_leastSig">56</span>
</span>The first two digits are wrapped in a span element with class "udt_mostSig", the percent sign is wrapped in a span element with class "udt_percentSign", the next two digits are wrapped in a span element with class "udt_midSig", and the last two elements are wrapped in a span element with class "udt_leastSig". Note that there are no line breaks in the actual structure; they've been added to the above to make it more readable.
You don't have to use the RED_LED_270 digit graphics which are bundled with the udt.js file. You can use any graphic set which meets the following criteria:
For instance, suppose you create a custom graphic set of type JPEG (all with file extension "jpg", to give files "percentsign.jpg", "0.jpg", "1.jpg" and so on) and you place them all into a directory whose path is "/www/public_html/digits/CUSTOM_UDT/" and you want to use these images for a UDT clock in a canvas with id "udt_graphical_clock" on a page in the "/www/public_html/events/" directory. Then you would use the following call to showCanvasUDT:
<script type="text/javascript">
showCanvasUDT("udt_graphical_clock", "../digits/CUSTOM_UDT/", "jpg");
</script>The first three parameters to the showCanvasUDT function are required, but several additional parameters are optional:
showCanvasUDT(canvasId, graphicPath, graphicExtension,
bgColor, scaleToFit, expLink);The background colour of the canvas will be more important if the graphics of the selected image set have transparent areas, because the background colour of the canvas will show through and might clash with the colours used in the digits. The graphics in the RED_LED_270 image set do have transparent areas, so experiment with different background colours to see what works for your page.
When the main Universal Decimal Time page was first created a decade ago, it featured a UDT clock applet written in Java. But Java never really took off as a way of adding small features to web pages, and a lot of experts now advise people to disable Java in their web browsers, because outdated, unpatched Java plugins can leave a web browser open to very serious attacks from malware which exploit security holes in old Java runtimes.
So the Java applet has been retired and the current clock is written using JavaScript (which is a separate programming language not related to Java in any way).
There are bound to be problems, aren't there? Contact me to let me know of any hiccups you discover.