122 lines
3.3 KiB
HTML
122 lines
3.3 KiB
HTML
|
<!doctype html>
|
||
|
|
<html><head>
|
||
|
|
<title>Finite State Machine Designer - by Evan Wallace</title>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<style>
|
||
|
|
|
||
|
|
body {
|
||
|
|
text-align: center;
|
||
|
|
background: #DFDFDF;
|
||
|
|
margin: 0 30px 100px 30px;
|
||
|
|
font: 14px/18px 'Lucida Grande', 'Segoe UI', sans-serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1 {
|
||
|
|
font: bold italic 50px Georgia, serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
canvas {
|
||
|
|
display: block;
|
||
|
|
max-width: 800px;
|
||
|
|
background: white;
|
||
|
|
border-radius: 20px;
|
||
|
|
-moz-border-radius: 20px;
|
||
|
|
margin: 10px auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
a {
|
||
|
|
color: black;
|
||
|
|
}
|
||
|
|
|
||
|
|
div {
|
||
|
|
margin: 30px auto;
|
||
|
|
text-align: left;
|
||
|
|
max-width: 800px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.error {
|
||
|
|
display: block;
|
||
|
|
color: red;
|
||
|
|
font-size: 28px;
|
||
|
|
line-height: 30px;
|
||
|
|
padding: 30px;
|
||
|
|
}
|
||
|
|
|
||
|
|
p {
|
||
|
|
margin: 30px 0;
|
||
|
|
line-height: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.center {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
textarea {
|
||
|
|
display: none;
|
||
|
|
width: 75%;
|
||
|
|
height: 400px;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
<script src="fsm.js"></script>
|
||
|
|
<script>
|
||
|
|
|
||
|
|
/*
|
||
|
|
* base64.js - Base64 encoding and decoding functions
|
||
|
|
*
|
||
|
|
* See: http://developer.mozilla.org/en/docs/DOM:window.btoa
|
||
|
|
* http://developer.mozilla.org/en/docs/DOM:window.atob
|
||
|
|
*
|
||
|
|
* Copyright (c) 2007, David Lindquist <david.lindquist@gmail.com>
|
||
|
|
* Released under the MIT license
|
||
|
|
*/
|
||
|
|
|
||
|
|
if (typeof btoa == 'undefined') {
|
||
|
|
function btoa(str) {
|
||
|
|
var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
|
||
|
|
var encoded = [];
|
||
|
|
var c = 0;
|
||
|
|
while (c < str.length) {
|
||
|
|
var b0 = str.charCodeAt(c++);
|
||
|
|
var b1 = str.charCodeAt(c++);
|
||
|
|
var b2 = str.charCodeAt(c++);
|
||
|
|
var buf = (b0 << 16) + ((b1 || 0) << 8) + (b2 || 0);
|
||
|
|
var i0 = (buf & (63 << 18)) >> 18;
|
||
|
|
var i1 = (buf & (63 << 12)) >> 12;
|
||
|
|
var i2 = isNaN(b1) ? 64 : (buf & (63 << 6)) >> 6;
|
||
|
|
var i3 = isNaN(b2) ? 64 : (buf & 63);
|
||
|
|
encoded[encoded.length] = chars.charAt(i0);
|
||
|
|
encoded[encoded.length] = chars.charAt(i1);
|
||
|
|
encoded[encoded.length] = chars.charAt(i2);
|
||
|
|
encoded[encoded.length] = chars.charAt(i3);
|
||
|
|
}
|
||
|
|
return encoded.join('');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</head><body>
|
||
|
|
<h1>Finite State Machine Designer</h1>
|
||
|
|
<canvas id="canvas" width="800" height="600">
|
||
|
|
<span class="error">Your browser does not support<br>the HTML5 <canvas> element</span>
|
||
|
|
</canvas>
|
||
|
|
<div>
|
||
|
|
<p class="center">Export as: <a href="javascript:saveAsPNG()">PNG</a> | <a href="javascript:saveAsSVG()">SVG</a> | <a href="javascript:saveAsLaTeX()">LaTeX</a></p>
|
||
|
|
<textarea id="output"></textarea>
|
||
|
|
<p>The big white box above is the FSM designer. Here's how to use it:</p>
|
||
|
|
<ul>
|
||
|
|
<li><b>Add a state:</b> double-click on the canvas</li>
|
||
|
|
<li><b>Add an arrow:</b> shift-drag on the canvas</li>
|
||
|
|
<li><b>Move something:</b> drag it around</li>
|
||
|
|
<li><b>Delete something:</b> click it and press the delete key (not the backspace key)</li>
|
||
|
|
</ul><ul>
|
||
|
|
<li><b>Make accept state:</b> double-click on an existing state</li>
|
||
|
|
<li><b>Type numeric subscript:</b> put an underscore before the number (like "S_0")</li>
|
||
|
|
<li><b>Type greek letter:</b> put a backslash before it (like "\beta")</li>
|
||
|
|
</ul>
|
||
|
|
<p>This was made in HTML5 and JavaScript using the canvas element.</p>
|
||
|
|
</div>
|
||
|
|
<p>Created by <a href="http://madebyevan.com/">Evan Wallace</a> in 2010</p>
|
||
|
|
</body></html>
|