Can differentiate between opening the app and receiving a notification. Some code clean up.

master
Bryan 2024-08-02 18:38:31 -06:00
parent 8d73da164d
commit dc6777b989
7 changed files with 226 additions and 103 deletions

View File

@ -7,14 +7,14 @@ let options = {
headerHlColor: g.toColor(0, 1, 0),
margin: 3, // space on sides
padding: 8, // space between header and body
fh: 10, // footer height - leave this much space for a footer
fh: 20, // footer height - leave this much space for a footer
};
exports.setOptions = function(opts) {
options = Object.assign(options, opts);
};
const setClipRect = function (x, y, x2, y2) {
exports.setClipRect = function (x, y, x2, y2) {
if (y < Bangle.appRect.y) y = Bangle.appRect.y;
if (y2 < Bangle.appRect.y) y2 = Bangle.appRect.y;
if (y > Bangle.appRect.y2 - 10) y = Bangle.appRect.y2 - options.fh - 1;
@ -68,7 +68,7 @@ HeaderBox.prototype.draw = function(messageRect) {
if (this.h < this.minH) this.h = this.minH;
else if (this.h > this.maxH) this.h = this.maxH;
let y2 = messageRect.y + this.h - 1;
setClipRect(x, y, x2, y2);
exports.setClipRect(x, y, x2, y2);
g.setBgColor(options.headerBgColor).clearRect(x, y, x2, y2);
if (this.new) g.setColor(options.headerHlColor).fillPoly([x, y, x + 20, y, x, y + 20]);
g.setColor(options.headerFgColor);
@ -117,7 +117,7 @@ BodyBox.prototype.draw = function(messageRect, yOffset) {
x2 = messageRect.x2;
y2 = messageRect.y2;
g.setColor(g.theme.fg).setBgColor(g.theme.bg);
setClipRect(x, y, x2, y2);
exports.setClipRect(x, y, x2, y2);
g.clearRect(x, y, x2, y2);
g.setFont(options.bodyFont).setFontAlign(-1, -1);
let lineY = this.scrollY;
@ -127,7 +127,7 @@ BodyBox.prototype.draw = function(messageRect, yOffset) {
}
};
let MessageBox = function(msg, yOffset) {
MessageBox = function(msg, yOffset) {
this.msg = msg;
this.yOffset = yOffset ?? 0;
this.xOffset = 0;
@ -183,11 +183,11 @@ MessageBox.prototype.draw = function() {
this.rect.x2 = Bangle.appRect.x2 + this.xOffset;
this.rect.y = Bangle.appRect.y + this.yOffset;
this.rect.y2 = Bangle.appRect.y2 + this.yOffset;
setClipRect(this.rect.x, this.rect.y, this.rect.x2, this.rect.y2);
exports.setClipRect(this.rect.x, this.rect.y, this.rect.x2, this.rect.y2);
g.clearRect(this.rect.x, this.rect.y, this.rect.x2, this.rect.y2);
this.headerBox.draw(this.rect);
this.bodyBox.draw(this.rect, this.headerBox.h);
setClipRect(this.rect.x, this.rect.y, this.rect.x2, this.rect.y2);
exports.setClipRect(this.rect.x, this.rect.y, this.rect.x2, this.rect.y2);
this.drawScrollbar();
//this.drawFooter();
};
@ -254,3 +254,4 @@ MessageBox.prototype.scroll = function(dy) {
module.exports.MessageBox = MessageBox;
module.exports.setOptions = this.setOptions;
module.exports.setClipRect = this.setClipRect;

View File

@ -1,37 +1,39 @@
Bangle.MESSAGES = [
{"t":"add","id":1720281666,"src":"SMS Message","title":"Hayley Thiessen, Wifey","subject":"",
"body":"5 * short message *5",
"sender":"","positive":true,"negative":true,"new":true,"handled":true, "show": true},
{"t":"add","id":1720281662,"src":"SMS Message","title":"Hayley Thiessen, Wifey","subject":"",
"body":"1 ***** This is a long message from my wife. I want to make it take up more than a screenful. That way we can test out scrolling. ****1",
"sender":"","positive":true,"negative":true,"new":false,"handled":true, "show": true},
{"t":"add","id":1720281663,"src":"SMS Message","title":"Hayley Thiessen, Wifey","subject":"",
"body":"2 ***** This is a long message from my wife. I want to make it take up more than a screenful. That way we can test out scrolling. ****2",
"sender":"","positive":true,"negative":true,"new":false,"handled":true, "show": true},
{"t":"add","id":1720281667,"src":"SMS Message","title":"Hayley Thiessen","subject":"",
"body":"6 * short message *6",
"sender":"","positive":true,"negative":true,"new":false,"handled":true, "show": true},
{"t":"add","id":1720281664,"src":"SMS Message","title":"Hayley Thiessen, Wifey","subject":"",
"body":"3 ***** This is a long message from my wife. I want to make it take up more than a screenful. That way we can test out scrolling. ****3",
"sender":"","positive":true,"negative":true,"new":true,"handled":true, "show": true},
{"t":"add","id":1720281665,"src":"SMS Message","title":"Hayley Thiessen, Wifey","subject":"",
"body":"4 ***** This is a long message from my wife. I want to make it take up more than a screenful. That way we can test out scrolling. ****4",
"sender":"","positive":true,"negative":true,"new":false,"handled":true, "show": true},
];
// Bangle.MESSAGES = [
// {"t":"add","id":1720281666,"src":"SMS Message","title":"Hayley Thiessen, Wifey","subject":"",
// "body":"5 * short message *5",
// "sender":"","positive":true,"negative":true,"new":true,"handled":true, "show": true},
//
// {"t":"add","id":1720281662,"src":"SMS Message","title":"Hayley Thiessen, Wifey","subject":"",
// "body":"1 ***** This is a long message from my wife. I want to make it take up more than a screenful. That way we can test out scrolling. ****1",
// "sender":"","positive":true,"negative":true,"new":false,"handled":true, "show": true},
//
// {"t":"add","id":1720281663,"src":"SMS Message","title":"Hayley Thiessen, Wifey","subject":"",
// "body":"2 ***** This is a long message from my wife. I want to make it take up more than a screenful. That way we can test out scrolling. ****2",
// "sender":"","positive":true,"negative":true,"new":false,"handled":true, "show": true},
//
// {"t":"add","id":1720281667,"src":"SMS Message","title":"Hayley Thiessen","subject":"",
// "body":"6 * short message *6",
// "sender":"","positive":true,"negative":true,"new":false,"handled":true, "show": true},
//
// {"t":"add","id":1720281664,"src":"SMS Message","title":"Hayley Thiessen, Wifey","subject":"",
// "body":"3 ***** This is a long message from my wife. I want to make it take up more than a screenful. That way we can test out scrolling. ****3",
// "sender":"","positive":true,"negative":true,"new":true,"handled":true, "show": true},
//
// {"t":"add","id":1720281665,"src":"SMS Message","title":"Hayley Thiessen, Wifey","subject":"",
// "body":"4 ***** This is a long message from my wife. I want to make it take up more than a screenful. That way we can test out scrolling. ****4",
// "sender":"","positive":true,"negative":true,"new":false,"handled":true, "show": true},
//
// ];
let idle = false;
let haveNewMessage = false;
let previousActive;
let active;
let buzzing;
let events = {};
let timeouts = {};
let cleanup = function() {}; // we don't want cleanup function to do anything until we actually need it
const goBack = function(timedOut) {
switch (previousActive) {
@ -43,16 +45,32 @@ const goBack = function(timedOut) {
default:
if (!timedOut) Bangle.MESSAGES.forEach((m) => {if (!m.new) m.show = false;});
require("messages").write(Bangle.MESSAGES);
cleanup();
cleanup = _cleanup;
Bangle.showClock();
}
};
const cleanup = function() {
const setListener = function(event, callback) {
if (!event || !callback) return;
console.log("setListener");
events[event] = callback;
Bangle.on(event, callback);
};
}
const _cleanup = function() {
for (let e in events) if (e) Bangle.removeListener(e, events[e]);
for (let t in timeouts) if (timeouts[t]) clearTimeout(timeouts[t]);
};
const clearTimeouts = function() {
for (let t in timeouts) if (timeouts[t]) clearTimeout(timeouts[t]);
};
// placeholder functions
const showNoMessages = function() {
};
const showMusic = function() {
};
@ -87,14 +105,13 @@ const showCall = function() {
Bangle.loadWidgets();
require("widget_utils").hide();
events.saveMessages = function(messages) {
require("messages").write(messages);
events.saveMessages = function() {
require("messages").write(Bangle.MESSAGES);
};
E.on("kill", events.saveMessages);
events.newMessage = (type, msg) => {
const newMessage = (type, msg) => {
console.log("new message");
if (type === "text" && active === "message") {
require("messages").apply(msg, Bangle.MESSAGES);
@ -102,10 +119,10 @@ events.newMessage = (type, msg) => {
else haveNewMessage = true; // otherwise set new message flag and wait until idle
}
// TODO deal with other types of messages
}
Bangle.on("message", events.newMessage);
};
setListener("message", newMessage);
// Check for new messages, wait until there is no interaction for idleTime ms
// Check for new messages, wait until there is no interaction for `idleTime` ms
const checkForNewMessages = function(idleTime) {
console.log("checkForNewMessages");
idleTime = idleTime ?? 3000; // how much time without interaction before we are considered idle
@ -130,64 +147,68 @@ const setBusy = function() {
};
/**
* @param allMessages {array} all messages
* @param showAll {bool} true to show all messages, false to only show new messages, default: false
* @param num {number}
*/
const showText = function(allMessages, showAll) {
const showText = function(showAll) {
Bangle.setUI(); // make sure to clear setUI from anything previous
if (active != "message") previousActive = active;
active = "message";
setBusy(); // busy until everything is set up
let switching = false;
active = "message";
let MessageBox = require("messagebox").MessageBox;
require("messagebox").setOptions({fh: 30});
const step = 89;
require("messagebox").setOptions({fh: 20});
const step = 42;
const delay = 30;
const swipeThreshold = 20;
let mode = "scroll"; // one of "scroll", "next", "prev" (switch to next/prev message), "swipe" (swipe to delete or archive)
let messageNum = 0;
// TODO we might have to append array of (m.show && !m.new) to array of m.new so that all new messages are at the beginning of list
let messageList = showAll ? allMessages : allMessages.filter(m => m.new || m.show);
let messageList = showAll ? Bangle.MESSAGES : Bangle.MESSAGES.filter(m => m.new || m.show);
if (!messageList.length) {
console.log("No messages")
return;
}
Bangle.setLocked(false); // TODO make as option
Bangle.setLCDPower(true); // TODO make as option
// Bangle.setLocked(false); // TODO make as option
// Bangle.setLCDPower(true); // TODO make as option
let msgBoxes = [];
let i = 0;
for (let msg of messageList) {
msgBoxes[i] = new MessageBox(msg);
if (i == messageNum - 1) msgBoxes[i].yOffset = MessageBox.prototype.prevOffset;
else if (i == messageNum) msgBoxes[i].yOffset = 0;
else if ( i == messageNum + 1) msgBoxes[i].yOffset = MessageBox.prototype.nextOffset;
if (i === messageNum - 1) msgBoxes[i].yOffset = MessageBox.prototype.prevOffset;
else if (i === messageNum) {
msgBoxes[i].yOffset = 0;
msgBoxes[i].draw();
}
else if ( i === messageNum + 1) msgBoxes[i].yOffset = MessageBox.prototype.nextOffset;
i++;
}
const drawFooter = function() {
let fh = 10; // footer height
let fh = 20; // footer height
// left hint: swipe from left for main menu
g.reset().clearRect(Bangle.appRect.x, Bangle.appRect.y2-fh, Bangle.appRect.x2, Bangle.appRect.y2)
.setFont(fontTiny)
g.reset().setBgColor(g.theme.bg2).clearRect(Bangle.appRect.x, Bangle.appRect.y2-fh, Bangle.appRect.x2, Bangle.appRect.y2)
.setFont("6x15") // TODO make as option
.setFontAlign(-1, 1) // bottom left
.drawString(
"\0"+atob("CAiBAEgkEgkSJEgA"), // >>
//"\0"+atob("CAiBAEgkEgkSJEgA"), // >>
">>",
Bangle.appRect.x + 1, Bangle.appRect.y2
);
// center message count+hints: swipe up/down for next/prev message
const footer = ` ${messageNum+1}/${messageList.length} `;
const footer = ` ${messageNum + 1}/${msgBoxes.length} `;
const fw = g.stringWidth(footer);
g.setFontAlign(0, 1); // bottom center
g.drawString(footer, Bangle.appRect.x+Bangle.appRect.w/2, Bangle.appRect.y2);
if (messageNum < Bangle.MESSAGES.length - 1 && this.bottom)
g.drawString("\0"+atob("CAiBAABBIhRJIhQI"), Bangle.appRect.x+Bangle.appRect.w/2-fw/2, Bangle.appRect.y2); // v swipe to next
if (messageNum > 0 && this.top)
g.drawString("\0"+atob("CAiBABAoRJIoRIIA"), Bangle.appRect.x+Bangle.appRect.w/2+fw/2, Bangle.appRect.y2); // ^ swipe to prev
if (messageNum < Bangle.MESSAGES.length - 1 && msgBoxes[messageNum].bottom)
g.drawString("\0"+atob("CAiBAABBIhRJIhQI"), Bangle.appRect.x+Bangle.appRect.w/2-fw/2 - 20, Bangle.appRect.y2); // v swipe to next
if (messageNum > 0 && msgBoxes[messageNum].top)
g.drawString("\0"+atob("CAiBABAoRJIoRIIA"), Bangle.appRect.x+Bangle.appRect.w/2+fw/2 + 20, Bangle.appRect.y2); // ^ swipe to prev
// right hint: swipe from right for message actions
g.setFontAlign(1, 1) // bottom right
.drawString(
"\0"+atob("CAiBABIkSJBIJBIA"), // <<
//"\0"+atob("CAiBABIkSJBIJBIA"), // <<
"<<",
Bangle.appRect.x2 - 1, Bangle.appRect.y2
);
};
@ -198,28 +219,33 @@ const showText = function(allMessages, showAll) {
if (messageNum > 0) msgBoxes[messageNum - 1].reset(MessageBox.prototype.prevOffset);
if (messageNum < msgBoxes.length - 1) msgBoxes[messageNum + 1].reset(MessageBox.prototype.nextOffset);
}
}
};
const removeMessage = function() {
const removeAndReset = () => {
allMessages = allMessages.filter((m) => m.id != msgBoxes[messageNum.id]); // remove from messages array
let id = msgBoxes[messageNum].id;
Bangle.MESSAGES.filter(m => m.id !== id);
msgBoxes.splice(messageNum, 1); // remove from msgBoxes
if (messageNum == msgBoxes.length) messageNum--; // we removed the last message, go to previous message
// otherwise messageNum is automatically the index of the next message now
if (messageNum < 0) {
if (!msgBoxes.length) {
Bangle.setUI();
return goBack(); // no more messages
}
if (messageNum == msgBoxes.length) messageNum--; // we removed the last message, go to previous message
// otherwise messageNum is automatically the index of the next message now
refresh();
msgBoxes[messageNum].draw();
drawFooter();
};
if (messageNum < msgBoxes.length - 1) {
require("messagebox").setClipRect(Bangle.appRect.x, Bangle.appRect.y, Bangle.appRect.x2, Bangle.appRect.y2);
g.setBgColor(g.theme.bg).clear();
toNext(true).then(() => {
removeAndReset();
switching = false;
});
} else if (messageNum > 0) {
require("messagebox").setClipRect(Bangle.appRect.x, Bangle.appRect.y, Bangle.appRect.x2, Bangle.appRect.y2);
g.setBgColor(g.theme.bg).clear();
toPrev(true).then(() => {
removeAndReset();
switching = false;
@ -316,12 +342,13 @@ const showText = function(allMessages, showAll) {
clearTimeout(timeouts.animID);
timeouts.animID = undefined;
}
const endX = Bangle.appRect.x + (Bangle.appRect.w / 2);
const msgBox = msgBoxes[messageNum];
return new Promise((resolve, _reject) => {
let animate = () => {
msgBox.xOffset -= step
drawLeftBackground();
if (msgBox.xOffset <= Bangle.appRect.x - Bangle.appRect.w) {
if (msgBox.xOffset <= endX) {
return resolve();
} else {
msgBox.draw();
@ -338,12 +365,13 @@ const showText = function(allMessages, showAll) {
clearTimeout(timeouts.animID);
timeouts.animID = undefined;
}
const endX = Bangle.appRect.x2 - (Bangle.appRect.w / 2);
const msgBox = msgBoxes[messageNum];
return new Promise((resolve, _reject) => {
let animate = () => {
msgBox.xOffset += step
msgBox.xOffset += step;
drawRightBackground();
if (msgBox.xOffset >= Bangle.appRect.x2) {
if (msgBox.xOffset >= endX) {
return resolve();
} else {
msgBox.draw();
@ -357,42 +385,62 @@ const showText = function(allMessages, showAll) {
let firstTouch = true;
const handler = function(e) {
if (switching) return; // don't repond to touch while we are animating
if (firstTouch) {
if (e.b === 0) {
firstTouch = true;
}
console.log("top of handler: first touch = ", firstTouch);
// console.log("top of handler: e = ", e);
if (switching) return; // don't respond to touch while we are animating
if (firstTouch && e.b === 1) {
if (buzzing) {
require("messages").stopBuzz();
buzzing = false;
}
setBusy();
if (e.dy > 0 && msgBoxes[messageNum].top) {
let idx = Bangle.MESSAGES.findIndex(m => m.id === msgBoxes[messageNum].msg.id); // TODO maybe we don't to do this check every time
if (idx >= 0) delete Bangle.MESSAGES[idx].new;
msgBoxes[messageNum].clearNew();
console.log("do tests");
console.log("dy, dx", e.dy, e.dx);
console.log("e", e);
if (Math.abs(e.dy) > Math.abs(e.dx)) {
firstTouch = false;
mode = "prev";
} else if (e.dy < 0 && msgBoxes[messageNum].bottom) {
firstTouch = false;
mode = "next";
console.log("up down");
if (e.dy > 0 && msgBoxes[messageNum].top) {
mode = "prev";
} else if (msgBoxes[messageNum].bottom) { // e.dy will be < 0 here
mode = "next";
} else {
mode = "scroll";
}
} else if (Math.abs(e.dx) > Math.abs(e.dy)) {
firstTouch = false;
if (e.dx < 0) mode = "left";
else mode = "right";
} else if (Math.abs(e.dy) > 0) {
firstTouch = false;
mode = "scroll";
console.log("left right");
if (e.dx < 0) {
mode = "left";
} else {
mode = "right";
}
} else {
mode = undefined;
return;
}
}
if (e.b == 0) { // released finger, reset firstTouch for next time
console.log("should call checkForNewMessages()");
checkForNewMessages();
firstTouch = true;
}
delete messageList[messageNum].new;
msgBoxes[messageNum].clearNew();
if (mode == "scroll") scrollHandler(e.dy);
if (mode == "scroll") scrollHandler(e);
else if (mode == "left") leftHandler(e); // remove from phone and watch
else if (mode == "right") rightHandler(e); // remove from watch only
else if (mode == "next") nextHandler(e.dy);
else if (mode == "prev") prevHandler(e.dy);
else if (mode == "next") nextHandler(e);
else if (mode == "prev") prevHandler(e);
};
const nextHandler = function(dy) {
const nextHandler = function(e) {
console.log("nextHandler");
console.log(e);
if (e.b == 0) {
console.log("firstTouch = ", firstTouch);
checkForNewMessages();
// firstTouch = true;
}
if (messageNum == msgBoxes.length - 1) return; // already on last message
switching = true;
toNext().then(() => {
@ -400,7 +448,11 @@ const showText = function(allMessages, showAll) {
});
};
const prevHandler = function(dy) {
const prevHandler = function(e) {
if (e.b == 0) {
checkForNewMessages();
// firstTouch = true;
}
if (messageNum == 0) return; // already on first message
switching = true;
toPrev().then(() => {
@ -411,6 +463,7 @@ const showText = function(allMessages, showAll) {
const leftHandler = function(e) {
const msgBox = msgBoxes[messageNum];
if (e.b == 0) {
// firstTouch = true;
if (msgBox.xOffset > -swipeThreshold) {
msgBox.xOffset = 0;
msgBox.draw();
@ -418,9 +471,11 @@ const showText = function(allMessages, showAll) {
} else {
switching = true;
animateToLeft().then(() => {
g.setBgColor(g.theme.bg);
dismissOnPhone();
removeMessage();
switching = false;
checkForNewMessages();
});
}
return;
@ -435,6 +490,7 @@ const showText = function(allMessages, showAll) {
const rightHandler = function(e) {
const msgBox = msgBoxes[messageNum];
if (e.b == 0) {
// firstTouch = true;
if (msgBox.xOffset < swipeThreshold) {
msgBox.xOffset = 0;
msgBox.draw();
@ -442,8 +498,10 @@ const showText = function(allMessages, showAll) {
} else {
switching = true;
animateToRight().then(() => {
g.setBgColor(g.theme.bg);
removeMessage();
switching = false;
checkForNewMessages();
});
}
return;
@ -453,16 +511,21 @@ const showText = function(allMessages, showAll) {
drawRightBackground();
msgBox.draw();
drawFooter();
}
};
const scrollHandler = function(dy) {
msgBoxes[messageNum].scroll(dy);
const scrollHandler = function(e) {
if (e.b === 0) {
// firstTouch = true;
checkForNewMessages();
}
msgBoxes[messageNum].scroll(e.dy);
};
Bangle.setUI({
mode: "custom",
drag: e => handler(e),
btn: _e => goBack(),
remove: cleanup
});
msgBoxes[messageNum].draw();
@ -470,4 +533,15 @@ const showText = function(allMessages, showAll) {
checkForNewMessages();
};
showText(Bangle.MESSAGES);
if (!Bangle.MESSAGES || !Bangle.MESSAGES.length) {
Bangle.MESSAGES = require("messages").getMessages();
}
if (!Bangle.MESSAGES.length) showNoMessages();
if (Bangle.notify) { // this is set in messagecenter.notify.js
buzzing = true;
require("messages").buzz(Bangle.MESSAGES[0].src);
delete Bangle.notify;
}
showText(true);

3
messagecenter.boot.js Normal file
View File

@ -0,0 +1,3 @@
(function() {
Bangle.on("message", require("messagegui").messageListener);
})();

5
messagecenter.info Normal file
View File

@ -0,0 +1,5 @@
{
"id": "messagecenter",
"name": "Message Center",
"src": "messagecenter.app.js"
}

5
messagecenter.notify.js Normal file
View File

@ -0,0 +1,5 @@
{
Bangle.setUI({mode: "custom", remove: () => {}}); // we want to fast load and not remove anything we set here
Bangle.notify = true;
Bangle.load("messagecenter.app.js");
}

View File

@ -1,3 +1,14 @@
exports.messageListener = function(_type, _msg) {
return;
const loadWillReset = () => Bangle.load === load || !Bangle.uiRemove;
exports.messageListener = function(type, msg) {
if (msg.handled || global.__FILE__ === "messagecenter.app.js") return; // already handled or in the app
if (type === "text") {
msg.show = true;
msg.new = true;
if (!Bangle.MESSAGES || !Bangle.MESSAGES.length) Bangle.MESSAGES = require("messages").getMessages(msg);
require("messages").apply(msg, Bangle.MESSAGES);
if (loadWillReset()) require("messages").write(Bangle.MESSAGES);
Bangle.notify = true;
Bangle.load("messagecenter.notify.js");
}
}

24
metadata.json Normal file
View File

@ -0,0 +1,24 @@
{
"id": "messagecenter",
"name": "Message Center",
"shortName": "MessageCenter",
"version": "0.01",
"description": "App to display notifications from iOS and Gadgetbridge/Android",
"icon": "app.png",
"type": "app",
"tags": "tool,system",
"supports": ["BANGLEJS2"],
"dependencies" : { "messageicons": "module" },
"provides_modules": ["messagegui", "messagebox"],
"default": true,
"readme": "README.md",
"storage": [
{"name": "messagegui", "url": "messagegui.lib.js"},
{"name": "messagebox", "url": "messagebox.lib.js"},
{"name": "messagecenter.app.js", "url": "messagecenter.app.js"},
{"name": "messagecenter.notify.js", "url": "messagecenter.notify.js"},
{"name": "messagecenter.boot.js", "url": "messagecenter.boot.js"},
{"name": "messagegui.img", "url": "app-icon.js", "evaluate":true}
],
"sortorder": -9
}