/demo/clock/Clock.hx

  1package ;
  2
  3import cocktail.domElement.ImageDOMElement;
  4import haxe.Log;
  5import haxe.Timer;
  6import cocktail.domElement.GraphicDOMElement;
  7import cocktail.domElement.TextDOMElement;
  8import cocktail.domElement.abstract.AbstractDOMElement;
  9import cocktail.domElement.DOMElementData;
 10import cocktail.geom.GeomData;
 11import cocktail.domElement.DOMElement;
 12import cocktail.nativeElement.NativeElementManager;
 13import cocktail.resource.ResourceLoaderManager;
 14
 15
 16/**
 17 * Display an "analogue" and numeric clock updated each seconds
 18 * @author Yannick DOMINGUEZ
 19 */
 20class Clock 
 21{
 22	/**
 23	 * the background of the analogue clock
 24	 */
 25	private var _clockBackground:ImageDOMElement;
 26	
 27	/**
 28	 * the foreground of the analogue clock
 29	 */
 30	private var _clockForeGround:ImageDOMElement;
 31	
 32	/**
 33	 * the second needle of the clock
 34	 */
 35	private var _secondNeedle:ImageDOMElement;
 36	
 37	/**
 38	 * the minute needle of the clock
 39	 */
 40	private var _minuteNeedle:ImageDOMElement;
 41	
 42	/**
 43	 * the hour needle of the clock
 44	 */
 45	private var _hourNeedle:ImageDOMElement;
 46	
 47	/**
 48	 * the numeric clock 
 49	 */
 50	private var _clockDisplay:TextDOMElement;
 51	
 52	/**
 53	 * count the loading of assets
 54	 */
 55	private var _loadedAssetsCounter:Int;
 56	
 57	/**
 58	 * the center of the rotation for the second nedle
 59	 * as this needle goes further than the clock half
 60	 */
 61	private var _secondNeedleRotationCenter:Point;
 62	
 63	
 64	/**
 65	 * The root of the dom (stage in flash, body in html)
 66	 */
 67	private static var rootDOMElement:DOMElement;
 68	
 69	/**
 70	 * init the root dom element of the publication 
 71	 */
 72	public static function main()
 73	{
 74		rootDOMElement = new DOMElement(NativeElementManager.getRoot());
 75		
 76		//ibnstantiate the clock class
 77		var cl:Clock = new Clock();
 78	}
 79	
 80	/**
 81	 * starts the loading of all the clocks parts
 82	 */
 83	public function new() 
 84	{
 85		_loadedAssetsCounter = 0;
 86		
 87		ResourceLoaderManager.loadImage("assets/second_needle.png", onSecondNeedleLoaded, function(err){});
 88		ResourceLoaderManager.loadImage("assets/hour_needle.png", onHourNeedleLoaded, function(err){});
 89		ResourceLoaderManager.loadImage("assets/minute_needle.png", onMinuteNeedleLoaded, function(err){});
 90		ResourceLoaderManager.loadImage("assets/clock_background.png", onClockBackgroundLoaded, function(err){});
 91		ResourceLoaderManager.loadImage("assets/clock_foreground.png", onClockForegroundLoaded, function(err){});
 92	}
 93	
 94	/**
 95	 * Called once all the clock's assets
 96	 * are loaded
 97	 */
 98	private function init()
 99	{
100		//init the numeric hour display
101		_clockDisplay = new TextDOMElement();
102		
103		//ad all dom elements to the DOM
104		rootDOMElement.addChild(_clockBackground);
105		rootDOMElement.addChild(_secondNeedle);
106		rootDOMElement.addChild(_minuteNeedle);
107		rootDOMElement.addChild(_hourNeedle);
108		rootDOMElement.addChild(_clockForeGround);
109		rootDOMElement.addChild(_clockDisplay);
110		
111		//prepare the rotation center of the second needle
112		var secondNeedleOffset:Float = 15.0;
113		
114		_secondNeedleRotationCenter = {
115			x:_secondNeedle.width / 2,
116			y:_secondNeedle.height - secondNeedleOffset
117		}
118		
119		//set the pivot point for each needle
120		_secondNeedle.registrationPoint = point(_secondNeedleRotationCenter);
121		_minuteNeedle.registrationPoint = constant(center, bottom);
122		_hourNeedle.registrationPoint = constant(center, bottom);
123		
124		//move all the needles and the foreground to the center
125		_secondNeedle.translate(_clockBackground.width / 2 - _secondNeedle.width /2, (_clockBackground.height / 2 - _secondNeedle.height + secondNeedleOffset));
126		_minuteNeedle.translate(_clockBackground.width / 2 - _minuteNeedle.width / 2, (_clockBackground.height / 2 - _minuteNeedle.height ));
127		_hourNeedle.translate(_clockBackground.width / 2 - _hourNeedle.width / 2, (_clockBackground.height / 2 - _hourNeedle.height));
128		_clockForeGround.translate(_clockBackground.width / 2 - _clockForeGround.width / 2, (_clockBackground.height / 2 - _clockForeGround.height / 2));
129		
130		//set up the text display
131		_clockDisplay.width = 300;
132		_clockDisplay.y = _clockBackground.height;
133		
134		//update the needle position and the text display with the current time
135		//and enter a loop, refreshing every second
136		updateTime();
137		
138		
139	}
140	
141	/**
142	 * Update the clock display and set another delay
143	 * re-calling this function every second
144	 */
145	private function updateTime():Void
146	{
147		_clockDisplay.text = Date.now().toString();
148		
149		_secondNeedle.rotation = Math.round(Date.now().getSeconds() * 6);
150		_minuteNeedle.rotation = Math.round(Date.now().getMinutes() * 6);
151		_hourNeedle.rotation = Math.round(Date.now().getHours() * (360/12));
152		
153		Timer.delay(updateTime, 1000);
154	}
155	
156
157	
158	/////////////////////////////////////////////
159	// ASSET LOADING CALLBACK
160	// Call the init method once all assets are loaded
161	////////////////////////////////////////////
162	
163	private function onHourNeedleLoaded(imageDOMElement:ImageDOMElement):Void
164	{
165		_hourNeedle = imageDOMElement;
166		checkLoadedAssets();
167	}
168	
169	private function onMinuteNeedleLoaded(imageDOMElement:ImageDOMElement):Void
170	{
171		_minuteNeedle = imageDOMElement;
172		checkLoadedAssets();
173	}
174	
175	private function onSecondNeedleLoaded(imageDOMElement:ImageDOMElement):Void
176	{
177		_secondNeedle = imageDOMElement;
178		checkLoadedAssets();
179	}
180	
181	private function onClockBackgroundLoaded(imageDOMElement:ImageDOMElement):Void
182	{
183		_clockBackground = imageDOMElement;
184		checkLoadedAssets();
185	}
186	
187	private function onClockForegroundLoaded(imageDOMElement:ImageDOMElement):Void
188	{
189		_clockForeGround = imageDOMElement;
190		checkLoadedAssets();
191	}
192	
193	private function checkLoadedAssets()
194	{
195		_loadedAssetsCounter++;
196		if (_loadedAssetsCounter == 5)
197		{
198			init();
199		}
200	}
201	
202	
203}