/
mvc.html
172 lines (168 loc) · 10.5 KB
/
mvc.html
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="touchpunch.js"></script>
<script type="text/javascript" src="http://web.mit.edu/lu16j/www/state/jsPlumb.js "></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://web.mit.edu/lu16j/www/boots/bootstrap/js/bootstrap.min.js"></script>
<link href="http://web.mit.edu/lu16j/www/boots/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="http://web.mit.edu/lu16j/www/boots/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
<script src="definitions.js"></script>
<script src="mvc.js"></script>
<script src="saving.js"></script>
<link href="mvc.css" rel="stylesheet">
<title>6.01 State Machine Simulator</title>
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">6.01 State Machine Simulator</a>
<ul class="nav">
<li><a href="#popup" data-toggle="modal">About</a></li>
<li><a href="#savepopup" data-toggle="modal">Save As</a></li>
<li><a href="#loadpopup" data-toggle="modal">Load</a></li>
<li><a href="#" onclick="loadDemo('clear')">Clear</a></li>
</ul>
</div>
</div>
<div id="popup" class="modal hide fade" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>About</h3>
</div>
<div class="modal-body">
<h3>This is a visual representation of an LTI system, or a 6.01 state machine.</h3>
<!-- Tabs!-->
<ul class="nav nav-tabs">
<li class="active"><a href="#basicfunctions" data-toggle="tab">Get Started</a></li>
<li><a href="#creatingmachine" data-toggle="tab">Creating</a></li>
<li><a href="#advancedfeatures" data-toggle="tab">Saving</a></li>
<li><a href="#embeddingsm" data-toggle="tab">Embedding</a></li>
<li><a href="#credits" data-toggle="tab">Credits</a></li>
</ul>
<!-- The tab content. -->
<div id="my-tab-content" class="tab-content">
<div class="tab-pane active" id="basicfunctions">
<ul>
<li>Preloaded is a simple oscillating demo - click <strong>Start</strong> to see it in action.</li>
<li>Or click <strong>See 1st 10</strong> to quickly glimpse its long-term behavior.</li>
<li>Or <strong>Step</strong> through it for closer analysis.</li>
<li>Click the chart legend to hide the input or output graph.</li>
</ul>
</div>
<div class="tab-pane" id="creatingmachine">
<ul>
<li>Drag undesired components to the trash and drag new ones in from the left panel.</li>
<li><strong>Only Chrome currently supports dragging in components.
If you are using another browser, click the left panel to create components, and then drag to position.</strong></li>
<li><strong>Clear</strong> to start fresh.</li>
<li>Drag a source (solid gray) and drop it in a target (empty blue) to create a connection.</li>
<li><strong>Only an Adder is allowed multiple input connections!</strong></li>
<li>The input defaults to <strong>Unit Sample</strong>. Click to toggle to <strong>Unit Step</strong>.</li>
<li>Right click on a component to reverse its orientation.</li>
</ul>
</div>
<div class="tab-pane" id="advancedfeatures">
<ul>
<li>If you want to save a machine for later use, click <strong>Save</strong> in the navbar to save it as a local text file.</li>
<li>Click <strong>Load</strong> in the navbar to load your own machine or another preloaded demo.</li>
<li>Highcharts provides functionality for exporting the graph as JPG, PDF, etc.
- click the menu in the upper right corner to see more.</li>
</ul>
</div>
<div class="tab-pane" id="embeddingsm">
<p>The following code includes <strong>jQuery, jQueryUI, jsPlumb, Highcharts.js, and Bootstrap.</strong>
Include what you need, and feel free to limit the app's width: <code>...class="statemachine" style="width:600px"</code></p>
<p>If you want your embedded app to load a custom machine by default,
simply paste the contents of your saved .txt file into
<code><div class="statemachine">...</div></code></p>
<pre>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="http://web.mit.edu/6.mitx/www/6.01-statemachine/touchpunch.js"></script>
<script type="text/javascript" src="http://web.mit.edu/lu16j/www/state/jsPlumb.js "></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://web.mit.edu/lu16j/www/boots/bootstrap/js/bootstrap.min.js"></script>
<link href="http://web.mit.edu/lu16j/www/boots/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="http://web.mit.edu/6.mitx/www/6.01-statemachine/definitions.js"></script>
<script src="http://web.mit.edu/6.mitx/www/6.01-statemachine/mvc.js"></script>
<link href="http://web.mit.edu/6.mitx/www/6.01-statemachine/mvc.css" rel="stylesheet">
<div class="statemachine"></div>
</pre>
</div>
<div class="tab-pane" id="credits">
<ul>
<li>Developers: Richard Lu, Faith Keza - <a href="https://github.com/lu16j/statemachines">GitHub</a></li>
<li>Project Supervisor: <a href="http://people.csail.mit.edu/cjt/">Chris Terman</a></li>
<li>Supervising Team:
<a href="http://people.csail.mit.edu/rcm/">Rob Miller</a>,
<a href="http://people.csail.mit.edu/fredo/">Fredo Durand</a>,
<a href="http://people.csail.mit.edu/hqz/">Haoqi Zhang</a>,
<a href="http://edwardbenson.com/">Ted Benson</a>,
<a href="http://web.mit.edu/maxg/">Max Goldman</a>
</li>
<li><a href="http://jquery.com/">jQuery</a></li>
<li>Layout: <a href="http://twitter.github.io/bootstrap/">Twitter Bootstrap</a></li>
<li>Draggable Connectors: <a href="http://jsplumbtoolkit.com/jquery/demo.html">jsPlumb</a>,
<a href="http://jqueryui.com/">jQueryUI</a></li>
<li>Dynamic Chart: <a href="http://www.highcharts.com/">Highcharts</a></li>
</ul>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">I understand now!</button>
</div>
</div>
<div id="savepopup" class="modal hide fade" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Save As...</h3>
</div>
<div class="modal-body">
SM-<input id="fileToSaveAs" placeholder="File Name">.txt
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal" aria-hidden="true" onclick="saveSM()">Save</button>
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</div>
<div id="loadpopup" class="modal hide fade" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Load...</h3>
</div>
<div class="modal-body">
<input type="file" id="fileToLoad">
<p>Demos:</p>
<ul>
<li><a href="#" data-dismiss="modal" aria-hidden="true" onclick="loadDemo('2equiv')">Two Equivalent Systems</a>
: Plug either system into output, and behold their equivalency.</li>
<li><a href="#" data-dismiss="modal" aria-hidden="true" onclick="loadDemo('2ordercyclic')">Second Order Cyclic</a>
: A double feedback system with complex behavior.</li>
<li><a href="#" data-dismiss="modal" aria-hidden="true" onclick="loadDemo('wallFinder')">Wall Finder</a>
: A staple of 6.01. Set the input to Unit Step, and see which K value (currently 0) gives the best behavior.</li>
</ul>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal" aria-hidden="true" onclick="loadSM()">Load</button>
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</div>
<div class="container">
<div class="statemachine">
<div class="smComp" data-type="delay" data-id="delay0" data-top="160" data-left="0.4" data-rev="yes"></div>
<div class="smComp" data-type="gain" data-id="gain1" data-top="80" data-left="0.6" data-value="-1"></div>
<div class="smComp" data-type="adder" data-id="adder2" data-top="80" data-left="0.3"></div>
<div class="smConn" data-from="delay0" data-to="adder2"></div>
<div class="smConn" data-from="input" data-to="adder2"></div>
<div class="smConn" data-from="adder2" data-to="gain1"></div>
<div class="smConn" data-from="gain1" data-to="delay0"></div>
<div class="smConn" data-from="gain1" data-to="output"></div>
</div>
</div>
</body>
</html>