-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
205 lines (180 loc) · 7.95 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
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
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LR Parser Training</title>
<link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.min.css">
</head>
<body>
<noscript>
<h1>Please Enable Javascript for this site</h1>
</noscript>
<div class="container mb-2">
<h1>LR Tutor</h1>
<div class="alert alert-warning">
This is the development version.
If you want to use this site in production, please use the minified javascript libraries.
You can change the layout of the website as you like or remove parts completely. See at the <a href="html_doc.md">doc</a> which ids need to be
used for what part and which functions can be used to interact with the automaton.
</div>
<h3>About</h3>
<div>
<p>
LR tutor is a tool to help students understand the creation of canonical LR automaton.
You can input a custom grammar, select whether you want to build an LR(0) or LR(1) automaton.
While creating the automaton, you can always check, whether the automaton is already correct
and continue building at the incorrect parts.
</p>
<p>
This website is part of the bachelor thesis of Leo Fahrbach.
The code can be found on <a href="https://github.com/leofah/lrtutor">github</a>.
</p>
</div>
<div>
<h3 class="mt-3">Grammar</h3>
<div class="row">
<div id="grammarInput" class="col-3">
<label for="grammarTextArea"></label>
<textarea class="form-control" id="grammarTextArea" rows="10" cols="40"
placeholder="S'->X X 
X->a X
X->b"></textarea>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="LR" id="radio0" value="0" checked>
<label class="form-check-label" for="radio0">LR0</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="LR" id="radio1" value="1">
<label class="form-check-label" for="radio1">LR1</label>
</div>
</div>
<div id="grammarText" class="col-3 d-none"></div>
<div class="col-9">
<pre id="grammarErrors" class="alert alert-danger d-none"></pre>
<ul>
<li>Use '->' or '➜' as arrow</li>
<li>(Non-)Terminals can have multiple characters, use any whitespace to delimit (Non-)Terminals</li>
<li>S' is always the start nonterminal. If S' does not exists, it will be added to first production</li>
<li>| is used as delimiter</li>
<li>•, ➜, Ɛ, |, $, S', ->, ., {, }, and ',' cannot be used as
(Non-)Terminals because they have another meaning
</li>
<li>To write epsilon you can leave the right hand side empty, or write Ɛ, e.g. S-> |s</li>
</ul>
</div>
</div>
</div>
<div id="grammarInputButtons">
<button class="btn btn-outline-success" id="setGrammar"
onclick="setGrammar(document.getElementById('grammarTextArea').value, document.getElementById('radio0').checked)">
Set Grammar
</button>
or
<button class="btn btn-outline-info" onclick="loadGraph()">Load Automaton from disk</button>
<a href="exampleGraphs">Here</a> are some example automata.
</div>
<div class="d-none" id="graphContent">
<h3 class="mt-3" id="graphHeading"></h3>
<div>
<button class="btn btn-outline-success" id="saveGraph" onclick="saveGraph()">Save Automaton to disk</button>
<button class="btn btn-outline-danger" id="loadGraph" onclick="loadGraph()">Load Automaton from disk</button>
<a href="exampleGraphs">Here</a> are some example automata.
<button class="btn btn-outline-info float-right" data-toggle="collapse" data-target="#createInfo"
aria-expanded="false" aria-controls="collapseExample">
Show help
</button>
</div>
<!-- Help how to use the interface -->
<div class="collapse" id="createInfo">
<div class="card card-body mt-2">
<h5>Adding Transition</h5>
<ol>
<li>select a beginning state</li>
<li>choose the (Non-)Terminal for the transition</li>
<li>click on a state to end the transition at this state or click on the canvas to create a new state</li>
</ol>
<ul>
<li>Only one outgoing transition for each (non-)terminal is allowed per state.
If a transition with the same (non-)terminal already exists the old one gets deleted.
</li>
</ul>
<hr>
<h5>LR Items</h5>
<ul>
<li>LR(0) items form: A➜a•b</li>
<li>LR(1) items form: A➜a•b {x, y}</li>
<li>A➜ab is a production of the grammar</li>
<li>x, y are terminals or '$'</li>
<li>. is automatically replaced with •</li>
<li> -> is automatically replaced with ➜</li>
<li>every whitespace is ignored, hence between (Non-)Terminals does not need to be a space, like in the
grammar definition. Of course it should still be deterministic, what production of the grammar it uses.
</li>
</ul>
<hr>
<h5>Editing LR Items</h5>
<ul>
<li>Double click on an LR item to edit the item</li>
<li>Double click on a state to add a new LR item to the end of the state</li>
</ul>
<hr>
<h5>Edit States</h5>
<ul>
<li>Click on the canvas to add a new state</li>
<li>Add a transition, which creates a new state</li>
<li>Use 'del' or the button to delete selected states or transitions. The start state cannot be deleted.</li>
<li>Use 'f' or the button to toggle the final status of a state</li>
</ul>
<hr>
<h5>Side bar</h5>
<ul>
<li>The side is used to show or hide buttons to edit the automaton.
If the automaton was checked, the errors will be shown on the side bar.
</li>
<li>Errors are not hidden automatically, even if the automaton was edited</li>
</ul>
</div>
</div>
<div class="row mt-3">
<!-- Canvas -->
<div class="col-9 border p-0">
<div id="mxCanvas" style="height: 500px; overflow: auto"></div>
</div>
<!-- Show either actions or graph errors in the row -->
<div id="graphActions" class="col-3 align-self-stretch">
<div class="mt-1">
<button class="btn btn-info d-none " id="actionDelete" onclick="deleteStates()">
Delete Elements (del)
</button>
</div>
<div class="mt-1">
<button class="btn btn-info d-none " id="actionToggleFinal" onclick="toggleFinalStates()">
Toggle Final States (f)
</button>
</div>
<div class="position-absolute fixed-bottom">
<div id="transitionTerminals" class="d-none p-3">
<h5>Compose a transition with the following (Non-)Terminal:</h5>
</div>
</div>
</div>
<div id="graphErrors" class="col-3 d-none" style="height: 500px; overflow: auto"></div>
</div>
<div class="mt-1">
<button class="btn btn-success" onclick="checkGraph()">Check Automaton</button>
<button class="btn btn-outline-success" onclick="hideErrors()">Hide Errors</button>
<button class="btn btn-danger" id="resetCanvas" onclick="resetCanvas()">Reset Automaton</button>
</div>
</div>
</div>
</body>
<script type="text/javascript">
mxBasePath = 'mxGraph-4.2.2-js/src';
mxLoadResources = false;
</script>
<script type="text/javascript" src="mxGraph-4.2.2-js/src/js/mxClient.js"></script>
<!--<script type="text/javascript" src="mxGraph-4.2.2-js/mxClient.min.js"></script>-->
<script type="module" src="lrtutor/lrtutor.js"></script>
<!--<script type="application/javascript" src="lrtutor/lrtutor.min.js"></script>-->
<!-- Bootstrap -->
<script type="text/javascript" src="jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="bootstrap-4.5.3-dist/js/bootstrap.bundle.min.js"></script>
</html>