added new scaling to heightmap view

src/javascript/Std.js

@@ -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;
 	}
 
 	/**

src/javascript/controllers/HeightMapViewController.js

@@ -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}
 		`;
 	}
 }

src/javascript/controllers/SettingsViewController.js

 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>
 		`;
 	}

src/javascript/controllers/ViewController.js

@@ -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>

src/javascript/models/HeightMap.js

 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);
 	}

src/scss/_UITableView.scss

@@ -8,7 +8,7 @@
 		padding: 15px 12px;
 		border-bottom: solid 1px #eee;
 
-		span {
+		span.right {
 			float: right;
 		}
 	}

src/scss/_header.scss

 header {
 	display: grid;
-	grid-template-columns: repeat(3, 1fr);
+	grid-template-columns: 1fr 2fr 1fr;
 	grid-gap: 9px;
 	background: $header-background;
 	color: $header-color;

src/scss/_view.scss

@@ -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

src/scss/app.scss

@@ -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