Commit 13e517ed authored by Michael Ochmann's avatar Michael Ochmann
Browse files

added new scaling to heightmap view

parent 65a6c886
......@@ -10,7 +10,7 @@ class Std {
* @returns {number}
*/
static Random(min = 0, max = 100) {
return Math.floor(Math.random() * max) + min;
return Math.floor(Math.random() * (max - min + 1)) + min;
}
/**
......
......@@ -13,6 +13,8 @@ class HeightMapViewController extends UIViewController {
this.lastX = 0;
this.translated = 0;
this.isCapturing = false;
}
addPoint(geoPoint) {
......@@ -26,21 +28,27 @@ class HeightMapViewController extends UIViewController {
}
capture() {
navigator.geolocation.getCurrentPosition(position => {
/* navigator.geolocation.getCurrentPosition(position => {
this.addPoint(new GeoPoint(
position.coords.latitude,
position.coords.longitude,
position.coords.altitude
));
});
/* this.addPoint(new GeoPoint(
});*/
this.addPoint(new GeoPoint(
Std.Random(136, 150),
Std.Random(60, 150),
Std.Random(60, 150),
Std.Random(60, 150)
));*/
Std.Random(80, 159)
));
}
viewDidLoad() {
$("#startCapturing").click(element => {
this.isCapturing = true;
this.renderCall();
});
if (!this.isCapturing)
return;
this.canvas = $("#heightmap").get();
this.canvas.width = (this.canvas.parentNode.offsetWidth - 16);
......@@ -57,7 +65,6 @@ class HeightMapViewController extends UIViewController {
this.canvas.style.width = oldWidth + 'px';
this.canvas.style.height = oldHeight + 'px';
console.log(this.canvas.parentNode.offsetHeight);
let ctx = this.canvas.getContext("2d");
......@@ -99,8 +106,10 @@ class HeightMapViewController extends UIViewController {
ctx.beginPath();
ctx.moveTo(0, height);
let x = 0;
let scalingFactor = 50;
let min = (this.model.max - this.model.min) < scalingFactor ? this.model.min - scalingFactor : this.model.min;
for (let point of this.model.points) {
let ordinateVal = Std.Map(point.altitude, this.model.min, this.model.max, 0, height * 0.95);
let ordinateVal = Std.Map(point.altitude, min, this.model.max, 0, height * 0.95);
ctx.lineTo(x, height - ordinateVal);
x+=40;
}
......@@ -123,8 +132,8 @@ class HeightMapViewController extends UIViewController {
ctx.fillText(`Datapoints: ${this.model.points.length}`, this.canvas.width - 20 , 32);
ctx.textAlign = "left";
ctx.font = "18px Arial";
ctx.fillText(`– ${this.model.min}m`, 10, height - 22);
ctx.fillText(`– ${this.model.max}m`, 10, 32);
ctx.fillText(`– ${Math.round(this.model.min)}m`, 10, height - 22);
ctx.fillText(`– ${Math.round(this.model.max)}m`, 10, 32);
ctx.restore();
}
......@@ -139,8 +148,19 @@ class HeightMapViewController extends UIViewController {
}
render() {
let content;
if (!this.isCapturing && this.model.points.length === 0)
content = `
<section class="view full">
<button class="big" id="startCapturing">Start</button>
</section>
`;
else
content = `<canvas id="heightmap"></canvas>`;
return `
<canvas id="heightmap"></canvas>
${content}
`;
}
}
......
import UIViewController from "./UIViewController.js";
class SettingsViewController extends UIViewController {
constructor(view, model) {
super(view, model);
this.heights = [50];
for (let h = 100; h < 1000; h += 100)
this.heights.push(h);
for (let h = 1000; h <= 10000; h += 1000)
this.heights.push(h);
}
render() {
let heights = this.heights.map(height => `<option value="${height}">${height}m</option>`).join("");
return `
<ul class="UITableView">
<li>
New datapoint every
<span>
<span class="right">
<select>
<option>dwsad</option>
${heights}
</select>
</span>
</li>
<li><a style="color: red;"><span class="fa fa-trash" style="margin-right: 10px;"></span> Delete all Data</a></li>
</ul>
`;
}
......
......@@ -17,7 +17,7 @@ const States = {
class ViewController extends UIViewController {
constructor() {
super("body");
this.state = States.TRACKLIST;
this.state = States.HEIGHTMAP;
this.track = null;
this.renderCall();
......@@ -82,6 +82,7 @@ class ViewController extends UIViewController {
render() {
this.children = [];
let leftButton = "<a></a>";
let title = "HeightTracker";
switch(this.state) {
case States.SETTINGS:
......@@ -94,13 +95,14 @@ class ViewController extends UIViewController {
case States.HEIGHTMAP:
this.addSubview(new HeightMapViewController("main", new HeightMap(this.track)));
leftButton = "<a id=backButton href=#><span class='fa fa-chevron-left'></span> <span>Zurück</span></a>";
title = "Capture Track";
break;
}
return `
<header>
${leftButton}
<h2 class=title>HeightTracker</h2>
<h2 class=title>${title}</h2>
<a href=# id=about><span class="fa fa-info-circle"></span></a>
</header>
<main class=view>
......
import $ from "../smallQ.js";
import Std from "../Std.js";
import GeoPoint from "../GeoPoint.js";
class HeightMap {
......@@ -8,22 +9,25 @@ class HeightMap {
this.points = [];
this.min = null;
this.max = 0;
console.log(trackID);
this.mid = 0;
this.sum = 0;
}
add(geoPoint) {
if (geoPoint.constructor.name !== "GeoPoint")
throw new TypeError("an object of type 'GeoPoint' must be p1assed.");
this.min = this.min === null ? geoPoint.altitude : this.min;
let min = this.min;
let max = this.max;
this.min = this.min === null ? geoPoint.altitude : this.min;
this.min = geoPoint.altitude < this.min ? geoPoint.altitude : this.min;
this.max = geoPoint.altitude > this.max ? geoPoint.altitude : this.max;
this.sum += geoPoint.altitude;
this.mid = this.sum / this.points.length;
this.points.push(geoPoint);
}
......
......@@ -8,7 +8,7 @@
padding: 15px 12px;
border-bottom: solid 1px #eee;
span {
span.right {
float: right;
}
}
......
header {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-columns: 1fr 2fr 1fr;
grid-gap: 9px;
background: $header-background;
color: $header-color;
......
......@@ -4,4 +4,11 @@
box-sizing: border-box;
padding: 8px;
background: white;
&.full {
display: flex;
height: 100%;
align-items: center;
justify-content: center;
}
}
\ No newline at end of file
......@@ -36,4 +36,9 @@ body {
background: $header-background;
font-family: sans-serif;
box-sizing: border-box;
}
button.big {
padding: 20px 50px;
font-size: large;
}
\ 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