now savong tracks

src/javascript/controllers/HeightMapViewController.js

@@ -14,6 +14,7 @@ class HeightMapViewController extends UIViewController {
 		this.lastX         = 0;
 		this.translated    = 0;
 		this.isCapturing   = false;
+		this.mainloop      = null;
 
 	}
 
@@ -42,32 +43,41 @@ class HeightMapViewController extends UIViewController {
 		));*/
 	}
 
+	/**
+	 * @override
+	 */
 	viewDidLoad() {
 		$("#startCapturing").click(element => {
 			this.isCapturing = true;
 			this.renderCall();
 		});
-		if (!this.isCapturing)
+		$("#heightmap").click((element, event) => {
+			event.preventDefault();
+			this.isCapturing = !this.isCapturing;
+			clearInterval(this.mainloop);
+			this.renderCall();
+		});
+		if (!this.isCapturing && this.model.points.length === 0)
 			return;
 		this.canvas        = $("#heightmap").get();
 
 		this.canvas.width  = (this.canvas.parentNode.offsetWidth - 16);
 		this.canvas.height = (this.canvas.parentNode.offsetHeight - 18);
 
+		/*   setting up the canvas for retina displays   */
 		let ratio = 2;
 
-		let oldWidth = this.canvas.width;
-		let oldHeight = this.canvas.height;
-
-		this.canvas.width = oldWidth * ratio;
-		this.canvas.height = oldHeight * ratio;
-
-		this.canvas.style.width = oldWidth + 'px';
+		let oldWidth             = this.canvas.width;
+		let oldHeight            = this.canvas.height;
+		this.canvas.width        = oldWidth * ratio;
+		this.canvas.height       = oldHeight * ratio;
+		this.canvas.style.width  = oldWidth + 'px';
 		this.canvas.style.height = oldHeight + 'px';
 
 
-		let ctx            = this.canvas.getContext("2d");
+		let ctx = this.canvas.getContext("2d");
 
+		/*   scolling the heightmap horizontally in canvas   */
 		this.canvas.addEventListener("touchstart", event => {
 			this.drag  = true;
 			this.lastX = event.changedTouches[0].clientX;
@@ -75,8 +85,7 @@ class HeightMapViewController extends UIViewController {
 		this.canvas.addEventListener("touchmove", event => {
 			if (!this.drag)
 				return;
-			let ctx          = this.canvas.getContext("2d");
-			let delta        = event.changedTouches[0].clientX - this.lastX;
+			let delta = event.changedTouches[0].clientX - this.lastX;
 			if (this.translated + delta > 0 || (this.translated + delta) < (this.model.points.length * -40 + this.canvas.width))
 				return;
 			this.clear();
@@ -90,9 +99,12 @@ class HeightMapViewController extends UIViewController {
 		});
 		this.drawHeightMap();
 
+		if (!this.isCapturing)
+			return;
 		this.capture();
 
-		setInterval(() => {
+		/*   capturing new points   */
+		this.mainloop = setInterval(() => {
 			this.capture();
 		}, 1000);
 	}
@@ -103,6 +115,7 @@ class HeightMapViewController extends UIViewController {
 
 		this.clear();
 
+		/*   plotting all current points into the canvas   */
 		ctx.beginPath();
 		ctx.moveTo(0, height);
 		let x = 0;
@@ -120,9 +133,11 @@ class HeightMapViewController extends UIViewController {
 		ctx.strokeStyle = "#029BE8";
 		ctx.lineWidth = 3;
 		ctx.stroke();
-		ctx.globalAlpha = 0.3;
+		ctx.globalAlpha = 0.3; // drawing the fill in a lighter color
 		ctx.fillStyle = "#029BE8";
 		ctx.fill();
+
+		/*   drawing the text, not affected by translation through scrolling   */
 		ctx.save();
 		ctx.setTransform(1,0,0,1,0,0);
 		ctx.globalAlpha = 1;
@@ -134,10 +149,28 @@ class HeightMapViewController extends UIViewController {
 		ctx.font = "18px Arial";
 		ctx.fillText(`– ${Math.round(this.model.min)}m`, 10, height - 22);
 		ctx.fillText(`– ${Math.round(this.model.max)}m`, 10, 32);
+
+		if (!this.isCapturing) {
+			let theight = 100;
+			let twidth  = 80;
+			let tx      = this.canvas.width / 2 - twidth / 2;
+			let ty      = this.canvas.height / 2 - theight / 2;
+			ctx.beginPath();
+			ctx.moveTo(tx, ty);
+			ctx.lineTo(tx + twidth, ty + (theight / 2));
+			ctx.lineTo(tx, ty + theight);
+			ctx.closePath();
+			ctx.fill();
+		}
+
 		ctx.restore();
 	}
 
+	/**
+	 * clears the canvas for redrawing
+	 */
 	clear() {
+		console.log("CLEAR", this.translated);
 		let ctx    = this.canvas.getContext("2d");
 		let width  = this.canvas.width;
 		let height = this.canvas.height;
@@ -147,7 +180,12 @@ class HeightMapViewController extends UIViewController {
 		ctx.fillRect(-this.translated, 0, this.model.points.length * 20 + width, height);
 	}
 
+	/**
+	 * @override
+	 * @return {string}
+	 */
 	render() {
+		this.translated = 0;
 		let content;
 
 		if (!this.isCapturing && this.model.points.length === 0)

src/javascript/controllers/ViewController.js

@@ -18,9 +18,10 @@ const States = {
 class ViewController extends UIViewController {
 	constructor() {
 		super("body");
-		this.state = parseInt(Settings.get("appState"));
-		this.state = this.state === States.HEIGHTMAP ? States.TRACKLIST : this.state;
-		this.track = null;
+		this.state  = parseInt(Settings.get("appState"));
+		this.state  = this.state === States.HEIGHTMAP ? States.TRACKLIST : this.state;
+		this.track  = null;
+		this.tracks = new Tracks();
 
 		this.renderCall();
 	}
@@ -92,11 +93,11 @@ class ViewController extends UIViewController {
 				this.addSubview(new SettingsViewController("main"));
 				break;
 			case States.TRACKLIST:
-				this.addSubview(new TracksListController("main", new Tracks()));
+				this.addSubview(new TracksListController("main", this.tracks));
 				leftButton = "<a id=addTrack href=#><span class='fa fa-plus'></span></a>";
 				break;
 			case States.HEIGHTMAP:
-				this.addSubview(new HeightMapViewController("main", new HeightMap(this.track)));
+				this.addSubview(new HeightMapViewController("main", new HeightMap(this, this.track)));
 				leftButton = "<a id=backButton href=#><span class='fa fa-chevron-left'></span> <span>Zurück</span></a>";
 				title = "Capture Track";
 				break;

src/javascript/models/HeightMap.js

@@ -4,13 +4,29 @@ import Std from "../Std.js";
 import GeoPoint from "../GeoPoint.js";
 
 class HeightMap {
-	constructor(trackID) {
-		this.trackID      = trackID;
-		this.points        = [];
+	constructor(app, trackID) {
+		this.app           = app;
+		this.trackID       = trackID;
+		this.points        = app.tracks.get(trackID).points;
 		this.min           = null;
 		this.max           = 0;
 		this.mid           = 0;
 		this.sum           = 0;
+
+		for (let geoPoint of this.points) {
+			Object.setPrototypeOf(geoPoint, GeoPoint.prototype);
+			this.min = this.min === null ? geoPoint.altitude : this.min;
+
+			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.sum += geoPoint.altitude;
+
+			this.mid = this.sum / this.points.length;
+		}
 	}
 
 	add(geoPoint) {
@@ -30,6 +46,7 @@ class HeightMap {
 		this.mid = this.sum / this.points.length;
 
 		this.points.push(geoPoint);
+		this.app.tracks.update(this.trackID, this.points);
 	}
 }
 

src/javascript/models/Tracks.js

@@ -6,16 +6,24 @@ class Tracks {
 	}
 
 	add(track) {
-		console.log("AAADDDD");
 		this._tracks.push(track);
 		this._save();
 	}
 
+	update(trackID, points) {
+		this._tracks[trackID].points = points;
+		this._save();
+	}
+
 	remove(trackID) {
 		this._tracks.splice(trackID, 1);
 		this._save();
 	}
 
+	get(trackID) {
+		return this._tracks[trackID];
+	}
+
 	_save() {
 		localStorage.setItem("tracks", JSON.stringify(this._tracks))
 	}