Add 2x2 menu

antonclk/antonclk.app.js

@@ -10,6 +10,7 @@ Graphics.prototype.setFontAnton = function(scale) {
 		const STATE_IDLE = 0;
 		const STATE_GRID_OPEN_WAIT = 1;
 		const STATE_GRID_OPEN = 2;
+		const STATE_MENU_OPEN = 3;
 
 		let watchState = STATE_IDLE;
 
@@ -21,12 +22,18 @@ Graphics.prototype.setFontAnton = function(scale) {
 		let lockTimer = null;
 		let swipeLockout = false;
 
-		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 grid = ["Office off", "Office 1/2", "Office on", "Kitchen off", "Kitchen 1/2", "Kitchen on", "Closet off", "Closet 1/2", "Closet 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", "Lab off", "Lab on", "Number off", "Number on", "BathFan off", "BathFan on", "VentFan off", "VentFan on", "Grow off", "Grow on", "", "", "Nook Air off", "Nook Air on", "Lab Air off", "Lab Air on", "Seeds off", "Seeds on", "Lamp off", "Lamp on", "Bed Air off", "Bed Air on", "Garage Plug off", "Garage Plug on", "Volume Down", "Volume Up", "Prev", "Next", "Pause", "Play", "", "Show Time", "Movie Time", "Guest 0", "Guest 1", "", "", "Motn Lk 0", "Motn Lk 1", "Refresh Grid", "Mark Time", "Disarm", "Arm Stay", "Arm Away", "Unlock Door", "Garage Door", "Test Alert", "Kill server"];
 		let gridNum = -1;
 		let prevNum = -1;
 		let gridDir = -1;
 
+		let menu = {"lights": {"upper": {"closet": {"off": null, "1/4": null, "1/2": null, "on": null}, "window": {"off": null, "1/4": null, "1/2": null, "on": null}, "guest bath": {"off": null, "1/4": null, "1/2": null, "on": null}, "office": {"off": null, "1/4": null, "1/2": null, "on": null}}, "middle": {"kitchen": {"off": null, "1/4": null, "1/2": null, "on": null}, "nook": {"off": null, "1/4": null, "1/2": null, "on": null}, "side ent": {"off": null, "1/4": null, "1/2": null, "on": null}}, "lower": {"lstairs": {"off": null, "1/4": null, "1/2": null, "on": null}, "theatre": {"off": null, "1/4": null, "1/2": null, "on": null}, "lab": {"off": null, "1/4": null, "1/2": null, "on": null}}, "misc": {"fpot": {"off": null, "1/4": null, "1/2": null, "on": null}, "spot": {"off": null, "1/4": null, "1/2": null, "on": null}, "number": {"off": null, "1/4": null, "1/2": null, "on": null}}}, "switches": {"fans": {"bath on": null, "bath off": null, "vent on": null, "vent off": null}, "hydro": {"grow on": null, "grow off": null, "seeds on": null, "seeds off": null}, "living": {"lr on": null, "lr off": null, "lamp on": null, "lamp off": null}, "air": {"bed on": null, "bed off": null, "lab on": null, "lab off": null}}, "states": {"scenes": {"bed time": null, "woke up": null, "show time": null, "movie time": null}, "modes": {"guest on": null, "guest off": null, "mlock on": null, "mlock off": null}}, "commands": {"media": {"prev": null, "next": null, "pause": null, "play": null}, "volume": {"up 10": null, "up 30": null, "down 10": null, "down 30": null}, "util": {"kill server": null, "arm stay": null, "test alert": null, "mark time": null}, "door": {"arm away": null, "disarm": null, "unlock": null, "garage": null}}};
+		let subMenu = null;
+		let menuCommand = "";
+
 		let paintFace = function() {
+			if (watchState != STATE_IDLE) return;
+
 			var x = g.getWidth() / 2;
 			var y = g.getHeight() / 2;
 
@@ -98,7 +105,7 @@ Graphics.prototype.setFontAnton = function(scale) {
 		};
 
 
-		let drawMenu = function(touchX, touchY) {
+		let drawGrid = function(touchX, touchY) {
 			let x = g.getWidth() / 2;
 			let y = g.getHeight() / 2;
 			let text = "";
@@ -153,7 +160,7 @@ Graphics.prototype.setFontAnton = function(scale) {
 				watchState = STATE_GRID_OPEN_WAIT;
 				gridTimer = setTimeout(function() {
 					watchState = STATE_GRID_OPEN;
-					drawMenu(touchX, touchY);
+					drawGrid(touchX, touchY);
 					swipeLockout = true;
 				}, 500);
 			} else if (watchState == STATE_GRID_OPEN_WAIT && !pressed) {
@@ -174,7 +181,7 @@ Graphics.prototype.setFontAnton = function(scale) {
 					if (Bangle.http){
 						const options = {timeout:3000, method: "post", body: gridNum};
 						Bangle.http("https://api.home.dns.t0.vc/grid", options).then(event => {
-							myMessage = "ok"
+							myMessage = "ok";
 							if (paintFace) paintFace();
 						}).catch((e)=>{
 							myMessage = "POST error";
@@ -189,7 +196,7 @@ Graphics.prototype.setFontAnton = function(scale) {
 						if (Bangle.http){
 							const options = {timeout:3000, method: "post", body: prevNum};
 							Bangle.http("https://api.home.dns.t0.vc/grid", options).then(event => {
-								myMessage = "ok"
+								myMessage = "ok";
 								if (paintFace) paintFace();
 							}).catch((e)=>{
 								myMessage = "POST error";
@@ -206,22 +213,126 @@ Graphics.prototype.setFontAnton = function(scale) {
 
 				if (paintFace) paintFace();
 			} else if (watchState == STATE_GRID_OPEN && pressed) {
-				drawMenu(touchX, touchY);
+				drawGrid(touchX, touchY);
 			}
 		};
 
+		let drawMenu = function(menu) {
+			const keys = Object.keys(menu);
+
+			g.reset().clearRect(Bangle.appRect);
+
+			g.drawLine(88, 0, 88, 175); // |
+			g.drawLine(0, 88, 175, 88); // --
+
+			const wrap = function(text) {
+				return g.wrapString(text, 80).join("\n");
+			};
+
+			g.setFontAlign(0, 0).setFont("Vector", 26).drawString(wrap(keys[0]), 50, 50);     // 0
+			g.setFontAlign(0, 0).setFont("Vector", 26).drawString(wrap(keys[1]), 130, 50);    // 1
+			g.setFontAlign(0, 0).setFont("Vector", 26).drawString(wrap(keys[2]), 50, 130);    // 2
+			g.setFontAlign(0, 0).setFont("Vector", 26).drawString(wrap(keys[3]), 130, 130);   // 3
+
+		};
+
+		let handleTouch = function(button, xy) {
+			console.log(button, xy);
+
+			const touchX = xy.x;
+			const touchY = xy.y;
+			const pressed = xy.type == 0;
+
+			// 0 1
+			// 2 3
+
+			let quad = -1;
+			if (touchY < 110) {
+				if (touchX < 110) {
+					quad = 0;
+				} else {
+					quad = 1;
+				}
+			} else {
+				if (touchX < 110) {
+					quad = 2;
+				} else {
+					quad = 3;
+				}
+			}
+			console.log("quad:", quad);
+
+			if (watchState == STATE_IDLE && pressed) {
+				watchState = STATE_MENU_OPEN;
+				subMenu = menu;
+				menuCommand = "";
+			}
+
+			const keys = Object.keys(subMenu);
+			const key = keys[quad];
+			subMenu = subMenu[key];
+			menuCommand += key + ",";
+
+			console.log("submenu:", subMenu);
+
+			if (subMenu) {
+				drawMenu(subMenu);
+			} else {
+				watchState = STATE_IDLE;
+				console.log("menuCommand:", menuCommand);
+				Bangle.drawWidgets();
+				Bangle.buzz(100, 0.2);
+
+				if (Bangle.http){
+					const options = {timeout:3000, method: "post", body: menuCommand};
+					Bangle.http("https://api.home.dns.t0.vc/menu", options).then(event => {
+						myMessage = "ok";
+						if (paintFace) paintFace();
+					}).catch((e)=>{
+						myMessage = "POST error";
+						if (paintFace) paintFace();
+					});
+				}
+
+				myMessage = "sent";
+				if (paintFace) paintFace();
+			}
+		};
+
+		let handleTwist = function() {
+			console.log("twisted");
+
+			if (watchState == STATE_MENU_OPEN) {
+				watchState = STATE_IDLE;
+
+				myMessage = "cancelled";
+				if (paintFace) paintFace();
+				Bangle.drawWidgets();
+			}
+		}
+
 		if (Bangle.http){
 			Bangle.http("https://api.home.dns.t0.vc/grid", {timeout:3000}).then(event => {
 				grid = JSON.parse(event.resp);
 				//console.log(grid);
 			}).catch((e)=>{
-				myMessage = "GET error";
+				myMessage = "Grid error";
+				if (paintFace) paintFace();
+			});
+
+			Bangle.http("https://api.home.dns.t0.vc/menu", {timeout:3000}).then(event => {
+				menu = JSON.parse(event.resp);
+				//console.log(grid);
+			}).catch((e)=>{
+				myMessage = "Menu error";
 				if (paintFace) paintFace();
 			});
 		}
 
 		Bangle.on('swipe', handleSwipe);
 		Bangle.on('drag', handleDrag);
+		Bangle.on('touch', handleTouch);
+		Bangle.on('twist', handleTwist);
 
 		// Show launcher when middle button pressed
 		Bangle.setUI({
@@ -230,6 +341,8 @@ Graphics.prototype.setFontAnton = function(scale) {
 				// Called to unload all of the clock app
 				Bangle.removeListener('swipe', handleSwipe);
 				Bangle.removeListener('drag', handleDrag);
+				Bangle.removeListener('touch', handleTouch);
+				Bangle.removeListener('twist', handleTwist);
 				if (drawTimer) clearTimeout(drawTimer);
 				drawTimer = undefined;
 				if (gridTimer) clearTimeout(gridTimer);