Finished V0.02 with fullscreen mode and optional lock icon

apps/90sclk/app.js

@@ -75,6 +75,9 @@ function getSteps() {
 
 
 function draw() {
+  // queue draw in one minute
+  queueDraw();
+
   var x = g.getWidth()/2;
   var y_offset = settings.fullscreen ? 0 : 10;
   var y = g.getHeight()/2-20 + y_offset;
@@ -110,9 +113,6 @@ function draw() {
   } else {
     Bangle.drawWidgets();
   }
-
-  // queue draw in one minute
-  queueDraw();
 }
 
 Bangle.loadWidgets();

apps/bwclk/README.md

@@ -3,5 +3,14 @@
 ![](screenshot.png)
 
 
+In the settings, fullscreen mode can be enabled and disabled:
+
+![](screenshot_2.png)
+
+Additionally, in fullscreen mode a lock icon can be shown...
+
+## Thanks to
+<a href="https://www.flaticon.com/free-icons/lock" title="lock icons">Lock icons created by Those Icons - Flaticon</a>
+
 ## Creator
 - [David Peer](https://github.com/peerdavid)

apps/bwclk/app.js

@@ -1,4 +1,25 @@
+const SETTINGS_FILE = "bwclk.setting.json";
 const locale = require('locale');
+const storage = require('Storage');
+
+
+/*
+ * Load settings
+ */
+let settings = {
+  fullscreen: true,
+  showLock: true,
+};
+
+let saved_settings = storage.readJSON(SETTINGS_FILE, 1) || settings;
+for (const key in saved_settings) {
+  settings[key] = saved_settings[key]
+}
+
+
+/*
+ * Assets
+ */
 
 // Manrope font
 Graphics.prototype.setLargeFont = function(scale) {
@@ -13,6 +34,12 @@ Graphics.prototype.setSmallFont = function(scale) {
   return this;
 };
 
+var imgLock = {
+  width : 16, height : 16, bpp : 1,
+  transparent : 0,
+  buffer : E.toArrayBuffer(atob("A8AH4A5wDDAYGBgYP/w//D/8Pnw+fD58Pnw//D/8P/w="))
+};
+
 
 // timeout used to update every minute
 var W = g.getWidth();
@@ -48,37 +75,23 @@ function getSteps() {
 
 
 function draw() {
-  // Hide widgets
+  // queue draw in one minute
-  for (let wd of WIDGETS) {wd.draw=()=>{};wd.area="";}
+  queueDraw();
 
   // Draw background
+  var yOffset = settings.fullscreen ? 0 : 10;
+  var y = H/5*2 + yOffset;
   g.reset().clearRect(0,0,W,W);
-  g.setColor("#fff");
+  g.setColor("#000");
-  g.fillRect(0,0,W,H/5*2);
+  g.fillRect(0,y,W,H);
-
-  // Draw time
-  g.setColor("#fff");
-  g.setLargeFont();
-  g.setFontAlign(0,0);
-  var date = new Date();
-  var timeStr = locale.time(date,1);
-  g.drawString(timeStr, W/2, H/5*2 + 40);
-
-  // Draw Steps
-  g.setSmallFont();
-  g.setFontAlign(0,0);
-  var lock = Bangle.isLocked() ? "L" : "";
-  var steps = getSteps();
-  g.drawString(steps + lock, W/2, H/5*4 + 10);
 
   // Draw date
+  var date = new Date();
   g.setColor("#000");
-  var y = H/5+30;
-
   g.setFontAlign(0,1);
   g.setLargeFont();
   var dateStr = date.getDate();
-  g.drawString(dateStr, W/2, y+7);
+  g.drawString(dateStr, W/2, y+5);
   var strW = g.stringWidth(dateStr);
 
   g.setSmallFont();
@@ -89,14 +102,37 @@ function draw() {
   var monthStr = locale.month(date, 1);
   g.drawString(monthStr, W/2+strW/2, y);
 
-  // queue draw in one minute
+  // Draw time
-  queueDraw();
+  g.setColor("#fff");
+  g.setLargeFont();
+  g.setFontAlign(0,-1);
+  var timeStr = locale.time(date,1);
+  g.drawString(timeStr, W/2, y+10);
+
+  // Draw Steps
+  y += H/5*2+10;
+  g.setSmallFont();
+  g.setFontAlign(0,0);
+  g.drawString(getSteps(), W/2, y);
+
+  // Draw lock
+  if(settings.showLock && Bangle.isLocked()){
+    g.setColor("#000");
+    g.drawImage(imgLock, 2, 2);
+  }
+
+  // Draw widgets if not fullscreen
+  if(settings.fullscreen){
+    for (let wd of WIDGETS) {wd.draw=()=>{};wd.area="";}
+  } else {
+    Bangle.drawWidgets();
+  }
 }
 
 Bangle.loadWidgets();
 
 // Clear the screen once, at startup
-g.setTheme({bg:"#000",fg:"#fff",dark:false}).clear();
+g.setTheme({bg:"#fff",fg:"#000",dark:false}).clear();
 // draw immediately at first, queue update
 draw();
 // Stop updates when LCD is off, restart when on

apps/bwclk/metadata.json

@@ -5,13 +5,14 @@
   "description": "Black and white clock.",
   "readme": "README.md",
   "icon": "app.png",
-  "screenshots": [{"url":"screenshot.png"}],
+  "screenshots": [{"url":"screenshot.png"}, {"url":"screenshot_2.png"}],
   "type": "clock",
   "tags": "clock",
   "supports": ["BANGLEJS2"],
   "allow_emulator": true,
   "storage": [
     {"name":"bwclk.app.js","url":"app.js"},
-    {"name":"bwclk.img","url":"app-icon.js","evaluate":true}
+    {"name":"bwclk.img","url":"app-icon.js","evaluate":true},
+    {"name":"bwclk.settings.js","url":"settings.js"}
   ]
 }

apps/bwclk/settings.js

@@ -0,0 +1,40 @@
+(function(back) {
+    const SETTINGS_FILE = "bwclk.setting.json";
+
+    // initialize with default settings...
+    const storage = require('Storage')
+    let settings = {
+      fullscreen: false,
+      showLock: true,
+    };
+    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)
+    }
+
+
+    E.showMenu({
+      '': { 'title': 'BlackWhite Clock' },
+      '< Back': back,
+      'Show Lock': {
+        value: settings.showLock,
+        format: () => (settings.showLock ? 'Yes' : 'No'),
+        onchange: () => {
+          settings.showLock = !settings.showLock;
+          save();
+        },
+      },
+      'Full Screen': {
+        value: settings.fullscreen,
+        format: () => (settings.fullscreen ? 'Yes' : 'No'),
+        onchange: () => {
+          settings.fullscreen = !settings.fullscreen;
+          save();
+        },
+      }
+    });
+  })