From 110d93f9da294346968e478a2dbe0fbb110992d8 Mon Sep 17 00:00:00 2001 From: Bryan Date: Tue, 6 Aug 2024 08:25:58 -0600 Subject: [PATCH] start building SwipeBox --- messagebox.lib.js | 68 ++++++++++++++++++++++++++++++-------------- messagecenter.app.js | 41 +++++++++++++++----------- messagegui.lib.js | 1 + 3 files changed, 72 insertions(+), 38 deletions(-) diff --git a/messagebox.lib.js b/messagebox.lib.js index aa4c267..75d7c60 100644 --- a/messagebox.lib.js +++ b/messagebox.lib.js @@ -10,11 +10,11 @@ let options = { fh: 20, // footer height - leave this much space for a footer }; -exports.setOptions = function(opts) { +setOptions = function(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 (y2 < Bangle.appRect.y) y2 = Bangle.appRect.y; 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 }; -const BodyBox = function(msg, messageRect) { +const TextBox = function(msg, messageRect) { if (msg.body) body = msg.body; else body = msg.title; 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.minY = messageRect.y2 - (this.lineH * (this.lines.length + 3)); if (this.minY > 0) this.minY = 0; -}; // BodyBox +}; // TextBox -BodyBox.prototype.draw = function(messageRect, yOffset) { +TextBox.prototype.draw = function(messageRect, yOffset) { x = messageRect.x; y = messageRect.y + yOffset; x2 = messageRect.x2; @@ -140,21 +140,21 @@ MessageBox = function(msg, yOffset) { y2: Bangle.appRect.y2 + this.yOffset }; this.headerBox = new HeaderBox(msg, this.rect); - this.bodyBox = new BodyBox(msg, this.rect); - let messageH = this.bodyBox.lines.length * this.bodyBox.lineH; + this.textBox = new TextBox(msg, this.rect); + let messageH = this.textBox.lines.length * this.textBox.lineH; let boxH = this.rect.h - this.headerBox.maxH; if ( messageH <= boxH) this.oneScreen = true; else this.oneScreen = false; this.top = true; if (this.oneScreen) { this.bottom = true; - this.bodyBox.initScrollY = Math.round((boxH - messageH) / 2); + this.textBox.initScrollY = Math.round((boxH - messageH) / 2); } else { this.bottom = false; - this.bodyBox.initScrollY = 0; + this.textBox.initScrollY = 0; } 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.prototype.prevOffset = Bangle.appRect.y - Bangle.appRect.h; @@ -172,7 +172,7 @@ MessageBox.prototype.reset = function(yOffset) { if (!yOffset) yOffset = 0; this.yOffset = yOffset; this.headerBox.h = this.headerBox.maxH; - this.bodyBox.scrollY = this.bodyBox.initScrollY; + this.textBox.scrollY = this.textBox.initScrollY; this.top = true; if (this.oneScreen) this.bottom = true; 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); 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); + this.textBox.draw(this.rect, this.headerBox.h); exports.setClipRect(this.rect.x, this.rect.y, this.rect.x2, this.rect.y2); this.drawScrollbar(); //this.drawFooter(); @@ -194,7 +194,7 @@ MessageBox.prototype.draw = function() { MessageBox.prototype.drawScrollbar = function() { 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); }; @@ -209,17 +209,17 @@ MessageBox.prototype.scroll = function(dy) { this.headerBox.h += dy; 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; - else if (dy > 0) this.bodyBox.scrollY += dy; - if (this.bodyBox.scrollY <= this.bodyBox.minY) { + if (this.headerBox.h == this.headerBox.minH && dy < 0) this.textBox.scrollY += dy; + else if (dy > 0) this.textBox.scrollY += dy; + if (this.textBox.scrollY <= this.textBox.minY) { this.bottom = true; - this.bodyBox.scrollY = this.bodyBox.minY; + this.textBox.scrollY = this.textBox.minY; } else { 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.bodyBox.scrollY = this.bodyBox.initScrollY; + this.textBox.scrollY = this.textBox.initScrollY; } else { 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.MessageBox = MessageBox; -module.exports.setOptions = this.setOptions; -module.exports.setClipRect = this.setClipRect; +module.exports.SwipeBox = SwipeBox; +module.exports.setOptions = setOptions; +module.exports.setClipRect = setClipRect; diff --git a/messagecenter.app.js b/messagecenter.app.js index 42b063a..8cb9edd 100644 --- a/messagecenter.app.js +++ b/messagecenter.app.js @@ -34,7 +34,7 @@ const setActive = function(newActive) { if (!newActive) return; if (active && !previous.includes(active) && newActive !== active) previous.push(active); active = newActive; - console.log(previous); + //console.log(previous); } const setListener = function(event, callback) { @@ -98,16 +98,21 @@ const showAlarm = function(alarm) { const showCall = function(call) { Bangle.setUI(); // clear from previous - const HeaderBox = new require("messagebox").HeaderBox; - let header = new HeaderBox(call, Bangle.appRect); + // const HeaderBox = new require("messagebox").HeaderBox; + // let header = new HeaderBox(call, Bangle.appRect); g.reset().clear().setFont("12x20") - header.draw(Bangle.appRect); - let str = g.wrapString(JSON.stringify(call),g.getWidth()).join("\n"); - g.drawString(str, 0, 60); - console.log("call: ", call); - + // header.draw(Bangle.appRect); + //let str = g.wrapString(JSON.stringify(call),g.getWidth()).join("\n"); + //g.drawString(str, 0, 60); + const SwipeBox = require("messagebox").SwipeBox; + const swipeBox = new SwipeBox(call, Bangle.appRect); + let xOff = 0; + swipeBox.draw(xOff); const handler = function(e) { - console.log(e); + xOff += e.dx; + console.log(e, xOff); + g.clear(); + swipeBox.draw(xOff); }; Bangle.setUI({ @@ -127,7 +132,7 @@ const showText = function(messageNum) { else if (messageNum >= Bangle.MESSAGES.length - 1) messageNum = Bangle.MESSAGES.length - 1; Bangle.setUI(); // make sure to clear setUI from anything previous let switching = false; - let MessageBox = require("messagebox").MessageBox; + const MessageBox = require("messagebox").MessageBox; require("messagebox").setOptions({fh: 20}); const step = 42; const delay = 30; @@ -526,8 +531,15 @@ const goBack = function(timedOut) { // TODO do we want this as a stack or by pr idle = true; if (buzzing) require("messages").stopBuzz(); let backTo; - if (previous && previous.length) backTo = previous.pop(); - console.log("backTo = ", backTo); + if (previous && previous.length) { + 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) { case "call": return showCall(call); 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); 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 diff --git a/messagegui.lib.js b/messagegui.lib.js index bdf7000..d34176a 100644 --- a/messagegui.lib.js +++ b/messagegui.lib.js @@ -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.new = true; } + if (msg.t === "add") { require("messages").apply(msg, Bangle.MESSAGES); } else if (msg.t === "modify") {