[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
	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/. -->
	4
	5	<!DOCTYPE html>
	6	<html manifest="manifest.appcache">
	7	<head>
	8	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	9	<!-- try to force a 1:1 scaling and disable pinch-zoom on mobile, see
	10	https://developer.mozilla.org/en/Mobile/Viewport_meta_tag -->
	11	<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
	12	<title>Lantea Maps</title>
	13	<script src="js/map.js" type="application/javascript;version=1.8"></script>
	14	<script src="js/ui.js" type="application/javascript;version=1.8"></script>
	15	<script src="js/library.js" type="application/javascript;version=1.8"></script>
	16	<script src="js/piwik.js" async="" defer=""></script>
	17	<link rel="stylesheet" href="style/lantea.css">
	18	<link rel="manifest" href="/pwa.manifest">
	19	<link rel="shortcut icon" href="style/lanteaIcon16.png" type="image/png">
	20	</head>
	21	<body id="body">
	22	<noscript><p><img src="https://piwik.kairo.at/piwik.php?idsite=2" style="border:0;" alt="" /></p></noscript>
	23	<h1>Lantea Map</h1>
	24
	25	<div id="trackArea" class="menuDrawer secondaryUI hidden">
	26	<h2 onclick="toggleTrackArea();">
	27	<image src="style/track.svg" alt=""> Track
	28	</h2>
	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>
	32	</p>
	33	<p>
	34	<input type="button" id="saveTrackButton" value="Save"
	35	onclick="saveTrack();">
	36	<input type="button" id="dumpTrackButton" value="Dump"
	37	onclick="saveTrackDump();" class="debugHide">
	38	<input type="button" id="uploadTrackButton" value="Upload" disabled="true"
	39	onclick="showUploadDialog();">
	40	<input type="button" id="clearTrackButton" value="Clear"
	41	onclick="clearTrack();">
	42	</p>
	43	<p id="libraryShowLine" class="hidden">
	44	<input type="button" id="libraryShowButton" value="View uploaded tracks"
	45	onclick="showLibrary();">
	46	</p>
	47	<div id="trackDialogArea" class="hidden">
	48	<div id="uploadDialog">
	49	<p class="subTitle">Upload Track to Lantea Maps Server:</p>
	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>
	57	<p>
	58	<label for="uploadDesc">Comment:</label>
	59	<input type="text" id="uploadDesc" maxlength="255" size="25"
	60	value="Lantea Maps">
	61	</p>
	62	<p>
	63	<input type="button" id="uploadDialogUploadButton" value="Upload Track"
	64	onclick="uploadTrack();">
	65	<input type="button" id="uploadDialogCancelButton" value="Cancel"
	66	onclick="cancelTrackDialog();">
	67	</p>
	68	</div>
	69	<div id="uploadStatus">
	70	<p class="subTitle">Track Upload to Lantea Maps Server</p>
	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>
	81	<p class="loginbox">
	82	<button type="button" id="loginbtn" class="hidden">Sign in</button>
	83	<span id="loginerror" class="hidden">!</span>
	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>
	88	<p>
	89	<input type="checkbox" id="trackCheckbox"
	90	onchange="setTracking(this);">
	91	<label for="trackCheckbox">Enable tracking</label><br/>
	92	</p>
	93	<p>
	94	<input type="checkbox" id="centerCheckbox"
	95	onchange="setCentering(this);">
	96	<label for="centerCheckbox">Center Map</label><br/>
	97	</p>
	98	</div>
	99
	100	<div id="settingsArea" class="menuDrawer secondaryUI hidden">
	101	<h2 onclick="toggleSettings();">
	102	<image src="style/settings.svg" alt=""> Settings
	103	</h2>
	104	<p>
	105	<label for="mapSelector">Map style:</label>
	106	<select id="mapSelector" onchange="setMapStyle();">
	107	<!-- option value="osm_mapnik">OpenStreetMap (Mapnik)</option -->
	108	</select>
	109	</p>
	110	<p>
	111	<input type="button" id="clearCacheButton" value="Clear Cached Maps"
	112	onclick="gTileService.clearDB();">
	113	</p>
	114	<div id="uploadSettingsArea">
	115	<p class="subTitle">Track Upload:</p>
	116	<p>
	117	<label for="uploadDevName">Device name:</label>
	118	<input type="text" id="uploadDevName" maxlength="255" placeholder="My Device"
	119	onchange="setUploadField(this);">
	120	</p>
	121	<p class="dialogHelp">The device name enables you to tell apart tracks you may
	122	upload from multiple devices.</p>
	123	</div>
	124	</div>
	125
	126	<div id="menuArea" class="autoFade overlayArea">
	127	<image src="style/track.svg" class="controlButton" id="trackButton" value="Track"
	128	onclick="toggleTrackArea();"><br/>
	129	<image src="style/settings.svg" class="controlButton" id="settingsButton" alt="Settings"
	130	onclick="toggleSettings();"><br/>
	131	</div>
	132
	133	<div id="zoomArea" class="autoFade overlayArea">
	134	<input type="button" id="zoomInButton" value="+"
	135	onclick="zoomIn();">
	136	<p id="zoomLevel">Z</p>
	137	<input type="button" id="zoomOutButton" value="−"
	138	onclick="zoomOut();">
	139	</div>
	140
	141	<div id="fullscreenArea" class="autoFade overlayArea">
	142	<!-- other possible characters: ◰ -->
	143	<input type="button" id="fullscreenButton" value="▣"
	144	onclick="toggleFullscreen();">
	145	</div>
	146
	147	<div id="dialogArea" class="overlayArea hidden">
	148	<div id="noGLwarning">
	149	Unable to initialize WebGL. You need a browser that supports it.
	150	</div>
	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">
	170	<p class="dialogTitle">Recent Changes in Lantea Maps</p>
	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
	174	OpenStreetMaps. For using it, you need to log in with KaiRo.at via a
	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>
	185	</div>
	186
	187	<div id="libraryArea" class="overlayArea fullScreenOverlay secondaryUI hidden">
	188	<p>The following tracks are saved on the Lantea Maps Server:</p>
	189	<ul id="libTrackList">
	190	</ul>
	191	<p id="libTrackPages" class="hidden"></p>
	192	<p class="closeButtonContainer"><button id="libCloseButton" class="closeButton">X</button></p>
	193	</div>
	194
	195	<p id="action">
	196	<img id="actionimg" src="style/loading_action.png">
	197	<span id="actionlabel">Loading</span>…
	198	</p>
	199	<p id="copyright" class="autoFade overlayArea"></p>
	200
	201	<canvas id="map" width="500" height="500">
	202	Please use a browser that supports <canvas> elements.
	203	</canvas>
	204	<canvas id="track" width="500" height="500">
	205	</canvas>
	206
	207	</body>
	208	</html>