Bangle_MessageCenter/messagecenter.app.js

//{

// let settings = require('Storage').readJSON("messages.settings.json", true) || {};
// let settings = () => require("messagegui").settings();
// let fontTiny = "6x8"; // fixed size, don't use this for important things
// let fontNormal;
// setFont() is also called after we close the settings screen
// let setFont = function() {
//   let 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();

let haveNewMessage = false;
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
let previous = [];
let textGid;
let msgId;
let call;
let alarm;
let map;
let music;

let setListener = function(event, callback) {
  if (!event || !callback) return;
  events[event] = callback;
  Bangle.on(event, events[event]);
};

let cleanup = function() {
  for (let e in events) if (e) Bangle.removeListener(e, events[e]);
  console.log(timeouts);
  for (let t in timeouts) clearTimeout(timeouts[t]);
  require("messages").stopBuzz();
  require("widget_utils").show();
};

let clearTimeouts = function() {
  for (let t in timeouts) clearTimeout(timeouts[t]);
};

let setActive = function(newActive) {
  if (!newActive) return;
  if (active && !previous.includes(active) && newActive !== active) previous.push(active);
  active = newActive;
}

let setBusy = function(busy) {
  if (busy) {
    idle = false;
    if (timeouts["idleTimer"]) clearTimeout(timeouts["idleTimer"]);
    timeouts["idleTimer"] = undefined;
  } else {
    const idleTime = 250;	// how much time without interaction before we are considered idle
    if (timeouts["idleTimer"]) clearTimeout(timeouts["idleTimer"]);
    timeouts["idleTimer"] = setTimeout(() => {
      idle = true;
      Bangle.emit("idle");
    }, idleTime);
  }
};

let goBack = function(timedOut) {
  setBusy(false);
  if (buzzing) require("messages").stopBuzz();
  let backTo;
  if (previous && previous.length) {
    backTo = previous.pop();
    clearTimeouts();
  } else {
    if (!timedOut) Bangle.MESSAGES.forEach((m) => {
      if (m.new) delete m.new;
      if (m.show) delete m.show;
    });
    require("messages").write(Bangle.MESSAGES);
    Bangle.setUI({ mode: "custom", remove: cleanup });
    Bangle.showClock();
  }
  switch (backTo) {
    case "call": return showCall();
    case "map": return showMap();
    case "music": return showMusic();
    case "alarm": return showAlarm();
    case "text": return showText(Bangle.MESSAGES, textGid);
  }
}; // goBack

let filterMessages = function() {
  call = Bangle.MESSAGES.find(m => m.type === "call");
  alarm = Bangle.MESSAGES.find(m => m.type === "alarm");
  map = Bangle.MESSAGES.find(m => m.type === "map");
  music = Bangle.MESSAGES.find(m => m.type === "music");
  Bangle.MESSAGES = Bangle.MESSAGES.filter(m => m.type === "text");
  // let newUnhandledTexts = Bangle.MESSAGES.filter(m => m.new && !m.handled);
  // let newHandledTexts = Bangle.MESSAGES.filter(m => m.new && m.handled);
  // let otherTexts = Bangle.MESSAGES.filter(m => !m.new && m.show);
  // Bangle.MESSAGES = [].concat(newUnhandledTexts, newHandledTexts, otherTexts);
};

let showNoMessages = function() {
  g.reset().clear()
    .setFont("12x20").setFontAlign(0, 0)
    .drawString("No Messages!", Bangle.appRect.x + (Bangle.appRect.w / 2), Bangle.appRect.y + (Bangle.appRect.h / 2));

  Bangle.setUI({
    mode: "custom",
    btn: _e => goBack(),
    //remove: cleanup
  });

  goBack();
};

let showMessage = function(textGid) {
  if (call) { setActive("call"); return showCall(); }
  else if (alarm) { setActive("alarm"); return showAlarm(); }
  else if (map) { setActive("map"); return showMap(); }
  else if (music) { setActive("music"); return showMusic(); }
  else if (Bangle.MESSAGES && Bangle.MESSAGES.length) {
    Bangle.MESSAGES.every(m => m.handled = true); // set all text messages as handled
    setActive("text");
    return showText(Bangle.MESSAGES, textGid);
  }
  else goBack();
};

let showMusic = function() {
  active = "music";

  Bangle.setUI({
    mode: "custom",
    btn: _e => goBack(),
    //remove: cleanup
  });
};

let showMap = function() {
  active = "map";

  Bangle.setUI({
    mode: "custom",
    btn: _e => goBack(),
    //remove: cleanup
  });
};

let showAlarm = function() {
  active = "alarm";

  Bangle.setUI({
    mode: "custom",
    btn: _e => goBack(),
    //remove: cleanup
  });
};

let showCall = function() {
  if (!call) return goBack();
  let incomingImg = require("heatshrink").decompress(atob("j0ewIQNgwDCnEAh0B4EAvEOgEB+F//kP4P/+E/weAgH+g8Agf4CQMH8EYgEfEYU8AYV4AQIhBAYMD8ADBg4vBgEPzwDBj/+AYM/AYV//ADCC4X/EwQiCABo="));
  let outgoingImg = require("heatshrink").decompress(atob("j0ewIRO4ACBgeAh0Ag8AvEAh0B+F//kP4P/+E/wASB/0AjkD/EA8EH8EDgEfEwU8AYQhBgAhBFwXgAYMHGwUPzwDBj4mBgE/AYV/FQIDBC4X/EwQiCABoA=="));
  let ringingImg = require("heatshrink").decompress(atob("mUywIlimAFEhgFEgYSF4AWEAIYWBAIYWBAIcAsAYBgOAgEYCwQJBBwIWBHIXAA4YSC4EGAoICCDwQ8DAQUgAQMQVtsD///AoU/AoIGCv5BBh/4gF+B4UfwF4Dgd4nAFDg8cB4P/8EA9gFC/wgBBwIzBwEDSQaOB+BzCRAM8SQSQBDAKSCTAPADwMAGoPwh4eBg+An0/SQX/jv/TwUH/wlBAAQkBADwA="));
  let leftImg = require("heatshrink").decompress(atob("mEwwJC/AAkBgEQAoUDwE4AoUHwF4AoUPgHwAoUegPgAoU8gfAAoV4DAIFC+AYBFwXgjwuD4E8FygFFCIodFFIo1FIIpNGLIowSRIiVFAH4A="));
  let rightImg = require("heatshrink").decompress(atob("mEwwJC/AAcIgGAAoUcgPAAoUegPgAoUPgHwAoUHwF4AoUD4E8AoQWBjwqD+AZBAAV4DIIFCngZBGCgFFCIodFFIo1FIIhNFLIouRRIqVFAH8AA=="));
  Bangle.setUI();	// clear from previous
  g.reset().clear();
  msg = call;
  delete msg.new;
  if (!msg.name) {
    let pn = msg.number.replaceAll(/\D/, "");		// remove any non digit characters
    msg.title = `${pn.slice(-10, -7)}-${pn.slice(-7, -4)}-${pn.slice(-4)}`;
  }
  let cmd = msg.cmd;

  let HeaderBox = require("messagebox").HeaderBox;
  let headerBox = new HeaderBox(msg, Bangle.appRect);
  let x = Bangle.appRect.x, y = Bangle.appRect.y + headerBox.h, x2 = Bangle.appRect.x2, y2 = Bangle.appRect.y2;
  let mx = (x + x2) / 2;
  headerBox.draw(Bangle.appRect);
  g.reset();

  let drawAcceptArrow = function(xOffset) {
    xOffset = xOffset ?? 0;
    imgX = x + 2 + xOffset;
    g.setColor(0, 1, 0)
      .drawImage(rightImg, imgX, y2 - 50);
  };

  let drawRejectArrow = function(xOffset) {
    xOffset = xOffset ?? 0;
    let imgX = x2 - 50 - xOffset;
    g.setColor(1, 0.25, 0.25)
      .drawImage(leftImg, imgX, y2 - 50);
  };

  if (cmd === "end") {
    if (timeouts["timer"]) clearTimeout(timeouts["timer"]);
    g.setColor(g.theme.fg).setFont("Vector:25").setFontAlign(0, -1);
    if (Bangle.elapsedString) {
      let elapsedString = Bangle.elapsedString;
      delete Bangle.elapsedString;
      g.drawString(elapsedString, mx, y + 25)
        .drawString("Call Ended", mx, y);
    } else {
      g.drawString("Missed Call", mx, y);
    }
    let done = new Promise((resolve, _reject) => {
      setTimeout(() => { resolve(); }, 5000);
    });
    done.then(() => {
      call = undefined;
      goBack();
    });
  }
  if (cmd === "incoming") {
    drawRejectArrow();
    drawAcceptArrow();
    g.setColor(0, 1, 0)
      .drawImage(ringingImg, mx - 25, y + 15);
  }
  if (cmd === "start" || cmd === "outgoing") {
    drawRejectArrow();
    startTime = parseInt(Date.now() / 1000);
    g.setColor(g.theme.fg)
      .drawImage(cmd === "start" ? incomingImg : outgoingImg, x + 10, y + 20);
    let timer = () => {
      g.clearRect(mx - 45, y + 20, mx + 70, y + 50);
      elapsed = parseInt(Date.now() / 1000) - startTime;
      let h = ("0" + Math.floor((elapsed / 3600) % 60)).slice(-2);
      let m = ("0" + Math.floor((elapsed / 60) % 60)).slice(-2);
      let s = ("0" + Math.floor(elapsed % 60)).slice(-2);
      Bangle.elapsedString = `${h}:${m}:${s}`;
      g.setFont("Vector:25").setFontAlign(0, -1).drawString(Bangle.elapsedString, mx + 15, y + 25);
      timeouts["timer"] = setTimeout(timer, 1000);
    };
    timer();
  }

  let handler = function(dir) {
    if (cmd === "end") return;
    if (dir < 0) leftHandler(dir);
    else if (dir > 0 && cmd === "incoming") rightHandler();
  };

  let leftHandler = function(dir) {
    let xOff = 0;
    let animate = new Promise((resolve, _reject) => {
      let swipeAnimation = () => {
        xOff += 30;
        g.clearRect(x, y2 - 50, x2, y2);
        drawRejectArrow(xOff);
        if (xOff > 160) return resolve();
        else setTimeout(swipeAnimation, 30);
      }
      swipeAnimation();
    });
    animate.then(() => {
      if (timeouts["timer"]) clearTimeout(timeouts["timer"]);
      Bangle.messageResponse(msg, false);
      goBack();
    });
  };

  let rightHandler = function(dir) {
    let xOff = 0;
    let animate = new Promise((resolve, _reject) => {
      let swipeAnimation = () => {
        xOff += 30;
        g.clearRect(x, y2 - 50, x2, y2);
        drawAcceptArrow(xOff);
        if (xOff > 160) return resolve();
        else setTimeout(swipeAnimation, 30);
      }
      swipeAnimation();
    });
    animate.then(() => {
      if (timeouts["timer"]) clearTimeout(timeouts["timer"]);
      Bangle.messageResponse(msg, true);
      goBack();
    });
  };
  Bangle.setUI({
    mode: "custom",
    touch: () => { if (buzzing) return require("messages").stopBuzz() },
    swipe: handler,
    btn: goBack,
    //remove: cleanup
  });
};

let gid = m => m.title + m.src;		// create unique group id

let groupMessages = function(messages) {
  if (!messages || !messages.length) return [];
  let msgs = [].concat(messages);	// don't want to mutate original
  let messageGroups = [];
  while (msgs.length) {
    let currentMessage = msgs[0];
    let mg = msgs.filter(m => gid(m) === gid(currentMessage)); // put messages into group
    let messageGroup = Object.assign({}, currentMessage, { id: gid(currentMessage), idList: [], bodies: [], new: [] });
    for (let msg of mg) {
      messageGroup.new.unshift(msg.new);
      messageGroup.idList.unshift(msg.id);
      messageGroup.bodies.unshift(msg.body);
    }
    messageGroups.push(messageGroup);
    msgs = msgs.filter(m => gid(m) !== gid(currentMessage));
  }
  return messageGroups;
};

let findIndexById = function(messageGroups, id) {
  return messageGroups.findIndex(groups => groups.messageGroup.some(group => group.id === id));
};

let showText = function(messages, id) {
  if (!messages.length) return goBack();	// no messages
  setBusy(true);	// busy until everything is set up
  msgGroups = groupMessages(messages);
  textGid = textGid ?? msgGroups[0].id; // global text message group id
  if (!id) id = textGid;
  let messageNum = msgGroups.findIndex(mg => mg.id === id);
  if (messageNum < 0) messageNum = 0;
  g.reset().clear();
  Bangle.setUI();	// make sure to clear setUI from anything previous
  let switching = false;
  let MessageBox = require("messagebox").MessageBox;
  require("messagebox").setOptions({ fh: 20 });
  let step = 42;
  let delay = 30;
  let mode = "scroll"; // one of "scroll", "next", "prev" (switch to next/prev message), "swipe" (swipe to delete or archive)
  //	Bangle.setLocked(false);		// TODO make as option
  //	Bangle.setLCDPower(true);	// TODO make as option
  let msgBoxes = [];
  let i = 0;
  for (let msgGroup of msgGroups) {
    msgBoxes[i] = new MessageBox(msgGroup);
    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++;
  }

  let drawFooter = function() {		// adapted from messagelist app
    let fh = 20;	// footer height
    // left hint: swipe from left for main menu
    g.reset().setBgColor(g.theme.bg).clearRect(Bangle.appRect.x, Bangle.appRect.y2 - fh, Bangle.appRect.x2, Bangle.appRect.y2)
      .setColor(g.theme.bgH).drawLine(Bangle.appRect.x, Bangle.appRect.y2 - fh, Bangle.appRect.x2, Bangle.appRect.y2 - fh)
      .setFont("6x15") // TODO make as option
      .setFontAlign(-1, 1).setColor(0, 1, 0)		//bottom left
      .drawString(">>", Bangle.appRect.x + 1, Bangle.appRect.y2);
    // center message count+hints: swipe up/down for next/prev message
    let footer = `  ${messageNum + 1}/${msgBoxes.length}  `;
    let fw = g.stringWidth(footer);
    g.setFontAlign(0, 1).setColor(g.theme.fg) // bottom center
      .drawString(footer, Bangle.appRect.x + Bangle.appRect.w / 2, Bangle.appRect.y2);
    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).setColor(1, 0.25, 0.25) // bottom right
      .drawString("<<", Bangle.appRect.x2 - 1, Bangle.appRect.y2)
      .setColor(g.theme.fg);
  };	//// drawFooter();

  let 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);
    }
  };	//refresh

  let removeMessage = function() {
    let removeAndReset = () => {
      // TODO let id = msgBoxes[messageNum].msg.id;
      for (let id of msgBoxes[messageNum].messageGroup.idList) {
        let idx = Bangle.MESSAGES.findIndex(m => m.id === id);
        Bangle.MESSAGES.splice(idx, 1); // remove from Bangle.MESSAGES
      }
      msgBoxes.splice(messageNum, 1);	// remove from msgBoxes
      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
      textGid = msgBoxes[messageNum].messageGroup.id;	// update global current message id
      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;
      });
    } else {
      removeAndReset();
    }
  };	//removeMessage

  let dismissOnPhone = function() {
    for (let id of msgBoxes[messageNum].messageGroup.idList) {
      Bangle.messageResponse({ id: id }, false);
    }
  };	//dismissOnPhone

  let 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 multiplier = 1;
      let animate = () => {
        msgBoxes[messageNum].yOffset -= step * multiplier;
        msgBoxes[messageNum + 1].yOffset -= step * multiplier;
        if (msgBoxes[messageNum + 1].yOffset <= 0) {
          if (!removeCurrent) {
            if (messageNum < msgBoxes.length) {
              messageNum++;
              textGid = msgBoxes[messageNum].messageGroup.id; 	// update global message index
              refresh();
            }
          }
          msgBoxes[messageNum].draw();
          drawFooter();
          return resolve();
        } else {
          msgBoxes[messageNum].draw();
          msgBoxes[messageNum + 1].draw();
          drawFooter();
          multiplier *= 2.5;
          timeouts["animID"] = setTimeout(animate, delay);
        }
      };
      animate();
    });
  };	//toNext

  let 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 multiplier = 1;
      let animate = () => {
        msgBoxes[messageNum].yOffset += step * multiplier;
        msgBoxes[messageNum - 1].yOffset += step * multiplier;
        if (msgBoxes[messageNum - 1].yOffset >= 0) {
          if (!removeCurrent) {
            if (messageNum > 0) {
              messageNum--;
              textGid = msgBoxes[messageNum].messageGroup.id;	// update global message index
              refresh();
            }
          }
          msgBoxes[messageNum].draw();
          drawFooter();
          return resolve();
        } else {
          msgBoxes[messageNum].draw();
          msgBoxes[messageNum - 1].draw();
          drawFooter();
          multiplier *= 2.5;
          timeouts["animID"] = setTimeout(animate, delay);
        }
      };
      animate();
    });
  };	//toPrev

  let drawLeftBackground = function() {
    //g.setBgColor(1, 0.5, 0); // red
    g.setBgColor(g.theme.bg)
      .setClipRect(Bangle.appRect.x, Bangle.appRect.y, Bangle.appRect.x2, Bangle.appRect.y2)
      .clearRect(Bangle.appRect.x, Bangle.appRect.y, Bangle.appRect.x2, Bangle.appRect.y2)
      .setBgColor(g.theme.bg);
  };	//drawLeftBackground

  let drawRightBackground = function() {
    //g.setBgColor(0, 0.5, 1); // red
    g.setBgColor(g.theme.bg)
      .setClipRect(Bangle.appRect.x, Bangle.appRect.y, Bangle.appRect.x2, Bangle.appRect.y2)
      .clearRect(Bangle.appRect.x, Bangle.appRect.y, Bangle.appRect.x2, Bangle.appRect.y2)
      .setBgColor(g.theme.bg);
  };	//drawRightBackground

  let animateToLeft = function() {
    if (timeouts["animID"]) {
      clearTimeout(timeouts["animID"]);
      timeouts["animID"] = undefined;
    }
    let multiplier = 1;
    let endX = Bangle.appRect.x - Bangle.appRect.w; //+ (Bangle.appRect.w / 2);
    let msgBox = msgBoxes[messageNum];
    return new Promise((resolve, _reject) => {
      let animate = () => {
        msgBox.xOffset -= step * multiplier;
        multiplier *= 2.5;
        drawLeftBackground();
        if (msgBox.xOffset <= endX) {
          return resolve();
        } else {
          msgBox.draw();
          drawFooter();
          timeouts["animID"] = setTimeout(animate, delay);
        }
      };
      animate();
    });
  };	//animateToLeft

  let animateToRight = function() {
    if (timeouts["animID"]) {
      clearTimeout(timeouts["animID"]);
      timeouts["animID"] = undefined;
    }
    let multiplier = 1;
    let endX = Bangle.appRect.x2; // - (Bangle.appRect.w / 2);
    let msgBox = msgBoxes[messageNum];
    return new Promise((resolve, _reject) => {
      let animate = () => {
        msgBox.xOffset += step * multiplier;
        multiplier *= 2.5;
        drawRightBackground();
        if (msgBox.xOffset >= endX) {
          return resolve();
        } else {
          msgBox.draw();
          drawFooter();
          timeouts["animID"] = setTimeout(animate, delay);
        }
      };
      animate();
    });
  };	//animateToRight

  let firstTouch = true;
  let dragHandler = function(e) {
    if (e.b === 0) {
      firstTouch = true;
      setBusy(false);
      //checkForNewMessages();
    }
    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(true);
      // TODO let idx = msgBoxes.findIndex(mb => mb.msg.id === msgBoxes[messageNum].msg.id); // TODO maybe we don't to do this check every time
      // TODO if (idx >= 0) delete Bangle.MESSAGES[idx].new;
      // TODO for (msg of msgBoxes[messageNum].m)


      // TODO msgBoxes[messageNum].clearNew();
      if (Math.abs(e.dy) > Math.abs(e.dx)) {
        firstTouch = false;
        if (e.dy > 0 && msgBoxes[messageNum].top && messageNum > 0) {
          mode = "prev";
        } else if (e.dy < 0 && msgBoxes[messageNum].bottom && messageNum + 1 < msgBoxes.length) { // e.dy will be < 0 here
          mode = "next";
        } else {
          mode = "scroll";
        }
      }
      else {
        mode = undefined;
        return;
      }
    }
    if (mode == "scroll") scrollHandler(e);
    else if (mode == "next") nextHandler(e);
    else if (mode == "prev") prevHandler(e);
  };	//dragHandler

  let nextHandler = function(e) {
    if (e.b == 0) {
    }
    if (messageNum == msgBoxes.length - 1) return; // already on last message
    switching = true;
    toNext().then(() => {
      switching = false;
    });
  };	//nextHander

  let prevHandler = function(e) {
    if (e.b == 0) {
    }
    if (messageNum == 0) return;  // already on first message
    switching = true;
    toPrev().then(() => {
      switching = false;
    });
  };	//prevHandler

  let swipeHandler = function(dir) {
    if (dir > 0) return rightHandler();
    else if (dir < 0) return leftHandler();
    else return;
  };	//swipeHandler

  let leftHandler = function(e) {
    //let msgBox = msgBoxes[messageNum];
    switching = true;
    animateToLeft().then(() => {
      g.setBgColor(g.theme.bg);
      dismissOnPhone();
      removeMessage();
      switching = false;
    });
  };	//leftHandler

  let rightHandler = function(e) {
    //	let msgBox = msgBoxes[messageNum];
    switching = true;
    animateToRight().then(() => {
      g.setBgColor(g.theme.bg);
      removeMessage();
      switching = false;
    });
  };	//rightHandler

  let scrollHandler = function(e) {
    if (e.b === 0) {
    }
    msgBoxes[messageNum].scroll(e.dy);
  };	//scrollHandler

  msgBoxes[messageNum].draw();
  drawFooter();
  setBusy(false);
  //checkForNewMessages();
  Bangle.setUI({
    mode: "custom",
    drag: e => dragHandler(e),
    swipe: dir => swipeHandler(dir),
    btn: _e => goBack(),
    //remove: cleanup
  });
};	// showText

let newMessage = (type, msg) => {
  let handleMessage = () => {
    //msgId = msg.id;
    if (type === "call" && msg.t === "remove") require("messages").stopBuzz();
    if (active === "text" && buzzing && msg.t === "remove" && msg.id === textGid) require("messages").stopBuzz(); // if the message being viewed is removed stop buzzing
    if (type === "text" && msg.t === "remove") {	// TODO
      let msgIdx = Bangle.MESSAGES.findIndex(m => m.id === msg.id);
      if (Bangle.MESSAGES.length > 1) {
        if (msgIdx === 0) msgId = Bangle.MESSAGES[msgIdx + 1].id;
        else if (msgIdx === Bangle.MESSAGES.length - 1) msgId = Bangle.MESSAGES[msgIdx - 1].id;
        else msgId = textGid;
      } else if (Bangle.MESSAGES.length === 1) msgId = 0;
      if (textGid === msg.id) msgId = 0;	// just removed the message we were viewing
    }
    require("messagegui").handleMessage(type, msg);
    filterMessages();
    showMessage();
  };
  // Bangle.MESSAGES = Bangle.MESSAGES.filter(m => m.id != msg.id);	// remove
  // require("messages").write(Bangle.MESSAGES); // write removal to flash
  if (idle) return handleMessage(); // we are idle so updated messages right away
  else if (!idle) {
    showMessageOnceIdle = () => {
      handleMessage(msgId);
      Bangle.removeAllListeners("idle");
    }
    return setListener("idle", showMessageOnceIdle);
  }
};
setListener("breakingnews", newMessage);

// entry point
saveMessages = function() {
  require("messages").write(Bangle.MESSAGES);
};
setListener("kill", saveMessages);

Bangle.loadWidgets();
require("widget_utils").hide();

if (!Bangle.MESSAGES || !Bangle.MESSAGES.length) {
  Bangle.MESSAGES = require("messages").getMessages();
}

if (!Bangle.MESSAGES.length) showNoMessages();

if (Bangle.notify) {	// notification arrived that opened the app. This is set in messagecenter.notify.js
  let msg = Bangle.MESSAGES[0];
  if (msg.t !== "delete") {
    buzzing = true;
    require("messages").buzz(msg.src);
    delete Bangle.notify;
  }
}
msgId = Bangle.MESSAGES.length ? Bangle.MESSAGES[0].id : 0;
filterMessages();
setBusy(false);
showMessage();