-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
115 lines (112 loc) · 5.36 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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Ants Simulator</title>
<link rel="stylesheet" href="styles/w3.css" />
<link href="styles/style.css" rel="stylesheet" />
<script src="js/gpu-browser.min.js" type="text/javascript"></script>
<script src="js/models.js" type="text/javascript"></script>
<script src="js/ui_control.js" type="text/javascript"></script>
<script src="js/graphics.js" type="text/javascript"></script>
<script src="js/imagedata-filters.min.js" type="text/javascript"></script>
</head>
<body>
<div class="simulation-container">
<div class="graph-container">
<div class="title">
Ants Simulator
</div>
<div class="screen-container">
<div class="screen-sub-container">
<div class="canvasContainer">
<canvas class="screen overlay" id="canvas">Your browser doesn't support HTML canvas</canvas>
</div>
<div class="statistics">
<span class="cpsCounter">cps : <span id="cpsCount">0</span></span>
<span class="fpsCounter">fps : <span id="fpsCount">0</span></span>
<span class="antsCounter">ants : <span id="antsCount">0</span></span>
<span class="cyclesCounter">cycles : <span id="cyclesCount">0</span></span>
</div>
</div>
</div>
</div>
<div class="controls-container">
<div class="title">
Controls
</div>
<div class="controls">
<div class="playback">
<div class="reset-button">
<button class="w3-button w3-circle" onclick="playback(this)" data-action="stop">
<img src="img/stop.svg" alt="Stop" class="playback-buttons">
</button>
</div>
<div class="playback-buttons">
<button class="w3-button w3-circle" onclick="playback(this)" data-action="rewind">
<img src="img/rewind.svg" alt="Rewind" class="playback-buttons">
</button>
<button class="w3-button w3-circle" onclick="playback(this)" data-action="play">
<img src="img/play.svg" alt="Play" class="playback-buttons">
</button>
<button class="w3-button w3-circle" onclick="playback(this)" data-action="forward">
<img src="img/forward.svg" alt="Forward" class="playback-buttons">
</button>
</div>
</div>
<div class="sliders">
<div>
<label for="simulation_speed" class="controller-title">Simulation speed:</label>
<input type="range" id="simulation_speed" min="1" max="100" value="10" class="slider" data-action="simulation_speed" oninput="slider(this)">
</div>
<div>
<label for="ants_number" class="controller-title">Ants number:</label>
<input type="range" id="ants_number" min="1" max="100" value="25" class="slider" data-action="ants_number" oninput="slider(this)">
</div>
<div>
<label for="pheromones_fade" class="controller-title">Pheromones fade :</label>
<input type="range" id="pheromones_fade" min="1" max="100" value="20" class="slider" data-action="pheromones_fade" oninput="slider(this)">
</div>
<div>
<label for="strength_degradation" class="controller-title">Strength degradation :</label>
<input type="range" id="strength_degradation" min="1" max="100" value="10" class="slider" data-action="strength_degradation" oninput="slider(this)">
</div>
<div>
<label for="cycles_per_update" class="controller-title">Cycles per update :</label>
<input type="range" id="cycles_per_update" min="1" max="10" value="2" class="slider" data-action="cycles_per_update" oninput="slider(this)">
</div>
<div>
<label for="step_size" class="controller-title">Step size :</label>
<input type="range" id="step_size" min="1" max="10" value="2" class="slider" data-action="step_size" oninput="slider(this)">
</div>
<div class="controls_break"></div>
<div>
<label for="brightness" class="controller-title">Brightness :</label>
<input type="range" id="brightness" min="0" max="100" value="20" class="slider" data-action="brightness" oninput="slider(this)">
</div>
<div>
<label for="accurate_position" class="controller-title">Accurate position :</label>
<label class="switch">
<input type="checkbox" id="accurate_position" checked data-action="accurate_position" onclick="checkbox(this)">
<span class="slider-checkbox round"></span>
</label>
</div>
<div>
<label for="enabled_rotation" class="controller-title">Enabled rotation :</label>
<label class="switch">
<input type="checkbox" id="enabled_rotation" checked data-action="enabled_rotation" onclick="checkbox(this)">
<span class="slider-checkbox round"></span>
</label>
</div>
<label for="use_image" class="controller-title">Use ant image :</label>
<label class="switch">
<input type="checkbox" id="use_image" data-action="use_image" onclick="checkbox(this)">
<span class="slider-checkbox round"></span>
</label>
</div>
</div>
</div>
</div>
</div>
</body>
</html>