-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
396 lines (385 loc) · 28.3 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
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
<!DOCTYPE html>
<html>
<head>
<title>Accuracy landing simulator</title>
<meta name="viewport" content="width=1280, user-scalable=yes">
<meta charset="utf-8">
<meta name="description" content="A simple canopy landing simulator in various wind conditions">
<link rel="image_src" href="images/control.png"/>
<script src="scripts/ga.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=geometry,places"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="scripts/jquery-ui-1.10.4.custom.min.js"></script>
<script src="scripts/jquery.number.js"></script>
<script src="scripts/blueskies.js"></script>
<script src="scripts/ui.js"></script>
<script src="scripts/loc.js"></script>
<script src="scripts/util.js"></script>
<script src="scripts/tutor.js"></script>
<link rel="stylesheet" href="css/smoothness-theme/jquery-ui-1.10.4.custom.min.css">
<link rel="stylesheet" type="text/css" href="css/common.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body data-bind="setLanguage: display.language">
<div data-bind="css: display.fullscreen() ? 'map-fullscreen' : 'map-normal'">
<div id="map-canvas" data-bind="Map: { options: mapOptions, to: map }"></div>
<div class="arrow-indicator" data-bind="mapControl: 'RIGHT_TOP'">
<img src="images/windsock.png" data-bind="rotate: radToDeg(wind.direction())">
</div>
<div class="arrow-indicator" data-bind="fadeVisible: !pattern.intoWind(), mapControl: 'RIGHT_TOP'">
<img src="images/arrow.png" data-bind="rotate: radToDeg(pattern.landingDirection())">
</div>
<div data-bind="mapControl: 'RIGHT_BOTTOM', visible: !parameters.embedded()">
<button id="button-fullscreen" data-bind="click: display.toggleFullscreen, attr: { title: localize(display.fullscreen() ? 'Normal' : 'Fullscreen') }"><span class="ui-icon" data-bind="css: display.fullscreen() ? 'ui-icon-arrowstop-1-w' : 'ui-icon-arrowstop-1-e'"></span></button>
</div>
<ul id="dz-selection-menu" class="dz-selection-control"
data-bind="mapControl: 'TOP_CENTER', visible: !parameters.embedded()">
<li><a href="#"><div data-bind="html: location.name"></div></a>
<ul>
<!-- ko foreach: dzMenu -->
<li>
<a href="#"><span data-bind="text: localize(name)"></span></a>
<ul data-bind="foreach: members">
<li data-bind="attr: {'data-dz-id': $data}, css: {'current-dz': $data === $root.location.id()}"><a href="#"><span
data-bind="text: localize($data)"></span></a></li>
</ul>
</li>
<!-- /ko -->
<li data-dz-id="custom" data-bind="visible: location.custom.available, css: {'current-dz': location.id() == 'custom'}"><a href="#" data-bind="text: localize('custom')"></a></li>
</ul>
</li>
</ul>
<input id="dz-finder" class="dz-selection-control" type="text"
data-bind="value: location.finderText, attr: { placeholder: localize('Type address') },
mapControl: 'TOP_CENTER',
mapFinder: onFindNewDz,
visible: !parameters.embedded()">
<button class="dz-selection-control" type="button"
data-bind="attr: { title: localize('share-link') },
mapControl: 'TOP_CENTER',
jqButton: onShareLinkClick,
visible: !parameters.embedded()">
<img src="images/share.png">
</button>
</div>
<div id="right-panel" data-bind="fadeVisible: !display.fullscreen()">
<div data-bind="if: debug.on">
<h3>Debug</h3>
<div>
<div>Coords: <span data-bind="text: formatCoords(location.coords())"></span></div>
<div>GET: <span data-bind="text: generateGETForLocation()"></span></div>
<div>loc: <span data-bind="text: formatCoords(canopy.location())"></span></div>
<div><input type="checkbox" data-bind="checked: display.fullscreen">Fullscreen </div>
<div><button data-bind="click: persistence.save">Save</button><button data-bind="click: persistence.load">Load</button><button
data-bind="click: persistence.reset">Reset</button></div>
</div>
</div>
<div id="status" data-bind="slideVisible: simulation.flying">
<h3><span lang="en">Canopy status</span><span lang="ru">Состояние</span></h3>
<div>
<div class="element-label">
<span lang="en">Altitude: </span><span lang="ru">Высота: </span>
<span data-bind="html: formatAltitude(canopy.altitude(), 0)"></span>
</div>
<div>
<div data-bind="jqProgressbar: { value: canopy.altitude(), max: display.maxAltitude() }"></div>
<ul class="ruler" data-bind="ruler: display.maxAltitude"><li>100</li><li>200</li><li>300</li></ul>
</div>
<div class="element-label"><span lang="en">Brake application: </span><span lang="ru">Режим купола: </span></div>
<div data-bind="jqProgressbar: { value: canopy.mode(), max: 1 }"></div>
<div class="element-label">
<span lang="en">Horizontal speed: </span><span lang="ru">Горизонталь: </span>
<span data-bind="html: formatSpeed(canopy.speedH(), 1)"></span>
</div>
<div class="element-label">
<span lang="en">Vertical speed: </span><span lang="ru">Вертикаль: </span>
<span data-bind="html: formatSpeed(canopy.speedV(), 1)"></span>
</div>
<div class="element-label" style="display:none">
<span lang="en">Canopy heading: </span><span lang="ru">Направление купола: </span>
<span data-bind="html: formatHeading(canopy.heading(), 0)"></span>
</div>
<div class="element-label">
<span lang="en">Simulation speed: </span><span lang="ru">Течение времени: </span>
<span data-bind="html: formatSimulationSpeed(simulation.speed())"></span>
<span class="float-right">
<a href="#" class="no-underline" data-bind="click: simulation.togglePause, attr: { title: simulation.pauseText }">
<span class="ui-icon link-icon" data-bind="css: simulation.speed() != 0 ? 'ui-icon-pause' : 'ui-icon-play'"></span>
</a>
<a href="#" class="no-underline" data-bind="click: simulation.stop, attr: { title: localize('Stop') }">
<span class="ui-icon ui-icon-close link-icon"></span>
</a>
</span>
</div>
<div data-bind="jqSlider: simulation.speed, sliderOptions: { min: 0, max: 5, step: 0.1 }"></div>
</div>
</div>
<div data-bind="with: display">
<h3><span lang="en">Display options</span><span lang="ru">Отображение</span></h3>
<div>
<div>
<span data-bind="jqButtonset: true, no_padding: true">
<input id="select-lang-en" type="radio" name="language" value="en" data-bind="jqChecked: language"><label for="select-lang-en"><img src="images/GB.png"></label>
<input id="select-lang-ru" type="radio" name="language" value="ru" data-bind="jqChecked: language"><label for="select-lang-ru"><img src="images/RU.png"></label>
</span>
<span data-bind="jqButtonset: true">
<input id="select-metric" type="radio" name="system" value="metric" data-bind="jqChecked: unitSystem"><label for="select-metric"><span lang="en">Metric</span><span lang="ru">СИ</span></label>
<input id="select-imperial" type="radio" name="system" value="imperial" data-bind="jqChecked: unitSystem"><label for="select-imperial"><span lang="en">Imperial</span><span lang="ru">Английская</span></label>
</span>
</div>
<div id="display-ui-element-buttons" class="element-label" data-bind="jqButtonset: true">
<input type="checkbox" id="steady-point-checkbox" data-bind="jqChecked: steadyPoint">
<label for="steady-point-checkbox">
<img src="images/steady.png" data-bind="attr: { title: localize('accuracy trick') }">
</label>
<input type="checkbox" id="show-controllability-set-checkbox" data-bind="jqChecked: controlset">
<label for="show-controllability-set-checkbox">
<img src="images/control.png" data-bind="attr: { title: localize('controlset') }">
</label>
<input type="checkbox" id="show-reachability-set-checkbox" data-bind="jqChecked: reachset">
<label for="show-reachability-set-checkbox">
<img src="images/reach.png" data-bind="attr: { title: localize('reachset') }">
</label>
</div>
</div>
</div>
<div id="wind-conditions" data-bind="with: wind">
<h3><span lang="en">Wind conditions</span><span lang="ru">Ветер</span></h3>
<div>
<div class="element-label">
<span lang="en">Wind direction: </span><span lang="ru">Направление ветра: </span>
<a href="#" class="link-button float-right" data-bind="click: randomize">
<span lang="en">Randomize</span>
<span lang="ru">Случайный</span>
</a>
<span data-bind="html: formatHeading(reportedWindDirection(direction()))"></span>
</div>
<div data-bind="jqSlider: direction, sliderOptions: headingSliderOptions"></div>
<div class="element-label">
<span lang="en">Wind speed: </span><span lang="ru">Скорость ветра: </span>
<span data-bind="html: formatSpeed(speed(), 1)"></span>
</div>
<div data-bind="jqSlider: speed, sliderOptions: { min: 0, max: 13, step: 0.1 }"></div>
</div>
</div>
<div id="pattern-settings" data-bind="with: pattern">
<h3><span lang="en">Pattern settings</span><span lang="ru">Коробочка</span></h3>
<div>
<div class="element-label">
<span lang="en">Opening altitude: </span><span lang="ru">Высота раскрытия: </span>
<span data-bind="html: formatAltitude(openingAltitude())"></span>
</div>
<div data-bind="jqSlider: openingAltitude, sliderOptions: { min: 100, max: 3000, step: 50 }"></div>
<div class="element-label"><span lang="en">Landing direction: </span><span lang="ru">Курс приземления: </span>
<span data-bind="html: formatHeading(landingDirection())"></span>
<span class="float-right">
<input id="into-the-wind" type="checkbox" data-bind="checked: intoWind">
<label for="into-the-wind"><span lang="en">Into the wind</span><span lang="ru">Против ветра</span></label>
</span>
</div>
<div data-bind="jqSlider: selectedLandingDirection, sliderOptions: headingSliderOptions, slideVisible: !intoWind()"></div>
<div class="element-label">
<span lang="en">Landing pattern:</span><span lang="ru">Круг захода:</span>
<span id="pattern-menu" data-bind="jqButtonset: true">
<input id="pattern-hide" type="radio" name="pattern" value="hide" data-bind="jqChecked: $root.display.pattern">
<label for="pattern-hide"><span lang="en">Hide</span><span lang="ru">Нет</span>
</label>
<input id="pattern-rhs" type="radio" name="pattern" value="rhs" data-bind="jqChecked: $root.display.pattern">
<label for="pattern-rhs"><span lang="en">Right</span><span lang="ru">Правым</span>
</label>
<input id="pattern-lhs" type="radio" name="pattern" value="lhs" data-bind="jqChecked: $root.display.pattern">
<label for="pattern-lhs"><span lang="en">Left</span><span lang="ru">Левым</span>
</label>
</span>
</div>
</div>
</div>
<div data-bind="visible: !parameters.embedded()">
<h3><span lang="en">Info</span><span lang="ru">Информация</span></h3>
<div id="about-text">
<div lang="en">
<p>Try and play with the simulator. If you're stuck, you can get some help from <a href="#" class="link-button legend-button">the
legend</a> or you can <a href="#" class="link-button tutor-button">restart the tutor</a> to go through the set of the dialogs again.</p>
<p><a href="#" class="link-button about-button">Read more</a> about the project in general.</p>
<p><a href="https://github.com/hr0nix/BlueSkies"><img src="images/GitHub-Mark-32px.png">Check out on github</a></p>
</div>
<div lang="ru">
<p>Поэкспериментируйте с симулятором. Если вы запутались, попробуйте заглянуть в <a href="#" class="link-button legend-button">легенду</a>
или <a href="#" class="link-button tutor-button">пересмотреть введение</a>.</p>
<p>Общая информация <a href="#" class="link-button about-button">о симуляторе</a> (English).</p>
<p><a href="https://github.com/hr0nix/BlueSkies"><img src="images/GitHub-Mark-32px.png">Страница симулятора на github</a></p>
</div>
</div>
</div>
</div>
<div style="display:none">
<div id="about-dialog">
</div>
<div id="legend-dialog">
<div lang="en">
<p>Right-click on the map to (re)start the simulation from the corresponding location.</p>
<p>Use left and right arrows to steer, up and down arrows to control the speed of the canopy.</p>
<dl>
<dt><img src="images/target.png"></dt>
<dd>The landing target. Your goal is to be in this spot at
zero altitude. You can use drag-and-drop to reposition.</dd>
<dt><img src="images/canopy.png"></dt>
<dd>This arrow represents your canopy. Rightclick any place on the map to start the simulation from that position.</dd>
<dt><img src="images/steady.png"></dt>
<dd>Show the projected landing point. Provided the wind conditions don't
change and no input is given to the canopy, it will land on the pink
point.</dd>
<dt><img src="images/control.png"></dt>
<dd>Show points you can reach the landing target from. If the
canopy is outside this area, the target point is out of reach,
choose an alternate landing area.</dd>
<dt><img src="images/reach.png"></dt>
<dd>Show reachable area: you can still reach those points from
the current position and altitude. Points outside this area are no
longer reachable no matter what inputs are given to the canopy.</dd>
</dl>
<p>Press P to pause/unpause: the time stops, but you still can turn your canopy in place to discover its range and possibilities.</p>
</div>
<div lang="ru">
<p>Нажатием правой кнопки мыши можно начать (заново) снижение под куполом с заданной высоты.</p>
<p>Для управления используется стрелки: влево-вправо для управления куполом, вверх-вниз для выбора режима.</p>
<dl>
<dt><img src="images/target.png"></dt>
<dd>Желаемая точка приземления. Ее положение можно настраивать,
перетаскивая ее по карте.</dd>
<dt><img src="images/canopy.png"></dt>
<dd>Это ваш купол. Нажмите в любом месте карты правой кнопкой мыши: он там появится и начнется снижение!</dd>
<dt><img src="images/steady.png"></dt>
<dd>Отображение предполагаемой точки приземления: если условия останутся
прежними и не будет производиться корректировок траектории, купол
приземляется в розовую точку.</dd>
<dt><img src="images/control.png"></dt>
<dd>Отображение конуса возможностей купола. При заданной силе ветра
и текущей высоте только при нахождении внутри указанной области все еще
возможно приземлиться в выбранной точке площадки.</dd>
<dt><img src="images/reach.png"></dt>
<dd>Отображение области на земле, в которую возможно приземлить
купол из его текущего положения. Если ваша цель находится вне этой
области, то <abbr title="Конечно же, вы можете изменить силу или направление ветра, но это возможно только в этой игре">никакими</abbr> корректировками траектории туда попасть уже
невозможно.</dd>
</dl>
<p>Нажатием P можно приостановить или продолжить симуляцию: время останавливается, но купол можно повернуть для исследования достижимых точек на карте.</p>
</div>
</div>
<div id="share-dialog" data-bind="with: shareLocation">
<div>
<span lang="en">Copy the following link. It will lead to the current location:</span>
<span lang="ru">Скопируйте ссылку, она ведет к текущему положению на карте:</span>
</div>
<div>
<span lang="en">Also share: </span>
<span lang="ru">Добавить в ссылку:</span>
<input id="share-wind" type="checkbox" data-bind="checked: wind">
<label for="share-wind">
<span lang="en">Wind</span>
<span lang="ru">Ветер</span>
</label>
<input id="share-pattern" type="checkbox" data-bind="checked: pattern">
<label for="share-pattern">
<span lang="en">Pattern</span>
<span lang="ru">Заход</span>
</label>
<input id="share-language" type="checkbox" data-bind="checked: language">
<label for="share-language">
<span lang="en">Language</span>
<span lang="ru">Язык</span>
</label>
</div>
<input type="text" readonly autofocus data-bind="value: GET">
</div>
</div>
<div id="tutor-dialogs" style="display:none">
<!-- Here we simply define all the dialogs we need in the order we need them to be displayed -->
<div id="tutor-welcome">
<div lang="en">
<p>Welcome to this simple canopy landing simulator!</p>
<p>This simulator is designed to provide insights into canopy control in various wind conditions and to show how to reach the
landing area from a difficult spot.</p>
<p>Tutorial will review the basic information necessary to use the simulator.
</div>
<div lang="ru">
<p>Добро пожаловать!</p>
<p>Это простой симулятор управления куполом парашюта, предназначенный для изучения поведения парашюта в различных различных условиях.</p>
<p>В пошаговом введении расскажем основную информацию, необходимую для использования сумулятора.</p>
</div>
</div>
<div id="tutor-dz-selection">
<div lang="en">
<p>Please choose a landing area from the list or use the search bar to locate it on Google Maps.</p>
<p>For example, you can try "Sphinx, Giza, Egypt" or your favorite dropzone.</p>
</div>
<div lang="ru">
<p>Выберите площадку приземления из заранее подготовленного списка, либо воспользейтесь строкой поиска, чтобы найти место с помощью Google Maps.</p>
</div>
</div>
<div id="tutor-target">
<div lang="en">
<p>The landing target. You can use drag-and-drop to reposition it.</p>
<p>You can try it now.</p>
</div>
<div lang="ru">
<p>Это точка приземления. Используйте мышь, чтобы перемещать ее по карте.</p>
<p>Попробуйте!</p>
</div>
</div>
<div id="tutor-wind">
<div lang="en">
<p>You can set the wind conditions here.</p>
</div>
<div lang="ru">
<p>Здесь вы можете задать силу и напрвление ветра.</p>
</div>
</div>
<div id="tutor-reachset">
<div lang="en">
<p>Using these buttons you can explore the range of the canopy in given conditions. For example, see the area on the ground that
is still reachable from the current position and altitude or check the points you can reach the landing target from.
</div>
<div lang="ru">
<p>Эти кнопки помогут вам исследовать возможности купола при выбранных условиях, например, оценить какие места точки на земле
достижимы из текущего положения или из каких точек есть возможность попасть в финальную.</p>
<p>Не забудье поеэкспериментировать! Это основное достоинство данного симулятора.</p>
</div>
</div>
<div id="tutor-pattern">
<div lang="en">
<p>Use this area to configure the landing pattern.</p>
<p>Choose the opening altitude: you start the descent there.</p>
<p>You can also display the suggested landing pattern in given conditions.</p>
</div>
<div lang="ru">
<p>Здесь находятся настройки захода на приземление.</p>
<p>Есть возможность настроить «высоту раскрытия»: с этой высоты начинается снижение под куполом в симуляторе.
<p>Можно настроить отображение коробочки для захода правым либо левым кругом.</p>
</div>
</div>
<div id="tutor-restart">
<div lang="en">
<p>To read this tutor again, click "restart the tutor".</p>
</div>
<div lang="ru">
<p>Вы можете вернуться к этой пошаговой инструкции позже, нажав «пересмотреть введение».</p>
</div>
</div>
<div id="tutor-rightclick">
<div lang="en">
<p>Right-click anywhere on the map to start simulation.</p>
<p>Use arrows to control the canopy: left and right to steer, up and down to use brakes.</p>
</div>
<div lang="ru">
<p>Правый клик мыши на карте начинает снижение из этой точки.</p>
<p>Для управления используйте стрелки на кливиатуре: влево-вправо для поворотов, вверх-вниз для управления режимом.</p>
</div>
</div>
</div>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script>
<script src="scripts/bindings.js"></script>
<script src="scripts/viewmodel.js"></script>
<script src="scripts/index.js"></script>
</body>
</html>