diff --git a/apps/slopeclockpp/ChangeLog b/apps/slopeclockpp/ChangeLog index 5560f00bc..aef4d7324 100644 --- a/apps/slopeclockpp/ChangeLog +++ b/apps/slopeclockpp/ChangeLog @@ -1 +1,2 @@ -0.01: New App! +0.01: Clone of original SlopeClock +0.02: Added configuration diff --git a/apps/slopeclockpp/app.js b/apps/slopeclockpp/app.js index 25fd307eb..497d4a4c9 100644 --- a/apps/slopeclockpp/app.js +++ b/apps/slopeclockpp/app.js @@ -11,6 +11,12 @@ Graphics.prototype.setFontPaytoneOne = 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 settings = Object.assign( + require("Storage").readJSON("slopeclockpp.default.json", true) || {}, + require("Storage").readJSON("slopeclockpp.json", true) || {} +); + let drawTimeout; let g2 = Graphics.createArrayBuffer(g.getWidth(),90,1,{msb:true}); @@ -24,7 +30,16 @@ const fontBorder = 4; // offset from left/right const slopeBorder = 10, slopeBorderUpper = 4; // fudge-factor to move minutes down from slope let R,x,y; // middle of the clock face let dateStr = ""; -let bgColors = g.theme.dark ? ["#ff0","#0ff","#f0f"] : ["#f00","#0f0","#00f"]; +let bgColors = []; +if (g.theme.dark) { + if (settings.colorYellow) bgColors.push("#ff0"); + if (settings.colorCyan) bgColors.push("#0ff"); + if (settings.colorMagenta) bgColors.push("#f0f"); +} else { + if (settings.colorRed) bgColors.push("#f00"); + if (settings.colorGreen) bgColors.push("#0f0"); + if (settings.colorBlue) bgColors.push("#00f"); +} let bgColor = bgColors[(Math.random()*bgColors.length)|0]; @@ -95,19 +110,23 @@ let animate = function(isIn, callback) { // draw the date g.setColor(g.theme.bg).setFontAlign(0, 0).setFont("6x15").drawString(dateStr, R.x + R.w/2, R.y+R.h-9); + if (settings.showSteps || true) { // draw steps to bottom left const steps = getSteps(); if (steps > 0) g.setFontAlign(-1, 0).drawString(shortValue(steps), 3, R.y+R.h-30); + } - // draw weather to top right - const weather = getWeather(); - const tempString = weather ? require("locale").temp(weather.temp - 273.15) : undefined; - const code = weather ? weather.code : -1; - if (code > -1) { - g.setColor(g.theme.fg).setFontAlign(1, 0).drawString(tempString, R.w - 3, y-slope-slopeBorderUpper); - const icon = getWeatherIconByCode(code); - if (icon) g.drawImage(icon, R.w - 3 - 15, y-slope-slopeBorderUpper - 15 - 15); + if (settings.showWeather || true) { + // draw weather to top right + const weather = getWeather(); + const tempString = weather ? require("locale").temp(weather.temp - 273.15) : undefined; + const code = weather ? weather.code : -1; + if (code > -1) { + g.setColor(g.theme.fg).setFontAlign(1, 0).drawString(tempString, R.w - 3, y-slope-slopeBorderUpper); + const icon = getWeatherIconByCode(code); + if (icon) g.drawImage(icon, R.w - 3 - 15, y-slope-slopeBorderUpper - 15 - 15); + } } } if (callback) callback(); diff --git a/apps/slopeclockpp/default.json b/apps/slopeclockpp/default.json new file mode 100644 index 000000000..448d64f6a --- /dev/null +++ b/apps/slopeclockpp/default.json @@ -0,0 +1,10 @@ +{ + "showSteps": true, + "showWeather": true, + "colorRed": true, + "colorGreen": true, + "colorBlue": true, + "colorYellow": true, + "colorMagenta": true, + "colorCyan": true +} diff --git a/apps/slopeclockpp/metadata.json b/apps/slopeclockpp/metadata.json index 9e28424a8..fc6d3e415 100644 --- a/apps/slopeclockpp/metadata.json +++ b/apps/slopeclockpp/metadata.json @@ -1,7 +1,7 @@ { "id": "slopeclockpp", "name": "Slope Clock ++", - "version":"0.01", - "description": "A clock where hours and minutes are divided by a sloping line. When the minute changes, the numbers slide off the screen. This is a clone of the original Slope Clock which shows weather and steps.", + "version":"0.02", + "description": "A clock where hours and minutes are divided by a sloping line. When the minute changes, the numbers slide off the screen. This is a clone of the original Slope Clock which can show the weather and steps.", "icon": "app.png", "screenshots": [{"url":"screenshot.png"}], "type": "clock", @@ -9,6 +9,11 @@ "supports" : ["BANGLEJS2"], "storage": [ {"name":"slopeclockpp.app.js","url":"app.js"}, - {"name":"slopeclockpp.img","url":"app-icon.js","evaluate":true} - ] + {"name":"slopeclockpp.img","url":"app-icon.js","evaluate":true}, + {"name":"slopeclockpp.settings.js","url":"settings.js"}, + {"name":"slopeclockpp.default.json","url":"default.json"} + ], + "data": [ + {"name":"slopeclockpp.json"} + ] } diff --git a/apps/slopeclockpp/settings.js b/apps/slopeclockpp/settings.js new file mode 100644 index 000000000..8e26a4aa9 --- /dev/null +++ b/apps/slopeclockpp/settings.js @@ -0,0 +1,64 @@ +(function(back) { + const SETTINGS_FILE = "slopclockpp.json"; + const storage = require('Storage'); + let settings = Object.assign( + storage.readJSON("slopclockpp.default.json", true) || {}, + storage.readJSON(SETTINGS_FILE, true) || {} + ); + + function save(key, value) { + settings[key] = value; + storage.write(SETTINGS_FILE, settings); + } + + function showMainMenu() { + let menu ={ + '': { 'title': 'Slope Clock ++' }, + /*LANG*/'< Back': back, + /*LANG*/'show steps': { + value: !!settings.showSteps, + format: () => (settings.showSteps ? 'Yes' : 'No'), + onchange: x => save('showSteps', x), + }, + /*LANG*/'show weather': { + value: !!settings.showWeather, + format: () => (settings.showWeather ? 'Yes' : 'No'), + onchange: x => save('showWeather', x), + }, + /*LANG*/'red': { + value: !!settings.colorRed, + format: () => (settings.colorRed ? 'Yes' : 'No'), + onchange: x => save('colorRed', x), + }, + /*LANG*/'green': { + value: !!settings.colorGreen, + format: () => (settings.colorGreen ? 'Yes' : 'No'), + onchange: x => save('colorGreen', x), + }, + /*LANG*/'blue': { + value: !!settings.colorBlue, + format: () => (settings.colorBlue ? 'Yes' : 'No'), + onchange: x => save('colorBlue', x), + }, + /*LANG*/'magenta': { + value: !!settings.colorMagenta, + format: () => (settings.colorMagenta ? 'Yes' : 'No'), + onchange: x => save('colorMagenta', x), + }, + /*LANG*/'cyan': { + value: !!settings.colorCyan, + format: () => (settings.colorCyan ? 'Yes' : 'No'), + onchange: x => save('colorCyan', x), + }, + /*LANG*/'yellow': { + value: !!settings.colorYellow, + format: () => (settings.colorYellow ? 'Yes' : 'No'), + onchange: x => save('colorYellow', x), + } + }; + E.showMenu(menu); + } + + + showMainMenu(); +});