tizen
/
mapo


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215
							<!--

Copyright (c) 2013 Mapo developpers and contributors <mapo.tizen@gmail.com>

This file is part of Mapo.

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.

-->

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" content="An application based on geolocation" />

<title>Mapo</title>

<link rel="stylesheet" href="./css/jquery.mobile-1.2.0.css" />
<link rel="stylesheet" href="./css/Mapo.css" />
<link rel="stylesheet" href="./css/style.css" />

<script type="text/javascript"
	src="http://openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript"
	src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
<script type="text/javascript" src="./js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="./js/jquery.mobile-1.2.0.js"></script>
<script type="text/javascript" src="./js/main.js"></script>
<script type="text/javascript" src="./lib.js"></script>
</head>

<body>

	<!-- Page 1 : My position -->
	<div data-role="page" id="position" class="ui-page">
		<div data-role="header" data-id="myHeader" data-position="fixed">
			<!-- <input type="button" onclick="getLocation()" value="Position"/> -->
			<a href="javascript:void(0);" data-role="button" onclick="getLocation()"
				id="home" class="ui-btn-left" data-mini="true" data-icon="home">Position</a>
			<h1 class="ui-title">MAPO</h1>
			<a data-role="button" id="exit" class="ui-btn-right-mini"
				data-icon="delete" onclick="quit()">Exit</a>
			<div data-role="navbar">
				<ul>
					<li><a href="#position" class="ui-btn-active ui-state-persist">Position</a></li>
					<li><a href="#map">Map</a></li>
					<li><a href="#settings">Settings</a></li>
				</ul>
			</div>
			<!-- /navbar -->
		</div>
		<!-- /header -->
		
		<div data-role="content">
			<form>
				<table>
					<tr>
						<td><label for=lat>Latitude N+/S-:</label></td>
						<td><input type="text" id="lat" value="26.357865"
								onChange="changeLat(lat.value);"/></td>
					</tr>
					<tr>
						<td><label for=lon>Longitude W+/E-:</label></td>
						<td><input type="text" id="lon" value="127.783782"
								onChange="changeLon();"/></td>
					</tr>
				</table>
				<label for="dms">DMS (degree, minutes, seconds):</label>
				<input type="text" id="dms" value="N 26° 21' 28&quot;  E 127° 47' 1&quot;"
					onChange="changeDMS();"/>
				<table>
					<tr>
						<td><label for="switchRecord">Record your course:</label></td>
						<td><select name="switchRecord" id="switchRecord" 
								data-role="slider" onchange="record()">
								<option value="stop">Stop</option>
								<option value="start">Start</option>
							</select></td>
					</tr>
				</table>
				<p id="locationInfo"></p>
			</form>			
			<div data-role="collapsible" data-collapsed="true">
				<h3>Web Links</h3>
				<div data-role="controlgroup">
					<button onclick="goToURL('OSM')">OpenStreetMap</button>
					<button onclick="goToURL('GM')">Google Maps</button>
					<button onclick="goToURL('NOKIA')">Nokia Here</button>
				</div>
			</div>
		</div>
		<!-- /content -->
		
		<div data-role="footer" data-id="myFooter" data-position="fixed">
			Copyleft: GPL-3.0+ : http://gitorious.org/mapo</div>
		<!-- /footer -->
	</div>
	<!-- /page #position-->
	
	
	<!-- Page 2 : Search a place -->
	<div data-role="page" id="map" class="ui-page">
		<div data-role="header" data-id="myHeader" data-position="fixed">
			<a href="javascript:void(0);" data-role="button" onclick="getLocation()"
				id="home" class="ui-btn-left" data-icon="home">Position</a>
			<h1 class="ui-title">MAPO</h1>
			<a data-role="button" id="exit" class="ui-btn-right"
				data-icon="delete" onclick="quit()">Exit</a>
			<div data-role="navbar">
				<ul>
					<li><a href="#position">Position</a></li>
					<li><a href="#map" class="ui-btn-active ui-state-persist">Map</a></li>
					<li><a href="#settings">Settings</a></li>
				</ul>
			</div>
			<!-- /navbar -->
		</div>
		<!-- /header -->
		
		<div data-role="content">
			<div id="myMap"></div>
		</div>
		<!-- /content -->
		
		<div data-role="footer" data-id="myFooter" data-position="fixed">
			Copyleft: GPL-3.0+ : http://gitorious.org/mapo</div>
		<!-- /footer -->
	</div>
	<!-- /page #place-->
	
	
	<!-- Page 3 : Settings -->
	<div data-role="page" id="settings" class="ui-page">
		<div data-role="header" data-id="myHeader" data-position="fixed">
			<a href="javascript:void(0);" data-role="button" onclick="getLocation()"
				id="home" class="ui-btn-left" data-icon="home">Position</a>
			<h1 class="ui-title">MAPO</h1>
			<a data-role="button" id="exit" class="ui-btn-right"
				data-icon="delete" onclick="quit()">Exit</a>
			<div data-role="navbar">
				<ul>
					<li><a href="#position">Position</a></li>
					<li><a href="#map">Map</a></li>
					<li><a href="#settings" class="ui-btn-active ui-state-persist">Settings</a></li>
				</ul>
			</div>
			<!-- /navbar -->
		</div>
		<!-- /header -->

		<div data-role="content">
			<table>
				<tr>
					<td><label for="switchOnline">Connection:</label></td>
					<td>
						<select name="switchOnline" id="switchOnline"
							data-role="slider" onchange="switchOnline()">
							<option value="offline">Offline</option>
							<option value="online">Online</option>
						</select>
					</td>
				<tr>
				<tr>
					<td><label for="switchEnergy">Energy saving:</label></td>
					<td>
						<select name="switchEnergy" id="switchEnergy"
							data-role="slider">
							<option value="off">Off</option>
							<option value="on">On</option>
						</select>
					</td>
				</tr>
			</table>
			<label for="selectorTimeout">Recording timeout (seconds):</label>
			<input type="range" name="selectorTimeout" id="selectorTimeout"
				value="10" min="1" max="100"/>
			<div data-role="collapsible" data-collapsed="true">
				<h3>Share</h3>
				<div data-role="controlgroup">
					<button onclick="sendEmail()">Email</button>
					<button onclick="call()">Call</button>
					<button onclick="createContact()">Contact</button>
					<button onclick="createCalendarEvent()">Calendar</button>
					<button onclick="sendMessage()">Message</button>
					<!-- <button onclick="sendBluetooth()">Bluetooth</button> -->
				</div>
			</div>
		</div>
		<!-- /content -->
		
		<div data-role="footer" data-id="myFooter" data-position="fixed">
			Copyleft: GPL-3.0+ : http://gitorious.org/mapo
		</div>
		<!-- /footer -->
	</div>
	<!-- /page #options-->

</body>
</html>