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