-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
247 lines (235 loc) · 10.9 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" type="text/css" href="icons.css">
<title>Reversible cellular automata</title>
</head>
<body>
<div class="heading">
Reversible cellular automata simulator. |
<a href="https://github.com/dmishin/js-revca">Sources</a> |
<!-- G+ icon -->
<a href="https://plus.google.com/116542359168957860292?prsrc=3" rel="publisher" target="_top" style="text-decoration:none;">
Author: <img src="https://ssl.gstatic.com/images/icons/gplus-16.png" alt="Google+" style="border:0;width:16px;height:16px;"/>
</a> |
<a href="help.html">Help</a> |
<a href="https://github.com/dmishin/js-revca/issues">Bugs</a>
</div>
<!--
<input id="debug-txt"></input>
-->
<div class="toolbar" id="toolbar-parameters">
Rule: <select id="select-rule"></select>
Step:
<select id="speed-show-every">
<option value="1">1</option>
<option value="2">2</option>
<option value="4">4</option>
<option value="8" selected="selected">8</option>
<option value="16">16</option>
<option value="32">32</option>
<option value="64">64</option>
<option value="128">128</option>
<option value="256">256</option>
<option value="512">512</option>
<option value="1024">1024</option>
</select> generations.
Delay:
<select id="speed-frame-delay">
<option value="10">10ms</option>
<option value="50">50ms</option>
<option value="100" selected="selected">100ms</option>
<option value="200">200ms</option>
<option value="1000">1s</option>
</select>.
Cell size: <select id="select-style">
<option value="8">8</option>
<option value="6">6</option>
<option value="4">4</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
</select>
<label for="show-grid">Grid:</label><input type="checkbox" name="show-grid" id="show-grid"></input>
Field size: <select id="select-size">
<option value="[64,64]">64 x 64</option>
<option value="[128,128]">128 x 128</option>
<option value="[256,256]">256 x 256</option>
<option value="[600,200]">600 x 200</option>
</select> cells.
</div>
<div id="main-window" class="panel"> <!-- window that contains tools etc -->
<div class="toolbar" id="toolbar-main">
<a href="#" class="button" id="go-back" title="Step backwards"><span class="icon icon-rstep"></span></a>
<a href="#" class="button" id="go-next" title="Step forward"><span class="icon icon-step"></span></a>
<span class="separator"></span>
<a href="#" class="button" id="rplay" title="Play backwards"><span class="icon icon-rplay"></span></a>
<a href="#" class="button" id="stop" title="Stop"><span class="icon icon-pause"></span></a>
<a href="#" class="button" id="play" title="Play forward"><span class="icon icon-play"></span></a>
<span class="separator"></span>
<a href="#" class="button" id="clear_field" title="Clear field"><span class="icon icon-clearall"></span></a>
<span class="separator"></span>
<a href="#" class="button" id="clear-selection" title="Clear selected"><span class="icon icon-clearsel"></span></a>
<a href="#" class="button" id="clear-nonselection" title="Clear not selected"><span class="icon icon-clearnsel"></span></a>
<a href="#" class="button" id="selection-random" title="Random fill selection"><span class="icon icon-rndsel1"></span></a>
<span class="separator"></span>
<a href="#" class="button" id="selection-analyze" title="Analyze selection"><span class="icon icon-analyze"></span></a>
<span class="separator"></span>
<a href="" class="button" id="toggle-catcher" title="Spaceship catcher: when enabled, all spaceships, flying through the border of the field, are removed and added to library"><span class="icon icon-catcher"></span></a>
</div>
<div class="vertical-toolbar" id="toolbar-editing">
<span id="btn-group-tools">
<a class="button" href="#" id="btn-tool-draw" title="Draw cells"><span class="icon icon-draw"></span></a>
<a class="button" href="#" id="btn-tool-select" title="Select"><span class="icon icon-select"></span></a>
<a class="button" href="#" id="btn-tool-stamp" title="Paste pattern from buffer"><span class="icon icon-stamp"></span></a>
<a class="button" href="#" id="btn-tool-erase" title="Eraser"><span class="icon icon-erase"></span></a>
</span>
<a class="button" href="#" id="pattern-from-selection" title="Copy from selection"><span class="icon icon-copy"></span></a>
</div>
<div id="cells-widget">
<!-- Styles are important part here, so put them inside HTML-->
<div id="overlay-container"
style="position:relative;
width:40px; height:30px" >
<canvas id="canvas" width="40px" height="30px"
style="position:absolute;left:0px;right:0px;z-index:1"></canvas>
<canvas id="overlay" width="40px" height="30px"
style="position:absolute;left:0px;right:0px;z-index:2;visibility:hidden"></canvas>
</div>
</div>
<div id="generation-status-bar">
Generation: <span id="time">0</span> (<button id="reset-timer">reset</button>)
Vacuum phase: <span id="vacuum-phase">0</span> <button id="nullify-phase">Forward to 0</button>
</div>
</div>
<div id="current-pattern-pane" class="panel">
<h2>Buffer</h2>
<div class="vertical-toolbar">
<a class="button" href="#" id="pattern-rotate-cw" title="Rotate clockwise"><span class="icon icon-rotate-cw"></span></a>
<a class="button" href="#" id="pattern-rotate-ccw" title="Rotate counter-clockwise"><span class="icon icon-rotate-ccw"></span></a>
<a class="button" href="#" id="pattern-flip-h" title="Flip horizontally"><span class="icon icon-flip-h"></span></a>
<a class="button" href="#" id="pattern-flip-v" title="Flip vertically"><span class="icon icon-flip-v"></span></a>
<a class="button" href="#" id="pattern-toggle-phase" title="Toggle phase: shift pattern by 1 by x and y"><span class="icon icon-toggle-phase"></span></a>
</div>
<div id="buffer-bg" class="pattern-background">
<canvas id="active-pattern-canvas" width="16px" height="16px"></canvas>
</div>
<div id="buffer-rle-block">
RLE:<br/>
<textarea id="rle-encoded" class="text-io" spellcheck="false"></textarea>
<div id="rle-decode-box" class="warning-background" style="visibility:hidden;">RLE decoding error: <span id="rle-decode-message" ></span></div>
</div>
</div>
<div id="feature-pane" class="panel">
<span id="btn-group-features">
<a class="button" href="#" id="feature-rule-details" title="View and edit rule details">Rule details</a>
<a class="button" href="#" id="feature-gif-recorder" title="Record GIF animations">GIF recorder</a>
<a class="button" href="#" id="feature-library" title="Library of patterns">Library (<span id="library-size">0</span> patterns)</a>
<a class="button" href="#" id="feature-settings" title="Edit settings">Settings</a>
</span>
</div>
<div id="rule-info-pane" class="panel">
<h2>Rule</h2>
<p>
Enter rule code: 16 comma-separated integers from 0 to 15. Duplicate and change sub-rules to try interleaved rulesets.
<table id="table-sub-rules">
<thead>
<tr> <th>#</th> <th>Code</th> <th></th>
</tr>
<tbody>
</tbody>
</table>
<div id="rule-stabilization-pane" style="display:none">
<label>Hide vacuum changes:<input type="checkbox" name="stablize-rule" id="stablize-rule" title="When checked, difference between evolution of the actual field and vacuum is calculated. This speeds up calculation and improves speed"></input></label>
<br/>
</div>
<p>
Transformation table:
<div id="function_display"></div>
<div id="function_properties"></div>
</p>
<p>
Vacuum-stable ruleset:
<span id="stable-sub-rules"></span>
</p>
</div>
<div id="gif-recorder-pane" class="panel">
<h2>GIF recorder</h2>
<div class="vertical-toolbar">
<a href="#" class="button" id="gif-start" title="Start recording GIF animation"><span class="icon icon-recordgif">GS</span></a>
<a href="#" class="button" id="gif-stop" title="Stop recording and show GIF image"><span class="icon icon-stopgif">GIF Stop</span></a>
<a href="#" class="button" id="gif-clear" title="Remove GIF image"><span class="icon icon-clearall">Clear</span></a>
</div>
GIF file size: <span id="gif-size">0 Kb</span>
<br/>
<div class="pattern-background"><span id="gif-output"></span></div>
</div>
</div>
<div id="settings-pane" class="panel">
<h3>Pattern analyzer</h3>
<ul>
<li>Stop analysis after <input id="analysis-max-steps" value="2048"/> steps.
</li>
</ul>
<h3>Spaceship catcher</h3>
<ul>
<li>Reseed every:<input id="catcher-reseed-period" value="30000"/>steps.
</li>
<li>Maximal spaceship size: <input id="catcher-max-spaceship-size" value="20"/> cells.
</li>
</ul>
<h3>Editor</h3>
<ul>
<li>Random fill percent: <input id="random-fill-percent" value="50"></input>%.
</li>
</ul>
<!--
<h3>Colors</h3>
<ul>
<li>Empty cells: <input id="color-cell0" class="input-color"></input></li>
<li>Active cells: <input id="color-cell1" class="input-color"></input></li>
<li>Grid #1: <input id="color-grid0" class="input-color"></input></li>
<li>Grid #2: <input id="color-grid1" class="input-color"></input></li>
</ul>
-->
<button id="app-create-link">Create Link</button><input id="url-output"></input>
</div>
<div id="library-pane" class="panel">
<h2>Library: <span id="library-name">New Library</span><span id="library-modified-elem" title="modified">*</span></h2>
Load library from local storage: <select id="list-libraries"></select>
<div>
<button id="lib-load-default" title="Load default library for this rule">Load default</button>
<button id="lib-new" title="Create new library">New</button>
<button id="lib-save" title="Save library to local storage">Save</button>
<button id="lib-save-as" title="Save library with new name">Save as...</button>
:
<button id="lib-remove-composites" title="Remove composite patterns from the library">Remove composites</button>
:
<button id="lib-erase" title="Delete saved library data">Delete</button>
</div>
<div id="pattern-report">
</div>
<div>
<div>
<button id="lib-export-json">Export to JSON</button>
<button id="lib-import-json">Import from JSON</button>
</div>
<textarea id="library-json-data" class="text-io" spellcheck="false"></textarea>
</div>
</div>
<div id="analysis-result" class="popup-container">
<div>
<h2>Analysis result</h2>
<div id="analysis-report-area">
</div>
<div>
<button id="analysis-result-close">Close</button>
<button id="analysis-result-to-library">Add to library</button>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="scripts/minified.js"/></script>
</html>