Commit 2a2b2872 authored by Michael Ochmann's avatar Michael Ochmann
Browse files

added main functionality

parent 5cd67e3b
......@@ -17,53 +17,9 @@
<a href=#>Info</a>
</header>
<main class=view>
<canvas id=heightmap style="width: 100%; height: 99%; box-sizing: border-box;">
<ul class=UITableView>
<li><a href=#><b>Latitude:</b> <span id=lat></span></a></li>
<li><a href=#><b>Longitude:</b> <span id=lon></span></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#><b>Altitude:</b> <span id=alt></span></a></li>
</ul>
</canvas>
</main>
<footer></footer>
......
import GeoPoint from "./GeoPoint.js";
import $ from "./smallQ.js";
import GeoPoint from "./GeoPoint.js";
import $ from "./smallQ.js";
import HeightMap from "./HeightMap.js";
import Std from "./Std.js";
class App {
constructor() {
......@@ -9,15 +11,13 @@ class App {
$("main").css("height", window.innerHeight - 93);
this.heightmap = new HeightMap();
setInterval(() => {
navigator.geolocation.getCurrentPosition(position => {
let p = new GeoPoint(position.coords.latitude, position.coords.longitude, position.coords.altitude);
$("#lon").html(p.longitude);
$("#lat").html(p.latitude);
$("#alt").html(p.altitude);
console.log(p);
this.heightmap.addPoint(new GeoPoint(position.latitude, position.longitude, position.altitude));
});
}, 1000)
}, 1000);
}
}
......
import $ from "./smallQ.js";
import Std from "./Std.js";
class HeightMap {
constructor() {
this.points = [];
this.min = 0;
this.max = 0;
this.canvas = $("#heightmap").get();
this.drag = false;
this.lastX = 0;
this.translated = 0;
this.canvas.width = this.canvas.parentNode.offsetWidth;
this.canvas.height = this.canvas.parentNode.offsetHeight;
let ctx = this.canvas.getContext("2d");
this.canvas.addEventListener("touchstart", event => {
this.drag = true;
this.lastX = event.changedTouches[0].clientX;
});
this.canvas.addEventListener("touchmove", event => {
if (!this.drag)
return;
this.clear();
let ctx = this.canvas.getContext("2d");
let delta = event.changedTouches[0].clientX - this.lastX;
this.translated += delta;
this.lastX = event.changedTouches[0].clientX;
ctx.translate(delta, 0);
this.render();
});
this.canvas.addEventListener("touchend", event => {
this.translated = false;
});
this.render();
}
addPoint(geoPoint) {
if (geoPoint.constructor.name !== "GeoPoint")
throw new TypeError("an object of type 'GeoPoint' must be passed.");
if (this.points.length > 0 && this.points[0].distance(geoPoint) < 50)
return;
let min = this.min;
let max = this.max;
this.min = geoPoint.altitude < this.min ? geoPoint.altitude : this.min;
this.max = geoPoint.altitude > this.max ? geoPoint.altitude : this.max;
this.points.push(geoPoint);
this.render();
/* if (min !== this.min || max !== this.max)
this.render();
else
this.render();*/
}
render() {
let ctx = this.canvas.getContext("2d");
let height = this.canvas.height;
this.clear();
ctx.beginPath();
ctx.moveTo(0, height);
let x = 0;
for (let point of this.points) {
let ordinateVal = Std.Map(point.altitude, this.min, this.max, 0, height * 0.95);
ctx.lineTo(x, height - ordinateVal);
x+=20;
}
ctx.lineTo(x - 20, height);
ctx.lineTo(0, height);
ctx.closePath();
ctx.stroke();
ctx.fillStyle = "#9F00B2";
ctx.fill();
}
/* renderSingle() {
if (this.points.length < 2) {
this.render();
return;
}
let ctx = this.canvas.getContext("2d");
let height = this.canvas.height;
let lastPoint = Std.Map(this.points[this.points.length - 2].altitude, this.min, this.max, 0, height * 0.95);
let currentPoint = Std.Map(this.points[this.points.length - 1].altitude, this.min, this.max, 0, height * 0.95);
ctx.beginPath();
ctx.moveTo((this.points.length - 2) * 20, height - lastPoint);
ctx.lineTo((this.points.length - 1) * 20, height - currentPoint);
ctx.lineTo((this.points.length - 1) * 20, 0);
ctx.lineTo(0, height);
ctx.closePath();
ctx.stroke();
ctx.fillStyle = "red";
}*/
clear() {
let ctx = this.canvas.getContext("2d");
let width = this.canvas.width;
let height = this.canvas.height;
ctx.fillStyle = HeightMap.BACKGROUND;
ctx.clearRect(-this.translated, 0, this.points.length * 20 + width, height);
ctx.fillRect(-this.translated, 0, this.points.length * 20 + width, height);
}
}
HeightMap.BACKGROUND = "#ccc";
export default HeightMap;
\ No newline at end of file
class Std {
/**
* integer random method
*
* returns an integer random value in the range between `min` and `max`, by
* The default range is between `0` and `100`
*
* @param min
* @param max
* @returns {number}
*/
static Random(min = 0, max = 100) {
return Math.floor(Math.random() * max) + min;
}
/**
* static mapping method.
*
* maps a given variable (n) in the range from `start1` to `stop1` into the new
* range from `start2` to `stop2`
*
* @param n
* @param start1
* @param stop1
* @param start2
* @param stop2
* @returns {number}
*/
static Map(n, start1, stop1, start2, stop2) {
return (((n - start1) / (stop1 - start1)) * (stop2 - start2)) + start2;
}
}
export default Std;
\ No newline at end of file
......@@ -3,6 +3,10 @@ class smallQ {
this.elements = document.querySelectorAll(selector);
}
get(id = 0) {
return this.elements[id];
}
html(content) {
if (!content)
return this.elements[0].innerHTML;
......@@ -18,6 +22,8 @@ class smallQ {
return this.elements[0].style[key];
for (let element of this.elements)
element.style[key] = value;
return this;
}
static $(selector) {
......
$header-background: #fff;
$header-color : #1c1c1c;
$header-background: #8AFF19;
$header-color : #333;
$header-border : #b2b2b2;
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment