Kohei-Toyoda/altitude_graph.html

## altitude_graph.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset=utf-8>
<style>
		body {
			background: #000000;
			color: #fff;
		}

		#resetButton{
			background: rgba(145, 0, 0, 0.774);
			color: #fff;

		}
	</style>
<title>Altitude Graph</title>
</head>
<body>
<div>
<div id="altitudeGraphDiv"></div>
</div>
<div class="altitudeValue">
<span id='currentAltitudeValue'></span> ±<span id='currentAltitudeErrorValue'></span> [m]
</div>
<span id="resetButton">RESET</div>
<div id="show_result"></div>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script>

		let interval = 10000
		let currentDistance = -123456.7
		let previousLatLon = [-1234.5, -6789.01]
		let measureCount = 0
		const distanceStep = 0.03;

		const altitudeLog = {
			x: [],
			y: [],
			type: 'scatter',
			mode: 'lines',
			line: { width: 3, color: '#ccffff', simplify: true }
		}

		const altitudeErrorHighLog = {
			x: [],
			y: [],
			type: 'scatter',
			opacity: 0.8,
			mode: 'lines',
			line: { width: 1.5, dash: "dot", color: '#5555ff', simplify: true }
		}

		const altitudeErrorLowLog = {
			x: [],
			y: [],
			type: 'scatter',
			mode: 'lines',
			opacity: 0.8,
			line: { width: 1.5, dash: "dot", color: '#5555ff', simplify: true }
		}

		const graphSeries = [altitudeLog, altitudeErrorHighLog, altitudeErrorLowLog];

		const geoOptions = {
			maximumAge: 0,
			timeout: 2000,
			enableHighAccuracy: true
		}

		const graphLayout = {
			font: {
				size: 20,
				color: '#ffffff'
			},
			xaxis: {
				showgrid: true,
				zeroline: true,
				showline: true,
				mirror: 'ticks',
				gridcolor: '#443322',
				gridwidth: 1,
				zerolinecolor: '#443322',
				zerolinewidth: 2,
				linecolor: '#666644',
				linewidth: 3
			},
			yaxis: {
				showgrid: true,
				zeroline: true,
				showline: true,
				mirror: 'ticks',
				gridcolor: '#443322',
				gridwidth: 1,
				zerolinecolor: '#443322',
				zerolinewidth: 2,
				linecolor: '#666644',
				linewidth: 3
			},
			plot_bgcolor: "#0000",
			paper_bgcolor: "#fff1",
			showlegend: false
		}

		function initalize() {
			Plotly.newPlot('altitudeGraphDiv', graphSeries, graphLayout, { showSendToCloud: false })
			navigator.geolocation.getCurrentPosition(() => { }, () => { })
			pollingProcess()
			document.getElementById('resetButton').onclick = resetAll
		}

		function resetAll()
		{
			measureCount = 0
			altitudeLog.x = []
			altitudeLog.y = []
			altitudeErrorLowLog.x = []
			altitudeErrorLowLog.y = []
			altitudeErrorHighLog.x = []
			altitudeErrorHighLog.y = []
		}

		function pollingProcess() {
			updatePosition()
			setTimeout(pollingProcess, interval)
		}

		function updatePosition() {
			navigator.geolocation.getCurrentPosition(successCallback, errorCallback, geoOptions)
		}

		function successCallback(position) {

			const dateTime = measureCount
			measureCount++

			altitudeLog.x.push(dateTime)
			altitudeLog.y.push(position.coords.altitude)
			altitudeErrorLowLog.x.push(dateTime)
			altitudeErrorLowLog.y.push(position.coords.altitude - position.coords.altitudeAccuracy * 0.5)
			altitudeErrorHighLog.x.push(dateTime)
			altitudeErrorHighLog.y.push(position.coords.altitude + position.coords.altitudeAccuracy * 0.5)
			document.getElementById('currentAltitudeValue').textContent = Math.round(position.coords.altitude * 100) / 100
			document.getElementById('currentAltitudeErrorValue').textContent = Math.round(position.coords.altitudeAccuracy) * 0.5

			Plotly.redraw('altitudeGraphDiv');
			/*

									var gl_text = "緯度：" + position.coords.latitude + "<br>";
												gl_text += "経度：" + position.coords.longitude + "<br>";
															gl_text += "高度：" + position.coords.altitude + "<br>";
																		gl_text += "緯度・経度の誤差：" + position.coords.accuracy + "<br>";
																					gl_text += "高度の誤差：" + position.coords.altitudeAccuracy + "<br>";
																								gl_text += "方角：" + position.coords.heading + "<br>";
																											gl_text += "速度：" + position.coords.speed + "<br>";
																														document.getElementById("show_result").innerHTML = gl_text;

																																	*/

		}

		function errorCallback(error) {
			//
		}

		// Hubenyの公式
		function getDistanceLatLon(lat1, lng1, lat2, lng2) {
			a = 6378137.000;
			a2 = Math.pow(a, 2);
			e = Math.sqrt((a2 - Math.pow(6356752.314, 2)) / a2);

			// 地点１の緯度と経度（ラジアン）
			rlat1 = lat1 * Math.PI / 180;
			rlon1 = lng1 * Math.PI / 180;

			// 地点2の緯度と経度（ラジアン）
			rlat2 = lat2 * Math.PI / 180;
			rlon2 = lng2 * Math.PI / 180;

			// 緯度の差
			lat_diff = rlat1 - rlat2;

			// 経度の差
			lon_diff = rlon1 - rlon2;

			// 緯度の平均値
			lat_ave = (rlat1 + rlat2) / 2;

			// 第一離心率
			w = Math.sqrt(1 - Math.pow(e, 2) * Math.pow(Math.sin(lat_ave), 2));

			meridian = a * (1 - Math.pow(e, 2)) / Math.pow(w, 3);

			// 子午線曲率半径
			n = a / w;
			distance = Math.sqrt(Math.pow(lat_diff * meridian, 2) + Math.pow(lon_diff * n * Math.cos(lat_ave), 2));
			return distance / 1000; // km;
		}

		initalize()
	</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset=utf-8>
	<style>
	body {
	background: #000000;
	color: #fff;
	}

	#resetButton{
	background: rgba(145, 0, 0, 0.774);
	color: #fff;

	}
	</style>
	<title>Altitude Graph</title>
	</head>
	<body>
	<div>
	<div id="altitudeGraphDiv"></div>
	</div>
	<div class="altitudeValue">
	<span id='currentAltitudeValue'></span> ±<span id='currentAltitudeErrorValue'></span> [m]
	</div>
	<span id="resetButton">RESET</div>
	<div id="show_result"></div>
	<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
	<script>

	let interval = 10000
	let currentDistance = -123456.7
	let previousLatLon = [-1234.5, -6789.01]
	let measureCount = 0
	const distanceStep = 0.03;

	const altitudeLog = {
	x: [],
	y: [],
	type: 'scatter',
	mode: 'lines',
	line: { width: 3, color: '#ccffff', simplify: true }
	}

	const altitudeErrorHighLog = {
	x: [],
	y: [],
	type: 'scatter',
	opacity: 0.8,
	mode: 'lines',
	line: { width: 1.5, dash: "dot", color: '#5555ff', simplify: true }
	}

	const altitudeErrorLowLog = {
	x: [],
	y: [],
	type: 'scatter',
	mode: 'lines',
	opacity: 0.8,
	line: { width: 1.5, dash: "dot", color: '#5555ff', simplify: true }
	}

	const graphSeries = [altitudeLog, altitudeErrorHighLog, altitudeErrorLowLog];

	const geoOptions = {
	maximumAge: 0,
	timeout: 2000,
	enableHighAccuracy: true
	}

	const graphLayout = {
	font: {
	size: 20,
	color: '#ffffff'
	},
	xaxis: {
	showgrid: true,
	zeroline: true,
	showline: true,
	mirror: 'ticks',
	gridcolor: '#443322',
	gridwidth: 1,
	zerolinecolor: '#443322',
	zerolinewidth: 2,
	linecolor: '#666644',
	linewidth: 3
	},
	yaxis: {
	showgrid: true,
	zeroline: true,
	showline: true,
	mirror: 'ticks',
	gridcolor: '#443322',
	gridwidth: 1,
	zerolinecolor: '#443322',
	zerolinewidth: 2,
	linecolor: '#666644',
	linewidth: 3
	},
	plot_bgcolor: "#0000",
	paper_bgcolor: "#fff1",
	showlegend: false
	}

	function initalize() {
	Plotly.newPlot('altitudeGraphDiv', graphSeries, graphLayout, { showSendToCloud: false })
	navigator.geolocation.getCurrentPosition(() => { }, () => { })
	pollingProcess()
	document.getElementById('resetButton').onclick = resetAll
	}

	function resetAll()
	{
	measureCount = 0
	altitudeLog.x = []
	altitudeLog.y = []
	altitudeErrorLowLog.x = []
	altitudeErrorLowLog.y = []
	altitudeErrorHighLog.x = []
	altitudeErrorHighLog.y = []
	}

	function pollingProcess() {
	updatePosition()
	setTimeout(pollingProcess, interval)
	}

	function updatePosition() {
	navigator.geolocation.getCurrentPosition(successCallback, errorCallback, geoOptions)
	}

	function successCallback(position) {

	const dateTime = measureCount
	measureCount++

	altitudeLog.x.push(dateTime)
	altitudeLog.y.push(position.coords.altitude)
	altitudeErrorLowLog.x.push(dateTime)
	altitudeErrorLowLog.y.push(position.coords.altitude - position.coords.altitudeAccuracy * 0.5)
	altitudeErrorHighLog.x.push(dateTime)
	altitudeErrorHighLog.y.push(position.coords.altitude + position.coords.altitudeAccuracy * 0.5)
	document.getElementById('currentAltitudeValue').textContent = Math.round(position.coords.altitude * 100) / 100
	document.getElementById('currentAltitudeErrorValue').textContent = Math.round(position.coords.altitudeAccuracy) * 0.5

	Plotly.redraw('altitudeGraphDiv');
	/*

	var gl_text = "緯度：" + position.coords.latitude + "<br>";
	gl_text += "経度：" + position.coords.longitude + "<br>";
	gl_text += "高度：" + position.coords.altitude + "<br>";
	gl_text += "緯度・経度の誤差：" + position.coords.accuracy + "<br>";
	gl_text += "高度の誤差：" + position.coords.altitudeAccuracy + "<br>";
	gl_text += "方角：" + position.coords.heading + "<br>";
	gl_text += "速度：" + position.coords.speed + "<br>";
	document.getElementById("show_result").innerHTML = gl_text;

	*/

	}

	function errorCallback(error) {
	//
	}

	// Hubenyの公式
	function getDistanceLatLon(lat1, lng1, lat2, lng2) {
	a = 6378137.000;
	a2 = Math.pow(a, 2);
	e = Math.sqrt((a2 - Math.pow(6356752.314, 2)) / a2);

	// 地点１の緯度と経度（ラジアン）
	rlat1 = lat1 * Math.PI / 180;
	rlon1 = lng1 * Math.PI / 180;

	// 地点2の緯度と経度（ラジアン）
	rlat2 = lat2 * Math.PI / 180;
	rlon2 = lng2 * Math.PI / 180;

	// 緯度の差
	lat_diff = rlat1 - rlat2;

	// 経度の差
	lon_diff = rlon1 - rlon2;

	// 緯度の平均値
	lat_ave = (rlat1 + rlat2) / 2;

	// 第一離心率
	w = Math.sqrt(1 - Math.pow(e, 2) * Math.pow(Math.sin(lat_ave), 2));

	meridian = a * (1 - Math.pow(e, 2)) / Math.pow(w, 3);

	// 子午線曲率半径
	n = a / w;
	distance = Math.sqrt(Math.pow(lat_diff * meridian, 2) + Math.pow(lon_diff * n * Math.cos(lat_ave), 2));
	return distance / 1000; // km;
	}

	initalize()
	</script>
	</body>
	</html>