[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
	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="shortcut icon" href="style/lanteaIcon16.png" type="image/png">
	19	</head>
	20	<body id="body">
	21	<noscript><p><img src="https://piwik.kairo.at/piwik.php?idsite=2" style="border:0;" alt="" /></p></noscript>
	22	<h1>Lantea Map</h1>
	23
	24	<div id="trackArea" class="menuDrawer secondaryUI hidden">
	25	<h2 onclick="toggleTrackArea();">
	26	<image src="style/track.svg" alt=""> Track
	27	</h2>
	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>
	31	</p>
	32	<p>
	33	<input type="button" id="saveTrackButton" value="Save"
	34	onclick="saveTrack();">
	35	<input type="button" id="dumpTrackButton" value="Dump"
	36	onclick="saveTrackDump();" class="debugHide">
	37	<input type="button" id="uploadTrackButton" value="Upload" disabled="true"
	38	onclick="showUploadDialog();">
	39	<input type="button" id="clearTrackButton" value="Clear"
	40	onclick="clearTrack();">
	41	</p>
	42	<p id="libraryShowLine" class="hidden">
	43	<input type="button" id="libraryShowButton" value="View uploaded tracks"
	44	onclick="showLibrary();">
	45	</p>
	46	<div id="trackDialogArea" class="hidden">
	47	<div id="uploadDialog">
	48	<p class="subTitle">Upload Track to Lantea Maps Server:</p>
	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>
	56	<p>
	57	<label for="uploadDesc">Comment:</label>
	58	<input type="text" id="uploadDesc" maxlength="255" size="25"
	59	value="Lantea Maps">
	60	</p>
	61	<p>
	62	<input type="button" id="uploadDialogUploadButton" value="Upload Track"
	63	onclick="uploadTrack();">
	64	<input type="button" id="uploadDialogCancelButton" value="Cancel"
	65	onclick="cancelTrackDialog();">
	66	</p>
	67	</div>
	68	<div id="uploadStatus">
	69	<p class="subTitle">Track Upload to Lantea Maps Server</p>
	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>
	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>
	86	<p>
	87	<input type="checkbox" id="trackCheckbox"
	88	onchange="setTracking(this);">
	89	<label for="trackCheckbox">Enable tracking</label><br/>
	90	</p>
	91	<p>
	92	<input type="checkbox" id="centerCheckbox"
	93	onchange="setCentering(this);">
	94	<label for="centerCheckbox">Center Map</label><br/>
	95	</p>
	96	</div>
	97
	98	<div id="settingsArea" class="menuDrawer secondaryUI hidden">
	99	<h2 onclick="toggleSettings();">
	100	<image src="style/settings.svg" alt=""> Settings
	101	</h2>
	102	<p>
	103	<label for="mapSelector">Map style:</label>
	104	<select id="mapSelector" onchange="setMapStyle();">
	105	<!-- option value="osm_mapnik">OpenStreetMap (Mapnik)</option -->
	106	</select>
	107	</p>
	108	<p>
	109	<input type="button" id="clearCacheButton" value="Clear Cached Maps"
	110	onclick="gTileService.clearDB();">
	111	</p>
	112	<div id="uploadSettingsArea">
	113	<p class="subTitle">Track Upload:</p>
	114	<p>
	115	<label for="uploadDevName">Device name:</label>
	116	<input type="text" id="uploadDevName" maxlength="255" placeholder="My Device"
	117	onchange="setUploadField(this);">
	118	</p>
	119	<p class="dialogHelp">The device name enables you to tell apart tracks you may
	120	upload from multiple devices.</p>
	121	</div>
	122	</div>
	123
	124	<div id="menuArea" class="autoFade overlayArea">
	125	<image src="style/track.svg" class="controlButton" id="trackButton" value="Track"
	126	onclick="toggleTrackArea();"><br/>
	127	<image src="style/settings.svg" class="controlButton" id="settingsButton" alt="Settings"
	128	onclick="toggleSettings();"><br/>
	129	</div>
	130
	131	<div id="zoomArea" class="autoFade overlayArea">
	132	<input type="button" id="zoomInButton" value="+"
	133	onclick="zoomIn();">
	134	<p id="zoomLevel">Z</p>
	135	<input type="button" id="zoomOutButton" value="−"
	136	onclick="zoomOut();">
	137	</div>
	138
	139	<div id="fullscreenArea" class="autoFade overlayArea">
	140	<!-- other possible characters: ◰ -->
	141	<input type="button" id="fullscreenButton" value="▣"
	142	onclick="toggleFullscreen();">
	143	</div>
	144
	145	<div id="dialogArea" class="overlayArea hidden">
	146	<div id="noGLwarning">
	147	Unable to initialize WebGL. You need a browser that supports it.
	148	</div>
	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>
	183	</div>
	184
	185	<div id="libraryArea" class="overlayArea fullScreenOverlay secondaryUI hidden">
	186	<p>The following tracks are saved on the Lantea Maps Server:</p>
	187	<ul id="libTrackList">
	188	</ul>
	189	<p id="libTrackPages" class="hidden"></p>
	190	<p class="closeButtonContainer"><button id="libCloseButton" class="closeButton">X</button></p>
	191	</div>
	192
	193	<p id="action">
	194	<img id="actionimg" src="style/loading_action.png">
	195	<span id="actionlabel">Loading</span>…
	196	</p>
	197	<p id="copyright" class="autoFade overlayArea"></p>
	198
	199	<canvas id="map" width="500" height="500">
	200	Please use a browser that supports <canvas> elements.
	201	</canvas>
	202	<canvas id="track" width="500" height="500">
	203	</canvas>
	204
	205	</body>
	206	</html>