diff --git a/apps.json b/apps.json index b6311a48f..10b37e5b1 100644 --- a/apps.json +++ b/apps.json @@ -42,7 +42,7 @@ "name": "Launcher (Default)", "shortName":"Launcher", "icon": "app.png", - "version":"0.06", + "version":"0.07", "description": "This is needed by Bangle.js to display a menu allowing you to choose your own applications. You can replace this with a customised launcher.", "tags": "tool,system,launcher,b2", "type":"launch", @@ -1381,7 +1381,7 @@ { "id": "barclock", "name": "Bar Clock", "icon": "clock-bar.png", - "version":"0.07", + "version":"0.08", "description": "A simple digital clock showing seconds as a bar", "tags": "clock", "type":"clock", diff --git a/apps/barclock/ChangeLog b/apps/barclock/ChangeLog index 9589a1902..c56967d3d 100644 --- a/apps/barclock/ChangeLog +++ b/apps/barclock/ChangeLog @@ -5,3 +5,4 @@ 0.05: Clock does not start if app Languages is not installed 0.06: Improve accuracy 0.07: Update to use Bangle.setUI instead of setWatch +0.08: Use theme colors, Layout library \ No newline at end of file diff --git a/apps/barclock/clock-bar.js b/apps/barclock/clock-bar.js index 5069faa39..c2b4bde12 100644 --- a/apps/barclock/clock-bar.js +++ b/apps/barclock/clock-bar.js @@ -3,167 +3,102 @@ * A simple digital clock showing seconds as a bar **/ // Check settings for what type our clock should be -const is12Hour = (require('Storage').readJSON('setting.json', 1) || {})['12hour'] -let locale = require('locale') +const is12Hour = (require("Storage").readJSON("setting.json", 1) || {})["12hour"]; +let locale = require("locale"); { // add some more info to locale - let date = new Date() - date.setFullYear(1111) - date.setMonth(1, 3) // februari: months are zero-indexed - const localized = locale.date(date, true) - locale.dayFirst = /3.*2/.test(localized) + let date = new Date(); + date.setFullYear(1111); + date.setMonth(1, 3); // februari: months are zero-indexed + const localized = locale.date(date, true); + locale.dayFirst = /3.*2/.test(localized); - locale.hasMeridian = false - if(typeof locale.meridian === 'function') { // function does not exists if languages app is not installed - locale.hasMeridian = (locale.meridian(date) !== '') + locale.hasMeridian = false; + if (typeof locale.meridian==="function") { // function does not exist if languages app is not installed + locale.hasMeridian = (locale.meridian(date)!==""); } - } -const screen = { - width: g.getWidth(), - height: g.getWidth(), - middle: g.getWidth() / 2, - center: g.getHeight() / 2, +Bangle.loadWidgets(); +function renderBar(l) { + if (!this.fraction) { + // zero-size fillRect stills draws one line of pixels, we don't want that + return; + } + const width = this.fraction*l.w; + g.fillRect(l.x, l.y, width-1, l.y+l.height-1); } -// hardcoded "settings" -const settings = { - time: { - color: -1, - font: '6x8', - size: (is12Hour && locale.hasMeridian) ? 6 : 8, - middle: screen.middle, - center: screen.center, - ampm: { - color: -1, - font: '6x8', - size: 2, +const Layout = require("Layout"); +const layout = new Layout({ + type: "v", c: [ + { + type: "h", c: [ + {id: "time", label: "88:88", type: "txt", font: "6x8:5", bgCol: g.theme.bg}, // size updated below + {id: "ampm", label: " ", type: "txt", font: "6x8:2", bgCol: g.theme.bg}, + ], }, - }, - date: { - color: -1, - font: 'Vector', - size: 20, - middle: screen.height - 20, // at bottom of screen - center: screen.center, - }, - bar: { - color: -1, - top: 155, // just below time - thickness: 6, // matches 24h time "pixel" size - }, + {id: "bar", type: "custom", fraction: 0, fillx: 1, height: 6, col: g.theme.fg2, render: renderBar}, + {height: 40}, + {id: "date", type: "txt", font: "10%", valign: 1}, + ], +}, false, {lazy: true}); +// adjustments based on screen size and whether we display am/pm +let thickness; // bar thickness, same as time font "pixel block" size +if (is12Hour) { + // Maximum font size = ( - ) / (5chars * 6px) + thickness = Math.floor((g.getWidth()-24)/(5*6)); +} else { + layout.ampm.label = ""; + thickness = Math.floor(g.getWidth()/(5*6)); } +layout.bar.height = thickness+1; +layout.time.font = "6x8:"+thickness; +layout.update(); -const SECONDS_PER_MINUTE = 60 - -const timeText = function (date) { +function timeText(date) { if (!is12Hour) { - return locale.time(date, true) + return locale.time(date, true); } - const date12 = new Date(date.getTime()) - const hours = date12.getHours() - if (hours === 0) { - date12.setHours(12) - } else if (hours > 12) { - date12.setHours(hours - 12) + const date12 = new Date(date.getTime()); + const hours = date12.getHours(); + if (hours===0) { + date12.setHours(12); + } else if (hours>12) { + date12.setHours(hours-12); } - return locale.time(date12, true) + return locale.time(date12, true); } -const ampmText = function (date) { - return is12Hour ? locale.meridian(date) : '' +function ampmText(date) { + return (is12Hour && locale.hasMeridian)? locale.meridian(date) : ""; } - -const dateText = function (date) { +function dateText(date) { const dayName = locale.dow(date, true), month = locale.month(date, true), - day = date.getDate() - const dayMonth = locale.dayFirst ? `${day} ${month}` : `${month} ${day}` - return `${dayName} ${dayMonth}` + day = date.getDate(); + const dayMonth = locale.dayFirst ? `${day} ${month}` : `${month} ${day}`; + return `${dayName} ${dayMonth}`; } -const drawDateTime = function (date) { - const t = settings.time - g.setColor(t.color) - g.setFont(t.font, t.size) - g.setFontAlign(0, 0) // centered - g.drawString(timeText(date), t.center, t.middle, true) - if (is12Hour && locale.hasMeridian) { - const a = settings.time.ampm - g.setColor(a.color) - g.setFont(a.font, a.size) - g.setFontAlign(1, -1) // right top - // at right edge of screen, aligned with time bottom - const left = screen.width - a.size * 2, - top = t.middle + t.size - a.size - g.drawString(ampmText(date), left, top, true) - } +draw = function draw() { + if (!Bangle.isLCDOn()) {return;} // no drawing, also no new update scheduled + const date = new Date(); + layout.time.label = timeText(date); + layout.ampm.label = ampmText(date); + layout.date.label = dateText(date); + const SECONDS_PER_MINUTE = 60; + layout.bar.fraction = date.getSeconds()/SECONDS_PER_MINUTE; + layout.render(); + // schedule update at start of next second + const millis = date.getMilliseconds(); + setTimeout(draw, 1000-millis); +}; - const d = settings.date - g.setColor(d.color) - g.setFont(d.font, d.size) - g.setFontAlign(0, 0) // centered - g.drawString(dateText(date), d.center, d.middle, true) -} - -const drawBar = function (date) { - const b = settings.bar - const seconds = date.getSeconds() - if (seconds === 0) { - // zero-size rect stills draws one line of pixels, we don't want that - return - } - const fraction = seconds / SECONDS_PER_MINUTE, - width = fraction * screen.width - g.setColor(b.color) - g.fillRect(0, b.top, width, b.top + b.thickness) -} - -const clearScreen = function () { - g.setColor(0) - const timeTop = settings.time.middle - (settings.time.size * 4) - g.fillRect(0, timeTop, screen.width, screen.height) -} - -let lastSeconds, tTick -const tick = function () { - g.reset() - const date = new Date() - const seconds = date.getSeconds() - if (lastSeconds > seconds) { - // new minute - clearScreen() - drawDateTime(date) - } - // the bar only gets larger, so drawing on top of the previous one is fine - drawBar(date) - lastSeconds = seconds - // schedule next update - const millis = date.getMilliseconds() - tTick = setTimeout(tick, 1000-millis) -} - -const start = function () { - lastSeconds = 99 // force redraw - tick() -} -const stop = function () { - if (tTick) { - clearTimeout(tTick) - tTick = undefined - } -} - -// clean app screen -g.clear() -Bangle.loadWidgets() -Bangle.drawWidgets() // Show launcher when button pressed Bangle.setUI("clock"); - -Bangle.on('lcdPower', function (on) { +Bangle.on("lcdPower", function(on) { if (on) { - start() - } else { - stop() + draw(); } -}) -start() +}); +g.reset().clear(); +Bangle.drawWidgets(); +draw(); diff --git a/apps/barclock/screenshot.png b/apps/barclock/screenshot.png index d37ee9cae..9c2b7a50f 100644 Binary files a/apps/barclock/screenshot.png and b/apps/barclock/screenshot.png differ diff --git a/apps/barclock/screenshot_pm.png b/apps/barclock/screenshot_pm.png index a2a3f63fb..983f17aaa 100644 Binary files a/apps/barclock/screenshot_pm.png and b/apps/barclock/screenshot_pm.png differ diff --git a/apps/launch/ChangeLog b/apps/launch/ChangeLog index b56c9f6bb..09569d8da 100644 --- a/apps/launch/ChangeLog +++ b/apps/launch/ChangeLog @@ -4,3 +4,4 @@ 0.04: Now displays widgets 0.05: Use g.theme for colours 0.06: Use Bangle.setUI for buttons +0.07: Theme colours fix \ No newline at end of file diff --git a/apps/launch/app.js b/apps/launch/app.js index ab1a89fc0..449e16e62 100644 --- a/apps/launch/app.js +++ b/apps/launch/app.js @@ -33,8 +33,10 @@ function drawMenu() { if (i+menuScroll==selected) { g.setColor(g.theme.bgH).fillRect(0,y,w-1,y+63); g.setColor(g.theme.fgH).drawRect(0,y,w-1,y+63); - } else - g.clearRect(0,y,w-1,y+63); + } else { + g.clearRect(0, y, w-1, y+63); + g.setColor(g.theme.fg); + } g.drawString(app.name,64,y+32); var icon=undefined; if (app.icon) icon = s.read(app.icon); diff --git a/apps/slidingtext/slidingtext.locale.es.js b/apps/slidingtext/slidingtext.locale.es.js index e1f3bc18b..1b6f6d11b 100644 --- a/apps/slidingtext/slidingtext.locale.es.js +++ b/apps/slidingtext/slidingtext.locale.es.js @@ -7,7 +7,7 @@ const spanishNumberStr = [ ["ZERO"], // 0 ["CUATRO",''], //4 ["CINCO",''], //5 ["SEIS",''], //6 - ["SEITO",''], //7 + ["SIETE",''], //7 ["OCHO",''], //8 ["NUEVE",''], // 9, ["DIEZ",''], // 10 @@ -20,7 +20,7 @@ const spanishNumberStr = [ ["ZERO"], // 0 ["DIECI",'SIETE'], // 17 ["DIECI",'OCHO'], // 18 ["DIECI",'NEUVE'], // 19 - ["VEINTA",''], // 20 + ["VEINTE",''], // 20 ["VEINTI",'UNO'], // 21 ["VEINTI",'DOS'], // 22 ["VEINTI",'TRES'], // 23 @@ -74,4 +74,4 @@ class SpanishDateFormatter extends DateFormatter { } } -module.exports = SpanishDateFormatter; \ No newline at end of file +module.exports = SpanishDateFormatter;