diff --git a/metadata.json b/metadata.json index f6d2871..a0105df 100644 --- a/metadata.json +++ b/metadata.json @@ -4,13 +4,5 @@ "version": "0.01", "description": "A stopwatch with multiple modes for Bangle JS 2", "icon": "stopwatch.png", - "screenshots": [], - "tags": "tools,app", - "supports": ["BANGLEJS2"], - "readme": "README.md", - "storage": [ - { "name": "stopwatch.app.js", "url": "stopwatch.app.js" }, - { "name": "stopwatch.img", "url": "stopwatch.icon.js", "evaluate": true } - ], - "data": [{ "name": "timer.json" }] + "src": "timer.app.js" } diff --git a/src/app.js b/src/app.js index 26bee4e..ea22f41 100644 --- a/src/app.js +++ b/src/app.js @@ -74,7 +74,7 @@ var TimerApp = /** @class */ (function () { this.timers = []; this.displayedTimerIndex = 0; this.displayTextY = 20; - this.timeTextY = this.height * (2.0 / 5.0); + this.timeTextY = this.height / 2.0; this.lastTickTimeMS = Date.now(); this.loadStateOrDefault(); this.initializeButtons(); @@ -103,8 +103,13 @@ var TimerApp = /** @class */ (function () { self.leftButton.onClick(x, y); self.rightButton.onClick(x, y); } - self.topLeftButton.onClick(x, y); - self.topRightButton.onClick(x, y); + // Make the navigation buttons easier to click. + var xx = Math.min(self.width, Math.max(0, point.x - self.width / 4.0)); + var yy = Math.min(self.height, Math.max(0, point.y - self.height / 4.0)); + self.topLeftButton.onClick(xx, yy); + xx = Math.min(self.width, Math.max(0, point.x + self.width / 4.0)); + yy = Math.min(self.height, Math.max(0, point.y - self.height / 4.0)); + self.topRightButton.onClick(xx, yy); }, remove: function () { self.pauseTimer(); @@ -116,8 +121,6 @@ var TimerApp = /** @class */ (function () { g.setTheme({ bg: "#000", fg: "#fff", dark: true }).clear(); g.setColor(BLACK_COLOR); g.fillRect(0, 0, this.width, this.height); - Bangle.loadWidgets(); - Bangle.drawWidgets(); // These buttons don't update so they only need to be drawn once. this.topLeftButton.draw(); this.topRightButton.draw(); @@ -141,11 +144,11 @@ var TimerApp = /** @class */ (function () { this.largeButton = new Button(0.0, (3.0 / 4.0) * this.height, this.width, this.height / 4.0, BLUE_COLOR, startOrPauseTimer, PLAY_IMG); this.leftButton = new Button(0.0, (3.0 / 4.0) * this.height, this.width / 2.0, this.height / 4.0, YELLOW_COLOR, resetTimer, PLAY_IMG); this.rightButton = new Button(this.width / 2.0, (3.0 / 4.0) * this.height, this.width / 2.0, this.height / 4.0, BLUE_COLOR, resumeTimer, PAUSE_IMG); - var navigatorButtonSize = this.width / 8.0; - this.topLeftButton = new Button(0.0, 0.0, navigatorButtonSize, navigatorButtonSize, BLUE_COLOR, function () { + var navigatorButtonSize = this.width / 5.0; + this.topLeftButton = new Button(0.0, 0.0, navigatorButtonSize, navigatorButtonSize, BLACK_COLOR, function () { self.gotoPreviousTimer(); }, RESET_IMG); - this.topRightButton = new Button(this.width - navigatorButtonSize, 0.0, navigatorButtonSize, navigatorButtonSize, BLUE_COLOR, function () { + this.topRightButton = new Button(this.width - navigatorButtonSize, 0.0, navigatorButtonSize, navigatorButtonSize, BLACK_COLOR, function () { self.gotoNextTimer(); }, RESET_IMG); }; @@ -188,16 +191,20 @@ var TimerApp = /** @class */ (function () { } }; TimerApp.prototype.pauseDisplayedTimer = function () { + Bangle.buzz(); this.displayedTimer().running = false; }; TimerApp.prototype.resetDisplayedTimer = function () { + Bangle.buzz(); this.displayedTimer().elapsedTime = 0.0; this.displayedTimer().running = false; }; TimerApp.prototype.resumeDisplayedTimer = function () { + Bangle.buzz(); this.displayedTimer().running = true; }; TimerApp.prototype.playDisplayedTimer = function () { + Bangle.buzz(); this.displayedTimer().running = true; }; TimerApp.prototype.displayedTimerIsRunning = function () { diff --git a/src/app.ts b/src/app.ts index 2a5f676..c6c333b 100644 --- a/src/app.ts +++ b/src/app.ts @@ -131,7 +131,7 @@ class TimerApp { this.timers = [] this.displayedTimerIndex = 0 this.displayTextY = 20 - this.timeTextY = this.height * (2.0 / 5.0) + this.timeTextY = this.height / 2.0 this.lastTickTimeMS = Date.now() this.loadStateOrDefault() this.initializeButtons() @@ -151,8 +151,8 @@ class TimerApp { mode: "custom", btn: () => load(), touch: (button, point) => { - const x = Math.min(self.width, Math.max(0, point.x)) - const y = Math.min(self.height, Math.max(0, point.y)) + let x = Math.min(self.width, Math.max(0, point.x)) + let y = Math.min(self.height, Math.max(0, point.y)) if (self.displayedTimerIsRunning()) { self.largeButton.onClick(x, y) @@ -163,8 +163,16 @@ class TimerApp { self.rightButton.onClick(x, y) } - self.topLeftButton.onClick(x, y) - self.topRightButton.onClick(x, y) + // Make the navigation buttons easier to click. + let xx = Math.min(self.width, Math.max(0, point.x - self.width / 4.0)) + let yy = Math.min(self.height, Math.max(0, point.y - self.height / 4.0)) + + self.topLeftButton.onClick(xx, yy) + + xx = Math.min(self.width, Math.max(0, point.x + self.width / 4.0)) + yy = Math.min(self.height, Math.max(0, point.y - self.height / 4.0)) + + self.topRightButton.onClick(xx, yy) }, remove: () => { self.pauseTimer() @@ -177,8 +185,6 @@ class TimerApp { g.setTheme({ bg: "#000", fg: "#fff", dark: true }).clear() g.setColor(BLACK_COLOR) g.fillRect(0, 0, this.width, this.height) - Bangle.loadWidgets() - Bangle.drawWidgets() // These buttons don't update so they only need to be drawn once. this.topLeftButton.draw() this.topRightButton.draw() @@ -232,13 +238,13 @@ class TimerApp { PAUSE_IMG ) - const navigatorButtonSize = this.width / 8.0 + const navigatorButtonSize = this.width / 5.0 this.topLeftButton = new Button( 0.0, 0.0, navigatorButtonSize, navigatorButtonSize, - BLUE_COLOR, + BLACK_COLOR, function () { self.gotoPreviousTimer() }, @@ -249,7 +255,7 @@ class TimerApp { 0.0, navigatorButtonSize, navigatorButtonSize, - BLUE_COLOR, + BLACK_COLOR, function () { self.gotoNextTimer() }, @@ -299,19 +305,23 @@ class TimerApp { } pauseDisplayedTimer() { + Bangle.buzz() this.displayedTimer().running = false } resetDisplayedTimer() { + Bangle.buzz() this.displayedTimer().elapsedTime = 0.0 this.displayedTimer().running = false } resumeDisplayedTimer() { + Bangle.buzz() this.displayedTimer().running = true } playDisplayedTimer() { + Bangle.buzz() this.displayedTimer().running = true }