• Drag undesired components to the trash and drag new ones in from the left panel.
• 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.
• Clear to start fresh.
• Drag a source (solid gray) and drop it in a target (empty blue) to create a connection.
• Only an Adder is allowed multiple input connections!
• The input defaults to Unit Sample. Click to toggle to Unit Step.
• Right click on a component to reverse its orientation.

• If you want to save a machine for later use, click Save in the navbar to save it as a local text file.
• Click Load in the navbar to load your own machine or another preloaded demo.
• Highcharts provides functionality for exporting the graph as JPG, PDF, etc. - click the menu in the upper right corner to see more.

The following code includes jQuery, jQueryUI, jsPlumb, Highcharts.js, and Bootstrap. Include what you need, and feel free to limit the app's width: ...class="statemachine" style="width:600px"

If you want your embedded app to load a custom machine by default, simply paste the contents of your saved .txt file into <div class="statemachine">...</div>

<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>
                    

• Developers: Richard Lu, Faith Keza - GitHub
• Project Supervisor: Chris Terman
• Supervising Team: Rob Miller, Fredo Durand, Haoqi Zhang, Ted Benson, Max Goldman
• jQuery
• Layout: Twitter Bootstrap
• Draggable Connectors: jsPlumb, jQueryUI
• Dynamic Chart: Highcharts