diff --git a/apps/modclock/ChangeLog b/apps/modclock/ChangeLog index 119db7c6e..6af7a3adf 100644 --- a/apps/modclock/ChangeLog +++ b/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 diff --git a/apps/modclock/README.md b/apps/modclock/README.md index 48427f6b3..02297befe 100644 --- a/apps/modclock/README.md +++ b/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. diff --git a/apps/modclock/Scr1.png b/apps/modclock/Scr1.png new file mode 100644 index 000000000..35c8f68cb Binary files /dev/null and b/apps/modclock/Scr1.png differ diff --git a/apps/modclock/Scr2.png b/apps/modclock/Scr2.png new file mode 100644 index 000000000..f4963baf6 Binary files /dev/null and b/apps/modclock/Scr2.png differ diff --git a/apps/modclock/Screenshot1.png b/apps/modclock/Screenshot1.png deleted file mode 100644 index 524b5ab04..000000000 Binary files a/apps/modclock/Screenshot1.png and /dev/null differ diff --git a/apps/modclock/Screenshot2.png b/apps/modclock/Screenshot2.png deleted file mode 100644 index bda2a6099..000000000 Binary files a/apps/modclock/Screenshot2.png and /dev/null differ diff --git a/apps/modclock/app.js b/apps/modclock/app.js index c31861c56..718453939 100644 --- a/apps/modclock/app.js +++ b/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 calcStrLength=function(str,limitLength){ +let showInlineClkInfo=true; +let calcStrLength=function(str,maxLength){ //too long // Example maximum length var truncatedText = str; - if (str.length > limitLength) { - truncatedText = str.substring(0, limitLength - 3) + "..."; + if (str.length > maxLength) { + 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.setFontAlign(0,0); // align center bottom + g.setFont("Vector",16); + 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(); - g.drawString(" "+dateStr+" ", g.getWidth()/2, Y+9, true /*clear background*/); + var dateStr = require("locale").dow(new Date(), 1)+", " +new Date().getDate(); + //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(); + + } diff --git a/apps/modclock/metadata.json b/apps/modclock/metadata.json index 0cfbcafb3..20d9ab95a 100644 --- a/apps/modclock/metadata.json +++ b/apps/modclock/metadata.json @@ -3,13 +3,13 @@ "name": "Modern Clock", "shortName":"Modern Clk", "icon": "icon.png", - "version":"0.02", - "description": "A modern, simple clock, with two ClockInfos and Fast Loading", + "version":"0.03", + "description": "A modern, simple clock, with three ClockInfos and Fast Loading", "type":"clock", "tags": "clock,clkinfo", "supports": ["BANGLEJS2"], - "screenshots" : [ { "url":"Screenshot1.png" }, - { "url":"Screenshot2.png" } ], + "screenshots" : [ { "url":"Scr1.png" }, + { "url":"Scr2.png" } ], "dependencies" : { "clock_info":"module"}, "allow_emulator":true, "readme":"README.md",