-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
126 lines (123 loc) · 5.64 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Basic application</title>
<link rel="stylesheet" href="websrc/foundation.min.css">
<link rel="stylesheet" href="websrc/style-index.css">
</head>
<body>
<div class="container">
<div class="container-menu" bind-obj="autoParams">
<h3>Options</h3>
<div class="row" >
<fieldset class="fieldset">
<legend>Choose your automaton</legend>
<div class="medium-6 columns">
<label class="middle" for="automaton-type">Automaton</label>
</div>
<div class="medium-6 columns">
<select id="automaton-type" bind-val="auto">
</select>
</div>
<div class="medium-12 columns" style="display:none;" id="customAutomaton">
<table>
<thead>
<tr>
<th>State</th>
<th>0</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
</tr>
</thead>
<tbody>
<tr>
<td>Birth*</td>
<td><input type="checkbox" bind-val="custom.1.0"></td>
<td><input type="checkbox" bind-val="custom.1.1"></td>
<td><input type="checkbox" bind-val="custom.1.2"></td>
<td><input type="checkbox" bind-val="custom.1.3"></td>
<td><input type="checkbox" bind-val="custom.1.4"></td>
<td><input type="checkbox" bind-val="custom.1.5"></td>
<td><input type="checkbox" bind-val="custom.1.6"></td>
<td><input type="checkbox" bind-val="custom.1.7"></td>
<td><input type="checkbox" bind-val="custom.1.8"></td>
</tr>
<tr>
<td>Survival*</td>
<td><input type="checkbox" bind-val="custom.2.0"></td>
<td><input type="checkbox" bind-val="custom.2.1"></td>
<td><input type="checkbox" bind-val="custom.2.2"></td>
<td><input type="checkbox" bind-val="custom.2.3"></td>
<td><input type="checkbox" bind-val="custom.2.4"></td>
<td><input type="checkbox" bind-val="custom.2.5"></td>
<td><input type="checkbox" bind-val="custom.2.6"></td>
<td><input type="checkbox" bind-val="custom.2.7"></td>
<td><input type="checkbox" bind-val="custom.2.8"></td>
</tr>
</tbody>
</table>
<p><strong>*Birth :</strong> Number of neighbours required to <strong>become alive</strong></p>
<p><strong>*Survival :</strong> Number of neighbours required to <strong>stay alive</strong></p>
</div>
</fieldset>
</div>
<div class="row">
<fieldset class="fieldset">
<legend>Cell's number</legend>
<div class="medium-6 columns">
<label>Width
<input id="automaton-width" type="number" min="10" max="200" step="10" placeholder="50" bind-val="numberElements.0">
</label>
</div>
<div class="medium-6 columns">
<label>Height
<input id="automaton-height" type="number" min="10" max="200" step="10" placeholder="50" bind-val="numberElements.1">
</label>
</div>
</fieldset>
</div>
<div class="row">
<fieldset class="fieldset">
<legend>Additional parameters</legend>
<div class="medium-6 columns">
<label for="automaton-frequency" class="middle">Frequency</label>
</div>
<div class="medium-6 columns">
<input id="automaton-frequency" type="number" value="1000" min="100" max="5000" step="100" bind-val="freqUpdate">
</div>
<div class="row">
<div class="medium-12 columns">
<input id="automaton-circular" type="checkbox" bind-val="circular">
<label for="automaton-circular">Borderless (considered as a sphere) </label>
</div>
</div>
</fieldset>
</div>
<div class="row">
<a class="button large-12" onclick="newAuto()">New automaton</a>
</div>
<h3>Commands</h3>
<div class="row">
<div class="expanded button-group">
<a class="button" id="automaton-startStop" onclick="startStop();">Start</a>
<a class="button" onclick="next();">Next iteration</a>
</div>
</div>
</div>
<div class="container-automaton">
<canvas id="canvas-automaton" width="700" height="700">
</canvas>
</div>
</div>
<script src="automaton.js"></script>
<script src="websrc/script-index.js"></script>
<script src="websrc/dataFormBinding.js"></script>
</body>
</html>