474 lines
14 KiB
JavaScript
474 lines
14 KiB
JavaScript
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 events = {};
|
|
let timeouts = {};
|
|
|
|
const goBack = function(timedOut) {
|
|
switch (previousActive) {
|
|
case "alarm": return showAlarm();
|
|
case "call": return showCall();
|
|
case "message": return showMessage();
|
|
case "map": return showMap();
|
|
case "music": return showMusic();
|
|
default:
|
|
if (!timedOut) Bangle.MESSAGES.forEach((m) => {if (!m.new) m.show = false;});
|
|
require("messages").write(Bangle.MESSAGES);
|
|
cleanup();
|
|
Bangle.showClock();
|
|
}
|
|
};
|
|
|
|
const cleanup = function() {
|
|
|
|
}
|
|
|
|
// placeholder functions
|
|
const showMusic = function() {
|
|
|
|
};
|
|
|
|
const showMap = function() {
|
|
|
|
};
|
|
|
|
const showAlarm = function() {
|
|
|
|
};
|
|
|
|
const showCall = function() {
|
|
|
|
};
|
|
//let settings = require('Storage').readJSON("messages.settings.json", true) || {};
|
|
//const settings = () => require("messagegui").settings();
|
|
const fontTiny = "6x8"; // fixed size, don't use this for important things
|
|
let fontNormal;
|
|
// setFont() is also called after we close the settings screen
|
|
// const setFont = function() {
|
|
// const fontSize = settings().fontSize;
|
|
// if (fontSize===0) // small
|
|
// fontNormal = g.getFonts().includes("6x15") ? "6x15" : "6x8:2";
|
|
// else if (fontSize===2) // large
|
|
// fontNormal = g.getFonts().includes("6x15") ? "6x15:2" : "6x8:4";
|
|
// else // medium
|
|
// fontNormal = g.getFonts().includes("12x20") ? "12x20" : "6x8:3";
|
|
// };
|
|
// setFont();
|
|
|
|
Bangle.loadWidgets();
|
|
require("widget_utils").hide();
|
|
|
|
|
|
events.saveMessages = function(messages) {
|
|
require("messages").write(messages);
|
|
};
|
|
|
|
E.on("kill", events.saveMessages);
|
|
|
|
events.newMessage = (type, msg) => {
|
|
console.log("new message");
|
|
if (type === "text" && active === "message") {
|
|
require("messages").apply(msg, Bangle.MESSAGES);
|
|
if (idle) showText(Bangle.MESSAGES); // we are idle so show new messages right away
|
|
else haveNewMessage = true; // otherwise set new message flag and wait until idle
|
|
}
|
|
// TODO deal with other types of messages
|
|
}
|
|
Bangle.on("message", events.newMessage);
|
|
|
|
// 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
|
|
console.log("idleTime = ", idleTime);
|
|
idle = false;
|
|
if (timeouts.idleTimer) clearTimeout(timeouts.idleTimer);
|
|
timeouts.idleTimer = setTimeout(() => {
|
|
console.log("update messages");
|
|
if (haveNewMessage) {
|
|
console.log("call showText()");
|
|
haveNewMessage = false;
|
|
showText(Bangle.MESSAGES);
|
|
}
|
|
idle = true;
|
|
}, idleTime);
|
|
};
|
|
|
|
const setBusy = function() {
|
|
idle = false;
|
|
if (timeouts.idleTimer) clearTimeout(timeouts.idleTimer);
|
|
timeouts.idleTimer = undefined;
|
|
};
|
|
|
|
/**
|
|
* @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) {
|
|
Bangle.setUI(); // make sure to clear setUI from anything previous
|
|
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;
|
|
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);
|
|
if (!messageList.length) {
|
|
console.log("No messages")
|
|
return;
|
|
}
|
|
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;
|
|
i++;
|
|
}
|
|
|
|
const drawFooter = function() {
|
|
let fh = 10; // 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)
|
|
.setFontAlign(-1, 1) // bottom left
|
|
.drawString(
|
|
"\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 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
|
|
// right hint: swipe from right for message actions
|
|
g.setFontAlign(1, 1) // bottom right
|
|
.drawString(
|
|
"\0"+atob("CAiBABIkSJBIJBIA"), // <<
|
|
Bangle.appRect.x2 - 1, Bangle.appRect.y2
|
|
);
|
|
};
|
|
|
|
const refresh = function() {
|
|
if (messageNum >= 0 && messageNum < msgBoxes.length) {
|
|
msgBoxes[messageNum].reset();
|
|
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
|
|
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) {
|
|
Bangle.setUI();
|
|
return goBack(); // no more messages
|
|
}
|
|
refresh();
|
|
msgBoxes[messageNum].draw();
|
|
drawFooter();
|
|
};
|
|
if (messageNum < msgBoxes.length - 1) {
|
|
toNext(true).then(() => {
|
|
removeAndReset();
|
|
switching = false;
|
|
});
|
|
} else if (messageNum > 0) {
|
|
toPrev(true).then(() => {
|
|
removeAndReset();
|
|
switching = false;
|
|
});
|
|
} else {
|
|
removeAndReset();
|
|
}
|
|
};
|
|
|
|
const dismissOnPhone = function() {
|
|
return Bangle.messageResponse(msgBoxes[messageNum].msg, false); // false to dismiss, true to open on phone
|
|
};
|
|
|
|
const toNext = function(removeCurrent) {
|
|
if (removeCurrent == undefined) removeCurrent = false;
|
|
if (timeouts.animID){
|
|
clearTimeout(timeouts.animID);
|
|
timeouts.animID = undefined;
|
|
}
|
|
firstTouch = true;
|
|
return new Promise((resolve, _reject) => {
|
|
let animate = () => {
|
|
msgBoxes[messageNum].yOffset -= step;
|
|
msgBoxes[messageNum + 1].yOffset -= step;
|
|
if (msgBoxes[messageNum + 1].yOffset <= 0) {
|
|
if (!removeCurrent) {
|
|
if (messageNum < msgBoxes.length) {
|
|
messageNum++;
|
|
refresh();
|
|
}
|
|
}
|
|
msgBoxes[messageNum].draw();
|
|
drawFooter();
|
|
return resolve();
|
|
} else {
|
|
msgBoxes[messageNum].draw();
|
|
msgBoxes[messageNum + 1].draw();
|
|
drawFooter();
|
|
timeouts.animID = setTimeout(animate, delay);
|
|
}
|
|
};
|
|
animate();
|
|
});
|
|
};
|
|
|
|
const toPrev = function(removeCurrent) {
|
|
if (removeCurrent == undefined) removeCurrent = false;
|
|
if (timeouts.animID){
|
|
clearTimeout(timeouts.animID);
|
|
timeouts.animID = undefined;
|
|
}
|
|
firstTouch = true;
|
|
return new Promise((resolve, _reject) => {
|
|
let animate = () => {
|
|
msgBoxes[messageNum].yOffset += step;
|
|
msgBoxes[messageNum - 1].yOffset += step;
|
|
if (msgBoxes[messageNum - 1].yOffset >= 0) {
|
|
if (!removeCurrent) {
|
|
if (messageNum > 0) {
|
|
messageNum--;
|
|
refresh();
|
|
}
|
|
}
|
|
msgBoxes[messageNum].draw();
|
|
drawFooter();
|
|
return resolve();
|
|
} else {
|
|
msgBoxes[messageNum].draw();
|
|
msgBoxes[messageNum - 1].draw();
|
|
drawFooter();
|
|
timeouts.animID = setTimeout(animate, delay);
|
|
}
|
|
};
|
|
animate();
|
|
});
|
|
};
|
|
|
|
const drawLeftBackground = function() {
|
|
g.setBgColor(1, 0.5, 0); // red
|
|
g.setClipRect(Bangle.appRect.x, Bangle.appRect.y, Bangle.appRect.x2, Bangle.appRect.y2);
|
|
g.clearRect(Bangle.appRect.x, Bangle.appRect.y, Bangle.appRect.x2, Bangle.appRect.y2);
|
|
g.setBgColor(g.theme.bg);
|
|
};
|
|
|
|
const drawRightBackground = function() {
|
|
g.setBgColor(0, 0.5, 1); // red
|
|
g.setClipRect(Bangle.appRect.x, Bangle.appRect.y, Bangle.appRect.x2, Bangle.appRect.y2);
|
|
g.clearRect(Bangle.appRect.x, Bangle.appRect.y, Bangle.appRect.x2, Bangle.appRect.y2);
|
|
g.setBgColor(g.theme.bg);
|
|
};
|
|
|
|
const animateToLeft = function() {
|
|
if (timeouts.animID) {
|
|
clearTimeout(timeouts.animID);
|
|
timeouts.animID = undefined;
|
|
}
|
|
const msgBox = msgBoxes[messageNum];
|
|
return new Promise((resolve, _reject) => {
|
|
let animate = () => {
|
|
msgBox.xOffset -= step
|
|
drawLeftBackground();
|
|
if (msgBox.xOffset <= Bangle.appRect.x - Bangle.appRect.w) {
|
|
return resolve();
|
|
} else {
|
|
msgBox.draw();
|
|
drawFooter();
|
|
timeouts.animID = setTimeout(animate, delay);
|
|
}
|
|
};
|
|
animate();
|
|
});
|
|
};
|
|
|
|
const animateToRight = function() {
|
|
if (timeouts.animID) {
|
|
clearTimeout(timeouts.animID);
|
|
timeouts.animID = undefined;
|
|
}
|
|
const msgBox = msgBoxes[messageNum];
|
|
return new Promise((resolve, _reject) => {
|
|
let animate = () => {
|
|
msgBox.xOffset += step
|
|
drawRightBackground();
|
|
if (msgBox.xOffset >= Bangle.appRect.x2) {
|
|
return resolve();
|
|
} else {
|
|
msgBox.draw();
|
|
drawFooter();
|
|
timeouts.animID = setTimeout(animate, delay);
|
|
}
|
|
};
|
|
animate();
|
|
});
|
|
};
|
|
|
|
let firstTouch = true;
|
|
const handler = function(e) {
|
|
if (switching) return; // don't repond to touch while we are animating
|
|
if (firstTouch) {
|
|
setBusy();
|
|
if (e.dy > 0 && msgBoxes[messageNum].top) {
|
|
firstTouch = false;
|
|
mode = "prev";
|
|
} else if (e.dy < 0 && msgBoxes[messageNum].bottom) {
|
|
firstTouch = false;
|
|
mode = "next";
|
|
} 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";
|
|
} 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);
|
|
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);
|
|
};
|
|
|
|
const nextHandler = function(dy) {
|
|
if (messageNum == msgBoxes.length - 1) return; // already on last message
|
|
switching = true;
|
|
toNext().then(() => {
|
|
switching = false;
|
|
});
|
|
};
|
|
|
|
const prevHandler = function(dy) {
|
|
if (messageNum == 0) return; // already on first message
|
|
switching = true;
|
|
toPrev().then(() => {
|
|
switching = false;
|
|
});
|
|
};
|
|
|
|
const leftHandler = function(e) {
|
|
const msgBox = msgBoxes[messageNum];
|
|
if (e.b == 0) {
|
|
if (msgBox.xOffset > -swipeThreshold) {
|
|
msgBox.xOffset = 0;
|
|
msgBox.draw();
|
|
drawFooter();
|
|
} else {
|
|
switching = true;
|
|
animateToLeft().then(() => {
|
|
dismissOnPhone();
|
|
removeMessage();
|
|
switching = false;
|
|
});
|
|
}
|
|
return;
|
|
}
|
|
msgBox.xOffset += e.dx;
|
|
if (msgBox.xOffset > 0) msgBox.xOffset = 0;
|
|
drawLeftBackground();
|
|
msgBox.draw();
|
|
drawFooter();
|
|
};
|
|
|
|
const rightHandler = function(e) {
|
|
const msgBox = msgBoxes[messageNum];
|
|
if (e.b == 0) {
|
|
if (msgBox.xOffset < swipeThreshold) {
|
|
msgBox.xOffset = 0;
|
|
msgBox.draw();
|
|
drawFooter();
|
|
} else {
|
|
switching = true;
|
|
animateToRight().then(() => {
|
|
removeMessage();
|
|
switching = false;
|
|
});
|
|
}
|
|
return;
|
|
}
|
|
msgBox.xOffset += e.dx;
|
|
if (msgBox.xOffset < 0) msgBox.xOffset = 0;
|
|
drawRightBackground();
|
|
msgBox.draw();
|
|
drawFooter();
|
|
}
|
|
|
|
const scrollHandler = function(dy) {
|
|
msgBoxes[messageNum].scroll(dy);
|
|
};
|
|
|
|
Bangle.setUI({
|
|
mode: "custom",
|
|
drag: e => handler(e),
|
|
btn: _e => goBack(),
|
|
});
|
|
|
|
msgBoxes[messageNum].draw();
|
|
drawFooter();
|
|
checkForNewMessages();
|
|
};
|
|
|
|
showText(Bangle.MESSAGES);
|