Animated wall clock

This application note will give an example that describes how to use the a custom script to get the time of the server and use it to adjust an animated .svg clock inside a Block. We will take a brief look at:

  • how to get the current time of the server from a local web block using the CurrentTime.js script.
  • an example of an html page with a html/svg clock animation that make use of this feature.
  • when do we need to use this kind of script to find out the time

Installation

You need a computer with a running blocks server and a web browser to use this application note. The script CurrentTime.js must be copied into the script/user/ folder.

We have prepared a PIXILAB-blocks-root folder containing everything you need to run the examples. Download this ZIP file and unpack it. If you don't know how to do this, read the instructions in the general setup section.

If you have done the general setup, copied the files and pointed to this application notes root block, follow the next steps to run this application on your computer.

  1. Start Blocks.
  2. Open the editor using the Admin button.
  3. Log in using the name admin and the password pixi.
  4. Open a second browser window and type in the URL: http://localhost:8080/spot, this is your main display and should show an animated wall clock. If this fail, you may be using a different port on your system. Check the URL bar of the editor window opened before to find out the correct port number.

How does it work

To make this work, one will need something that can tell a display spot what the current time of the server is. If the spot is your computer, a tablet or perhaps a mobile phone, chances are that the device knows its time from its operating system and this method is not really required but may be useful to keep time consistent throughout an installation. If you use a Pixilab player, perhaps offline, the device itself has no way of knowing the real-world current time. It is then more useful to get the time of a central point, in this case the server. To do this we placed a user script in the /public/script/user folder called CurrentTime.js.

We also placed a custom html file in /public/html/ called wallclock.html. This is basically just a html containing an svg animation and a script that checks the current time from the server at start and then once every hour.

As you can see we have used a web block to bring in the custom html file to blocks. Since the animation is rather small i have used the content scale to set it to 200%. I also adjusted the size if the web block to be able to see the full size and then used the Layout function in block to align the block to the center of the composition.

Manipulate the colors

Feel free to open the wallclock.html file in a text editor and try to change the colors of the hands by adjusting the colors inside the style tags.

<style>
		html, body {
			margin: 0;
			padding: 0;
		}
		.iconic-clock-hour-hand, .iconic-clock-minute-hand {
			stroke: #aaaaaa;
		}
		.iconic-clock-frame, .iconic-clock-axis {
			fill:  #aaaaaa;
		}

		.iconic-clock-second-hand-arm, .iconic-clock-second-hand-axis {
			stroke: #D53A1F;
			fill: 	#D53A1F;
		}
	</style>

Manipulate the shapes

SVG is by nature fairly easy to manipulate as the graphics is defined in XML format. There is a lot of knowledge available over the internet. W3CSchools is just one example. Go ahead and try to modify some of the elements and see what is does to the clock. The class names and the ID's is probable a very good idea to leave as they are reference the styles and are referenced from the script section. Try to comment out one of the objects, the example removes the "iconic-clock-frameclock" and leaves you with just the hands..

<!--Use this tags to comment out something in a .html or .svg file.-->