Move rank to middle, track edge direction

antonclk/antonclk.app.js

@@ -23,6 +23,7 @@ Graphics.prototype.setFontAnton = function(scale) {
 
 		let grid = ["Office off", "Office 1/2", "Office on", "Kitchen off", "Kitchen 1/2", "Kitchen on", "Window off", "Window 1/2", "Window on", "LStairs off", "LStairs 1/2", "LStairs on", "Nook off", "Nook 1/2", "Nook on", "SideEnt off", "SideEnt 1/2", "SideEnt on", "Theatre off", "Theatre 1/2", "Theatre on", "FPot off", "FPot 1/2", "FPot on", "SPot off", "SPot 1/2", "SPot on", "GuestBth off", "GuestBth 1/2", "GuestBth on"];
 		let gridNum = -1;
+		let gridDir = -1;
 
 		let paintFace = function() {
 			var x = g.getWidth() / 2;
@@ -100,6 +101,7 @@ Graphics.prototype.setFontAnton = function(scale) {
 			let x = g.getWidth() / 2;
 			let y = g.getHeight() / 2;
 			let text = "";
+			let rank = "";
 
 			g.reset().clearRect(Bangle.appRect);
 
@@ -107,28 +109,35 @@ Graphics.prototype.setFontAnton = function(scale) {
 			truncY = Math.floor(touchY/15);
 
 			gridNum = -1;
+			gridDir = -1;
 
 			if (!grid) {
 				text = "Grid missing";
 			} else if (truncX < 2) {
 				text = "left";
+				gridDir = "left";
 			} else if (truncX > 10) {
 				text = "right";
+				gridDir = "right";
 			} else if (truncY < 2) {
 				text = "top";
+				gridDir = "top";
 			} else if (truncY > 10) {
-				text = "bottom";
+				text = "Cancel";
+				gridDir = "bottom";
 			} else {
 				const gridX = truncX - 2;
 				const gridY = truncY - 2;
 
 				gridNum = gridY * 9 + gridX;
-				const rank = "ABCDEFGHI"[gridY];
-				text = rank + " " + grid[gridNum];
+				rank = "ABCDEFGHI"[gridY];
+				text = grid[gridNum];
 			}
 
 			g.setFontAlign(0, 0).setFont("Vector", 26).drawString(text, x, y-45);
 			g.setFontAlign(0, 0).setFont("Vector", 26).drawString(text, x, y+70);
+			g.setFontAlign(0, 0).setFont("Vector", 26).drawString(rank, x-65, y+15);
+			g.setFontAlign(0, 0).setFont("Vector", 26).drawString(rank, x+65, y+15);
 		};
 
 		let handleDrag = function(e) {
@@ -159,7 +168,6 @@ Graphics.prototype.setFontAnton = function(scale) {
 
 				if (gridNum >= 0 && grid[gridNum]) {
 					myMessage = grid[gridNum];
-					if (paintFace) paintFace();
 
 					if (Bangle.http){
 						const options = {timeout:3000, method: "post", body: gridNum};
@@ -172,9 +180,12 @@ Graphics.prototype.setFontAnton = function(scale) {
 						});
 					}
 					gridNum = -1;
-				} else {
-					if (paintFace) paintFace();
+				} else if (gridDir == "bottom") {
+					myMessage = "Cancelled";
+					Bangle.setLocked(true);
 				}
+
+				if (paintFace) paintFace();
 			} else if (watchState == STATE_GRID_OPEN && pressed) {
 				drawMenu(touchX, touchY);
 			}
@@ -206,7 +217,9 @@ Graphics.prototype.setFontAnton = function(scale) {
 				gridTimer = undefined;
 				if (lockTimer) clearTimeout(lockTimer);
 				lockTimer = undefined;
+
 				delete Graphics.prototype.setFontAnton;
+				paintFace = undefined; // http request may resolve after font's been unloaded, so unset
 			}});
 		// Load widgets
 		Bangle.loadWidgets();