diff --git a/apps/bigclkinfo/ChangeLog b/apps/bigclkinfo/ChangeLog new file mode 100644 index 0000000000..268cb92d61 --- /dev/null +++ b/apps/bigclkinfo/ChangeLog @@ -0,0 +1,2 @@ +0.01: New Clock! +0.02: Add backgrounds library diff --git a/apps/bigclkinfo/README.md b/apps/bigclkinfo/README.md new file mode 100644 index 0000000000..f0f7b5621d --- /dev/null +++ b/apps/bigclkinfo/README.md @@ -0,0 +1,34 @@ +# Big Clock Info app + +For die hard clock info fans... + +## Features + +All the clock infos you have installed displayed full screen. + +## Controls + +Interact with it like one big clock info, which it is! + +## Settings + +Change the background from `Settings -> Apps -> Backgrounds` + +TBA: Should the app be treated as a clock face app? +TBA: Should the app remember last open clock info menu position between launches? + +## Potential Improvements + +- Tweak size of icon vs text box. +- Add backgrounds library and use clockinfo drawBorderedImage. + - should it be a dependency or should there be conditional implementation where it's alright to go with or without? +- Could the clock clkinfo icon be made dynamic so the analog clock hands move? That would be neat. + - either native implementation in `bigclkinfo` or through `clkinfoclk` app dependency. + +## Requests + +Open an issue on the espruino/BangleApps issue tracker mentioning @thyttan. + +## Creator + +thyttan diff --git a/apps/bigclkinfo/app-icon.js b/apps/bigclkinfo/app-icon.js new file mode 100644 index 0000000000..f52bc45650 --- /dev/null +++ b/apps/bigclkinfo/app-icon.js @@ -0,0 +1 @@ +require("heatshrink").decompress(atob("mEw4P/AAMwwghZj/4AoYjBAgUD4ABBAoMHhOQ8AFBjlIiU4AoM4oECjgFBuYCB5wCBCgUHAQPIAQMTgEBwAFBAYMDkAuBggyBkECoAFBg0Ag1ggFggxACgdgggfDkEMPwkNFIewBYJYCmAFFhoFD2AFFC5hPB4ApHIIIFCkBNFLIILCsBrHAoZ9FRIqVGUIqtFXIrFFaIrdFdIwAVA==")) diff --git a/apps/bigclkinfo/app.js b/apps/bigclkinfo/app.js new file mode 100644 index 0000000000..1cfabf0505 --- /dev/null +++ b/apps/bigclkinfo/app.js @@ -0,0 +1,73 @@ +// TODO: +// Add setting to decide if the app shoud set Bangle.CLOCK=1 ? +// Make an updating analog clock info entry to use as start card. (update clkinfoclk or make a new one?) + +let isClock = true; // TODO: make optional via setting. +if (isClock) { + Bangle.setUI("clock"); +} + +// once at the start +let background = require("clockbg"); +let clock_info = require("clock_info"); +const R = Bangle.appRect; +let txtg = Graphics.createArrayBuffer(R.w>>1, 32, 2); +txtg.transparent = 0; +txtg.palette = new Uint16Array([0,g.theme.bg,g.theme.bg,g.theme.fg]); + +// Load the clock infos +let clockInfoItems = clock_info.load(); +let clockInfoClockIdx = clockInfoItems[0].items.findIndex(c => c.name=="HRM"); +if (clockInfoClockIdx>=0) { // pull the clock to the front + let clockInfoClock = clockInfoItems[0].items[clockInfoClockIdx]; + clockInfoItems[0].items.splice(clockInfoClockIdx,1); // remove + clockInfoItems[0].items.unshift(clockInfoClock); // add to front +} +// Add the +let clockInfoMenu = clock_info.addInteractive(clockInfoItems, { + app: "bigclkinfo", + // Add the dimensions we're rendering to here - these are used to detect taps on the clock info area + x : 0, y: 0, w: R.w, h: R.h, // 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 + 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.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 = 4; + if (info.img) clock_info.drawBorderedImage(info.img, midx-12*scale,options.y+10, {scale:scale}); // draw the image + let foundFontText = txtg.findFont(info.text, { + w : txtg.getWidth()-4, // optional: width available (default = screen width) + h : txtg.getHeight()-4, // optional: height available (default = screen height) + min : 10, // optional: min font height + max : 24, // 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); + txtg.clear(1); + txtg.setFont(foundFontText.font).setFontAlign(0,1); + txtg.drawString(foundFontText.text, txtg.getWidth()/2, txtg.getHeight()-2); + txtg.filter([ // a gaussian filter + 0, 1, 1, 1, 0, + 1, 1, 1, 1, 1, + 1, 1, 1, 1, 1, + 1, 1, 1, 1, 1, + 0, 1, 1, 1, 0, + ], { w:5, h:5, div:1, max:1, filter:"max" }); + g.drawImage(txtg, 0, R.h - txtg.getHeight()*2-4, {scale:2}); + } +}); + +Bangle.on("lock", function(locked) { + // ensure that when unlocked, we automaticlly focus the clockinfo + if (!locked && !clockInfoMenu.focus) + Bangle.emit("touch",0,{x:100,y:100}); +}); +E.prependListener("kill", ()=>{clockInfoMenu.menuA = 0; clockInfoMenu.menuB = 0;}) // reset to initial menu state to prepare for next launch. diff --git a/apps/bigclkinfo/icon.png b/apps/bigclkinfo/icon.png new file mode 100644 index 0000000000..f4ec13e4ea Binary files /dev/null and b/apps/bigclkinfo/icon.png differ diff --git a/apps/bigclkinfo/metadata.json b/apps/bigclkinfo/metadata.json new file mode 100644 index 0000000000..53b0345074 --- /dev/null +++ b/apps/bigclkinfo/metadata.json @@ -0,0 +1,22 @@ +{ "id": "bigclkinfo", + "name": "Big Clock Info app", + "shortName":"Big Clkinfo", + "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", + "clockbg":"module" + }, + + "storage": [ + {"name":"bigclkinfo.app.js","url":"app.js"}, + {"name":"bigclkinfo.img","url":"app-icon.js","evaluate":true} + ] +}