-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
399 lines (313 loc) · 21.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
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
397
<!DOCTYPE html>
<html lang="en"> <!-- manifest="demo.appcache" TODO -->
<head>
<title>Learn the landmarks around a fire lookout station</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="icon" href="http://www.anffla.org/wp-content/themes/anffla/anffla_favicon.ico" type="image/x-icon" /> -->
<link rel="icon" href="anffla_favicon.ico" type="image/x-icon">
<!-- (This thing has grown beyond ANY reasonable proportions and expectations!)
Executive summary:
Click on the the landmarks in the panorama picture to show an info card about the landmark.
This whole general mashmash is written in html5 and javascript.
Types of HTML elements are introduced thus: <TYPE>.
Specific elements are denoted: #element.
JavaScript functions: jsFunc().
(I don't really like html/css so it's not very good and has lots of "evil" usages. BWAAAahahaha :->)
A panorama <IMG> (#imgPano) of the terrain surrounding the station has an associated <MAP> element.
This <MAP> has <AREAS> denoting the identified landmarks.
Clicking on an area will show an info card in #Cards.
Clicking #imgPano outside of an <AREA> will (re-)show some "#Teaser" text in place of #Cards.
A <CANVAS> (#cvsPano) overlies #imgPano. The areas are drawn on the canvas when hovered over.
When the cursor enters an area, areaDraw() draws the corresponding outline on #cvsPano.
areaClear() clears the outline.
In addition, new shapes (circles, polygons, and rectangles) can be drawn on #cvsPano and recorded as <AREA>s.
The <AREA>s and ALL the other site-specific stuff is in LandmarkSites.js.
This allows this page to be used for multiple sites.
(In this usage a "site" is a fire lookout station. Maybe should use "lookout" or "station" to avoid confusion with "web-site"?)
Minimum input for the <AREA>s is 'shape', 'coords' and 'alt' fields.
e.g. "<area shape='rect' coords='2790, 203, 2832, 215' alt='354 Pacifico Mtn'>"
'Alt' text is assumed to be the path to a pic to pop into #Cards when the area is clicked.
(Bonus:
'Title's can be set for <AREA>s with or without pix to show when hovering.
A 'type' of 'video/mp4' will show the movie specified in 'mediaFile', instead of a pic.
A 'type' of 'audio/mpeg' will play the 'mediaFile' when the <AREA> is hovered over.
-->
<!-- =========================================================================================== -->
<!-- shorthands and utils -->
<script type="text/javascript">
// <!-- hide all this crap if no-scripts
function bug0(val) { byId("db0").value = val; } // print to specific <textarea>
function bug1(val) { byId("db1").value = val; }
function bug2(val) { byId("db2").value = val; }
function bug3(val) { byId("db3").value = val; }
function bug4(val) { byId("db4").value = val; }
function bug5(val) { byId("db5").value = val; }
/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! TODO
if (window.location.toString().indexOf('https://') == 0) { // secure pages require secure scripts
document.writeln('<script src="https://gpsvisualizer.com/google_maps/functions3.js" type="text/javascript"><'+'/script>');
} else {
document.writeln('<script src="http://maps.gpsvisualizer.com/google_maps/functions3.js" type="text/javascript"><'+'/script>');
}
/* */
// hide all this crap if no-scripts -->
</script>
<!-- Chrome says to load the CSS after the inline script and before the external scripts !? -->
<!-- From: https://meyerweb.com/eric/tools/css/reset/ -->
<link type="text/css" rel="stylesheet" href="reset.css">
<link type="text/css" rel="stylesheet" href="Trainer.css">
<!-- Script to load the intro page, the <map> source and other site-specific stuff,
and get the main page loaded
LoadIntro(): first page. It gets overwriten by ...
LoadSite(): loads the <map> and other site (station/location) -specific stuff, which calls ...
FinishLoad(): to complete the main page load
-->
<script src="Util.js" type="text/javascript"> </script>
<!-- some more of the rest of the JS stuff that makes this page sooo awesome -->
<script src="Sites.js" type="text/javascript"> </script>
<!-- all the rest of the JS stuff that makes this page sooo awesome -->
<script src="Trainer.js" type="text/javascript"> </script>
</head>
<!-- ========================================================================================= onunload="function () { Bye-Bye()" -->
<body id="BODY" onload="LoadIntro('body-onload')" onmousemove="bodyMouseMove(event)"
onresize="HandleResize()"> <!-- onpageshow="preLoadIntro('body-onpageshow')" try to get my iphone4 to read this -->
<noscript>
Your browser does not support JavaScript.
This website won't work without it.
</noscript>
<!-- #divIntro is the entire "first page", populated in LandmarkSites.js/LoadIntro(). -->
<div id="divIntro">
<!-- try to get my iphone4 to read this
<script type="text/javascript" onload="SLoadIntro()">
function SLoadIntro() { BUGWhere = byId("idFTextOut"); bugln(' SLoadIntro'); preLoadIntro('SLoadIntro'); }
</script> <!-- -->
<header>
<h1 class="hIntro"> Landmark Trainer </h1>
<h2 class="hIntro"> Where do you want to go today? </h2>
</header>
<div id="divSiteList">
<!-- populated in LandmarkSites.js/LoadIntro() -->
<!-- <select id="sitesMenu" onchange="sitePick(this)"></select> <!-Q- links are better than menu? -->
<!-- links are added here in LoadIntro() -->
</div>
<br>
<footer style="float:right;">(To return here, 'reload' the page)</footer>
<br><br>
<!-- <div id="divIBug"></div> <!-- test and bug stuff -->
<!-- try to get my iphone4 to read this
<script type="text/javascript" onload="SLoadIntro()">
function divFBugLoad() { BUGWhere = byId("idFTextOut"); bugln(' divFBugLoad'); preLoadIntro('divFBugLoad'); }
</script>
<form id="divFBug" style="width:100%; min-height:100px;" onload="divFBugLoad()">
<textarea id="idFTextOut" rows="6" spellcheck="false">
Well???
</textarea>
</form>
<!-- -->
</div> <!-- id="divIntro" -->
<!-- Above is completely replaced with #divWork when one of the links is clicked -->
<div id="divWork" > <!-- -->
<!-- This div comprises the top half of the page -->
<div id="OneRow_TwoCols" style="width:100%; height:252px; overflow:hidden; position:relative;"> <!-- one row, two cols -->
<!-- OK. OK. I know. This is weird.
#RightColumn contains 4 OVERLAYING <DIV>s.
flashCard() sets which ONE will be visible -->
<div id="RightColumn" style="vertical-align:top; float:right"> <!-- right col has #Cards/#Teaser/#Movie/#Title -->
<div id="divCards"> <!-- shows a photo -->
<img id="Cards"> <!-- src set in flashCard() -->
</div>
<div id="divTeaser"> <!-- shows teaser text -->
<div id="Teaser" class="Teaser" style="height:100%; max-height:250px;"> <!-- -->
<div style="height:40%;height:90px;"> <!-- -->
<span style="font-size:100%;"> Peek at the pix of peaks in the panorama pic. </span>
</div>
<div style="height:40%;height:90px;"> <!-- -->
<span style="font-size:80%;"> Peek here after you pick a peak. </span>
</div>
<div style="height:20%; max-height:50px; vertical-align:bottom; max-height:40px;"> <!-- -->
<span style="font-size:60%;"> (Don't get piqued at the peak you picked!) </span>
</div>
</div> <!-- id="Teaser" -->
</div> <!-- id="divTeaser" -->
<div id="divMovie"> <!-- shows a movie -->
<video id="Movie" controls> <!-- 'src' set in flashCard() -->
<!-- <source ...> written in as needed from <AREA> fields -->
Your browser does not support the video tag.
</video>
</div>
<div id="divTitle"> <!-- shows arbitrary text -->
<table><tr><td style="vertical-align:middle"> <!-- TODO have I mentioned lately my love and admiration of html/css formatting? -->
<span id="TitleText"></span> <!-- innerHTML set in flashCard() -->
</td></tr></table>
</div>
<div id="divFader" class="Fader"> <!-- shows arbitrary text -->
<table><tr><td style="vertical-align:middle"> <!-- TODO have I mentioned lately my love and admiration of html/css formatting? -->
<span id="FaderText"></span> <!-- innerHTML set in flashCard() -->
</td></tr></table>
</div>
</div> <!-- id="RightColumn" -->
<div id="LeftColumn" style="overflow:hidden; height:252px; position:relative;"> <!-- LeftColumn has tw0 rows -->
<div id="LeftCol_TwoRows" style="width:100%; height:252px; position:absolute; bottom:252px; top:0px;">
<div id="LeftTopRow"> <!-- style="vertical-align:top;" LeftTopRow is <H> stuff -->
<!-- not-visible "button" to show/hide: shape-creation, and debug stuff
shift- or ctrl-click it -->
<span id="LightEm" style="min-width:22px; width:22px; min-height:22px; height:22px; float:left;"
onClick="showBug(event)" onmouseover="XMe(event)" onmouseleave="unXMe(event)">   </span>
<!-- actual "production" stuff -->
<h1 id="idH1" style="vertical-align:top;">DU</h1>
<h2 id="idH2" style="vertical-align:top;">MM</h2>
<h3 id="idH3" style="vertical-align:top;">IE !!!</h3>
</div> <!-- id="LeftTopRow" -->
<!-- LeftBottomRow contains options and shape selectors -->
<!-- <div id="LeftBottomRow" style="overflow:hidden; position:absolute; left:0px; right:0px; bottom:0px;"> <!-- -->
<div id="LeftBottomRow" style="width:100%; position:absolute; bottom:0px;"> <!-- overflow:hidden; display:table-row; -->
<!-- because of the 'float:right' #xtraBox has to show up above the rest of the stuff in #LeftMiddleRow -->
<div id="xtraBox" style="display:table-cell; height:100%; float:right; text-align:right; vertical-align:bottom;">
<br>
<div class="clsDebugs"> <!-- (and some spare numeric displays box) -->
db0/1<textarea id="db0" cols="6" rows="1" style="width:66px; height:20px;"></textarea>
<textarea id="db1" cols="6" rows="1" style="width:66px; height:20px;"></textarea> <br>
db2/3<textarea id="db2" cols="6" rows="1" style="width:66px; height:20px;"></textarea>
<textarea id="db3" cols="6" rows="1" style="width:66px; height:20px;"></textarea> <br>
db4/5<textarea id="db4" cols="6" rows="1" style="width:66px; height:20px;"></textarea>
<textarea id="db5" cols="6" rows="1" style="width:66px; height:20px;"></textarea> <br>
</div>
<a id="idXtraLink" href="" target="_blank" style="padding-right:10px;"></a> <!-- float:right; clear:both; -->
<!-- upper 'mail me the changed data' button
<br><br><br>
<span type="button" class="Made" form="divNewStuff" onclick="byId('idTextOut').scrollIntoView(false);"
title="Scrolls to bottom of page."
style="font-size:100%; text-align:center; background-color:#D0D090;
margin:3px; border:solid 2px #008000; border-radius:3px; padding:3px;"
>Scroll to bottom when you're done editing.</span>
<!-- -->
</div> <!-- id="xtraBox" -->
<div id="BoxBox""> <!-- 'Options' checkboxes -->
<div title="Show all the landmarks in the panorama (If off, landmarks appear when hovered.)">
<input id="idShowAll" type="checkbox" class="optBox" onchange="HandleShowAll(this.checked);" initto="checked=true" />
<label for="idShowAll">Show all landmarks</label> </div>
<div title="Show info about landmark when hovered">
<input id="idShowHints" type="checkbox" class="optBox" onchange="HandleShowHints(this.checked);" initto="checked=true" />
<label for="idShowHints">Show landmark hints</label> </div>
<div title="(New landmarks must be saved from text area. Click the 'Mail' button.)">
<input id="idEditAreas" type="checkbox" class="optBox" onchange="HandleEditAreas(this.checked);" initto="checked=false" />
<label for="idEditAreas">Edit landmarks</label> </div>
<!--
<div title="Show extra 'how-to' tips with hint info">
<span>     </span>
<input id="idShowTips" type="checkbox" class="optBox" onchange="HandleShowTips(this.checked);" initto="checked=false" />
<label for="idShowTips">Show extra tips</label> </div>
<!-- -->
<div title="Show/hide text area with moved & new landmark code">
<input id="idShowText" type="checkbox" class="optBox" onchange="HandleShowText(this.checked);" initto="checked=false" />
<label for="idShowText" id="idShowTextAlert">Show the Text area</label> </div> <!-- id=future user alert??? -->
</div>
<div style="display:table-cell; vertical-align:bottom; padding-right:10px;"> <!-- the shape selectors box -->
<div class="clsShapeShifter" style="font-size:100%; font-weight:normal;
align-items:left; align-content:left; align-self:left;">
<br>
<form> <!-- vertical-align:bottom; Chrome requires the <FORM> for the radios to work. FF doesn't. Edge/IE? Anyway, good form :-) -->
<div style="display:none;">
</div>
<div id="ShapeBox" style="align-items:flex-start; vertical-align:bottom; text-align:left; display:table-cell;
border-radius: 8px; border:1px solid #006000; padding:6px; padding-right:20px;">
<input id="rbUnShape" type="radio" name="Shape" style="display:none;"/> <!-- HIDDEN do-nothing that when 'checked' un-checks the others :-) -->
<input type="radio" name="Shape" onclick="HandleShapeSelect('circle');"/> Circle <br>
<input type="radio" name="Shape" onclick="HandleShapeSelect('poly');" /> Polygon <br>
<input type="radio" name="Shape" onclick="HandleShapeSelect('rect');" /> Rectangle
</div>
</form>
</div>
</div> <!-- the shape selectors box -->
</div> <!-- id="LeftBottomRow" -->
</div> <!-- "LeftCol_TwoRows" -->
</div> <!-- id="LeftColumn" -->
</div> <!-- id="OneRow_TwoCols" -->
<!-- Panorama image takes up the bottom half of the page -->
<!-- (loaded in LandmarkSites.js:LoadIntro() when we know which site) -->
<div id="divPix" style="position:relative;"> <!-- won't scroll so cvsRose sticks in the corner -->
<canvas id="cvsRose" style="position:absolute; left:5px; top:5px;"></canvas> <!-- bearing compass -->
<img id="Rose" width="50" height="50" src="RoseNG.png" alt="Compass img" style="display:none;">
<!-- Bearings holds Seek Buttons & Bearing display filled by js. ⇐='<' ⇒='>' -->
<span id="Bearings" style="border: #006000 1px solid; border-radius:3px; position:absolute; top:0px; z-index:8;"> <!-- bottom:17px; incl slider height -->
<button id="areaLeft" class="BrgBtns" onclick="HandleBrgBtns(-1)" title="<- Next landmark"> < </button><span
id="Bearing" title="View direction (degrees)"
>Bearing: <span id="BrgOut" style="display:inline;"></span>
</span><button
id="areaRight" class="BrgBtns" onclick="HandleBrgBtns(+1)" title="Next landmark ->"> > </button>
</span> <!-- id="Bearings" -->
<!-- Fader slider
<div style="position:absolute; left:500px; top:5px; padding-right:10px; z-index:8">
<form>
<input id="Q" type="range" min="0" max="100" value="0"
onchange="byId('S').innerHTML=this.value; PopTheToast(Number(this.value)/100)">
<span id="S">-1</span>
</form>
</div> <!-- -->
<div id="divPano"> <!-- will scroll panorama <IMG> and <CANVAS> together -->
<img id="imgPano" height="500px" onload="imgLoaded();"> <!-- width & src are set in LoadSite() -->
<canvas id="cvsPano">Your browser does not support the HTML5 'canvas' tag. This website won't work without it.</canvas> <!-- cvsPano will be sized to imgPano, and placed "over" it -->
</div>
<!-- <p id="Toast" onclick="(function () {flashCard(); byId('idTextOut').scrollIntoView(false);})();" -->
<p id="Toast" onclick="flashCard(); byId('idTextOut').scrollIntoView(false);"
>Use the email button below to send new landmark data to the admin</p>
</div>
<!-- output area for new <AREA> elements, new moved coords, and debug stuff. -->
<!-- class="clsTextOut" is usually invisible,
only displayed when making new 'shapes'
and, now, Moving! -->
<form id="divNewStuff" class="clsTextOut Made" style="width:100%;"
action="mailto:[email protected]?subject=New%20Landmark%20Data!" method="post" enctype="text/plain"> <!-- "multipart/form-data">-->
<div style="position:relative"> <!-- instructions etc -->
<div style="position:absolute; right:15px; top:5px; width:35%; padding:5px;">
<textarea rows="3" readonly
style="width:100%; text-align:center; background-color:#FFeeee; border:solid 1px #FF0000; padding-top:5px;
font-size:100%; font-weight:bold;">
Any new data are for this browser session only.
They must be copied from here to save them.
If you close the page, they're lost.</textarea> <!-- id="makeWarning" class="Made" margin:5px; -->
<br><br>
<input id="mailBtn" type="submit" class="Made"
value="Email new landmarks to the admin" title="You may have to copy/paste the new data to the email"> <!-- Edit the 'title's first, please so I know what they are."> -->
</div>
<textarea id="makeInstructions" rows="11" readonly spellcheck="false">
When making new landmark shapes, click in the panorama image:
Two clicks for "circles" and "rectangles".
For "polys", shift-click or double-click ends the shape.
Control-clicking deletes the last point.
'Shift-click' an landmark to 'pick it up'. Another click 'drops' it.
(Ctrl-Shift-Click to delete a landmark)
Click the button to email the new & moved landmarks to the admin.
Edit the 'title's first, please, so I know what they are.
They can be edited here first, or in your email client.
</textarea>
<textarea id="idTextOut" name="NewAreaData" form="divNewStuff" rows="6" spellcheck="false"
initTo="value=' New Landmark data are shown here \n' +
' (You may have to copy/paste this stuff into your email) \n\n'">
</textarea>
</div>
</form>
<!-- - - - - - - - - - Misc bookkeeping/footer stuff - - - - - - - - -->
<!-- populated in LandmarkSites.js -->
<footer id="idThanks" style="font-size:75%; color:#006000; float:right;"></footer>
<br>
<a id="idSched" href="http://www.anffla.org/members-only" target="_blank" style="font-size:120%;">
Don't forget to schedule some tower time! </a> <!-- color:#006000; -->
<br>
<footer id="idModTime" style="font-size:70%; font-weight:normal; float:left;">Last modified</footer>
<a id="bugz" class="bugz" href="mailto:ANFFLA-at-DIGIMEAS-dot-COM?Subject=LandmarkTrainer"
title="Please send feature requests, questions, or (eew) bug reports to [email protected]"
onmouseover="this.innerHTML='mailto:ANFFLA-at-DIGIMEAS-dot-COM?Subject=LandmarkTrainer';"
onmouseout ="this.innerHTML=' Feature request? Help? Bug report?';">
Bug report? Feature request? Help? </a> <!-- TODO FAQ??? -->
</div> <!-- id="divWork" -->
<audio id="Sounder" loop> <!-- (maybe it can play sounds!) -->
Your browser does not support the audio tag.
</audio> <!-- doesn't matter where this goes. may as well go here. -->
<!-- Apple. How couldst thou?
<script defer>
(function () { preLoadIntro('I voked myself!'); }) ();
</script>
<!-- -->
</body>
</html>