SVG Clocks and Calendar Using AngularJS and jQuery

This clock is an example of integrating Scalable Vector Graphics with AngularJS to display a clock based on the client's computer clock.

The code for the above clock was obtained from the link in German at https://angularjs.de/artikel/angularjs-svg-clock, and was modified as follows:

  1. The JavaScript source code at clocks-controller.js was changed so that the positions of the minute and hour hands were interpolated from the seconds and minutes respectively, rather than being updated on the minute and hour respectively.
  2. The second, minute and hour hands were made to appear more realistic.
  3. Hour and minute markers were placed around the clock face. Note that in SVG an ng-repeat attribute cannot be placed in a <div> tag, so a <g> tag is used.

The whole control of the clock was performed by AngularJS, both in the display and in the motion of the hands. No jQuery was used, unlike for the interactive digital displayed timer/clock/calendar, see below.


{{ndigits}}
Simulation of a 7 segment digital display clock, timer and calendar generated by AngularJS and controlled by jQuery.
Select hours in tens:     Select hours in units:
Select minutes in tens: Select minutes in units:
Select seconds in tens: Select seconds in units:
               

Each digit is made up of 7 segments, with each segment controlled by a bit to specify whether it is on or off, thus each of the digits 0-9 is controlled by a 7 bit code. Some other characters are also encoded, of which a blank digit and a dash are also used here. The HTML5 and SVG code for the whole page is at clocks-calen.html, the CSS code used to style the analogue and digital clocks is at clocks-calen.css, and the JavaScript source code that controls the digital display is at digitalcalen-jquery.js.

This can operate in two modes, namely as a clock plus calendar showing the current time in 24 hour format on the client's computer with the date above it in the format yyyy:mm:dd, or as a timer. In both cases the second-units is incremented until it reaches 9, then rolls over to 0 and the second-tens is incremented. Once 59 seconds is reached, the units and tens roll over to 0 and the minute-units is incremented, and the same process is repeated for the minutes. The logic for the hours is a bit more complicated. The hour-units increase until 9 is reached, then rolls over to 0 and the hour-tens in then incremented, but it and the hour-units must not exceed 23. When 23:59:59 is reached, all digits roll over to 0. This is done instead of checking the time or timer every second for each digit, then updating those digits that change in addition to the seconds. However, when it is displayed, the calendar is much simpler. After initialization, it is only updated when the time rolls over at midnight, and the full date is refreshed, rather than incrementing the day of the month, then having to determine if the 10s have to be incremented, and the month and the year also have to be incremented. The colon ":" separators between the hours, minutes and seconds alternate between being switch on and off every second, simulating a real clock. A period "." is used to separate the year, month and day in the calendar in the Hungarian date formal.

When operating in the timer mode, a tick is generated every 100th of a second, but the timer is only updated every second, and nothing less than a second is displayed. When the timer is stopped, the elapsed time is displayed to the right of the decimal point to the nearest 100th of a second. The 6 input fields can be used to set the time the time will start, as explained below. Note that the accuracy of the display depends on the accuracy of the client's computer clock.

Using the display in clock/calendar mode:

To start the clock, click the right most "Start Clock/Calendar" button, and the computer's clock will be used to set the display to the current time and date. The time will be shown with the calendar appearing above it. The 6 input fields for setting the hours, minutes and seconds will be hidden, and any values in them will be ignored. The time will be incremented every second with the separators toggling between on and off. The "Set Digits", "Start Timer" and "Start Clock/Calendar" buttons are disabled. The decimal point and the digits to its right are off as they are not used.

The clock will continue ticking until it is stopped. If midnight is passed, the time rolls over to 00:00:00 and next day's date is displayed in the calendar. To stop the clock, click the "Stop Timer/Clock" button and the clock will stop and display the time it was stopped. The calendar disappears, all the buttons are re-enabled, and the input fields are displayed again.

When the clock is started it is set to the time and date using the JavaScript new Date() object to read the client's clock, then it uses the JavaScript startTimer() function to increment the digital clock at 1 second intervals without checking against the client's clock. If the client is particularly busy performing other functions, the clock may get out of synchronization. It can be re-synchronized by clicking anywhere on the digital clock and calendar display, then a JavaScript alert message will be displayed showing the time lag rounded to the nearest second, and on clicking "OK", the clock is re-synchronized. This feature does nothing when the clock is not running, or is running in timer mode.

Using the display in timer mode:

Before starting the timer, either click the "Reset Digits" button, which will set all digits to zero if they are not, or for some other time select the values of the digits from the 6 input "spinner" fields, then click "Set Digits". Note that if an attempt is made to specify a time larger than 23 hours, the digits will be displayed in red, and the two digits for the hours will be set to zero. Also note that some browsers only show the input fields as regular text inputs, so all input fields are checked for any invalid values, and if found, these are set to zero with the digits displayed in red. If any invalid inputs have been given, either click the "Set Digits" button with the corrected values or the "Reset Digits" button before starting the timer. This mode can also be used to display the time in a different time zone.

When ready to start counting, click the "Start Timer" button, and as previously the "Set Digits", "Start Timer", and "Start Clock" buttons are disabled, and the input fields are hidden. The timer will start counting with the separators toggling between on and off. However, this time the decimal point is displayed and horizontal lines are displayed for the two digits to its right indicating that the time is being counted to 100th of a second, even though this is not displayed.

The timer will continue running until it is stopped. To stop it, click the "Stop Timer/Clock" button, and the display will show the time spent running to the nearest 100th of a second by showing the two digits to the right of the decimal point. As previously, all the buttons will re re-enabled and the input fields will be displayed.

The digital display of the calendar and the time/timer are in two inner SVG blocks embedded in an outer SVG block. The outer block is used to create the geometric figures used in the embedded blocks, and avoids duplicating some of the code. The number of digits, 8, is used to display the elapsed time when the timer has been stopped, and the calendar, is specified in the Angular controller file, is passed to the HTML file using the Angular "{{ }}" data binding expression to insert the value into a <div> tag in the html file, which is then picked up by using jQuery. This appears to be the easiest way of specifying the number of digits in one central place and passing it to the locations needed.




Click here to return to the SVG/AngularJS/JSF integration page.

Click here to return to the main selection page.