From 62b3cf0796df1e168a9b30c651bda5460273e0e5 Mon Sep 17 00:00:00 2001 From: crazysaem Date: Thu, 23 Dec 2021 22:56:08 +0000 Subject: [PATCH] touchtimer: add all main buttons and create click handlers --- apps/touchtimer/app.js | 212 ++++++++++++++++++++++++++++++++++------- 1 file changed, 180 insertions(+), 32 deletions(-) diff --git a/apps/touchtimer/app.js b/apps/touchtimer/app.js index 7ffce959f..534f4d62c 100644 --- a/apps/touchtimer/app.js +++ b/apps/touchtimer/app.js @@ -1,13 +1,114 @@ var DEBUG = true; var main = () => { - var button0 = new Button({ x1: 0, y1: 35, x2: 58, y1: 70 }, 0); + var button1 = new Button({ x1: 1, y1: 35, x2: 58, y2: 70 }, 1); + var button2 = new Button({ x1: 60, y1: 35, x2: 116, y2: 70 }, 2); + var button3 = new Button({ x1: 118, y1: 35, x2: 174, y2: 70 }, 3); - button0.draw(); + var button4 = new Button({ x1: 1, y1: 72, x2: 58, y2: 105 }, 4); + var button5 = new Button({ x1: 60, y1: 72, x2: 116, y2: 105 }, 5); + var button6 = new Button({ x1: 118, y1: 72, x2: 174, y2: 105 }, 6); - button0.onClick((value) => { - log("button with value clicked"); - log(value); + var button7 = new Button({ x1: 1, y1: 107, x2: 58, y2: 140 }, 7); + var button8 = new Button({ x1: 60, y1: 107, x2: 116, y2: 140 }, 8); + var button9 = new Button({ x1: 118, y1: 107, x2: 174, y2: 140 }, 9); + + var buttonStart = new Button({ x1: 1, y1: 142, x2: 58, y2: 174 }, "GO"); + var button0 = new Button({ x1: 60, y1: 142, x2: 116, y2: 174 }, 0); + var buttonDelete = new Button({ x1: 118, y1: 142, x2: 174, y2: 174 }, "<-"); + + var timerNumberButtons = [ + button1, + button2, + button3, + button4, + button5, + button6, + button7, + button8, + button9, + button0, + ]; + + var timerInputButtons = [ + button1, + button2, + button3, + button4, + button5, + button6, + button7, + button8, + button9, + buttonStart, + button0, + buttonDelete, + ]; + + var buttonPauseContinue = new Button( + { x1: 1, y1: 35, x2: 174, y2: 105 }, + "PAUSE" + ); + var buttonStop = new Button({ x1: 1, y1: 107, x2: 174, y2: 174 }, "STOP"); + + var timerRunningButtons = [buttonPauseContinue, buttonStop]; + + var timeStr = ""; + timerNumberButtons.forEach((numberButton) => { + numberButton.setOnClick((value) => { + log("number button clicked"); + log(value); + log(timeStr); + if (value === 0 && timeStr.length === 0) { + return; + } + + if (timeStr.length <= 6) { + timeStr = timeStr + value; + } + log(timeStr); + drawTimer(timeStr); + }); + }); + + buttonDelete.setOnClick(() => { + log("delete button clicked"); + timeStr = timeStr.slice(0, -1); + log(timeStr); + drawTimer(timeStr); + }); + + buttonStart.setOnClick(() => { + g.clear(); + drawTimer(timeStr); + + timerInputButtons.forEach((button) => button.disable()); + + timerRunningButtons.forEach((button) => { + button.enable(); + button.draw(); + }); + }); + + buttonStop.setOnClick(() => { + g.clear(); + timeStr = ""; + drawTimer(timeStr); + + timerRunningButtons.forEach((button) => button.disable()); + + timerInputButtons.forEach((button) => { + button.enable(); + button.draw(); + }); + }); + + // initalize + g.clear(); + drawTimer(timeStr); + timerInputButtons.forEach((button) => { + button.enable(); + button.draw(); }); }; @@ -19,11 +120,35 @@ var log = (message) => { } }; +var drawTimer = (timeStr) => { + timeStr = timeStr.padStart(6, "0"); + var timeStrDisplay = + "" + + timeStr.slice(0, 2) + + "h " + + timeStr.slice(2, 4) + + "m " + + timeStr.slice(4, 6) + + "s"; + + g.clearRect(0, 0, 176, 34); + g.setColor(g.theme.fg); + g.setFontAlign(-1, -1); + g.setFont("Vector:26x40"); + g.drawString(timeStrDisplay, 2, 0); +}; + var touchHandlers = []; Bangle.on("touch", (_button, xy) => { + log("touch"); + log(xy); + + var x = Math.min(Math.max(xy.x, 1), 174); + var y = Math.min(Math.max(xy.y, 1), 174); + touchHandlers.forEach((touchHandler) => { - touchHandler(xy); + touchHandler(x, y); }); }); @@ -34,28 +159,11 @@ class Button { this.position = position; this.value = value; - this.onClickCallbacks = []; - - touchHandlers.push((xy) => { - var x = xy.x; - var y = xy.y; - - if ( - x >= this.position.x1 && - x <= this.position.x2 && - y >= this.position.y1 && - y <= this.position.y2 - ) { - this.onClickCallbacks.forEach((onClickCallback) => - onClickCallback(this.value) - ); - } - }); + this.touchHandler = undefined; + this.highlightTimeoutId = undefined; } - draw() { - g.clear(); - + draw(highlight) { g.setColor(g.theme.fg); g.fillRect( this.position.x1, @@ -64,7 +172,11 @@ class Button { this.position.y2 ); - g.setColor(g.theme.bg); + if (highlight) { + g.setColor(g.theme.bgH); + } else { + g.setColor(g.theme.bg); + } g.fillRect( this.position.x1 + BUTTON_BORDER_WITH, this.position.y1 + BUTTON_BORDER_WITH, @@ -74,16 +186,52 @@ class Button { g.setColor(g.theme.fg); g.setFontAlign(0, 0); - g.setFont("Vector", 40); + g.setFont("Vector", 35); g.drawString( this.value, - this.position.x2 - this.position.x1, - this.position.y2 - this.position.y1 + this.position.x1 + (this.position.x2 - this.position.x1) / 2 + 2, + this.position.y1 + (this.position.y2 - this.position.y1) / 2 + 2 ); } - onClick(callback) { - this.onClickCallbacks.push(callback); + setOnClick(callback) { + this.touchHandler = (x, y) => { + if ( + x >= this.position.x1 && + x <= this.position.x2 && + y >= this.position.y1 && + y <= this.position.y2 + ) { + this.draw(true); + this.highlightTimeoutId = setTimeout(() => { + this.draw(); + this.highlightTimeoutId = undefined; + }, 100); + setTimeout(() => callback(this.value), 25); + } + }; + } + + disable() { + log("disable button"); + log(this.value); + var touchHandlerIndex = touchHandlers.indexOf(this.touchHandler); + if (touchHandlerIndex > -1) { + log("clearing touch handler"); + touchHandlers.splice(touchHandlerIndex, 1); + } + + if (this.highlightTimeoutId) { + log("clearing higlight timeout"); + clearTimeout(this.highlightTimeoutId); + this.highlightTimeoutId = undefined; + } + } + + enable() { + if (this.touchHandler) { + touchHandlers.push(this.touchHandler); + } } }