Merge branch 'bigclkinfo' into app-loader

Author: thyttan

apps/bigclkinfo/ChangeLog

@@ -1 +1,2 @@
 0.01: New Clock!
+0.02: Add backgrounds library

apps/bigclkinfo/app.js

@@ -7,8 +7,27 @@ if (isClock) {
   Bangle.setUI("clock");
 }
 
+// once at the start
+let background = require("clockbg");
+
+// to fill the whole area
+background.fillRect(Bangle.appRect.x+3, Bangle.appRect.y+3, Bangle.appRect.x+Bangle.appRect.w-5, Bangle.appRect.y+Bangle.appRect.h-5);
+// if you ever need to reload to a new background (this could take ~100ms)
+//background.reload();
+
+// Call this to unload (free memory - eg in .remove when fast loading)
+//background.unload();
+
+// If .unload has been called and you might have fast-loaded back, call .load to ensure everything is loaded again!
+// It won't reload if it's already been loaded
+//background.load();
+
 // Load the clock infos
 let clockInfoItems = require("clock_info").load();
+if (clockInfoItems[0].items[6]) { // TODO: Should maybe be more robust against changes to clock info, i.e. search for "clock" among items.
+  let clockItem = clockInfoItems[0].items.pop();
+  clockInfoItems[0].items.unshift(clockItem);
+}
 // Add the
 let clockInfoMenu = require("clock_info").addInteractive(clockInfoItems, {
   // Add the dimensions we're rendering to here - these are used to detect taps on the clock info area
@@ -20,21 +39,25 @@ let clockInfoMenu = require("clock_info").addInteractive(clockInfoItems, {
     // info: data returned from itm.get() containing text/img/etc
     // options: options passed into addInteractive
     // Clear the background
-    g.reset().clearRect(options.x, options.y, options.x+options.w-1, options.y+options.h-1);
+    background.fillRect(options.x, options.y, options.x+options.w-1, options.y+options.h-1);
     // indicate focus - we're using a border, but you could change color?
-    if (options.focus) g.drawRect(options.x, options.y, options.x+options.w-1, options.y+options.h-1); // show if focused
+    if (options.focus) g.fillRect(options.x, options.y, options.x+options.w-1, options.y+options.h-1); // show if focused
+    background.fillRect(options.x+3, options.y+3, options.x+options.w-5, options.y+options.h-5);
     // we're drawing center-aligned here
     var midx = options.x+options.w/2;
-    let scale = 5;
-    if (info.img) g.drawImage(info.img, midx-12*scale,options.y+4, {scale:scale}); // draw the image
-    g.setFont("6x8:2").setFontAlign(0,1).drawString(info.text, midx,options.y+160); // draw the text
+    let scale = 4;
+    if (info.img) require("clock_info").drawBorderedImage(info.img, midx-12*scale,options.y+10, {scale:scale}); // draw the image
+    let foundFontText = g.findFont(info.text, { 
+      w : Bangle.appRect.w-9,    // optional: width available (default = screen width)
+      h : Bangle.appRect.h*2/5,    // optional: height available (default = screen height)
+      min : 10,   // optional: min font height
+      max : 60,   // optional: max font height
+      wrap : true, // optional: allow word wrap?
+      trim : true // optional: trim to the specified height, add '...'
+    }); // TODO: g.findFont returns max size 28px. Would be nice with bigger font if there's room.
+    //print(foundFontText);
+    g.setFont(foundFontText.font).setFontAlign(0,1).drawString(foundFontText.text, midx,options.y+165); // draw the text
   }
 });
-setTimeout(
-  ()=>{
-    clockInfoMenu.menuA = 0;
-    if (clockInfoItems[0].items[6]) clockInfoMenu.menuB = 6; // Assume clkinfoclk is at indices (0,6)
-    clockInfoMenu.redraw()
-  }, 5
-)
-E.prependListener("kill", ()=>{clockInfoMenu.menuA = 0; clockInfoMenu.menuB = 6;}) // reset to initial menu state to prepare for next launch.
+
+E.prependListener("kill", ()=>{clockInfoMenu.menuA = 0; clockInfoMenu.menuB = 0;}) // reset to initial menu state to prepare for next launch.

apps/bigclkinfo/metadata.json

@@ -1,16 +1,20 @@
 { "id": "bigclkinfo",
   "name": "Big Clock Info app",
   "shortName":"Big Clkinfo",
-  "version":"0.01",
+  "version":"0.02",
   "author": "thyttan",
   "description": "One single big clock info. Full screen.",
   "icon": "icon.png",
   "type": "clock",
   "tags": "clock,clkinfo,clk_info",
   "supports" : ["BANGLEJS2"],
   "readme": "README.md",
-  "dependencies" : { "clock_info":"module",
-    "clkinfoclk":"app" },
+  "dependencies" : {
+    "clock_info":"module",
+    "clkinfoclk":"app",
+    "clockbg":"module"
+  },
+
   "storage": [
     {"name":"bigclkinfo.app.js","url":"app.js"},
     {"name":"bigclkinfo.img","url":"app-icon.js","evaluate":true}