messagesoverlay - Add settings for using lower memory colors

apps/messagesoverlay/README.md

@@ -2,7 +2,7 @@
 
 This app handles the display of messages and message notifications as an overlay pop up. 
 
-It is a GUI replacement for the `messages` apps.
+It is a GUI replacement for the `messagesgui` app.
 
 Messages are ephemeral and not stored on the Bangle.
 
@@ -10,6 +10,10 @@ Messages are ephemeral and not stored on the Bangle.
 
 Close app by tapping the X and scroll by swiping. The border of the pop up changes color if the Bangle is locked. The color depends on your currently active theme.
 
+## Theme support
+
+Using the system theme needs more RAM since it uses a 16 bit color buffer for normal message display. Selecting the "low RAM" theme reduces that to a 4 bit buffer.
+
 ## Low memory mode
 
 If free memory is below a configured number of blocks (default is 4000), the overlay automatically only uses 1 bit depth. Default mode uses roundabout 1300 blocks, while low memory mode uses about 600.

apps/messagesoverlay/default.json

@@ -2,5 +2,6 @@
     "autoclear": 30,
     "border": 10,
     "minfreemem": 2,
-    "lowmem": 4
+    "lowmem": 4,
+    "systemTheme": true
 }

apps/messagesoverlay/lib.js

@@ -126,6 +126,7 @@ const roundedRect = function(x,y,w,h,filled){
 const DIVIDER = 38;
 
 const drawScreen = function(title, src, iconcolor, icon){
+  setColors(true);
   ovr.clearRect(2,2,ovr.getWidth()-3, DIVIDER - 1);
 
   ovr.setFont(settings.fontSmall);
@@ -135,6 +136,8 @@ const drawScreen = function(title, src, iconcolor, icon){
 
   const w = ovr.getWidth() - 35 - 26;
 
+  drawBorder();
+
   if (title)
     drawTitle(title, textCenter, w, 8, DIVIDER - 8, 0);
 
@@ -200,19 +203,21 @@ const drawTitle = function(title, center, w, y, h) {
   ovr.drawString(title, center, dh);
 };
 
+const setColors = function(lockRelevant) {
+  if (lockRelevant && !Bangle.isLocked()){
+    ovr.setColor(ovr.theme.fg2);
+    ovr.setBgColor(ovr.theme.bg2);
+  } else {
+    ovr.setColor(ovr.theme.fg);
+    ovr.setBgColor(ovr.theme.bg);
+  }
+};
+
 const showMessage = function(msg) {
   LOG("showMessage");
 
   ovr.setClipRect(0,0,ovr.getWidth(),ovr.getHeight());
 
-  if (Bangle.isLocked()){
-    ovr.setColor(ovr.theme.fg);
-    ovr.setBgColor(ovr.theme.bg);
-  } else {
-    ovr.setColor(ovr.theme.fg2);
-    ovr.setBgColor(ovr.theme.bg2);
-  }
-
   drawScreen(msg.title, msg.src || /*LANG*/ "Message", require("messageicons").getColor(msg), require("messageicons").getImage(msg));
 
 
@@ -235,13 +240,7 @@ const showMessage = function(msg) {
 
 const drawBorder = function() {
   LOG("drawBorder", isQuiet());
-  if (Bangle.isLocked()){
+  setColors();
-    ovr.setColor(ovr.theme.fg);
-    ovr.setBgColor(ovr.theme.bg);
-  } else {
-    ovr.setColor(ovr.theme.fg2);
-    ovr.setBgColor(ovr.theme.bg2);
-  }
   ovr.drawRect(0,0,ovr.getWidth()-1,ovr.getHeight()-1);
   ovr.drawRect(1,1,ovr.getWidth()-2,ovr.getHeight()-2);
   ovr.drawRect(2,DIVIDER,ovr.getWidth()-2,DIVIDER+1);
@@ -333,6 +332,7 @@ const scrollDown = function() {
 };
 
 const drawMessage = function(msg) {
+  setColors(false);
   const getStringHeight = function(str){
     "jit";
     const metrics = ovr.stringMetrics(str);
@@ -639,7 +639,7 @@ exports.message = function(type, event) {
   if(event.handled) return;
   if(event.messagesoverlayignore) return;
 
-  bpp = 16;
+  bpp = settings.systemTheme ? 16 : 4;
   if (process.memory().free < settings.lowmem)
     bpp = 1;
 
@@ -657,7 +657,18 @@ exports.message = function(type, event) {
   ovr.reset();
 
   if (bpp > 1){
+    if (settings.systemTheme){
       ovr.theme = g.theme;
+    } else {
+      ovr.theme = {
+        fg: g.theme.dark ? 15: 0,
+        bg: g.theme.dark ? 0: 15,
+        fg2: g.theme.dark ? 15: 0,
+        bg2: g.theme.dark ? 9 : 8,
+        fgH: g.theme.dark ? 15 : 0,
+        bgH: g.theme.dark ? 9: 8,
+      };
+    }
   }
   else {
     if (g.theme.dark)

apps/messagesoverlay/settings.js

@@ -41,6 +41,13 @@
           writeSettings("autoclear",v);
         }
       },
+      'Theme': {
+        value: settings.systemTheme,
+        format: v=>v?"System":"low RAM",
+        onchange: v => {
+          writeSettings("systemTheme",v);
+        }
+      },
       'Min. free RAM': {
         value: settings.minfreemem,
         min: 0,