[lantea.git] / index.html

<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this file,
   - You can obtain one at http://mozilla.org/MPL/2.0/.  -->

<!DOCTYPE html>
<html manifest="manifest.appcache">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <!-- try to force a 1:1 scaling and disable pinch-zoom on mobile, see
       https://developer.mozilla.org/en/Mobile/Viewport_meta_tag -->
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Lantea Maps</title>
  <script src="js/map.js" type="application/javascript;version=1.8"></script>
  <script src="js/ui.js" type="application/javascript;version=1.8"></script>
  <script src="js/library.js" type="application/javascript;version=1.8"></script>
  <script src="js/piwik.js" async="" defer=""></script>
  <link rel="stylesheet" href="style/lantea.css">
  <link rel="manifest" href="/pwa.manifest">
  <link rel="shortcut icon" href="style/lanteaIcon16.png" type="image/png">
</head>
<body id="body">
<noscript><p><img src="https://piwik.kairo.at/piwik.php?idsite=2" style="border:0;" alt="" /></p></noscript>
<h1>Lantea Map</h1>

<div id="trackArea" class="menuDrawer secondaryUI hidden">
<h2 onclick="toggleTrackArea();">
<image src="style/track.svg" alt=""> Track
</h2>
<p id="trackData"><span id="trackLength"><span id="trackLengthNum">0</span> km</span>,
<span id="trackDuration"><span id="trackDurationH"><span id="trackDurationHNum">0</span> h</span>
<span id="trackDurationM"><span id="trackDurationMNum">0</span> min</span></span>
</p>
<p>
<input type="button" id="saveTrackButton" value="Save"
       onclick="saveTrack();">
<input type="button" id="dumpTrackButton" value="Dump"
       onclick="saveTrackDump();" class="debugHide">
<input type="button" id="uploadTrackButton" value="Upload" disabled="true"
       onclick="showUploadDialog();">
<input type="button" id="clearTrackButton" value="Clear"
       onclick="clearTrack();">
</p>
<p id="libraryShowLine" class="hidden">
<input type="button" id="libraryShowButton" value="View uploaded tracks"
       onclick="showLibrary();">
</p>
<div id="trackDialogArea" class="hidden">
<div id="uploadDialog">
<p class="subTitle">Upload Track to Lantea Maps Server:</p>
<label for="uploadPublic">Visibility:</label>
<select id="uploadPublic">
<option value="true">Public Domain</option>
<option value="false">Private</option>
</select>
<p class="dialogHelp">Public Domain tracks can be forwarded by the server
operator to any other services, e.g. OpenStreetMap.</p>
<p>
<label for="uploadDesc">Comment:</label>
<input type="text" id="uploadDesc" maxlength="255" size="25"
       value="Lantea Maps">
</p>
<p>
<input type="button" id="uploadDialogUploadButton" value="Upload Track"
       onclick="uploadTrack();">
<input type="button" id="uploadDialogCancelButton" value="Cancel"
       onclick="cancelTrackDialog();">
</p>
</div>
<div id="uploadStatus">
<p class="subTitle">Track Upload to Lantea Maps Server</p>
<p id="uploadInProgress"><img id="actionimg" src="style/loading_action.png">
  Upload in progress&hellip;</p>
<p id="uploadSuccess" style="display:none;">Track upload successful!</p>
<p id="uploadFailed" style="display:none;">Track upload failed.</p>
<p id="uploadError" style="display:none;">Error:<br>
  <span id="uploadErrorMsg"></span></p>
<input type="button" id="uploadStatusCloseButton" value="Close"
       onclick="cancelTrackDialog();" disabled="true">
</div>
</div>
<p class="loginbox">
<button type="button" id="loginbtn" class="hidden">Sign in</button>
<span id="loginerror" class="hidden">!</span>
<span id="logindesc" class="hidden">to enable uploads</span>
<span id="username" class="hidden"></span>
<button type="button" id="logoutbtn" class="hidden">Log out</button>
</p>
<p>
<input type="checkbox" id="trackCheckbox"
       onchange="setTracking(this);">
<label for="trackCheckbox">Enable tracking</label><br/>
</p>
<p>
<input type="checkbox" id="centerCheckbox"
       onchange="setCentering(this);">
<label for="centerCheckbox">Center Map</label><br/>
</p>
</div>

<div id="settingsArea" class="menuDrawer secondaryUI hidden">
<h2 onclick="toggleSettings();">
<image src="style/settings.svg" alt=""> Settings
</h2>
<p>
<label for="mapSelector">Map style:</label>
<select id="mapSelector" onchange="setMapStyle();">
<!-- option value="osm_mapnik">OpenStreetMap (Mapnik)</option -->
</select>
</p>
<p>
<input type="button" id="clearCacheButton" value="Clear Cached Maps"
       onclick="gTileService.clearDB();">
</p>
<div id="uploadSettingsArea">
<p class="subTitle">Track Upload:</p>
<p>
<label for="uploadDevName">Device name:</label>
<input type="text" id="uploadDevName" maxlength="255" placeholder="My Device"
       onchange="setUploadField(this);">
</p>
<p class="dialogHelp">The device name enables you to tell apart tracks you may
upload from multiple devices.</p>
</div>
</div>

<div id="menuArea" class="autoFade overlayArea">
<image src="style/track.svg" class="controlButton" id="trackButton" value="Track"
       onclick="toggleTrackArea();"><br/>
<image src="style/settings.svg" class="controlButton" id="settingsButton" alt="Settings"
       onclick="toggleSettings();"><br/>
</div>

<div id="zoomArea" class="autoFade overlayArea">
<input type="button" id="zoomInButton" value="+"
       onclick="zoomIn();">
<p id="zoomLevel">Z</p>
<input type="button" id="zoomOutButton" value="&minus;"
       onclick="zoomOut();">
</div>

<div id="fullscreenArea" class="autoFade overlayArea">
<!-- other possible characters: &#x25F0; -->
<input type="button" id="fullscreenButton" value="&#x25A3;"
       onclick="toggleFullscreen();">
</div>

<div id="dialogArea" class="overlayArea hidden">
<div id="noGLwarning">
  Unable to initialize WebGL. You need a browser that supports it.
</div>
<div id="firstRunIntro">
<p class="dialogTitle">Welcome to Lantea Maps!</p>
<p>This web app lets you record GPS tracks of your journeys, which you can
   upload to our backend servers and download as GPX files.</p>
<p>You can find track details, upload, etc. in the "track" drawer that you can
   access via the <image src="style/track.svg"> icon at the left top of the
   window.</p>
<p>Right underneath that icon, you find <image src="style/settings.svg">
   settings.</p>
<p>Both track and settings "drawers" can be closed by clicking/tapping on their
   title line.</p>
<p>From the track "drawer", you can also access a library of uploaded tracks,
   their name/comment links to the GPX download of the specific track.</p>
<p class="dialogButtonLine">
  <button id="firstRunDialogCloseButton"
          onclick="closeDialog();">Close</button>
</p>
</div>
<div id="infoDialog">
<p class="dialogTitle">Recent Changes in Lantea Maps</p>
<p>Lantea Maps has been updated with a few significant changes.</p>
<p>Most importantly, the previously broken upload functionality for tracks has
   been fixed and improved to use our own Lantea Maps server instead of
   OpenStreetMaps. For using it, you need to log in with KaiRo.at via a
   "sign in" button now in the track "drawer".</p>
<p>From there, you can also access a library of uploaded tracks, their
   name/comment links to the GPX download of the specific track.</p>
<p>If you set a device name in the settings, you can even distinguish tracks
   uploaded to the same account by different devices you're using.</p>
<p class="dialogButtonLine">
  <button id="firstRunDialogCloseButton"
          onclick="closeDialog();">Close</button>
</p>
</div>
</div>

<div id="libraryArea" class="overlayArea fullScreenOverlay secondaryUI hidden">
<p>The following tracks are saved on the Lantea Maps Server:</p>
<ul id="libTrackList">
</ul>
<p id="libTrackPages" class="hidden"></p>
<p class="closeButtonContainer"><button id="libCloseButton" class="closeButton">X</button></p>
</div>

<p id="action">
  <img id="actionimg" src="style/loading_action.png">
  <span id="actionlabel">Loading</span>&hellip;
</p>
<p id="copyright" class="autoFade overlayArea"></p>

<canvas id="map" width="500" height="500">
  Please use a browser that supports &lt;canvas&gt; elements.
</canvas>
<canvas id="track" width="500" height="500">
</canvas>

</body>
</html>
Commit	Line	Data
a7393a71 RK	1	<!-- This Source Code Form is subject to the terms of the Mozilla Public
	2	- License, v. 2.0. If a copy of the MPL was not distributed with this file,
	3	- You can obtain one at http://mozilla.org/MPL/2.0/. -->
23cd2dcc	4
8383f143 RK	5	<!DOCTYPE html>
	6	<html manifest="manifest.appcache">
	7	<head>
	8	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
628ba778	9	<!-- try to force a 1:1 scaling and disable pinch-zoom on mobile, see
6b1e7340	10	https://developer.mozilla.org/en/Mobile/Viewport_meta_tag -->
628ba778	11	<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
753078ce	12	<title>Lantea Maps</title>
b5e49b95 RK	13	<script src="js/map.js" type="application/javascript;version=1.8"></script>
b5e49b95 RK	14	<script src="js/ui.js" type="application/javascript;version=1.8"></script>
867ee0af	15	<script src="js/library.js" type="application/javascript;version=1.8"></script>
213947ef	16	<script src="js/piwik.js" async="" defer=""></script>
23cd2dcc	17	<link rel="stylesheet" href="style/lantea.css">
18af21fd	18	<link rel="manifest" href="/pwa.manifest">
b395419b	19	<link rel="shortcut icon" href="style/lanteaIcon16.png" type="image/png">
8383f143	20	</head>
c5378747	21	<body id="body">
213947ef	22	<noscript><p><img src="https://piwik.kairo.at/piwik.php?idsite=2" style="border:0;" alt="" /></p></noscript>
b47b4a65 RK	23	<h1>Lantea Map</h1>
b47b4a65 RK	24
6d5072d8	25	<div id="trackArea" class="menuDrawer secondaryUI hidden">
123b3142	26	<h2 onclick="toggleTrackArea();">
db2008ca RK	27	<image src="style/track.svg" alt=""> Track
db2008ca RK	28	</h2>
026c4f46 RK	29	<p id="trackData"><span id="trackLength"><span id="trackLengthNum">0</span> km</span>,
	30	<span id="trackDuration"><span id="trackDurationH"><span id="trackDurationHNum">0</span> h</span>
	31	<span id="trackDurationM"><span id="trackDurationMNum">0</span> min</span></span>
db2008ca RK	32	</p>
db2008ca RK	33	<p>
993fd081 RK	34	<input type="button" id="saveTrackButton" value="Save"
993fd081 RK	35	onclick="saveTrack();">
4b12da3a	36	<input type="button" id="dumpTrackButton" value="Dump"
b91b74a7	37	onclick="saveTrackDump();" class="debugHide">
8389557a	38	<input type="button" id="uploadTrackButton" value="Upload" disabled="true"
43255174	39	onclick="showUploadDialog();">
993fd081	40	<input type="button" id="clearTrackButton" value="Clear"
db2008ca RK	41	onclick="clearTrack();">
db2008ca RK	42	</p>
867ee0af RK	43	<p id="libraryShowLine" class="hidden">
	44	<input type="button" id="libraryShowButton" value="View uploaded tracks"
	45	onclick="showLibrary();">
	46	</p>
6201b112 RK	47	<div id="trackDialogArea" class="hidden">
6201b112 RK	48	<div id="uploadDialog">
e180feb4	49	<p class="subTitle">Upload Track to Lantea Maps Server:</p>
6201b112 RK	50	<label for="uploadPublic">Visibility:</label>
	51	<select id="uploadPublic">
	52	<option value="true">Public Domain</option>
	53	<option value="false">Private</option>
	54	</select>
	55	<p class="dialogHelp">Public Domain tracks can be forwarded by the server
	56	operator to any other services, e.g. OpenStreetMap.</p>
e180feb4	57	<p>
65946832	58	<label for="uploadDesc">Comment:</label>
6201b112 RK	59	<input type="text" id="uploadDesc" maxlength="255" size="25"
6201b112 RK	60	value="Lantea Maps">
e180feb4 RK	61	</p>
e180feb4 RK	62	<p>
6201b112 RK	63	<input type="button" id="uploadDialogUploadButton" value="Upload Track"
	64	onclick="uploadTrack();">
	65	<input type="button" id="uploadDialogCancelButton" value="Cancel"
	66	onclick="cancelTrackDialog();">
e180feb4	67	</p>
6201b112 RK	68	</div>
6201b112 RK	69	<div id="uploadStatus">
e1c3d337	70	<p class="subTitle">Track Upload to Lantea Maps Server</p>
6201b112 RK	71	<p id="uploadInProgress"><img id="actionimg" src="style/loading_action.png">
	72	Upload in progress…</p>
	73	<p id="uploadSuccess" style="display:none;">Track upload successful!</p>
	74	<p id="uploadFailed" style="display:none;">Track upload failed.</p>
	75	<p id="uploadError" style="display:none;">Error:<br>
	76	<span id="uploadErrorMsg"></span></p>
	77	<input type="button" id="uploadStatusCloseButton" value="Close"
	78	onclick="cancelTrackDialog();" disabled="true">
	79	</div>
	80	</div>
8f9306c5 RK	81	<p class="loginbox">
8f9306c5 RK	82	<button type="button" id="loginbtn" class="hidden">Sign in</button>
662078d1	83	<span id="loginerror" class="hidden">!</span>
8f9306c5 RK	84	<span id="logindesc" class="hidden">to enable uploads</span>
	85	<span id="username" class="hidden"></span>
	86	<button type="button" id="logoutbtn" class="hidden">Log out</button>
	87	</p>
db2008ca	88	<p>
3610c22d RK	89	<input type="checkbox" id="trackCheckbox"
	90	onchange="setTracking(this);">
	91	<label for="trackCheckbox">Enable tracking</label><br/>
db2008ca RK	92	</p>
db2008ca RK	93	<p>
3610c22d RK	94	<input type="checkbox" id="centerCheckbox"
	95	onchange="setCentering(this);">
	96	<label for="centerCheckbox">Center Map</label><br/>
db2008ca	97	</p>
123b3142 RK	98	</div>
123b3142 RK	99
6d5072d8	100	<div id="settingsArea" class="menuDrawer secondaryUI hidden">
123b3142	101	<h2 onclick="toggleSettings();">
db2008ca RK	102	<image src="style/settings.svg" alt=""> Settings
	103	</h2>
	104	<p>
43255174	105	<label for="mapSelector">Map style:</label>
3610c22d	106	<select id="mapSelector" onchange="setMapStyle();">
b47b4a65	107	<!-- option value="osm_mapnik">OpenStreetMap (Mapnik)</option -->
8389557a	108	</select>
db2008ca RK	109	</p>
db2008ca RK	110	<p>
3431f496 RK	111	<input type="button" id="clearCacheButton" value="Clear Cached Maps"
3431f496 RK	112	onclick="gTileService.clearDB();">
db2008ca	113	</p>
65946832	114	<div id="uploadSettingsArea">
e180feb4 RK	115	<p class="subTitle">Track Upload:</p>
e180feb4 RK	116	<p>
65946832 RK	117	<label for="uploadDevName">Device name:</label>
65946832 RK	118	<input type="text" id="uploadDevName" maxlength="255" placeholder="My Device"
8389557a	119	onchange="setUploadField(this);">
e180feb4	120	</p>
65946832 RK	121	<p class="dialogHelp">The device name enables you to tell apart tracks you may
65946832 RK	122	upload from multiple devices.</p>
c4d0569c	123	</div>
123b3142 RK	124	</div>
123b3142 RK	125
6d5072d8 RK	126	<div id="menuArea" class="autoFade overlayArea">
6d5072d8 RK	127	<image src="style/track.svg" class="controlButton" id="trackButton" value="Track"
123b3142	128	onclick="toggleTrackArea();"><br/>
6d5072d8	129	<image src="style/settings.svg" class="controlButton" id="settingsButton" alt="Settings"
123b3142	130	onclick="toggleSettings();"><br/>
b47b4a65	131	</div>
8383f143	132
6d5072d8	133	<div id="zoomArea" class="autoFade overlayArea">
336097e2	134	<input type="button" id="zoomInButton" value="+"
ac45368e RK	135	onclick="zoomIn();">
	136	<p id="zoomLevel">Z</p>
	137	<input type="button" id="zoomOutButton" value="−"
336097e2 RK	138	onclick="zoomOut();">
	139	</div>
	140
6d5072d8	141	<div id="fullscreenArea" class="autoFade overlayArea">
c5378747 RK	142	<!-- other possible characters: ◰ -->
	143	<input type="button" id="fullscreenButton" value="▣"
	144	onclick="toggleFullscreen();">
	145	</div>
	146
6d5072d8	147	<div id="dialogArea" class="overlayArea hidden">
ecde0af2 RK	148	<div id="noGLwarning">
	149	Unable to initialize WebGL. You need a browser that supports it.
	150	</div>
e1c3d337 RK	151	<div id="firstRunIntro">
	152	<p class="dialogTitle">Welcome to Lantea Maps!</p>
	153	<p>This web app lets you record GPS tracks of your journeys, which you can
	154	upload to our backend servers and download as GPX files.</p>
	155	<p>You can find track details, upload, etc. in the "track" drawer that you can
	156	access via the <image src="style/track.svg"> icon at the left top of the
	157	window.</p>
	158	<p>Right underneath that icon, you find <image src="style/settings.svg">
	159	settings.</p>
	160	<p>Both track and settings "drawers" can be closed by clicking/tapping on their
	161	title line.</p>
	162	<p>From the track "drawer", you can also access a library of uploaded tracks,
	163	their name/comment links to the GPX download of the specific track.</p>
	164	<p class="dialogButtonLine">
	165	<button id="firstRunDialogCloseButton"
	166	onclick="closeDialog();">Close</button>
	167	</p>
	168	</div>
	169	<div id="infoDialog">
f86d778e	170	<p class="dialogTitle">Recent Changes in Lantea Maps</p>
e1c3d337 RK	171	<p>Lantea Maps has been updated with a few significant changes.</p>
	172	<p>Most importantly, the previously broken upload functionality for tracks has
	173	been fixed and improved to use our own Lantea Maps server instead of
f86d778e	174	OpenStreetMaps. For using it, you need to log in with KaiRo.at via a
e1c3d337 RK	175	"sign in" button now in the track "drawer".</p>
	176	<p>From there, you can also access a library of uploaded tracks, their
	177	name/comment links to the GPX download of the specific track.</p>
	178	<p>If you set a device name in the settings, you can even distinguish tracks
	179	uploaded to the same account by different devices you're using.</p>
	180	<p class="dialogButtonLine">
	181	<button id="firstRunDialogCloseButton"
	182	onclick="closeDialog();">Close</button>
	183	</p>
	184	</div>
43255174 RK	185	</div>
43255174 RK	186
6d5072d8	187	<div id="libraryArea" class="overlayArea fullScreenOverlay secondaryUI hidden">
34402ca5	188	<p>The following tracks are saved on the Lantea Maps Server:</p>
867ee0af RK	189	<ul id="libTrackList">
	190	</ul>
	191	<p id="libTrackPages" class="hidden"></p>
6d5072d8	192	<p class="closeButtonContainer"><button id="libCloseButton" class="closeButton">X</button></p>
867ee0af RK	193	</div>
867ee0af RK	194
68afcd96 RK	195	<p id="action">
	196	<img id="actionimg" src="style/loading_action.png">
	197	<span id="actionlabel">Loading</span>…
	198	</p>
6d5072d8	199	<p id="copyright" class="autoFade overlayArea"></p>
6b1e7340	200
23cd2dcc RK	201	<canvas id="map" width="500" height="500">
	202	Please use a browser that supports <canvas> elements.
	203	</canvas>
4b1d0915 RK	204	<canvas id="track" width="500" height="500">
4b1d0915 RK	205	</canvas>
23cd2dcc	206
23cd2dcc	207	</body>
da6dad24	208	</html>