<!DOCTYPE html>
<html>
<head>
<!-- 2010-05-07 -->
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<meta http-equiv='Content-Language' content='en_EN' />
<meta name='author' content='Patrick Simianer' />
<title>Visualizing Regular Expressions (Patrick Simianer, 'Endliche Automaten', SS2010)</title>
<link rel='stylesheet' type='text/css' href='stylesheets/styles.css' />
<script type='text/javascript' src='javascripts/lib/raphael.js'></script>
<script type='text/javascript' src='javascripts/lib/jquery.js'></script>
<script type='text/javascript' src='javascripts/lib/jquery-ui.js'></script>
<script type='text/javascript' src='javascripts/globals.js'></script>
<script type='text/javascript' src='javascripts/NfaState.js'></script>
<script type='text/javascript' src='javascripts/Nfa.js'></script>
<script type='text/javascript' src='javascripts/RegexParser.js'></script>
<script type='text/javascript' src='javascripts/Stack.js'></script>
<script type='text/javascript' src='javascripts/NfaSimulator.js'></script>
<script type='text/javascript' src='javascripts/Nfa2Dfa.js'></script>
<script type='text/javascript' src='javascripts/graph.js'></script>
<script type="text/javascript" src='javascripts/uifunc.js'></script>
</head>
<body>
<div id="wrapper">
<p style="line-height:1.3em;text-align:justify;width:52%">
<a class="message gray" href="#" onclick="$('#desc').toggle();">
<strong>Description</strong></a>
<span id="desc"> Enter a regular expression (<span style="font-family:Courier">'*'</span>, <span style="font-family:Courier">'|'</span> and <span style="font-family:Courier">'()'</span> supported). The usable <strong>alphabet</strong> is shown above the input box. Tick <strong>'Make a Graph'</strong> to enable or disable graph generation. The generated graph is <strong>deterministic finite state automata</strong>. Once the (correct) expression is parsed, it is possible to simulate the automata by entering a accepted or non-accepted <strong>word</strong> in the lower input box.<br /></span>
</p>
<table>
<tr style="width:100%">
<td class="r"><strong class="grayc">Alphabet:</strong></td>
<td style="width:400px"><strong class="grayc">
<script type="text/javascript" charset="utf-8">
document.write(ALPHABET.substr(0,ALPHABET.length-1));
</script></strong>
</td>
</tr>
<tr>
<td class="r"><strong>Regular Expression:</strong></td>
<td><input type="text" name="regex" id="regex" value="" autocomplete="off"
onchange='checkLength(this, "#parseButton");'
onkeypress="return getKey(event, ALPHABETS);"
onmouseout='checkLength(this, "#parseButton");' />
<input type="button" name="parseButton" id="parseButton"
value="Parse" disabled='disabled' autocomplete="off" onclick="uiParse();" />
</td>
</tr>
<tr>
<td class="r"><strong>Word:</strong></td>
<td><input type="text" name="word" id="word" value="" disabled="disabled" autocomplete="off"
onchange='checkLength(this, "#checkButton");'
onkeypress="return graphMoveByInput(event, ALPHABET);"
onmouseout='checkLength(this, "#checkButton");' />
<input type="button" name="checkButton" id="checkButton"
value="Check" disabled='disabled' autocomplete="off" onclick="uiSimulate();" />
</td>
</tr>
<tr>
<td class="r"><strong>Make a Graph:</strong></td>
<td>
<input type="checkbox" name="graphit" value="" id="graphit" autocomplete="off"
checked="checked" onchange="graphit = this.checked;" />
</td>
</tr>
</table>
<p>
<a class='message gray' href='#' onclick="window.location.reload();"/>Reload</a>
<span id="parseMessage" class="message" style="display:none"></span>
<span id="checkMessage" class="message" style="display:none"></span>
</p>
<div id="holder"></div>
</div>
</body>
</html>