-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
124 lines (111 loc) · 3.51 KB
/
index.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
<!DOCTYPE html>
<!-- saved from url=(0026)http://madebyevan.com/fsm/ -->
<html data-ember-extension="1"><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Finite State Machine Designer - by Evan Wallace</title>
<style type="text/css"><!--
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 {
width: 200px;
margin: 0 auto;
}
--></style>
<script type="text/javascript" src="fsm.js"></script>
<script type="text/javascript"><!--
/*
* 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 ryt13001="1">
<h1>Finite State Machine Designer</h1>
<div style="float:left">
<textarea id="codes" rows="10"></textarea>
<br/>
<button onclick="onClickDraw()">Draw</button>
</div>
<canvas id="canvas" width="800" height="600" tabindex="1">
<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>