Merge pull request #2545 from peerdavid/master

[HappyClk] Added settings to show/hide widgets as well as different themes.

apps/bwclk/README.md

@@ -11,6 +11,7 @@ sub-items simply swipe up/down. To run an action (e.g. trigger home assistant),
 
 ![](screenshot_3.png)
 
+Note: Check out the settings to change different themes.
 
 ## Settings
 - Screen: Normal (widgets shown), Dynamic (widgets shown if unlocked) or Full (widgets are hidden).

apps/happyclk/ChangeLog

@@ -1 +1,2 @@
-0.01: New app!
+0.01: New app!
+0.02: Added settings to show/hide widgets and settings for different styles.

apps/happyclk/README.md

@@ -14,6 +14,10 @@ Here you can see an example of a locked bangle with a low battery:
 
 ![](screenshot_3.png)
 
+## Settings
+- Screen: Normal (widgets shown), Dynamic (widgets shown if unlocked) or Full (widgets are hidden).
+- Theme: Select your custom theme, independent of system settings.
+
 ## Creator
 - [David Peer](https://github.com/peerdavid).
 

apps/happyclk/happyclk.app.js

@@ -1,6 +1,82 @@
 /************************************************
  * Happy Clock
  */
+
+
+const storage = require('Storage');
+const widget_utils = require("widget_utils");
+
+
+/************************************************
+ * Settings
+ */
+const SETTINGS_FILE = "happyclk.setting.json";
+
+let settings = {
+    color: "Dark",
+    screen: "Dynamic"
+};
+
+let saved_settings = storage.readJSON(SETTINGS_FILE, 1) || settings;
+for (const key in saved_settings) {
+    settings[key] = saved_settings[key];
+}
+
+var color_map = {
+    "Dark":{
+        fg: "#fff",
+        bg: "#000",
+        eye: "#fff",
+        eyePupils: "#000"
+    },
+    "Black":{
+        fg: "#fff",
+        bg: "#000",
+        eye: "#000",
+        eyePupils: "#fff"
+    },
+    "White":{
+        fg: "#000",
+        bg: "#fff",
+        eye: "#fff",
+        eyePupils: "#000"
+    },
+    "Blue":{
+        fg: "#fff",
+        bg: "#00f",
+        eye: "#fff",
+        eyePupils: "#000"
+    },
+    "Green":{
+        fg: "#000",
+        bg: "#0f0",
+        eye: "#fff",
+        eyePupils: "#000"
+    },
+    "Red":{
+        fg: "#fff",
+        bg: "#f00",
+        eye: "#fff",
+        eyePupils: "#000"
+    },
+    "Purple":{
+        fg: "#fff",
+        bg: "#f0f",
+        eye: "#fff",
+        eyePupils: "#000"
+    },
+    "Yellow":{
+        fg: "#000",
+        bg: "#ff0",
+        eye: "#fff",
+        eyePupils: "#000"
+    }
+};
+var colors = color_map[settings.color];
+
+/************************************************
+ * Globals
+ */
 var W = g.getWidth(),R=W/2;
 var H = g.getHeight();
 var drawTimeout;
@@ -10,6 +86,16 @@ var drawTimeout;
  * HELPER
  */
 
+let isFullscreen = function() {
+    var s = settings.screen.toLowerCase();
+    if(s == "dynamic"){
+      return Bangle.isLocked();
+    } else {
+      return s == "full";
+    }
+  };
+
+
 // Based on the great multi clock from https://github.com/jeffmer/BangleApps/
 Graphics.prototype.drawPupils = function(cx, cy, r1, dx, dy, angle) {
     angle = angle % 360;
@@ -19,11 +105,12 @@ Graphics.prototype.drawPupils = function(cx, cy, r1, dx, dy, angle) {
 
     g.setColor(g.theme.fg);
     g.fillCircle(cx, cy, 32);
-    g.setColor(g.theme.bg);
+
+    g.setColor(colors.eye);
     g.fillCircle(cx, cy, 27);
     g.fillCircle(cx+dx, cy+dy, 28);
 
-    g.setColor(g.theme.fg);
+    g.setColor(colors.eyePupils);
     g.fillCircle(x, y, 8);
     g.fillCircle(x+1, y, 8);
 };
@@ -85,6 +172,7 @@ let drawEyes = function(){
 
 
 let drawSmile = function(isLocked){
+    g.setColor(colors.fg);
     var y = 120;
     var o = parseInt(E.getBattery()*0.8);
 
@@ -100,6 +188,9 @@ let drawSmile = function(isLocked){
 }
 
 let drawEyeBrow = function(){
+    if(!isFullscreen()) return;
+
+    g.setColor(colors.fg);
     var w = 6;
     for(var i = 0; i < w; i++){
         g.drawLine(25, 25+i, 70, 15+i%3);
@@ -108,6 +199,15 @@ let drawEyeBrow = function(){
 }
 
 
+let drawWidgets = function(){
+    if (isFullscreen()) {
+        widget_utils.hide();
+    } else {
+        Bangle.drawWidgets();
+    }
+}
+
+
 
 let draw = function(){
     // Queue draw in one minute
@@ -118,12 +218,16 @@ let draw = function(){
 }
 
 let drawHelper = function(isLocked){
+    g.setColor(g.theme.bg);
+
+    g.fillRect(0, isFullscreen() ? 0 : 24, W, H);
     g.setColor(g.theme.fg);
-    g.reset().clear();
 
     drawEyes();
     drawEyeBrow();
     drawSmile(isLocked);
+
+    drawWidgets();
 }
 
 
@@ -140,6 +244,15 @@ Bangle.on('lcdPower',on=>{
 });
 
 Bangle.on('lock', function(isLocked) {
+    if (drawTimeout) clearTimeout(drawTimeout);
+    drawTimeout = undefined;
+
+    if(!isLocked && settings.screen.toLowerCase() == "dynamic"){
+        // If we have to show the widgets again, we load it from our
+        // cache and not through Bangle.loadWidgets as its much faster!
+        widget_utils.show();
+    }
+
     draw(isLocked);
 });
 
@@ -162,15 +275,9 @@ let queueDraw = function() {
 // Show launcher when middle button pressed
 Bangle.setUI("clock");
 Bangle.loadWidgets();
-/*
- * we are not drawing the widgets as we are taking over the whole screen
- * so we will blank out the draw() functions of each widget and change the
- * area to the top bar doesn't get cleared.
- */
-require('widget_utils').hide();
 
 // Clear the screen once, at startup and draw clock
-// g.setTheme({bg:"#fff",fg:"#000",dark:false});
+g.setTheme({bg:colors.bg,fg:colors.fg,dark:false});
 draw();
 
 // After drawing the watch face, we can draw the widgets

apps/happyclk/happyclk.settings.js

@@ -0,0 +1,43 @@
+(function(back) {
+  const SETTINGS_FILE = "happyclk.setting.json";
+
+  // initialize with default settings...
+  const storage = require('Storage')
+  let settings = {
+    color: "Dark",
+    screen: "Dynamic"
+  };
+  let saved_settings = storage.readJSON(SETTINGS_FILE, 1) || settings;
+  for (const key in saved_settings) {
+    settings[key] = saved_settings[key]
+  }
+
+  function save() {
+    storage.write(SETTINGS_FILE, settings)
+  }
+
+  var colorOptions = ["Dark", "Black", "White", "Blue", "Green", "Red", "Purple", "Yellow"];
+  var screenOptions = ["Normal", "Dynamic", "Full"];
+  E.showMenu({
+    '': { 'title': 'Happy Clock' },
+    '< Back': back,
+    'Screen': {
+      value: 0 | screenOptions.indexOf(settings.screen),
+      min: 0, max: screenOptions.length-1,
+      format: v => screenOptions[v],
+      onchange: v => {
+        settings.screen = screenOptions[v];
+        save();
+      },
+    },
+    'Theme': {
+      value: 0 | colorOptions.indexOf(settings.color),
+      min: 0, max: colorOptions.length-1,
+      format: v => colorOptions[v],
+      onchange: v => {
+        settings.color = colorOptions[v];
+        save();
+      },
+    },
+  });
+})

apps/happyclk/metadata.json

@@ -3,7 +3,7 @@
   "name": "Happy Clock",
   "shortName":"Happy Clock",
   "icon": "happyclk.png",
-  "version":"0.01",
+  "version":"0.02",
   "readme": "README.md",
   "supports": ["BANGLEJS2"],
   "description": "A happy clock :)",
@@ -12,10 +12,13 @@
   "screenshots": [
     {"url":"screenshot_1.png"},
     {"url":"screenshot_2.png"},
-    {"url":"screenshot_3.png"}
+    {"url":"screenshot_3.png"},
+    {"url":"screenshot_4.png"},
+    {"url":"screenshot_5.png"}
   ],
   "storage": [
     {"name":"happyclk.app.js","url":"happyclk.app.js"},
-    {"name":"happyclk.img","url":"happyclk.icon.js","evaluate":true}
+    {"name":"happyclk.img","url":"happyclk.icon.js","evaluate":true},
+    {"name":"happyclk.settings.js","url":"happyclk.settings.js"}
   ]
 }