-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
302 lines (298 loc) · 17.5 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
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
<!DOCTYPE html>
<html>
<head>
<title>🎡</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/fontello.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- riesenrad -->
<script src="riesenrad/fsm.js"></script>
<!-- highroller -->
<script src="js/bundle.js"></script>
<!-- misc scripts -->
<script src="js/default_config.js"></script>
<script src="js/scripts.js"></script>
</head>
<body>
<div id="controller">
<ul id="menubar">
<li class="title">
<input type="text" v-model="projectName" spellcheck="false" placeholder="(project name)" v-on:change="updateProjectName()">
</li>
<li class="button" v-on:click="openFile()"><i title="import saved state from local computer" class="icon-upload"></i></li>
<li class="button" v-on:click="saveState()"><i v-bind:title="saveText" class="icon-save"></i></li>
<li class="button" v-on:click="exportState()"><i title="export current state as file on local computer" class="icon-download"></i></li>
<li class="button" v-on:click="build()"><i title="build project to SystemVerilog code" class="icon-code"></i></li>
<li class="button right" v-bind:class="{ 'button-focus': sidebarItem == 'help-text' }" v-on:click="toggleShow('help-text')"><i title="toggle showing/hiding help information" class="icon-help"></i></li>
<li class="button right" v-bind:class="{ 'button-focus': sidebarItem == 'build-settings' }" v-on:click="toggleShow('build-settings')"><i title="toggle showing/hiding build settings" class="icon-cog"></i></li>
<li class="button right" v-bind:class="{ 'button-focus': sidebarItem == 'output-log' }" v-on:click="toggleShow('output-log')"><i title="toggle showing/hiding build log" class="icon-log"></i></li>
<li class="button right" v-bind:class="{ 'button-focus': sidebarItem == 'property-inspector' }" v-on:click="toggleShow('property-inspector')"><i title="edit properties of a state or transition in the diagram" class="icon-edit"></i></li>
</ul>
<div class="sidebar" v-bind:class="{ 'sidebar-open': sidebarShowing }">
<div class="sidebar-content">
<div class="help-text" v-bind:class="{ shown: sidebarItem == 'help-text' }">
<h2>FSM Designer Help</h2>
<p>To the left 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 a transition:</b> shift-drag on the canvas
<ul>
<li>You may shift-drag starting from any point on the canvas, but you
most likely want to shift-drag from a state.</li>
<li>For regular transitions, use a <code>/</code> (forward slash)
to separate transition conditions from outputs on the edge.</li>
<li>Multiple outputs on the edge can be marked by separating the outputs by a comma.</li>
<li>To indicate the reset state, draw a transition from empty space to the reset state.</li>
</ul>
</li>
<li><b>Move something (edge (not its label) or state):</b> drag it around</li>
<li><b>Edit something (edge/label or state):</b> click on it</li>
<li><b>Stop editing something:</b> press return/enter (commits changes) or escape (cancels changes)</li>
<li><b>Delete something:</b> click it and press the delete key (not the backspace key) or command+d on macOS</li>
<li><b>Move viewport:</b> click on canvas background and move mouse around</li>
<li><b>Zoom in/out:</b> scroll up/down while the mouse is over top of the canvas</li>
<li><b>To undo/redo: </b>Press ctrl+z/ctrl+y (command+z/command+y also work for macOS users)</li>
</ul>
<h2>Interface</h2>
<p>Along the top, there are a series of buttons. In order of left to right, this is what each one does:</p>
<ul class="icon-list">
<li><i class="icon-upload"></i>: Load a previously saved JSON file from your computer into the editor.</li>
<li><i class="icon-save"></i>: Save the current project in local storage in your browser. If you clear cookies or use a different browser, etc., <b>you will lose your data</b>.
The editor will occasionally autosave (updating the tool tip of the icon when doing so), but if you are worried, you might want to save things sometimes, too. Saving does not overwrite the undo stack in the editor.</li>
<li><i class="icon-download"></i>: Save the current project onto your local computer. This file can then be opened on another computer or shared with others.
It is recommended to download your project before closing out your browser, in case something happens to your user data.</li>
<li><i class="icon-code"></i>: Build the FSM design into SystemVerilog code. Be sure to visit the settings panel first to ensure that everything is configured correctly. Clicking this button will also switch to displaying the output log.</li>
<li><i class="icon-edit"></i>: Display the property inspector panel, where you can modify the properties of states and transitions in the FSM diagram.</li>
<li><i class="icon-log"></i>: Display output of the scripts run to convert the FSM into SystemVerilog code. The top box is for log messages (e.g. warnings), and the bottom box is for the output SystemVerilog code.</li>
<li><i class="icon-cog"></i>: Display the configuration panel for the SystemVerilog conversion process. This is where you set up the width of input and output signals, clock name, and other important information that cannot be immediately inferred from the FSM diagram.</li>
<li><i class="icon-help"></i>: Display this panel of helpful information!</li>
</ul>
<p>
To trigger the behaviours specified above, you can either click the icon or use the keybindings described below:
<br />
All CTRL keybindings can also be used with the Meta (Command key on macOS) key.
</p>
<ul>
<li><i class="icon-upload"></i>: Import saved JSON project file: CTRL+O</li>
<li><i class="icon-save"></i>: Save in browser: CTRL+S</li>
<li><i class="icon-download"></i>: Download JSON project file: CTRL+SHIFT+S</li>
<li><i class="icon-code"></i>: Build project: CTRL+B</li>
<li><i class="icon-log"></i>: Toggle show/hide output log: CTRL+L</li>
<li><i class="icon-cog"></i>: Toggle show/hide preferences: CTRL+P</li>
<li><i class="icon-help"></i>: Toggle show/hide help menu: F1</li>
</ul>
<h2>Verilog conversion help</h2>
<p>
<b>Important notes:</b>
Active low signals are not supported in the input.
</p>
<p>
<b>Usage:</b>
Configure all of the settings in the <i class="icon-cog"></i> panel.
Each setting has accompanying explanation text.
Once done, click the Build button at the bottom of the settings panel or
the <i class="icon-code"></i> in the menu bar, or press control/command+B to trigger a build.
</p>
<br />
<h2>Thanks and Attributions</h2>
<ul>
<li><a href="http://madebyevan.com/" target="_blank">Evan Wallace</a> for the creation of the original FSM designer component</li>
<li><a href="http://merfoo.github.io/" target="_blank">Fauzi Kliman</a> for making significant quality of life improvements over the original version of the designer</li>
<li><a href="http://www.entypo.com" target="_blank">Daniel Bruce / Entypo</a> for the icons used on this page</li>
</ul>
</div>
<div class="build-settings" v-bind:class="{ shown: sidebarItem == 'build-settings' }">
<h2>Display settings</h2>
<p>
These settings are used to configure how the FSM is displayed in the editor.
They are saved along with the FSM data.
</p>
<fieldset>
<legend>Nodes</legend>
<label for="nodesize">Node side: </label>
<input type="range" min="30" max="150" value="50" name="nodesize" v-model.number="nodesize" v-on:change="updateNodeSize()">
{{ nodesize }}
</fieldset>
<br />
<br />
<h2>Build settings</h2>
<p>
These settings are used to configure the SystemVerilog generation process.
They are saved along with the FSM data.
</p>
<fieldset>
<legend>Clock and reset</legend>
These settings are used to generate the flip-flop that stores the FSM state.<br /><br />
<label for="clockname">Clock name:</label>
<input type="text" name="clockname" v-model="opts.clock.name">
<br />
<label for="clockedge">Clock edge to flop on:</label>
<select name="clockedge" v-model="opts.clock.edge">
<option>posedge</option>
<option>negedge</option>
</select>
<br />
<label for="resetname">Reset signal name:</label>
<input type="text" name="resetname" v-model="opts.reset.name">
<br />
<label for="resetedge">Edge to reset on:</label>
<select name="resetedge" v-model="opts.reset.edge">
<option>posedge</option>
<option>negedge</option>
</select>
</fieldset>
<fieldset>
<legend>Input signals</legend>
These settings are used to generate the module header. All signals are inferred to be <code>logic</code> type.<br /><br />
<div v-for="(signal, index) of inputSignals">
<fieldset>
<legend>
Input {{index}}
<button v-on:click="removeInputSignal(index)">Remove</button>
</legend>
<label>Name:</label>
<input type="text" v-model="inputSignals[index].name">
<br />
<label>Width:</label>
<input type="number" v-model.number="inputSignals[index].width" min="1">
<br />
</fieldset>
</div>
<br />
<button v-on:click="addInputSignal()">Add</button>
</fieldset>
<fieldset>
<legend>Output signals</legend>
These settings are used to validate the FSM outputs described in the diagram,
as well as to generate the module header. If there is an output in the diagram
but not in this list, an error will be produced.<br /><br />
<div v-for="(signal, index) of outputSignals">
<fieldset>
<legend>
Input {{index}}
<button v-on:click="removeOutputSignal(index)">Remove</button>
</legend>
<label>Name:</label>
<input type="text" v-model="outputSignals[index].name">
<br />
<label>Width:</label>
<input type="number" v-model.number="outputSignals[index].width" min="1">
<br />
<div v-if="outputSignals[index].width == 1">
<label>Inverted?</label>
<select v-model="outputSignals[index].inverted">
<option value="false">No (active high)</option>
<option value="true">Yes (active low)</option>
</select>
</div>
<div v-else>
<label>Default value</label>
<input type="text" v-model="outputSignals[index].default">
</div>
<br />
</fieldset>
</div>
<br />
<button v-on:click="addOutputSignal()">Add</button>
</fieldset>
<fieldset>
<legend>Miscellaneous</legend>
These are some miscellaneous settings that may be helpful to expose.<br /><br />
<label for="outputtype">Output format:</label>
<select name="outputtype" v-model="opts.outputType">
<option value="file">SystemVerilog file containing complete FSM module</option>
<option value="module">FSM module as text to copy</option>
<option value="code">Code for FSM (always_comb/ff blocks) to copy</option>
</select>
<br />
<label for="cstate">Name of variable used to store <b>current</b> state:</label>
<input type="text" name="cstate" v-model="opts.cstate">
<br />
<label for="nstate">Name of variable used to store <b>next</b> state:</label>
<input type="text" name="nstate" v-model="opts.nstate">
<br />
</fieldset>
<br />
<button v-on:click="build()">Build!</button>
</div>
<div class="output-log" v-bind:class="{ 'shown-log': sidebarItem == 'output-log' }">
<h2>Output Log</h2>
<textarea class="outlog-text" disabled :value="highrollerLog" placeholder="error and warning log will go here"></textarea>
<br />
<h2>Output Result <button v-on:click="copyResult()">Copy</button></h2>
<textarea ref="outResultCode" class="outlog-code" disabled :value="result" placeholder="Output results will go here, if successful"></textarea>
</div>
<div class="property-inspector" v-bind:class="{ shown: sidebarItem == 'property-inspector' }">
<h2>Property inspector{{ editingItem.valid ? (editingItem.type == 'node' ? ': state' : ': transition') : '' }}</h2>
<div v-if="editingItem.valid">
<p>
Press enter while focused in a text box or the commit button to commit changes.
Press escape anywhere, the cancel button, or click any other item in the FSM to cancel changes.
Changes will not update the FSM until they are committed.
</p>
<div v-if="editingItem.type == 'node'">
<label for="nodename">Name:</label>
<input ref="nodenameentry" type="text" name="nodename" v-model="editingItem.name" v-on:keyup.enter="commitEditItem()">
<br />
</div>
<div v-if="editingItem.type == 'edge'">
<label for="edgecondition">Transition condition:</label>
<input ref="edgeconditionentry" type="text" name="edgecondition" v-model="editingItem.condition" v-on:keyup.enter="commitEditItem()">
<br />
</div>
<br />
<h3>Outputs</h3>
<button v-on:click="propInspectAddOutput()" tabindex="0">Add</button>
<br />
<div v-for="(output, index) of editingItem.outputs" v-bind:class="{ hasError: editingItem.badOutputs[index] }">
Output {{index}}: <input type="text" v-model="editingItem.outputs[index]" v-on:keyup.enter="commitEditItem()">
<button v-on:click="propInspectRemoveOutput(index)">Remove</button>
</div>
<br />
<div v-if="editingItem.warnings.length > 0">
<br />
<h3>Warnings</h3>
<ul>
<li v-for="warning in editingItem.warnings">{{ warning.message }}</li>
</ul>
</div>
<button v-on:click="commitEditItem()" tabindex="0">Commit</button>
<br />
<br />
<button v-on:click="commitEditItem(true)" tabindex="0">Cancel</button>
</div>
<div v-else>
<p>Select an item in the FSM diagram to edit by clicking on it.</p>
</div>
</div>
</div>
</div>
<input ref="inputFile" hidden type="file" v-on:change="load(true)">
</div>
<canvas id="canvas">
<span class="error">Your browser does not support<br>the HTML5 <canvas> element</span>
</canvas>
<!--
<div>
<p class="center">
Export as:
<a id="pngLink" onclick="saveAsPNG()" href="" >PNG</a> |
<a href="javascript:saveAsSVG()">SVG</a> |
<a href="javascript:saveAsLaTeX()">LaTeX</a> |
<a id="jsonLink" onclick="saveAsJson()" href="">JSON</a> |
<a id="verilogLink" onclick="saveAsVerilog()" href="">SystemVerilog (via highroller)</a>
</p>
<button type="button" onclick="importJsonFile()">Import JSON File</button>
<div>
<label for="canvasWidth">Width</label>
<input id="canvasWidth" name="canvasWidth" class="canvasSizeInput" type="number" min="800">
<label for="canvasHeight">Height</label>
<input id="canvasHeight" name="canvasHeight" class="canvasSizeInput" type="number" min="600">
<button type="button" onclick="setCanvasSize()">Set canvas size</button>
</div>
<textarea id="output"></textarea>
</div>-->
</body>
</html>