tinyhead: change widget bg and fg colour so that widgets blend in with the rest of the clockface

apps/tinyheads/ChangeLog

@@ -1 +1,2 @@
 0.01: New app!
+0.02: Make the widget bar the same colour as the hair.

apps/tinyheads/app.js

@@ -5,8 +5,7 @@
   // Read 12/24 from system settings
   const is12Hour=(require("Storage").readJSON("setting.json",1)||{})["12hour"] || false;
 
-  // Tinyhead features are stored at a resolution of 18x21, this scales them to the best fit for the Banglejs2 screen
-  const scale=9;
+  const scale=lib.appScale;
 
   const closedEyes = 25;
   const scaredEyes = 26;
@@ -22,7 +21,8 @@
   let helpShown = false;
   let tapCount = 0;
   let centerX, centerY, minuteHandLength, hourHandLength, handOutline;
-
+  let originalTheme = Object.assign({}, g.theme);
+
   // Open the eyes and schedule the next blink
   let blinkOpen = function blinkOpen() {
     if (blinkTimeout) clearTimeout(blinkTimeout);
@@ -214,6 +214,9 @@
   };
 
   let init = function init() {
+    // change the system theme, so that the widget bar blends in with the clock face
+    g.setTheme({bg:lib.settings.hairColour,fg:lib.settings.faceColour,dark:true}).clear();
+
     Bangle.on('lock', lockHandler);
     Bangle.on('charging', chargingHandler);
     if (lib.settings.btStatusEyes) {
@@ -234,6 +237,7 @@
         // Go direct to feature select in settings on long screen press
         if (xy.type == 2) {
           eval(require("Storage").read("tinyheads.settings.js"))(()=> {
+            g.setTheme(originalTheme);
             E.showMenu();
             init();
           }, true, helpShown);
@@ -251,6 +255,7 @@
         }
       },
       remove: function() {
+        g.setTheme(originalTheme);
         // Clear timeouts and listeners for fast loading
         if (drawTimeout) clearTimeout(drawTimeout);
         if (blinkTimeout) clearTimeout(blinkTimeout);

apps/tinyheads/lib.js

@@ -5,6 +5,14 @@ exports.maxEyes = 25;
 exports.faceW = 18;
 exports.faceH = 21;
 
+// Scale used when showing the main clock screen.
+// Tinyhead features are stored at a resolution of 18x21, this scales them to the best fit for the Banglejs2 screen
+exports.appScale=9;
+
+// Scale used when showing the face on the settings page. 
+// It's smaller than on the clock itself, so that selection arrows can be shown down the sides
+exports.settingsScale=6;
+
 exports.settingsFile = 'tinyheads.json';
 
 let faceCanvas;
@@ -135,7 +143,14 @@ exports.drawFace = function(scale, eyesNum, mouthNum, peek, offset) {
   // Draw face
   let xOffset = (g.getWidth() - (exports.faceW * scale)) / 2;
   let yOffset = (offset ? offset : 0) + ((g.getHeight() - (exports.faceH * scale)) / 2);
-  g.setBgColor(0, 0, 0);
+
+    // On the main screen, if the widgets are displayed, the background color matches the color of the hair and widget bar
+    if (scale == exports.appScale && (exports.settings.showWidgets == 'on' || (exports.settings.showWidgets == 'unlock' && !Bangle.isLocked()))) {
+    g.setBgColor(exports.settings.hairColour);
+  } else {
+    g.setBgColor(0, 0, 0);
+  }
+
   g.clearRect(Bangle.appRect);
   g.setClipRect(Bangle.appRect.x, Bangle.appRect.y, Bangle.appRect.x2, Bangle.appRect.y2);
 

apps/tinyheads/metadata.json

@@ -4,7 +4,7 @@
   "shortName":"Tinyheads",
   "icon": "app.png",
   "screenshots" : [ { "url":"tinyhead1.png" }, {"url":"tinyhead2.png"}, {"url":"tinyhead3.png"}, {"url":"tinyhead4.png"}, {"url":"editing.png"} ],
-  "version":"0.01",
+  "version":"0.02",
   "description": "Choose from a variety of hairstyles, eyes, noses, and mouths to customize your pixel art style Tinyhead.",
   "readme":"README.md",
   "type": "clock",

apps/tinyheads/settings.js

@@ -6,7 +6,7 @@
   let featureColour = 'faceColour';
   let colourSelectTimeout;
 
-  let scale = 6; // Smaller scale than on the clock itself, so that selection arrows can be shown down the sides
+  const scale = lib.settingsScale;
 
   // 27 colours
   let colours = [