traffic_js.xml 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
  1. <?xml version="1.0" ?>
  2. <diagram author="Raphael Mannadiar" name="Traffic_Light_JavaScript_Version">
  3. <description>
  4. </description>
  5. <top>
  6. </top>
  7. <inport name="ui" />
  8. <class name="MainApp" default="true">
  9. <relationships>
  10. <association name="trafficlight" class="TrafficLight" />
  11. </relationships>
  12. <method name="MainApp">
  13. <body>
  14. <![CDATA[
  15. this.canvas = ui.append_canvas(ui.window,100,310,{'background':'#eee'});
  16. var police_button = ui.append_button(ui.window, 'Police interrupt');
  17. var quit_button = ui.append_button(ui.window, 'Quit');
  18. ui.bind_event(police_button.element, ui.EVENTS.MOUSE_CLICK, this.controller, 'police_interrupt_clicked');
  19. ui.bind_event(quit_button.element, ui.EVENTS.MOUSE_CLICK, this.controller, 'quit_clicked');
  20. ]]>
  21. </body>
  22. </method>
  23. <scxml initial="initializing">
  24. <state id="initializing">
  25. <transition target="../creating">
  26. <raise scope="cd" event="create_instance">
  27. <parameter expr='"trafficlight"' />
  28. <parameter expr='"TrafficLight"' />
  29. <parameter expr="this.canvas" />
  30. </raise>
  31. </transition>
  32. </state>
  33. <state id="creating">
  34. <transition event="instance_created" target="../initialized">
  35. <parameter name="association_name" type="string"/>
  36. <raise scope="cd" event="start_instance">
  37. <parameter expr="association_name" />
  38. </raise>
  39. <raise scope="narrow" event="set_association_name" target="association_name">
  40. <parameter expr="association_name" />
  41. </raise>
  42. </transition>
  43. </state>
  44. <state id="initialized">
  45. </state>
  46. </scxml>
  47. </class>
  48. <class name="TrafficLight">
  49. <relationships>
  50. </relationships>
  51. <method name="TrafficLight">
  52. <parameter name="canvas" />
  53. <body>
  54. <![CDATA[
  55. var size = 100;
  56. var offset = size+5;
  57. this.RED = 0;
  58. this.YELLOW = 1;
  59. this.GREEN = 2;
  60. this.colors = ['#f00','#ff0','#0f0']
  61. this.lights = [canvas.add_rectangle(size/2, size/2, size, size, {'fill':'#000'}),
  62. canvas.add_rectangle(size/2, size/2+offset, size, size, {'fill':'#000'}),
  63. canvas.add_rectangle(size/2, size/2+2*offset, size, size, {'fill':'#000'})];
  64. ]]>
  65. </body>
  66. </method>
  67. <method name="clear">
  68. <body>
  69. <![CDATA[
  70. this.lights[this.RED].set_color('#000');
  71. this.lights[this.YELLOW].set_color('#000');
  72. this.lights[this.GREEN].set_color('#000');
  73. ]]>
  74. </body>
  75. </method>
  76. <method name="setGreen">
  77. <body>
  78. <![CDATA[
  79. this.clear();
  80. this.lights[this.GREEN].set_color(this.colors[this.GREEN]);
  81. ]]>
  82. </body>
  83. </method>
  84. <method name="setYellow">
  85. <body>
  86. <![CDATA[
  87. this.clear();
  88. this.lights[this.YELLOW].set_color(this.colors[this.YELLOW]);
  89. ]]>
  90. </body>
  91. </method>
  92. <method name="setRed">
  93. <body>
  94. <![CDATA[
  95. this.clear();
  96. this.lights[this.RED].set_color(this.colors[this.RED]);
  97. ]]>
  98. </body>
  99. </method>
  100. <scxml initial="on">
  101. <state id="on" initial="normal">
  102. <state id="normal" initial="red">
  103. <state id="red">
  104. <onentry>
  105. <script>
  106. <![CDATA[
  107. this.setRed();
  108. ]]>
  109. </script>
  110. </onentry>
  111. <transition after='3' target='../green'/>
  112. </state>
  113. <state id="green">
  114. <onentry>
  115. <script>
  116. <![CDATA[
  117. this.setGreen();
  118. ]]>
  119. </script>
  120. </onentry>
  121. <transition after='2' target='../yellow'/>
  122. </state>
  123. <state id="yellow">
  124. <onentry>
  125. <script>
  126. <![CDATA[
  127. this.setYellow();
  128. ]]>
  129. </script>
  130. </onentry>
  131. <transition after='1' target='../red'/>
  132. </state>
  133. <transition event='police_interrupt_clicked' port='ui' target='../interrupted'/>
  134. <history id="history"/>
  135. </state>
  136. <state id="interrupted" initial="yellow">
  137. <state id="yellow">
  138. <onentry>
  139. <script>
  140. <![CDATA[
  141. this.setYellow();
  142. ]]>
  143. </script>
  144. </onentry>
  145. <transition after='.5' target='../black'/>
  146. </state>
  147. <state id="black">
  148. <onentry>
  149. <script>
  150. <![CDATA[
  151. this.clear();
  152. ]]>
  153. </script>
  154. </onentry>
  155. <transition after='.5' target='../yellow'/>
  156. </state>
  157. <transition event='police_interrupt_clicked' port='ui' target='../normal/history'/>
  158. </state>
  159. <transition event='quit_clicked' port='ui' target='../off'/>
  160. </state>
  161. <state id="off">
  162. <onentry>
  163. <script>
  164. <![CDATA[
  165. this.clear();
  166. ]]>
  167. </script>
  168. </onentry>
  169. </state>
  170. </scxml>
  171. </class>
  172. </diagram>