diff --git a/apps/tinyheads/app.js b/apps/tinyheads/app.js index c38ac2421..fb5c1a9cb 100644 --- a/apps/tinyheads/app.js +++ b/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; @@ -215,6 +214,7 @@ }; 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); diff --git a/apps/tinyheads/lib.js b/apps/tinyheads/lib.js index d772e208d..6ed42f2f4 100644 --- a/apps/tinyheads/lib.js +++ b/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; @@ -136,10 +144,11 @@ exports.drawFace = function(scale, eyesNum, mouthNum, peek, offset) { let xOffset = (g.getWidth() - (exports.faceW * scale)) / 2; let yOffset = (offset ? offset : 0) + ((g.getHeight() - (exports.faceH * scale)) / 2); - if (exports.settings.showWidgets == 'on' || (exports.settings.showWidgets == 'unlock' && !Bangle.isLocked())) { + // 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.setBgColor(0, 0, 0); } g.clearRect(Bangle.appRect); diff --git a/apps/tinyheads/settings.js b/apps/tinyheads/settings.js index 38558bbc2..e9f8bdb2f 100644 --- a/apps/tinyheads/settings.js +++ b/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 = [