-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
196 lines (174 loc) · 8.47 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HSI Trainer</title>
<link rel="stylesheet" href="style/reset.css?v=2.0">
<link rel="stylesheet" href="style/style.css?v=2021.1">
<script src="scripts/jquery.js?v=2.2.2"></script>
<script src="scripts/jquery.mobile-events.js?v=1.0.5"></script>
<script src="scripts/Plane.js?v=2021.1"></script>
<script src="scripts/Map.js?v=2021.1"></script>
<script src="scripts/Beacon.js?v=2021.1"></script>
<script src="scripts/Instrument_HSI.js?v=2021.1"></script>
<script src="scripts/Instrument_AI.js?v=2021.1"></script>
<script src="scripts/Main.js?v=2021.1"></script>
</head>
<body>
<div class="container instruments">
<div class="top">
<canvas id="canvas-ai" class="instrument" onclick="my.plane.setAttitude(0,0);"></canvas>
<div id="debug">
<table>
<tr class="stopwatch">
<td class="label">Stopwatch</td>
<td class="value"></td>
</tr>
<tr class="kias">
<td class="label">KIAS</td>
<td class="value"></td>
</tr>
<tr class="vtas">
<td class="label">TAS</td>
<td class="value"></td>
</tr>
<tr class="vv">
<td class="label">Vertical speed </td>
<td class="value"></td>
</tr>
<tr class="alt">
<td class="label">Altitude</td>
<td class="value"></td>
</tr>
<tr class="turn-rate">
<td class="label">Turn rate</td>
<td class="value"></td>
</tr>
</table>
</div>
</div>
<div class="middle">
<canvas id="canvas-hsi" class="instrument"></canvas>
</div>
<div class="bottom">
<div class="info dme">
DME <span class="value">0</span>
</div>
<div class="info relative-speed"><span class="value">0</span> KTS</div>
</div>
</div>
<div class="container controls">
<div class="control-group location">
<div class="label"><span>L</span>ocation</div>
<button class="value col4" onclick="javascript: my.scene.openLocationSelect();">Set location</button>
</div>
<div class="control-group info simulation-rate" title="Speed up or slow down the simulation rate">
<div class="label"><span>R</span>ate</div>
<button class="col3 value" onclick="javascript: my.scene.toggleSimulationRate()">
1x
</button>
<button class="col1" onclick="javascript: my.scene.togglePause();">
P
</button>
</div>
<div class="control-group info map">
<div class="label"><span>M</span>ap</div>
<button class="col1 value colored" onclick="javascript: my.map.toggleVisibility();">M</button>
</div>
<div class="control-group info station">
<div class="label"><span>S</span>tation</div>
<input class="col3 value" type="text" readonly="readonly" onclick="javascript: my.scene.openBeaconSelect();"/>
<button class="col1" onclick="javascript: my.scene.openLocationSelect();">L</button>
</div>
<div class="control-group hsi-course">
<div class="label"><span>C</span>ourse</div>
<button class="col1" onclick="javascript: my.instrument.hsi.adjustCourse(false);">-</button>
<input class="col2 value" type="number" onfocus="javascript: my.instrument.hsi.onFocusCourse();"
onblur="javascript: my.instrument.hsi.onBlurCourse();"/>
<button class="col1" onclick="javascript: my.instrument.hsi.adjustCourse(true);">+</button>
</div>
<div class="control-group hsi-bug">
<div class="label"><span>B</span>ug</div>
<button class="col1" onclick="javascript: my.instrument.hsi.adjustHeadingBug(false);">-</button>
<input class="col2 value" type="number" onfocus="javascript: my.instrument.hsi.onFocusHeadingBug();"
onblur="javascript: my.instrument.hsi.onBlurHeadingBug();"/>
<button class="col1" onclick="javascript: my.instrument.hsi.adjustHeadingBug(true);">+</button>
</div>
<div class="control-group info auto-turn">
<div class="label"><span>T</span>urn</div>
<button class="col4 value colored" onclick="javascript: my.plane.toggleAutoTurn(my.instrument.hsi.getHeadingBug())">
off
</button>
</div>
<div class="control-group wind">
<div class="label"><span>W</span>ind</div>
<button class="value col4 colored" onclick="javascript: my.scene.openWindSelect();">000 / 00</button>
</div>
</div>
<div class="container map">
<div class="control-container" style="display: none;">
<div class="control-group zoom">
<div class="label">Zoom</div>
<button class="col1" onclick="javascript: my.map.zoom(-1);">-</button>
<input class="col2 value" type="number" disabled="disabled"/>
<button class="col1" onclick="javascript: my.map.zoom(1);">+</button>
</div>
<div class="control-group recenter">
<div class="label"></div>
<button class="col4" onclick="my.map.moveToXY(my.plane.pos.x, my.plane.pos.y);">Recenter map</button>
</div>
</div>
<div class="tooltip" onclick="javascript: my.map.toggleVisibility();">Press "M" to show the map</div>
</div>
<div class="modal s select" id="beacon-select">
<div class="inner">
<h1>Select beacon</h1>
<ul></ul>
<div>
<input class="value" type="number" placeholder="Type number" onkeyup="javascript: my.scene.selectBeacon($(this).val());"/>
</div>
</div>
</div>
<div class="modal s select" id="wind-select">
<div class="inner">
<h1>Set wind</h1>
<input class="direction" type="number" placeholder="direction (ie. 240)" oninput="javascript: my.scene.selectWindDirection($(this).val());"/>
<input class="velocity" type="number" placeholder="velocity (ie. 07)" oninput="javascript: my.scene.selectWindVelocity($(this).val());"/>
</div>
</div>
<div class="modal s select" id="location-select">
<div class="inner">
<h1>Set location</h1>
<input class="radial" type="number" placeholder="radial (ie. 250)" oninput="javascript: my.scene.selectLocationRadial($(this).val());"/>
<input class="distance" type="number" placeholder="distance (ie. 08)" oninput="javascript: my.scene.selectLocationDistance($(this).val());"/>
<input class="heading" type="number" placeholder="heading (ie. 070)" oninput="javascript: my.scene.selectLocationHeading($(this).val());"/>
<input class="altitude" type="number" placeholder="altitude (ie. 1000)" oninput="javascript: my.scene.selectLocationAltitude($(this).val());"/>
</div>
</div>
<div class="modal show" id="help">
<div class="inner">
<h1>HSI-trainer</h1>
<p>This program is used to train your HSI skills. There are some quick-access shortcuts on your keyboard, these are marked yellow in the controls section (middle column).</p>
<p>But that's not all, these are some other shortcuts:</p>
<ul>
<li>- Arrows: Steer the plane (roll and pitch)</li>
<li>- + and -: Change the KIAS</li>
<li>- P: Pause the simulation</li>
<li>- H: re-open this dialog</li>
</ul>
<p>Another useful thing to know is that you can click on the AI to recenter the planes attitude.</p>
<h2>Updates</h2>
<p>2021: set altitude when setting <u>L</u>ocation</p>
<p>2016: initial release</p>
<h2>Open Source</h2>
<p>The code is open source, you can contribute at <a href="https://github.com/JelmerD/hsi-trainer" target="_blank">github.com</a> and that is also the location to report bugs/issues or suggest edits.</p>
<p>Don't have a Github account? Try to contact me via another method. I'd suggest you use a homing pigeon.</p>
<h2>Disclaimer</h2>
<p>I am not responsible if you mess up your flight because of training with this program. I will try to get it as real as possible though, but you should remember that it is a trainer/simulator to get to know departure/approach procedures.</p>
</div>
</div>
<div id="copyright">
©2021 Jelmer Dröge - EMVO 16-01 - <a href="https://github.com/JelmerD/hsi-trainer" target="_blank">Github</a>
</div>
</body>
</html>