From e0d29c81f281ef76d8a1db93a9701c111d17c75e Mon Sep 17 00:00:00 2001 From: Gordon Williams Date: Thu, 5 Mar 2020 13:15:27 +0000 Subject: [PATCH] Big refactor #2 - variable width widgets --- README.md | 26 +++++++++++++++--- apps.json | 25 ++++++++---------- apps/_example_widget/widget.js | 13 +++++---- apps/alarm/ChangeLog | 1 + apps/alarm/widget.js | 12 +++------ apps/gbridge/ChangeLog | 1 + apps/gbridge/Changelog | 4 +++ apps/gbridge/widget.js | 10 +++---- apps/gpsrec/ChangeLog | 1 + apps/gpsrec/widget.js | 48 ++++++++++++++++------------------ apps/torch/widget.js | 2 ++ apps/widbat/ChangeLog | 1 + apps/widbat/widget.js | 24 ++++++++++------- apps/widbt/ChangeLog | 1 + apps/widbt/widget.js | 9 +++---- apps/widclk/ChangeLog | 1 + apps/widclk/widget.js | 42 +++++++++++------------------ apps/widhrm/ChangeLog | 1 + apps/widhrm/widget.js | 12 ++++----- apps/widid/ChangeLog | 3 ++- apps/widid/widget.js | 12 +++------ apps/widnceu/ChangeLog | 2 ++ apps/widnceu/widget.js | 14 +++------- apps/widpedom/ChangeLog | 1 + apps/widpedom/widget.js | 18 +++++-------- 25 files changed, 137 insertions(+), 147 deletions(-) create mode 100644 apps/gbridge/Changelog create mode 100644 apps/widbt/ChangeLog create mode 100644 apps/widclk/ChangeLog create mode 100644 apps/widnceu/ChangeLog diff --git a/README.md b/README.md index fbe7e2522..a0a5e5ba4 100644 --- a/README.md +++ b/README.md @@ -120,7 +120,7 @@ Apps are listed in the Bangle.js menu, accessible from a clock app via the middl #### `app-icon.js` -The icon image and short description is used in the menu entry as selection possibility. +The icon image and short description is used in Bangle.js's launcher. Use the Espruino [image converter](https://www.espruino.com/Image+Converter) and upload your `app.png` file. @@ -136,11 +136,14 @@ Follow this steps to create a readable icon as image string. Replace this line with the image converter output: ``` -require("heatshrink").decompress(atob("mEwwJC/AH4A/AH4AgA==")); +require("heatshrink").decompress(atob("mEwwJC/AH4A/AH4AgA==")) ``` -Keep in mind to use this converter for creating images you like to draw with `g.drawImage()` with your app. +You can also use this converter for creating images you like to draw with `g.drawImage()` with your app. +Apps that need widgets can call `Bangle.loadWidgets()` **once** at startup to load +them, and then `Bangle.drawWidgets()` to draw them onto the screen whenever the app +has call to completely clear the screen. Widgets themselves will update as and when needed. ### Widget Example @@ -149,6 +152,23 @@ The widget example is available in [`apps/_example_widget`](apps/_example_widget * `add_to_apps.json` - insert into `apps.json`, describes the widget to bootloader and loader * `widget.js` - widget code +Widgets are just small bits of code that run whenever an app that supports them +calls `Bangle.loadWidgets()`. If they want to display something in the 24px high +widget bars at the top and bottom of the screen they can add themselves to +the global `WIDGETS` array with: + +``` +WIDGETS["mywidget"]={ + area:"tl", // tl (top left), tr (top right), bl (bottom left), br (bottom right) + width: 24, // how wide is the widget? You can change this and call Bangle.drawWidgets() to re-layout + draw:draw // called to draw the widget +}; +``` + +When the widget is to be drawn, `x` and `y` values are set up in `WIDGETS["mywidget"]` +and `draw` can then use `this.x` and `this.y` to figure out where it needs to draw to. + + ### `app.info` format This is the file that's **auto-generated** and loaded onto Bangle.js by the App Loader, diff --git a/apps.json b/apps.json index 952011799..96536940d 100644 --- a/apps.json +++ b/apps.json @@ -66,7 +66,7 @@ { "id": "gbridge", "name": "Gadgetbridge", "icon": "app.png", - "version":"0.03", + "version":"0.04", "description": "The default notification handler for Gadgetbridge notifications from Android", "tags": "tool,system,android,widget", "storage": [ @@ -106,7 +106,7 @@ "name": "Default Alarm", "shortName":"Alarms", "icon": "app.png", - "version":"0.03", + "version":"0.04", "description": "Set and respond to alarms", "tags": "tool,alarm,widget", "storage": [ @@ -249,7 +249,7 @@ { "id": "gpsrec", "name": "GPS Recorder", "icon": "app.png", - "version":"0.04", + "version":"0.05", "interface": "interface.html", "description": "Application that allows you to record a GPS track. Can run in background", "tags": "tool,outdoors,gps,widget", @@ -285,7 +285,7 @@ { "id": "widbat", "name": "Battery Level Widget", "icon": "widget.png", - "version":"0.02", + "version":"0.03", "description": "Show the current battery level and charging status in the top right of the clock", "tags": "widget,battery", "type":"widget", @@ -296,7 +296,7 @@ { "id": "widbt", "name": "Bluetooth Widget", "icon": "widget.png", - "version":"0.01", + "version":"0.02", "description": "Show the current Bluetooth connection status in the top right of the clock", "tags": "widget,bluetooth", "type":"widget", @@ -318,7 +318,7 @@ { "id": "widhrm", "name": "Simple Heart Rate widget", "icon": "widget.png", - "version":"0.01", + "version":"0.02", "description": "When the screen is on, the widget turns on the heart rate monitor and displays the current heart rate (or last known in grey). For this to work well you'll need at least a 15 second LCD Timeout.", "tags": "health,widget", "type": "widget", @@ -329,7 +329,7 @@ { "id": "stetho", "name": "Stethoscope", "icon": "stetho.png", - "version":"0.0198", + "version":"0.01", "description": "Hear your heart rate", "tags": "health", "storage": [ @@ -472,7 +472,7 @@ { "id": "widnceu", "name": "NCEU Logo Widget", "icon": "widget.png", - "version":"0.01", + "version":"0.02", "description": "Show the NodeConf EU logo in the top left", "tags": "widget", "type":"widget", @@ -480,9 +480,6 @@ {"name":"widnceu.wid.js","url":"widget.js"} ] }, - - - { "id": "sclock", "name": "Simple Clock", "icon": "clock-simple.png", @@ -704,7 +701,7 @@ { "id": "widclk", "name": "Digital clock widget", "icon": "widget.png", - "version":"0.01", + "version":"0.02", "description": "A simple digital clock widget", "tags": "widget,clock", "type":"widget", @@ -715,7 +712,7 @@ { "id": "widpedom", "name": "Pedometer widget", "icon": "widget.png", - "version":"0.06", + "version":"0.07", "description": "Daily pedometer widget", "tags": "widget", "type":"widget", @@ -804,7 +801,7 @@ { "id": "widid", "name": "Bluetooth ID Widget", "icon": "widget.png", - "version":"0.01", + "version":"0.02", "description": "Display the last two tuple of your Bangle.js address in the widget section. This is useful for figuring out which Bangle.js to connect to if you have more than one Bangle.js!", "tags": "widget", "type":"widget", diff --git a/apps/_example_widget/widget.js b/apps/_example_widget/widget.js index 9ee9bfee8..3893e3096 100644 --- a/apps/_example_widget/widget.js +++ b/apps/_example_widget/widget.js @@ -1,17 +1,16 @@ /* run widgets in their own function scope so they don't interfere with currently-running apps */ (() => { - // add the width - var xpos = WIDGETPOS.tr-24;/**/; - WIDGETPOS.tr-= 28;/* the widget width plus some extra pixel to keep distance to others */; - - // draw your widget at xpos function draw() { g.reset(); // reset the graphics context to defaults (color/font/etc) // add your code + g.drawString("X", this.x, this.y); } // add your widget - WIDGETS["mywidget"]={draw:draw}; - + WIDGETS["mywidget"]={ + area:"tl", // tl (top left), tr (top right), bl (bottom left), br (bottom right) + width: 28, // how wide is the widget? You can change this and call Bangle.drawWidgets() to re-layout + draw:draw // called to draw the widget + }; })() diff --git a/apps/alarm/ChangeLog b/apps/alarm/ChangeLog index 8cf79a91d..67feb024f 100644 --- a/apps/alarm/ChangeLog +++ b/apps/alarm/ChangeLog @@ -1,3 +1,4 @@ 0.01: New App! 0.02: Fix issues with alarm scheduling 0.03: More alarm scheduling issues +0.04: Tweaks for variable size widget system diff --git a/apps/alarm/widget.js b/apps/alarm/widget.js index 02d412270..dbe91b3dd 100644 --- a/apps/alarm/widget.js +++ b/apps/alarm/widget.js @@ -1,17 +1,11 @@ (() => { var alarms = require('Storage').readJSON('alarm.json',1)||[]; alarms = alarms.filter(alarm=>alarm.on); - if (!alarms.length) return; + if (!alarms.length) return; // no alarms, no widget! delete alarms; - // add the width - var xpos = WIDGETPOS.tl; - WIDGETPOS.tl += 24;/* the widget width plus some extra pixel to keep distance to others */; - - // draw your widget at xpos - // add the widget - WIDGETS["alarm"]={draw:function() { + WIDGETS["alarm"]={area:"tl",width:24,draw:function() { g.setColor(-1); - g.drawImage(atob("GBgBAAAAAAAAABgADhhwDDwwGP8YGf+YMf+MM//MM//MA//AA//AA//AA//AA//AA//AB//gD//wD//wAAAAADwAABgAAAAAAAAA"),xpos,0); + g.drawImage(atob("GBgBAAAAAAAAABgADhhwDDwwGP8YGf+YMf+MM//MM//MA//AA//AA//AA//AA//AA//AB//gD//wD//wAAAAADwAABgAAAAAAAAA"),this.x,this.y); }}; })() diff --git a/apps/gbridge/ChangeLog b/apps/gbridge/ChangeLog index 3180266ad..28789ec04 100644 --- a/apps/gbridge/ChangeLog +++ b/apps/gbridge/ChangeLog @@ -1,3 +1,4 @@ 0.01: Initial version 0.02: Increase contrast (darker notification background, white text) 0.03: Gadgetbridge widget now shows connection state +0.04: Tweaks for variable size widget system diff --git a/apps/gbridge/Changelog b/apps/gbridge/Changelog new file mode 100644 index 000000000..28789ec04 --- /dev/null +++ b/apps/gbridge/Changelog @@ -0,0 +1,4 @@ +0.01: Initial version +0.02: Increase contrast (darker notification background, white text) +0.03: Gadgetbridge widget now shows connection state +0.04: Tweaks for variable size widget system diff --git a/apps/gbridge/widget.js b/apps/gbridge/widget.js index 5eb4f70d4..a787d7e0b 100644 --- a/apps/gbridge/widget.js +++ b/apps/gbridge/widget.js @@ -109,19 +109,17 @@ function draw() { g.setColor(-1); if (NRF.getSecurityStatus().connected) - g.drawImage(require("heatshrink").decompress(atob("i0WwgHExAABCIwJCBYwJEBYkIBQ2ACgvzCwoECx/z/AKDD4WD+YLBEIYKCx//+cvnAKCBwU/mc4/8/HYv//Ev+Y4EEAePn43DBQkzn4rCEIoABBIwKHO4cjmczK42I6mqlqEEBQeIBQaDED4IgDUhi6KaBbmIA==")),xpos+1,1); + g.drawImage(require("heatshrink").decompress(atob("i0WwgHExAABCIwJCBYwJEBYkIBQ2ACgvzCwoECx/z/AKDD4WD+YLBEIYKCx//+cvnAKCBwU/mc4/8/HYv//Ev+Y4EEAePn43DBQkzn4rCEIoABBIwKHO4cjmczK42I6mqlqEEBQeIBQaDED4IgDUhi6KaBbmIA==")),this.x+1,this.y+1); else - g.drawImage(require("heatshrink").decompress(atob("i0WwQFC1WgAgYFDAgIFClQFCwEK1W/AoIPB1f+CAMq1f7/WqwQPB/fq1Gq1/+/4dC/2/CAIaB/YbBAAO///qAoX/B4QbBDQQ7BDQQrBAAWoIIIACIIIVC0ECB4cACAZiBAoRtCAoIDBA")),xpos+1,1); + g.drawImage(require("heatshrink").decompress(atob("i0WwQFC1WgAgYFDAgIFClQFCwEK1W/AoIPB1f+CAMq1f7/WqwQPB/fq1Gq1/+/4dC/2/CAIaB/YbBAAO///qAoX/B4QbBDQQ7BDQQrBAAWoIIIACIIIVC0ECB4cACAZiBAoRtCAoIDBA")),this.x+1,this.y+1); } function changed() { - draw(); + WIDGETS["gbridgew"].draw(); g.flip();// turns screen on } NRF.on('connected',changed); NRF.on('disconnected',changed); -var xpos = WIDGETPOS.tl; -WIDGETPOS.tl+=24; -WIDGETS["gbridgew"]={draw:draw}; +WIDGETS["gbridgew"]={area:"tl",width:24,draw:draw}; })(); diff --git a/apps/gpsrec/ChangeLog b/apps/gpsrec/ChangeLog index 668ce1991..0f31ef93d 100644 --- a/apps/gpsrec/ChangeLog +++ b/apps/gpsrec/ChangeLog @@ -2,3 +2,4 @@ 0.02: Fix GPS time logging 0.03: Fix GPS time display in gpsrec app 0.04: Properly Fix GPS time display in gpsrec app +0.05: Tweaks for variable size widget system diff --git a/apps/gpsrec/widget.js b/apps/gpsrec/widget.js index 5c120dcbb..c55c650c5 100644 --- a/apps/gpsrec/widget.js +++ b/apps/gpsrec/widget.js @@ -1,38 +1,29 @@ (() => { - // add the width - var xpos = WIDGETPOS.tl; - WIDGETPOS.tl += 24;/* the widget width plus some extra pixel to keep distance to others */; var settings = {}; var hasFix = false; var fixToggle = false; // toggles once for each reading var gpsTrack; // file for GPS track var periodCtr = 0; - // draw your widget at xpos + // draw your widget function draw() { + if (!settings.recording) return; g.reset(); g.setFont("4x6"); g.setFontAlign(0,0); - g.clearRect(xpos,0,xpos+23,23); - - if (!settings.recording) { - g.setColor("#606060"); + g.clearRect(this.x,this.y,this.x+23,this.y+23); + g.setColor("#ff0000"); + if (hasFix) { + if (fixToggle) { + g.fillCircle(this.x+11,this.y+11,9); + g.setColor("#000000"); + } else + g.drawCircle(this.x+11,this.y+11,9); } else { - g.setColor("#ff0000"); - if (hasFix) { - if (fixToggle) { - g.fillCircle(xpos+11,11,9); - g.setColor("#000000"); - } else - g.drawCircle(xpos+11,11,9); - } else { - g.setColor(fixToggle ? "#ff0000" : "#7f0000"); - g.drawString("NO",xpos+12,5); - g.drawString("FIX",xpos+12,19); - } + g.drawString("NO",this.x+12,this.y+5); + g.drawString("FIX",this.x+12,this.y+19); } - g.drawString("GPS",xpos+12,12); - g.setColor(-1); // change color back to be nice to other apps + g.drawString("GPS",this.x+12,this.y+12); } function onGPS(fix) { @@ -53,7 +44,7 @@ } } - // Called by the GPS app to reload settings and decide what's + // Called by the GPS app to reload settings and decide what to do function reload() { settings = require("Storage").readJSON("gpsrec.json",1)||{}; settings.period = settings.period||1; @@ -61,17 +52,22 @@ Bangle.removeListener('GPS',onGPS); if (settings.recording) { + WIDGETS["gpsrec"].width = 24; Bangle.on('GPS',onGPS); Bangle.setGPSPower(1); var n = settings.file.toString(36); gpsTrack = require("Storage").open(".gpsrc"+n,"a"); } else { + WIDGETS["gpsrec"].width = 0; Bangle.setGPSPower(0); gpsTrack = undefined; } - draw(); } - reload(); // add the widget - WIDGETS["gpsrec"]={draw:draw,reload:reload}; + WIDGETS["gpsrec"]={area:"tl",width:24,draw:draw,reload:function() { + reload(); + Bangle.drawWidgets(); // relayout all widgets + }}; + // load settings, set correct widget width + reload(); })() diff --git a/apps/torch/widget.js b/apps/torch/widget.js index c17d203e1..e3d1ea22f 100644 --- a/apps/torch/widget.js +++ b/apps/torch/widget.js @@ -2,6 +2,8 @@ var clickTimes = []; var CLICK_COUNT = 4; // number of taps var CLICK_PERIOD = 1; // second +// we don't actually create/draw a widget here at all... + Bangle.on("lcdPower",function(on) { // First click (that turns LCD on) isn't given to // setWatch, so handle it here diff --git a/apps/widbat/ChangeLog b/apps/widbat/ChangeLog index ba01ef944..b19144b47 100644 --- a/apps/widbat/ChangeLog +++ b/apps/widbat/ChangeLog @@ -1 +1,2 @@ 0.02: Now refresh battery monitor every minute if LCD on +0.03: Tweaks for variable size widget system diff --git a/apps/widbat/widget.js b/apps/widbat/widget.js index d6f277b50..c209821cc 100644 --- a/apps/widbat/widget.js +++ b/apps/widbat/widget.js @@ -1,17 +1,15 @@ (function(){ -var img_charge = E.toArrayBuffer(atob("DhgBHOBzgc4HOP////////////////////3/4HgB4AeAHgB4AeAHgB4AeAHg")); var CHARGING = 0x07E0; -var xpos = WIDGETPOS.tr-64; -WIDGETPOS.tr-=68; +function setWidth() { + WIDGETS["bat"].width = 40 + (Bangle.isCharging()?16:0); +} function draw() { - var s = 63; - var x = xpos, y = 0; - g.clearRect(x,y,x+s,y+23); + var s = 39; + var x = this.x, y = this.y; if (Bangle.isCharging()) { - g.setColor(CHARGING).drawImage(img_charge,x,y); + g.setColor(CHARGING).drawImage(atob("DhgBHOBzgc4HOP////////////////////3/4HgB4AeAHgB4AeAHgB4AeAHg"),x,y); x+=16; - s-=16; } g.setColor(-1); g.fillRect(x,y+2,x+s-4,y+21); @@ -20,7 +18,12 @@ function draw() { g.setColor(CHARGING).fillRect(x+4,y+6,x+4+E.getBattery()*(s-12)/100,y+17); g.setColor(-1); } -Bangle.on('charging',function(charging) { draw(); g.flip(); if(charging)Bangle.buzz(); }); +Bangle.on('charging',function(charging) { + if(charging) Bangle.buzz(); + setWidth(); + Bangle.drawWidgets(); // relayout widgets + g.flip(); +}); var batteryInterval; Bangle.on('lcdPower', function(on) { if (on) { @@ -35,5 +38,6 @@ Bangle.on('lcdPower', function(on) { } } }); -WIDGETS["battery"]={draw:draw}; +WIDGETS["bat"]={area:"tr",width:40,draw:draw}; +setWidth(); })() diff --git a/apps/widbt/ChangeLog b/apps/widbt/ChangeLog new file mode 100644 index 000000000..1a85a6b12 --- /dev/null +++ b/apps/widbt/ChangeLog @@ -0,0 +1 @@ +0.02: Tweaks for variable size widget system diff --git a/apps/widbt/widget.js b/apps/widbt/widget.js index c4074a797..0ffd0dd4c 100644 --- a/apps/widbt/widget.js +++ b/apps/widbt/widget.js @@ -1,16 +1,13 @@ (function(){ var img_bt = E.toArrayBuffer(atob("CxQBBgDgFgJgR4jZMawfAcA4D4NYybEYIwTAsBwDAA==")); -var xpos = WIDGETPOS.tr-24; -WIDGETPOS.tr-=24; function draw() { - var x = xpos, y = 0; + g.reset(); if (NRF.getSecurityStatus().connected) g.setColor(0,0.5,1); else g.setColor(0.3,0.3,0.3); - g.drawImage(img_bt,10+x,2+y); - g.setColor(1,1,1); + g.drawImage(img_bt,10+this.x,2+this.y); } function changed() { draw(); @@ -18,5 +15,5 @@ function changed() { } NRF.on('connected',changed); NRF.on('disconnected',changed); -WIDGETS["bluetooth"]={draw:draw}; +WIDGETS["bluetooth"]={area:"tr",width:24,draw:draw}; })() diff --git a/apps/widclk/ChangeLog b/apps/widclk/ChangeLog new file mode 100644 index 000000000..ba01ef944 --- /dev/null +++ b/apps/widclk/ChangeLog @@ -0,0 +1 @@ +0.02: Now refresh battery monitor every minute if LCD on diff --git a/apps/widclk/widget.js b/apps/widclk/widget.js index f73f8688b..a1129328f 100644 --- a/apps/widclk/widget.js +++ b/apps/widclk/widget.js @@ -1,39 +1,27 @@ (() => { let intervalRef = null; var width = 5 * 6*2 - var xpos = WIDGETPOS.tr - width; - WIDGETPOS.tr -= (width + 2); - + function draw() { - // Widget (0,0,239,23) - let date = new Date(); - var dateArray = date.toString().split(" "); - g.setColor(1,1,1); - g.setFont("6x8", 2); - g.setFontAlign(-1, 0); - g.drawString(dateArray[4].substr(0, 5), xpos, 11, true); // 5 * 6*2 = 60 - g.flip(); + g.reset().setFont("6x8", 2).setFontAlign(-1, 0); + var time = require("locale").time(new Date(),1); + g.drawString(time, this.x, this.y+11, true); // 5 * 6*2 = 60 } function clearTimers(){ - if(intervalRef) { - clearInterval(intervalRef); - intervalRef = null; - } + if(intervalRef) { + clearInterval(intervalRef); + intervalRef = null; + } } function startTimers(){ - if(intervalRef) clearTimers(); - intervalRef = setInterval(draw, 60*1000); - draw(); + intervalRef = setInterval(draw, 60*1000); + draw(); } Bangle.on('lcdPower', (on) => { - if (on) { - // startTimers(); // comment out as it is called by app anyway - } else { - clearTimers(); - } + clearTimers(); + if (on) startTimers(); }); - // add your widget - WIDGETS["wdclk"]={draw:startTimers}; - -})() \ No newline at end of file + WIDGETS["wdclk"]={area:"tr",width:width,draw:draw}; + if (Bangle.isLCDOn) intervalRef = setInterval(draw, 60*1000); +})() diff --git a/apps/widhrm/ChangeLog b/apps/widhrm/ChangeLog index 4c21f3ace..4152a8406 100644 --- a/apps/widhrm/ChangeLog +++ b/apps/widhrm/ChangeLog @@ -1 +1,2 @@ 0.01: New Widget! +0.02: Tweaks for variable size widget system diff --git a/apps/widhrm/widget.js b/apps/widhrm/widget.js index 3a1d5da09..f0af08f46 100644 --- a/apps/widhrm/widget.js +++ b/apps/widhrm/widget.js @@ -1,16 +1,14 @@ (() => { - var xpos = WIDGETPOS.tl; - var width = 24; - WIDGETPOS.tl += width+2; var currentBPM = undefined; var lastBPM = undefined; var firstBPM = true; // first reading since sensor turned on function draw() { + var width = 24; g.reset(); g.setFont("6x8", 1); g.setFontAlign(0, 0); - g.clearRect(xpos,15,xpos+width,24); // erase background + g.clearRect(this.x,this.y+15,this.x+width,this.y+23); // erase background var bpm = currentBPM, isCurrent = true; if (bpm===undefined) { bpm = lastBPM; @@ -19,9 +17,9 @@ if (bpm===undefined) bpm = "--"; g.setColor(isCurrent ? "#ffffff" : "#808080"); - g.drawString(bpm, xpos+width/2, 19); + g.drawString(bpm, this.x+width/2, this.y+19); g.setColor(isCurrent ? "#ff0033" : "#808080"); - g.drawImage(atob("CgoCAAABpaQ//9v//r//5//9L//A/+AC+AAFAA=="),xpos+(width-10)/2,1); + g.drawImage(atob("CgoCAAABpaQ//9v//r//5//9L//A/+AC+AAFAA=="),this.x+(width-10)/2,this.y+1); g.setColor(-1); } @@ -49,5 +47,5 @@ Bangle.setHRMPower(Bangle.isLCDOn()); // add your widget - WIDGETS["hrm"]={draw:draw}; + WIDGETS["hrm"]={area:"tl",width:24,draw:draw}; })(); diff --git a/apps/widid/ChangeLog b/apps/widid/ChangeLog index 2b3617f98..4152a8406 100644 --- a/apps/widid/ChangeLog +++ b/apps/widid/ChangeLog @@ -1 +1,2 @@ -0.01: New Widget! \ No newline at end of file +0.01: New Widget! +0.02: Tweaks for variable size widget system diff --git a/apps/widid/widget.js b/apps/widid/widget.js index 84f5fe5f0..efbfdfd19 100644 --- a/apps/widid/widget.js +++ b/apps/widid/widget.js @@ -1,16 +1,12 @@ /* jshint esversion: 6 */ (() => { - var xpos = WIDGETPOS.tr - 16; - WIDGETPOS.tr -= 16; - id = NRF.getAddress().split(":"); + var id = NRF.getAddress().substr().substr(12).split(":"); // draw your widget at xpos function draw() { - var x = xpos, - y = 0; g.reset().setColor(0, 0.5, 1).setFont("6x8", 1); - g.drawString(id[4], x, 0, true); - g.drawString(id[5], x, 10, true); + g.drawString(id[0], this.x+2, this.y+4, true); + g.drawString(id[1], this.x+2, this.y+14, true); } - WIDGETS["widid"] = { draw: draw }; + WIDGETS["widid"] = { area:"tr", width:16, draw: draw }; })(); diff --git a/apps/widnceu/ChangeLog b/apps/widnceu/ChangeLog new file mode 100644 index 000000000..4152a8406 --- /dev/null +++ b/apps/widnceu/ChangeLog @@ -0,0 +1,2 @@ +0.01: New Widget! +0.02: Tweaks for variable size widget system diff --git a/apps/widnceu/widget.js b/apps/widnceu/widget.js index fa0e11cd1..44f8acdb4 100644 --- a/apps/widnceu/widget.js +++ b/apps/widnceu/widget.js @@ -1,13 +1,5 @@ -(function(){ -var img = E.toArrayBuffer(atob("SxgCAAAAAAAAAAAAAAAAAAAAAAAAALwDwH/gD/0B//Af+AAD4C8f/wL8Dwf/8H//C//C//AAD9C8f/wL9Dw//+H//i4AD0AH8D/C8fAAL/Dz///H//y8ALgAf/D/i8fAALrzz///H//2//PAAv/Dz28f/gLz7z///H//29VPQAv/Dx+8fqQLw/y///H//y4ALwAP/Dwv8fAALwfw//9H//i+qD8FC0DwP8fAALwPwP/4H/+C//A//AADwD8fAAAAAAC/QD+gAAAAL4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGqooBkD+AP0fgvgAAAAAAAAAAL/88C4NBw0NBjQcAAAAAAAAAALQA8C4AAyQDBjAJAAAAAAAAAALQA8C4AAzACBjAKAAAAAAAAAAL/88C4ABTACRjQbAAAAAAAAAAL/48C4AHDACRgvjAAAAAAAAAALQA8C4AcDACBgACAAAAAAAAAALQA+D0BwCQDBgANAAAAAAAAAAL/8P/wHAA0NBgAoAAAAAAAAAAGqoC+AP/0HgAQuAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA")); -var xpos = WIDGETPOS.tl; -WIDGETPOS.tl+=75; - - -WIDGETS["nceu"]={draw:()=>{ - var x = xpos, y = 0; - g.setColor(0.17,0.2,0.5); - g.drawImage(img,x,y); +WIDGETS["nceu"]={area:"tl",width:75,draw:function(){ + g.reset().setColor(0.17,0.2,0.5); + g.drawImage(atob("SxgCAAAAAAAAAAAAAAAAAAAAAAAAALwDwH/gD/0B//Af+AAD4C8f/wL8Dwf/8H//C//C//AAD9C8f/wL9Dw//+H//i4AD0AH8D/C8fAAL/Dz///H//y8ALgAf/D/i8fAALrzz///H//2//PAAv/Dz28f/gLz7z///H//29VPQAv/Dx+8fqQLw/y///H//y4ALwAP/Dwv8fAALwfw//9H//i+qD8FC0DwP8fAALwPwP/4H/+C//A//AADwD8fAAAAAAC/QD+gAAAAL4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGqooBkD+AP0fgvgAAAAAAAAAAL/88C4NBw0NBjQcAAAAAAAAAALQA8C4AAyQDBjAJAAAAAAAAAALQA8C4AAzACBjAKAAAAAAAAAAL/88C4ABTACRjQbAAAAAAAAAAL/48C4AHDACRgvjAAAAAAAAAALQA8C4AcDACBgACAAAAAAAAAALQA+D0BwCQDBgANAAAAAAAAAAL/8P/wHAA0NBgAoAAAAAAAAAAGqoC+AP/0HgAQuAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"),this.x,this.y); g.setColor(1,1,1); }}; -})() diff --git a/apps/widpedom/ChangeLog b/apps/widpedom/ChangeLog index b6907b9c7..b0b0753fd 100644 --- a/apps/widpedom/ChangeLog +++ b/apps/widpedom/ChangeLog @@ -3,3 +3,4 @@ 0.04: Fix pedometer reload when going back to clock app 0.05: Add foot icon, use tidier font, and move to the left of the screen 0.06: Fix widget position increment +0.07: Tweaks for variable size widget system diff --git a/apps/widpedom/widget.js b/apps/widpedom/widget.js index e827702c9..6ab837c81 100644 --- a/apps/widpedom/widget.js +++ b/apps/widpedom/widget.js @@ -1,17 +1,11 @@ (() => { const PEDOMFILE = "wpedom.json"; - // add the width - // WIDGETPOS.tr is originally 208 without any widgets - var xpos = WIDGETPOS.tl; - var width = 24; - WIDGETPOS.tl += (width + 2); - let lastUpdate = new Date(); let stp_today = 0; - // draw your widget at xpos + // draw your widget function draw() { - // Widget (0,0,239,23) + var width = 24; if (stp_today > 99999){ stp_today = stp_today % 100000; // cap to five digits + comma = 6 characters } @@ -24,9 +18,9 @@ g.setFont("6x8", 1); } g.setFontAlign(0, 0); // align to x: center, y: center - g.clearRect(xpos,15,xpos+width,24); // erase background - g.drawString(stps, xpos+width/2, 19); - g.drawImage(atob("CgoCLguH9f2/7+v6/79f56CtAAAD9fw/n8Hx9A=="),xpos+(width-10)/2,2); + g.clearRect(this.x,this.y+15,this.x+width,this.y+23); // erase background + g.drawString(stps, this.x+width/2, this.y+19); + g.drawImage(atob("CgoCLguH9f2/7+v6/79f56CtAAAD9fw/n8Hx9A=="),this.x+(width-10)/2,this.y+2); } Bangle.on('step', (up) => { @@ -55,7 +49,7 @@ }); // add your widget - WIDGETS["wpedom"]={draw:draw}; + WIDGETS["wpedom"]={area:"tl",width:26,draw:draw}; // Load data at startup let pedomData = require("Storage").readJSON(PEDOMFILE,1); if (pedomData) {