Silverlight Continue Time Clock

Mo	Tu	We	Th	Fr	Sa	Su
30	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31	1	2	3
4	5	6	7	8	9	10

September
---
2009

Silverlight Continue Time Clock...

Silverlight Continue Time Clock I seem to be unable to break free form any projects that are somehow related to clocks or watches. This time I saw a YouTube movie about an unique clock with a very creative way of displaying time.

It's design is by Sander Mulder and can be seen here: Continue Time Clock. It allows a single arm that is segmented in three parts, to show the hours, minutes and seconds with each correspondent segment at the same time, and although it may not be very intuitive, it is extremely creative and elegant at the same time.

Here is my attempt at re-creating the mechanism of this clock in Silverlight 3.0 ...

It turned out to be relatively simple, by creating a class for each arm and let the hour arm class contain an instance the minute arm class and the minute arm class an instance of the second arm class. This way I could just spin them around their RenderTransformOrigin and they would maintain their relative position at the tip of their parent arm.

MainPage.xaml.cs code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace silverlight_clock_singlearm
{
	public partial class MainPage : UserControl
	{
		public static double armHourAngle;
		public static double armMinuteAngle;
		public static double armSecondAngle;

private Storyboard StoryBoard = new Storyboard();

private ArmSecond armSecond;
		private ArmMinute armMinute;
		private ArmHour armHour;
		
		public MainPage()
		{
			InitializeComponent();

this.armSecond = new ArmSecond();
			this.armMinute = new ArmMinute(this.armSecond);
			this.armHour = new ArmHour(this.armMinute);

this.Canvas_Root.Children.Add(armHour);

TranslateTransform translateTransform = 
				new TranslateTransform();
			translateTransform.X = 200;
			translateTransform.Y = 50;

this.armHour.RenderTransform = translateTransform;

this.StartClock();
		}

private void StartClock()
		{
			this.StoryBoard.Duration = TimeSpan.FromMilliseconds(1);
			this.StoryBoard.Completed += 
				new EventHandler(StoryBoardSeconds_Completed);

StoryBoard.Begin();
		}

private void StoryBoardSeconds_Completed(object sender, EventArgs e)
		{
			DateTime now = DateTime.Now;

armHourAngle	= this.armHour.setAngle(now);
			armMinuteAngle	= this.armMinute.setAngle(now);
			armSecondAngle	= this.armSecond.setAngle(now);

this.txtTime.Text			= "Time: " + now.ToLongTimeString();

this.txtHourAngle.Text	= 
				"HourAngle: " + armHourAngle.ToString("0.00");
			this.txtMinuteAngle.Text = 
				"MinuteAngle: " + armMinuteAngle.ToString("0.00");
			this.txtSecondAngle.Text = 
				"SecondAngle: " + armSecondAngle.ToString("0.00");

StoryBoard.Begin();
		}
	}
}

ArmHour.xaml.cs code

namespace silverlight_clock_singlearm
{
	public partial class ArmHour : UserControl
	{
		private RotateTransform rotateTransform = new RotateTransform();

public ArmHour(ArmMinute _armMinute)
		{
			InitializeComponent();

this.CanvasArmHour.Children.Add(_armMinute);
		}

internal double setAngle(DateTime _now)
		{
			int _hour = _now.Hour;
			int _minute = _now.Minute;

double hourFull		= (double)_hour		*	30.00;
			double hourFraction = (double)_minute	*	0.50;

this.rotateTransform.Angle = hourFull + hourFraction;

this.CanvasArmHour.RenderTransform = rotateTransform;

//adjust the face so it stays straight to the viewer ~~~~~~~
			TransformGroup FacePlateMinuteTransformGroup = 
				new TransformGroup();

TranslateTransform translateTransformFacePlateMinute = 
				new TranslateTransform();
			translateTransformFacePlateMinute.X = -72;
			translateTransformFacePlateMinute.Y = -47;

RotateTransform rotateTransformFacePlateMinute = 
				new RotateTransform();
			rotateTransformFacePlateMinute.Angle = 
				360 - this.rotateTransform.Angle;

FacePlateMinuteTransformGroup.Children.Add(
				rotateTransformFacePlateMinute);
			FacePlateMinuteTransformGroup.Children.Add(
				translateTransformFacePlateMinute);
			
			this.FaceMinute.RenderTransform = FacePlateMinuteTransformGroup;
			// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

return this.rotateTransform.Angle;
		}
	}
}

ArmMinute.xaml.cs code

namespace silverlight_clock_singlearm
{
	public partial class ArmMinute : UserControl
	{
		private RotateTransform rotateTransform = new RotateTransform();
		private RotateTransform rotateTransformFacePlate = 
			new RotateTransform();

public ArmMinute(ArmSecond _armSecond)
		{
			InitializeComponent();

this.CanvasArmMinute.Children.Add(_armSecond);

TranslateTransform translateTransform = 
				new TranslateTransform();
			translateTransform.X = 2.5;
			translateTransform.Y = -53;

this.RenderTransform = translateTransform;
		}

internal double setAngle(DateTime _now)
		{
			int _minute = _now.Minute;
			int _seconds = _now.Second;

double minuteFull = (double)_minute * 6.00;
			double minuteFraction = (double)_seconds * 0.1;

this.rotateTransform.Angle = 
				minuteFull + minuteFraction - MainPage.armHourAngle;
			this.CanvasArmMinute.RenderTransform = rotateTransform;

//adjust the face so it stays straight to the viewer ~~~~~~~
			TransformGroup FacePlateSecondTransformGroup = 
				new TransformGroup();

TranslateTransform translateTransformFacePlateSecond = 
				new TranslateTransform();
			translateTransformFacePlateSecond.X = -54;
			translateTransformFacePlateSecond.Y = -24;

RotateTransform rotateTransformFacePlateMinute = 
				new RotateTransform();
			rotateTransformFacePlateMinute.Angle = 
				360 - this.rotateTransform.Angle - MainPage.armHourAngle;

FacePlateSecondTransformGroup.Children.Add(
				rotateTransformFacePlateMinute);
			FacePlateSecondTransformGroup.Children.Add(
				translateTransformFacePlateSecond);

this.FaceSecond.RenderTransform = FacePlateSecondTransformGroup;
			// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

return this.rotateTransform.Angle;
		}
	}
}

ArmSecond.xaml.cs code

namespace silverlight_clock_singlearm
{
	public partial class ArmSecond : UserControl
	{
		private RotateTransform rotateTransform = new RotateTransform();

public ArmSecond()
		{
			InitializeComponent();

TranslateTransform translateTransform = 
				new TranslateTransform();
			translateTransform.X = 2.2;
			translateTransform.Y = -40;

this.RenderTransform = translateTransform;
		}

internal double setAngle(DateTime _now)
		{
			int _seconds = _now.Second;
			int _milliseconds = _now.Millisecond;

double secondFull = (double)_seconds * 6.00;
			double secondFraction = ((double)_milliseconds / 1000.00) * 6.00;

this.rotateTransform.Angle = 
				(secondFull + secondFraction) - 
					MainPage.armMinuteAngle - MainPage.armHourAngle;
			this.CanvasArmSecond.RenderTransform = rotateTransform;

return this.rotateTransform.Angle;
		}
	}
}

Enjoy!

Author

Recent posts

Advertisements

Archive

Calendar

Tags

Subscribe

Categories

Search

Validation

Disclaimer

Silverlight Continue Time Clock...

MainPage.xaml.cs code

ArmHour.xaml.cs code

ArmMinute.xaml.cs code

ArmSecond.xaml.cs code