Merge pull request #3916 from RKBoss6/modclk

[Modern Clock] Add inline clockInfo

apps/modclock/ChangeLog

@@ -1,2 +1,3 @@
 0.01: App created w/ clockInfos, bold font, date and time.
 0.02: Added text truncation for long ClockInfo strings.
+0.03: Added small inline Clock Info next to date

apps/modclock/README.md

@@ -2,18 +2,20 @@
 
 
 
-A beautifully simple, modern clock with two Clock Infos, and a clean UI. Fast-Loads.
+A beautifully simple, modern clock with three Clock Infos, and a clean UI. Fast-Loads.
 
-![](Screenshot1.png)
+![](Scr1.png)
 
 
 
 ## Features
 
-* Has 2 Clock Infos, that are individually changeable. 
+* Has 3 Clock Infos, that are individually changeable.
+* Has an inline Clock Info, next to the date, for quick, glanceable data.
 * Low battery consumption.
 * Uses locale for time and date.
 * Bold time font, for quicker readability.
+* Uses rounded rectangles and a bold font for a simple, clean, modern look.
 * Has Fast Loading, for quicker access to launcher.
 
 

apps/modclock/app.js

@@ -9,16 +9,16 @@ Graphics.prototype.setFontBold = function(scale) {
 { // must be inside our own scope here so that when we are unloaded everything disappears
   // we also define functions using 'let fn = function() {..}' for the same reason. function decls are global
 let drawTimeout;
-  
+let showInlineClkInfo=true;
-let calcStrLength=function(str,limitLength){
+let calcStrLength=function(str,maxLength){
 
     //too long
     
      // Example maximum length
     var truncatedText = str;
 
-    if (str.length > limitLength) {
+    if (str.length > maxLength) {
-      truncatedText = str.substring(0, limitLength - 3) + "...";
+      truncatedText = str.substring(0, maxLength - 3) + "...";
     }
   
     return truncatedText;
@@ -62,7 +62,6 @@ let bRoundedRectangle= function(x1,y1,x2,y2,r) {
   };
   
   
-  
 //CLOCK INFO
 let clockInfoItems = require("clock_info").load();
 
@@ -84,7 +83,7 @@ let clockInfoMenuLeft = require("clock_info").addInteractive(clockInfoItems, {
     // indicate focus - we're using a border, but you could change color?
     if (options.focus){
       // show if focused
-      g.setColor(0,15,255);
+      g.setColor(0,255,15);
       bRoundedRectangle(options.x,options.y,options.x+options.w,options.y+options.h,8); 
     }else{
       g.setColor(g.theme.fg);
@@ -117,7 +116,7 @@ let clockInfoMenuRight = require("clock_info").addInteractive(clockInfoItems, {
     // indicate focus - we're using a border, but you could change color?
     if (options.focus){
       // show if focused
-      g.setColor(0,15,255);
+      g.setColor(0,255,15);
       bRoundedRectangle(options.x,options.y,options.x+options.w,options.y+options.h,8);  
     }else{
       g.setColor(g.theme.fg);
@@ -132,12 +131,39 @@ let clockInfoMenuRight = require("clock_info").addInteractive(clockInfoItems, {
     g.setFont("Vector",16).setFontAlign(0,1).drawString(calcStrLength(info.text,8), midx,midy+23); // draw the text
   }
 });
+let clockInfoMenuInline;
+
+if(showInlineClkInfo){
+    clockInfoMenuInline = require("clock_info").addInteractive(clockInfoItems, {
+      // Add the dimensions we're rendering to here - these are used to detect taps on the clock info area
+      x : g.getWidth()/2+6, y: 69, w: 95, h:25,
+    // You can add other information here you want to be passed into 'options' in 'draw'
+    // This function draws the info
+    draw : (itm, info, options) => {
+      // itm: the item containing name/hasRange/etc
+      // 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, options.y+options.h);
+      // indicate focus - we're using a border, but you could change color?
+      if (options.focus){
+        // show if focused
+        g.setColor(0,255,15);
+       
+      }
+      // we're drawing center-aligned here
+      //var midx = options.x+options.w/2;
+      var midy=options.y+options.h/2;
+      if (info.img){
+        g.drawImage(info.img, options.x+4,midy-7.2,{scale: 0.63});
+      }// draw the image
+      g.setFont("Vector",15).setFontAlign(-1,0).drawString(calcStrLength(info.text,6), options.x+22,midy+1); // draw the text
+    }
+  }); 
+
+}
 
 
-  
-  
-  
-  
 
 // DRAW FACE
 let draw = function() {
@@ -150,7 +176,7 @@ let draw = function() {
   // draw the current time (4x size 7 segment)
 
    // align bottom right
-
+  
   g.setFontBold();
   
   if(meridian!=""){
@@ -163,13 +189,13 @@ let draw = function() {
     var meridianStrWidth=g.stringWidth(meridian);
     var totalStrWidth=meridianStrWidth+padding+clkStrWidth;
     var startX = ((g.getWidth() - totalStrWidth) / 2)+6;
-    g.clearRect(0,0,g.getWidth(),90);
+    g.clearRect(0,0,g.getWidth(),64);
     g.setFontBold();
     g.setFontAlign(-1,1);
-    g.drawString(clock, startX, Y+2,true);
+    g.drawString(clock, startX, Y-2);
     g.setFont("Vector",20);
     g.setFontAlign(-1,1);
-    g.drawString(meridian, startX + clkStrWidth + padding, Y-5, true);
+    g.drawString(meridian, startX + clkStrWidth + padding, Y-9, true);
     
   }else{
     
@@ -179,15 +205,17 @@ let draw = function() {
     
   }
   
-  
   // draw the date, in a normal font
-  g.setFont("Vector",18);
+  g.setFont("Vector",16);
-  g.setFontAlign(0,0); // align center bottom
+  g.setFontAlign(1,0); // align center bottom
   // pad the date - this clears the background if the date were to change length
-  var dateStr = require("locale").dow(new Date(), 1)+", "+ require("locale").month(new Date(), true)+" "+new Date().getDate();
+  var dateStr = require("locale").dow(new Date(), 1)+", " +new Date().getDate();
-  g.drawString(" "+dateStr+" ", g.getWidth()/2, Y+9, true /*clear background*/);
+  //print(g.stringHeight(dateStr));
+  g.drawString(" "+dateStr+" ", g.getWidth()/2+6, Y+9, true /*clear background*/);
   
   Bangle.drawWidgets();
+  g.setColor("#ffffff");
+
   
   // queue next draw
   if (drawTimeout) clearTimeout(drawTimeout);
@@ -210,6 +238,7 @@ Bangle.setUI({
     delete Graphics.prototype.setFontBold;
     clockInfoMenuRight.remove();
     clockInfoMenuLeft.remove();
+    if(showInlineClkInfo) clockInfoMenuInline.remove();
     
   }});
   
@@ -217,4 +246,6 @@ g.clear();
 // Load widgets
 Bangle.loadWidgets();
 draw();
+
+  
 }

apps/modclock/metadata.json

@@ -3,13 +3,13 @@
   "name": "Modern Clock",
   "shortName":"Modern Clk",
   "icon": "icon.png",
-  "version":"0.02",
+  "version":"0.03",
-  "description": "A modern, simple clock, with two ClockInfos and Fast Loading",
+  "description": "A modern, simple clock, with three ClockInfos and Fast Loading",
   "type":"clock",    
   "tags": "clock,clkinfo",
   "supports": ["BANGLEJS2"],
-  "screenshots" : [ { "url":"Screenshot1.png" }, 
+  "screenshots" : [ { "url":"Scr1.png" }, 
-    { "url":"Screenshot2.png" }  ],
+    { "url":"Scr2.png" }  ],
   "dependencies" : { "clock_info":"module"},
   "allow_emulator":true,
   "readme":"README.md",