simon
/
SCCD


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
							<?xml version="1.0" ?>
<diagram author="Raphael Mannadiar" name="Traffic_Light_JavaScript_Version">
	<inport name="ui" />

	<class name="MainApp" default="true">
		<relationships>
			<association name="trafficlight" class="TrafficLight" />
		</relationships>
		<method name="MainApp">
			<body>
				<![CDATA[
				this.canvas	= ui.append_canvas(ui.window,100,310,{'background':'#eee'});
				var police_button = ui.append_button(ui.window, 'Police interrupt');
				var quit_button	= ui.append_button(ui.window, 'Quit');
				ui.bind_event(police_button.element, ui.EVENTS.MOUSE_CLICK, this.controller, 'police_interrupt_clicked');
				ui.bind_event(quit_button.element, 	 ui.EVENTS.MOUSE_CLICK, this.controller, 'quit_clicked');
				]]>
			</body>		
		</method>
		<scxml initial="initializing">
			<state id="initializing">
				<transition target="../creating">
					<raise scope="cd" event="create_instance">
						<parameter expr='"trafficlight"' />
						<parameter expr='"TrafficLight"' />
						<parameter expr="this.canvas" />
					</raise>
				</transition>
			</state>
			<state id="creating">
				<transition event="instance_created" target="../initialized">
					<parameter name="association_name" type="string"/>
					<raise scope="cd" event="start_instance">
						<parameter expr="association_name" />
					</raise>
					<raise scope="narrow" event="set_association_name" target="association_name">
						<parameter expr="association_name" />
					</raise>
				</transition>
			</state>
			<state id="initialized">
			</state>
		</scxml>
	</class>

	<class name="TrafficLight">
		<relationships>
		</relationships>
		<method name="TrafficLight">
			<parameter name="canvas" />
			<body>
				<![CDATA[
				var size 	= 100;
				var offset 	= size+5;
				this.RED 	= 0;
				this.YELLOW = 1;
				this.GREEN 	= 2;
				this.colors	= ['#f00','#ff0','#0f0']
				this.lights = [canvas.add_rectangle(size/2, size/2, 		 	 size, size, {'fill':'#000'}),
									canvas.add_rectangle(size/2, size/2+offset,	 size, size, {'fill':'#000'}),
									canvas.add_rectangle(size/2, size/2+2*offset, size, size, {'fill':'#000'})];
				]]>
			</body>
		</method>
		<method name="clear">
			<body>
				<![CDATA[
				this.lights[this.RED].set_color('#000');
				this.lights[this.YELLOW].set_color('#000');
				this.lights[this.GREEN].set_color('#000');
				]]>
			</body>
		</method>
		<method name="setGreen">
			<body>
				<![CDATA[
				this.clear();
				this.lights[this.GREEN].set_color(this.colors[this.GREEN]);
				]]>
			</body>
		</method>
		<method name="setYellow">
			<body>
				<![CDATA[
				this.clear();
				this.lights[this.YELLOW].set_color(this.colors[this.YELLOW]);
				]]>
			</body>
		</method>
		<method name="setRed">
			<body>
				<![CDATA[
				this.clear();
				this.lights[this.RED].set_color(this.colors[this.RED]);
				]]>
			</body>
		</method>
		<scxml initial="on">
			<state id="on" initial="normal">
				<state id="normal" initial="red">
					<state id="red">
						<onentry>
							<script>
								<![CDATA[
								this.setRed();
								]]>
							</script>
						</onentry>
						<transition after='3' target='../green'/>
					</state>
					<state id="green">
						<onentry>
							<script>
								<![CDATA[
								this.setGreen();
								]]>
							</script>
						</onentry>
						<transition after='2' target='../yellow'/>
					</state>
					<state id="yellow">
						<onentry>
							<script>
								<![CDATA[
								this.setYellow();
								]]>
							</script>
						</onentry>
					<transition after='1' target='../red'/>
					</state>
					<transition event='police_interrupt_clicked' port='ui' target='../interrupted'/>
					<history id="history"/>
				</state>
				<state id="interrupted" initial="yellow">
					<state id="yellow">
						<onentry>
							<script>
								<![CDATA[
								this.setYellow();
								]]>
							</script>
						</onentry>
						<transition after='.5' target='../black'/>
					</state>
					<state id="black">
						<onentry>
							<script>
								<![CDATA[
								this.clear();
								]]>
							</script>
						</onentry>
						<transition after='.5' target='../yellow'/>
					</state>
					<transition event='police_interrupt_clicked' port='ui' target='../normal/history'/>
				</state>
				<transition event='quit_clicked' port='ui' target='../off'/>
			</state>
			<state id="off">
				<onentry>
					<script>
						<![CDATA[
						this.clear();
						]]>
					</script>
				</onentry>
			</state>
		</scxml>
	</class>
</diagram>