diff --git a/apps/bwclk/README.md b/apps/bwclk/README.md index 5e2a7b55f..882d525f6 100644 --- a/apps/bwclk/README.md +++ b/apps/bwclk/README.md @@ -11,6 +11,7 @@ sub-items simply swipe up/down. To run an action (e.g. trigger home assistant), ![](screenshot_3.png) +Note: Check out the settings to change different themes. ## Settings - Screen: Normal (widgets shown), Dynamic (widgets shown if unlocked) or Full (widgets are hidden). diff --git a/apps/happyclk/ChangeLog b/apps/happyclk/ChangeLog index 759f68777..e87114779 100644 --- a/apps/happyclk/ChangeLog +++ b/apps/happyclk/ChangeLog @@ -1 +1,2 @@ -0.01: New app! \ No newline at end of file +0.01: New app! +0.02: Added settings to show/hide widgets and settings for different styles. \ No newline at end of file diff --git a/apps/happyclk/README.md b/apps/happyclk/README.md index 3540b5aca..d5b8752fb 100644 --- a/apps/happyclk/README.md +++ b/apps/happyclk/README.md @@ -14,6 +14,10 @@ Here you can see an example of a locked bangle with a low battery: ![](screenshot_3.png) +## Settings +- Screen: Normal (widgets shown), Dynamic (widgets shown if unlocked) or Full (widgets are hidden). +- Theme: Select your custom theme, independent of system settings. + ## Creator - [David Peer](https://github.com/peerdavid). diff --git a/apps/happyclk/happyclk.app.js b/apps/happyclk/happyclk.app.js index ad8f80cbf..8e22b6e1e 100644 --- a/apps/happyclk/happyclk.app.js +++ b/apps/happyclk/happyclk.app.js @@ -1,6 +1,82 @@ /************************************************ * Happy Clock */ + + +const storage = require('Storage'); +const widget_utils = require("widget_utils"); + + +/************************************************ + * Settings + */ +const SETTINGS_FILE = "happyclk.setting.json"; + +let settings = { + color: "Dark", + screen: "Dynamic" +}; + +let saved_settings = storage.readJSON(SETTINGS_FILE, 1) || settings; +for (const key in saved_settings) { + settings[key] = saved_settings[key]; +} + +var color_map = { + "Dark":{ + fg: "#fff", + bg: "#000", + eye: "#fff", + eyePupils: "#000" + }, + "Black":{ + fg: "#fff", + bg: "#000", + eye: "#000", + eyePupils: "#fff" + }, + "White":{ + fg: "#000", + bg: "#fff", + eye: "#fff", + eyePupils: "#000" + }, + "Blue":{ + fg: "#fff", + bg: "#00f", + eye: "#fff", + eyePupils: "#000" + }, + "Green":{ + fg: "#000", + bg: "#0f0", + eye: "#fff", + eyePupils: "#000" + }, + "Red":{ + fg: "#fff", + bg: "#f00", + eye: "#fff", + eyePupils: "#000" + }, + "Purple":{ + fg: "#fff", + bg: "#f0f", + eye: "#fff", + eyePupils: "#000" + }, + "Yellow":{ + fg: "#000", + bg: "#ff0", + eye: "#fff", + eyePupils: "#000" + } +}; +var colors = color_map[settings.color]; + +/************************************************ + * Globals + */ var W = g.getWidth(),R=W/2; var H = g.getHeight(); var drawTimeout; @@ -10,6 +86,16 @@ var drawTimeout; * HELPER */ +let isFullscreen = function() { + var s = settings.screen.toLowerCase(); + if(s == "dynamic"){ + return Bangle.isLocked(); + } else { + return s == "full"; + } + }; + + // Based on the great multi clock from https://github.com/jeffmer/BangleApps/ Graphics.prototype.drawPupils = function(cx, cy, r1, dx, dy, angle) { angle = angle % 360; @@ -19,11 +105,12 @@ Graphics.prototype.drawPupils = function(cx, cy, r1, dx, dy, angle) { g.setColor(g.theme.fg); g.fillCircle(cx, cy, 32); - g.setColor(g.theme.bg); + + g.setColor(colors.eye); g.fillCircle(cx, cy, 27); g.fillCircle(cx+dx, cy+dy, 28); - g.setColor(g.theme.fg); + g.setColor(colors.eyePupils); g.fillCircle(x, y, 8); g.fillCircle(x+1, y, 8); }; @@ -85,6 +172,7 @@ let drawEyes = function(){ let drawSmile = function(isLocked){ + g.setColor(colors.fg); var y = 120; var o = parseInt(E.getBattery()*0.8); @@ -100,6 +188,9 @@ let drawSmile = function(isLocked){ } let drawEyeBrow = function(){ + if(!isFullscreen()) return; + + g.setColor(colors.fg); var w = 6; for(var i = 0; i < w; i++){ g.drawLine(25, 25+i, 70, 15+i%3); @@ -108,6 +199,15 @@ let drawEyeBrow = function(){ } +let drawWidgets = function(){ + if (isFullscreen()) { + widget_utils.hide(); + } else { + Bangle.drawWidgets(); + } +} + + let draw = function(){ // Queue draw in one minute @@ -118,12 +218,16 @@ let draw = function(){ } let drawHelper = function(isLocked){ + g.setColor(g.theme.bg); + + g.fillRect(0, isFullscreen() ? 0 : 24, W, H); g.setColor(g.theme.fg); - g.reset().clear(); drawEyes(); drawEyeBrow(); drawSmile(isLocked); + + drawWidgets(); } @@ -140,6 +244,15 @@ Bangle.on('lcdPower',on=>{ }); Bangle.on('lock', function(isLocked) { + if (drawTimeout) clearTimeout(drawTimeout); + drawTimeout = undefined; + + if(!isLocked && settings.screen.toLowerCase() == "dynamic"){ + // If we have to show the widgets again, we load it from our + // cache and not through Bangle.loadWidgets as its much faster! + widget_utils.show(); + } + draw(isLocked); }); @@ -162,15 +275,9 @@ let queueDraw = function() { // Show launcher when middle button pressed Bangle.setUI("clock"); Bangle.loadWidgets(); -/* - * we are not drawing the widgets as we are taking over the whole screen - * so we will blank out the draw() functions of each widget and change the - * area to the top bar doesn't get cleared. - */ -require('widget_utils').hide(); // Clear the screen once, at startup and draw clock -// g.setTheme({bg:"#fff",fg:"#000",dark:false}); +g.setTheme({bg:colors.bg,fg:colors.fg,dark:false}); draw(); // After drawing the watch face, we can draw the widgets diff --git a/apps/happyclk/happyclk.settings.js b/apps/happyclk/happyclk.settings.js new file mode 100644 index 000000000..dd9f2f675 --- /dev/null +++ b/apps/happyclk/happyclk.settings.js @@ -0,0 +1,43 @@ +(function(back) { + const SETTINGS_FILE = "happyclk.setting.json"; + + // initialize with default settings... + const storage = require('Storage') + let settings = { + color: "Dark", + screen: "Dynamic" + }; + let saved_settings = storage.readJSON(SETTINGS_FILE, 1) || settings; + for (const key in saved_settings) { + settings[key] = saved_settings[key] + } + + function save() { + storage.write(SETTINGS_FILE, settings) + } + + var colorOptions = ["Dark", "Black", "White", "Blue", "Green", "Red", "Purple", "Yellow"]; + var screenOptions = ["Normal", "Dynamic", "Full"]; + E.showMenu({ + '': { 'title': 'Happy Clock' }, + '< Back': back, + 'Screen': { + value: 0 | screenOptions.indexOf(settings.screen), + min: 0, max: screenOptions.length-1, + format: v => screenOptions[v], + onchange: v => { + settings.screen = screenOptions[v]; + save(); + }, + }, + 'Theme': { + value: 0 | colorOptions.indexOf(settings.color), + min: 0, max: colorOptions.length-1, + format: v => colorOptions[v], + onchange: v => { + settings.color = colorOptions[v]; + save(); + }, + }, + }); +}) diff --git a/apps/happyclk/metadata.json b/apps/happyclk/metadata.json index 2388db667..e5129b0f0 100644 --- a/apps/happyclk/metadata.json +++ b/apps/happyclk/metadata.json @@ -3,7 +3,7 @@ "name": "Happy Clock", "shortName":"Happy Clock", "icon": "happyclk.png", - "version":"0.01", + "version":"0.02", "readme": "README.md", "supports": ["BANGLEJS2"], "description": "A happy clock :)", @@ -12,10 +12,13 @@ "screenshots": [ {"url":"screenshot_1.png"}, {"url":"screenshot_2.png"}, - {"url":"screenshot_3.png"} + {"url":"screenshot_3.png"}, + {"url":"screenshot_4.png"}, + {"url":"screenshot_5.png"} ], "storage": [ {"name":"happyclk.app.js","url":"happyclk.app.js"}, - {"name":"happyclk.img","url":"happyclk.icon.js","evaluate":true} + {"name":"happyclk.img","url":"happyclk.icon.js","evaluate":true}, + {"name":"happyclk.settings.js","url":"happyclk.settings.js"} ] } diff --git a/apps/happyclk/screenshot_2.png b/apps/happyclk/screenshot_2.png index 5bb00bc38..49c09ee31 100644 Binary files a/apps/happyclk/screenshot_2.png and b/apps/happyclk/screenshot_2.png differ diff --git a/apps/happyclk/screenshot_4.png b/apps/happyclk/screenshot_4.png new file mode 100644 index 000000000..b84e41ab1 Binary files /dev/null and b/apps/happyclk/screenshot_4.png differ diff --git a/apps/happyclk/screenshot_5.png b/apps/happyclk/screenshot_5.png new file mode 100644 index 000000000..401bb0c51 Binary files /dev/null and b/apps/happyclk/screenshot_5.png differ