mirror of https://github.com/espruino/BangleApps
touchtimer: add all main buttons and create click handlers
crazysaem
parent
6eb5858742
commit
62b3cf0796
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue