summaryrefslogtreecommitdiffstats
path: root/statechartz/demo.html
blob: d4f1dc1ddc1fce68438929056510c02d7a9f985a (plain)
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<html>
	<head>
    <link href="style.css"  rel="stylesheet" />
		<link href="calc.scxml" rel="statechart" />
		<script src="statechartz.js"></script>
		<script>
		
			function outputText(txt) {
				document.getElementById("calc_output").innerHTML = txt;
			}
			function showPopup(txt) {
        document.getElementById('popup_text').innerHTML = txt;
        document.statechart.raise("POPUP.SHOW",true);
			}
			function handleKey(ev) {
        if (document.statechart != undefined) {
          document.statechart.raise("KEY.PRESS");
          if (ev.keyCode == 32) {
            document.statechart.raise('WIDGETS.NEXT');
          }
        }
			}
		</script>
	</head>
	<body onkeydown="handleKey(event)">
	  <div id="screen_weather" class="screen">
      <script type="text/javascript" src="http://voap.weather.com/weather/oap/USGA0028?template=OTDRH&par=3000000007&unit=0&key=twciweatherwidget"></script>
	  </div>
	  <div id="screen_shopping" class="screen">
      <iframe src="http://onetrip.org/onetrip/?pass&go" height="240" width="320" scrolling="no" style="overflow:hidden" frameborderwidth="0"></iframe>
	  </div>
    <div id="screen_calc" class="screen">
      <table cellspacing="5">
        <tr>
          <td colspan="5"><div class="output" id="calc_output">&nbsp;</div></td>
        </tr>
        <tr>
          <td><a href="#" onmousedown="statechart.raise('DIGIT.7')">7</a></td>
          <td><a href="#" onmousedown="statechart.raise('DIGIT.8')">8</a></td>
          <td><a href="#" onmousedown="statechart.raise('DIGIT.9')">9</a></td>
          <td><a href="#" onmousedown="statechart.raise('OPER.PLUS')">+</a></td>
          <td><a href="#" onmousedown="statechart.raise('OPER.MINUS')">-</a></td>
        </tr>
        <tr>
          <td><a href="#" onmousedown="statechart.raise('DIGIT.4')">4</a></td>
          <td><a href="#" onmousedown="statechart.raise('DIGIT.5')">5</a></td>
          <td><a href="#" onmousedown="statechart.raise('DIGIT.6')">6</a></td>
          <td><a href="#" onmousedown="statechart.raise('OPER.STAR')">*</a></td>
          <td><a href="#" onmousedown="statechart.raise('OPER.DIV')">/</a></td>
        </tr>
        <tr>
          <td><a href="#" onmousedown="statechart.raise('DIGIT.1')">1</a></td>
          <td><a href="#" onmousedown="statechart.raise('DIGIT.2')">2</a></td>
          <td><a href="#" onmousedown="statechart.raise('DIGIT.3')">3</a></td>
          <td><a href="#" onmousedown="statechart.raise('CE')">CE</a></td>
          <td><a href="#" onmousedown="statechart.raise('C')">C</a></td>
        </tr>
        <tr>
          <td colspan="3"><a href="#" onmousedown="statechart.raise('DIGIT.0')">0</a></td>
          <td><a href="#" onmousedown="statechart.raise('POINT')">.</a></td>
          <td><a href="#" onmousedown="statechart.raise('EQUALS')">=</a></td>
        </tr>
      </table>
    </div>
	  <div id="screen_popup">
      <div id="popup_text">&nbsp</div>      
	  </div>
	</body>		
</html>