bryan
/
Bangle_MessageCenter
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

start building SwipeBox

master
Bryan 2024-08-06 08:25:58 -06:00
parent cac70f8e3d
commit 110d93f9da
3 changed files with 72 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
messagebox.lib.js
View File

@ -10,11 +10,11 @@ let options = {
fh: 20, // footer height - leave this much space for a footer fh: 20, // footer height - leave this much space for a footer
}; };
exports.setOptions = function(opts) { setOptions = function(opts) {
options = Object.assign(options, opts); options = Object.assign(options, opts);
}; };
exports.setClipRect = function (x, y, x2, y2) { setClipRect = function (x, y, x2, y2) {
if (y < Bangle.appRect.y) y = Bangle.appRect.y; if (y < Bangle.appRect.y) y = Bangle.appRect.y;
if (y2 < Bangle.appRect.y) y2 = 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; if (y > Bangle.appRect.y2 - 10) y = Bangle.appRect.y2 - options.fh - 1;
@ -97,7 +97,7 @@ HeaderBox.prototype.draw = function(messageRect) {
g.setColor(g.theme.bg).fillRect(x, y2 - 6, x2, y2); // bar at bottom of header g.setColor(g.theme.bg).fillRect(x, y2 - 6, x2, y2); // bar at bottom of header
}; };
const BodyBox = function(msg, messageRect) { const TextBox = function(msg, messageRect) {
if (msg.body) body = msg.body; if (msg.body) body = msg.body;
else body = msg.title; else body = msg.title;
this.lineH = (g.setFont(options.bodyFont).getFontHeight()) + 2; // plus 2 to add a little spacing between lines this.lineH = (g.setFont(options.bodyFont).getFontHeight()) + 2; // plus 2 to add a little spacing between lines
@ -109,9 +109,9 @@ const BodyBox = function(msg, messageRect) {
this.scrollY = this.initScrollY; this.scrollY = this.initScrollY;
this.minY = messageRect.y2 - (this.lineH * (this.lines.length + 3)); this.minY = messageRect.y2 - (this.lineH * (this.lines.length + 3));
if (this.minY > 0) this.minY = 0; if (this.minY > 0) this.minY = 0;
}; // BodyBox }; // TextBox
BodyBox.prototype.draw = function(messageRect, yOffset) { TextBox.prototype.draw = function(messageRect, yOffset) {
x = messageRect.x; x = messageRect.x;
y = messageRect.y + yOffset; y = messageRect.y + yOffset;
x2 = messageRect.x2; x2 = messageRect.x2;
@ -140,21 +140,21 @@ MessageBox = function(msg, yOffset) {
y2: Bangle.appRect.y2 + this.yOffset y2: Bangle.appRect.y2 + this.yOffset
}; };
this.headerBox = new HeaderBox(msg, this.rect); this.headerBox = new HeaderBox(msg, this.rect);
this.bodyBox = new BodyBox(msg, this.rect); this.textBox = new TextBox(msg, this.rect);
let messageH = this.bodyBox.lines.length * this.bodyBox.lineH; let messageH = this.textBox.lines.length * this.textBox.lineH;
let boxH = this.rect.h - this.headerBox.maxH; let boxH = this.rect.h - this.headerBox.maxH;
if ( messageH <= boxH) this.oneScreen = true; if ( messageH <= boxH) this.oneScreen = true;
else this.oneScreen = false; else this.oneScreen = false;
this.top = true; this.top = true;
if (this.oneScreen) { if (this.oneScreen) {
this.bottom = true; this.bottom = true;
this.bodyBox.initScrollY = Math.round((boxH - messageH) / 2); this.textBox.initScrollY = Math.round((boxH - messageH) / 2);
} else { } else {
this.bottom = false; this.bottom = false;
this.bodyBox.initScrollY = 0; this.textBox.initScrollY = 0;
} }
this.sbH = this.rect.h / messageH * this.rect.h; // scrollbar height this.sbH = this.rect.h / messageH * this.rect.h; // scrollbar height
this.sbRatio = (this.rect.h - this.sbH) / Math.abs(this.bodyBox.minY); // scrollbar ratio this.sbRatio = (this.rect.h - this.sbH) / Math.abs(this.textBox.minY); // scrollbar ratio
}; // MessageBox }; // MessageBox
MessageBox.prototype.prevOffset = Bangle.appRect.y - Bangle.appRect.h; MessageBox.prototype.prevOffset = Bangle.appRect.y - Bangle.appRect.h;
@ -172,7 +172,7 @@ MessageBox.prototype.reset = function(yOffset) {
if (!yOffset) yOffset = 0; if (!yOffset) yOffset = 0;
this.yOffset = yOffset; this.yOffset = yOffset;
this.headerBox.h = this.headerBox.maxH; this.headerBox.h = this.headerBox.maxH;
this.bodyBox.scrollY = this.bodyBox.initScrollY; this.textBox.scrollY = this.textBox.initScrollY;
this.top = true; this.top = true;
if (this.oneScreen) this.bottom = true; if (this.oneScreen) this.bottom = true;
else this.bottom = false; else this.bottom = false;
@ -186,7 +186,7 @@ MessageBox.prototype.draw = function() {
exports.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); g.clearRect(this.rect.x, this.rect.y, this.rect.x2, this.rect.y2);
this.headerBox.draw(this.rect); this.headerBox.draw(this.rect);
this.bodyBox.draw(this.rect, this.headerBox.h); this.textBox.draw(this.rect, this.headerBox.h);
exports.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.drawScrollbar();
//this.drawFooter(); //this.drawFooter();
@ -194,7 +194,7 @@ MessageBox.prototype.draw = function() {
MessageBox.prototype.drawScrollbar = function() { MessageBox.prototype.drawScrollbar = function() {
if (this.oneScreen) return; if (this.oneScreen) return;
let sbY = this.rect.y + (this.sbRatio * Math.abs(this.bodyBox.scrollY)); let sbY = this.rect.y + (this.sbRatio * Math.abs(this.textBox.scrollY));
g.setColor(g.theme.fg).drawLine(this.rect.x, sbY, this.rect.x, sbY + this.sbH); g.setColor(g.theme.fg).drawLine(this.rect.x, sbY, this.rect.x, sbY + this.sbH);
}; };
@ -209,17 +209,17 @@ MessageBox.prototype.scroll = function(dy) {
this.headerBox.h += dy; this.headerBox.h += dy;
if (this.headerBox.h > this.headerBox.maxH) this.headerBox.h = this.headerBox.maxH; if (this.headerBox.h > this.headerBox.maxH) this.headerBox.h = this.headerBox.maxH;
} }
if (this.headerBox.h == this.headerBox.minH && dy < 0) this.bodyBox.scrollY += dy; if (this.headerBox.h == this.headerBox.minH && dy < 0) this.textBox.scrollY += dy;
else if (dy > 0) this.bodyBox.scrollY += dy; else if (dy > 0) this.textBox.scrollY += dy;
if (this.bodyBox.scrollY <= this.bodyBox.minY) { if (this.textBox.scrollY <= this.textBox.minY) {
this.bottom = true; this.bottom = true;
this.bodyBox.scrollY = this.bodyBox.minY; this.textBox.scrollY = this.textBox.minY;
} else { } else {
this.bottom = false; this.bottom = false;
} }
if (this.bodyBox.scrollY >= 0 && this.headerBox.h == this.headerBox.maxH) { if (this.textBox.scrollY >= 0 && this.headerBox.h == this.headerBox.maxH) {
this.top = true; this.top = true;
this.bodyBox.scrollY = this.bodyBox.initScrollY; this.textBox.scrollY = this.textBox.initScrollY;
} else { } else {
this.top = false; this.top = false;
} }
@ -227,7 +227,33 @@ MessageBox.prototype.scroll = function(dy) {
}; };
SwipeBox = function(msg, screenRect) {
this.screenRect = screenRect;
console.log("screenRect = ", screenRect);
console.log("this.screenRect = ", this.screenRect);
this.headerBox = new HeaderBox(msg, screenRect);
//this.bodyRect = {x: screenRect.x, y: screenRect.y + headerBox.h, x2: screenRect.x2, y2: screenRect.y2};
};
SwipeBox.prototype.draw = function(xOffset) {
const x = this.screenRect.x, y = this.screenRect.y + this.headerBox.h, x2 = this.screenRect.x2, y2 = this.screenRect.y2;
const w = x2 - x + 1;
const yOff = 120 - this.headerBox.h;
this.headerBox.draw(this.screenRect);
g.reset();
const drawArrows = function (xOffset) {
g.setColor(1, 0, 0);
g.fillPoly([x-w+xOffset, y+yOff, x+50+xOffset, y+yOff, x+60+xOffset, y+yOff+25, x+50+xOffset, y+yOff+50, x-w+xOffset, y+yOff+50]);
g.setColor(0, 1, 0);
g.fillPoly([x2+w+xOffset, y+yOff, x2-50+xOffset, y+yOff, x2-60+xOffset, y+yOff+25, x2-50+xOffset, y+yOff+50, x2+w+xOffset, y+yOff+50]);
};
drawArrows(xOffset);
};
module.exports.HeaderBox = HeaderBox; module.exports.HeaderBox = HeaderBox;
module.exports.MessageBox = MessageBox; module.exports.MessageBox = MessageBox;
module.exports.setOptions = this.setOptions; module.exports.SwipeBox = SwipeBox;
module.exports.setClipRect = this.setClipRect; module.exports.setOptions = setOptions;
module.exports.setClipRect = setClipRect;

41
messagecenter.app.js
View File

@ -34,7 +34,7 @@ const setActive = function(newActive) {
if (!newActive) return; if (!newActive) return;
if (active && !previous.includes(active) && newActive !== active) previous.push(active); if (active && !previous.includes(active) && newActive !== active) previous.push(active);
active = newActive; active = newActive;
console.log(previous); //console.log(previous);
} }
const setListener = function(event, callback) { const setListener = function(event, callback) {
@ -98,16 +98,21 @@ const showAlarm = function(alarm) {
const showCall = function(call) { const showCall = function(call) {
Bangle.setUI(); // clear from previous Bangle.setUI(); // clear from previous
const HeaderBox = new require("messagebox").HeaderBox; // const HeaderBox = new require("messagebox").HeaderBox;
let header = new HeaderBox(call, Bangle.appRect); // let header = new HeaderBox(call, Bangle.appRect);
g.reset().clear().setFont("12x20") g.reset().clear().setFont("12x20")
header.draw(Bangle.appRect); // header.draw(Bangle.appRect);
let str = g.wrapString(JSON.stringify(call),g.getWidth()).join("\n"); //let str = g.wrapString(JSON.stringify(call),g.getWidth()).join("\n");
g.drawString(str, 0, 60); //g.drawString(str, 0, 60);
console.log("call: ", call); const SwipeBox = require("messagebox").SwipeBox;
const swipeBox = new SwipeBox(call, Bangle.appRect);
let xOff = 0;
swipeBox.draw(xOff);
const handler = function(e) { const handler = function(e) {
console.log(e); xOff += e.dx;
console.log(e, xOff);
g.clear();
swipeBox.draw(xOff);
}; };
Bangle.setUI({ Bangle.setUI({
@ -127,7 +132,7 @@ const showText = function(messageNum) {
else if (messageNum >= Bangle.MESSAGES.length - 1) messageNum = Bangle.MESSAGES.length - 1; else if (messageNum >= Bangle.MESSAGES.length - 1) messageNum = Bangle.MESSAGES.length - 1;
Bangle.setUI(); // make sure to clear setUI from anything previous Bangle.setUI(); // make sure to clear setUI from anything previous
let switching = false; let switching = false;
let MessageBox = require("messagebox").MessageBox; const MessageBox = require("messagebox").MessageBox;
require("messagebox").setOptions({fh: 20}); require("messagebox").setOptions({fh: 20});
const step = 42; const step = 42;
const delay = 30; const delay = 30;
@ -526,8 +531,15 @@ const goBack = function(timedOut) { // TODO do we want this as a stack or by pr
idle = true; idle = true;
if (buzzing) require("messages").stopBuzz(); if (buzzing) require("messages").stopBuzz();
let backTo; let backTo;
if (previous && previous.length) backTo = previous.pop(); if (previous && previous.length) {
console.log("backTo = ", backTo); backTo = previous.pop();
} else {
if (!timedOut) Bangle.MESSAGES.forEach((m) => {if (!m.new) m.show = false;});
require("messages").write(Bangle.MESSAGES);
cleanup = _cleanup;
Bangle.showClock();
}
//console.log("backTo = ", backTo);
switch (backTo) { switch (backTo) {
case "call": return showCall(call); case "call": return showCall(call);
case "map": return showMap(map); case "map": return showMap(map);
@ -538,11 +550,6 @@ const goBack = function(timedOut) { // TODO do we want this as a stack or by pr
if (msgIdx < Bangle.MESSAGES.length) return showText(msgIdx); if (msgIdx < Bangle.MESSAGES.length) return showText(msgIdx);
else return showText(0); else return showText(0);
} }
default:
if (!timedOut) Bangle.MESSAGES.forEach((m) => {if (!m.new) m.show = false;});
require("messages").write(Bangle.MESSAGES);
cleanup = _cleanup;
Bangle.showClock();
} }
}; // function goBack }; // function goBack

1
messagegui.lib.js
View File

@ -11,6 +11,7 @@ exports.messageListener = function(type, msg) {
msg.t = "modify"; // not sure why messages module puts everything as remove except for "incoming" msg.t = "modify"; // not sure why messages module puts everything as remove except for "incoming"
msg.new = true; msg.new = true;
} }
if (msg.t === "add") { if (msg.t === "add") {
require("messages").apply(msg, Bangle.MESSAGES); require("messages").apply(msg, Bangle.MESSAGES);
} else if (msg.t === "modify") { } else if (msg.t === "modify") {