Merge remote-tracking branch 'voloved/jsonclock' into app-loader

Author: thyttan

apps/jsonclock/ChangeLog

@@ -0,0 +1 @@
+0.01: first release

apps/jsonclock/README.md

@@ -0,0 +1,20 @@
+# JSON Clock ![](app.png)
+
+  *JSON view of the time.*
+
+Written by: [David Volovskiy](https://github.com/voloved) and fully
+inspired by  [This FitBit face](https://github.com/Sharkgrammer/clockface.json)
+
+* Displays a JSON that shows the date, time, step count, sunrise/set and battery.
+* If the Bangle's theme is dark, then it'll show in dark view (`Settings>System>Theme>Dark BW`)
+* It'll show 12 hrs if it's set so in `Settings>System>Locale>Time Format`
+* Along with the physical button, you can leave the clock by pressing the `X` next to the `clockface.json` in the tab.
+* If the steps cannot be gotten, they won't display
+* If the location isn't set, then the JSON array will ignore the sun info and instead display the time as a struct.
+
+## Screenshots
+![](dark.png)
+![](white.png)
+![](no_steps.png)
+![](no_location.png)
+![](dark-emulator.png)

apps/jsonclock/app-icon.js

@@ -0,0 +1,259 @@
+{
+const SunCalc = require("suncalc"); // from modules folder
+const storage = require('Storage');
+const widget_utils = require('widget_utils');
+const global_settings = storage.readJSON("setting.json", true) || {};
+const LOCATION_FILE = "mylocation.json";
+const h = g.getHeight();
+const w = g.getWidth();
+let location;
+let cachedSunTimes = null;
+let lastSunCalcDate = null;
+var prevVals = {};
+let drawTimeout;
+
+var settings = {
+    hr_12: global_settings["12hour"] !== undefined ? global_settings["12hour"] : false,
+    dark_mode: g.theme.dark
+};
+
+let clrs = {
+    tab: "#505050", // grey
+    keys: settings.dark_mode ? "#4287f5" : "#0000FF", // blue
+    strings: settings.dark_mode ? "#F0A000" : "#FF0000", // orange or red
+    ints: settings.dark_mode ? "#00FF00" : "#005F00", // green
+    bg: g.theme.bg,
+    brackets: g.theme.fg,
+};
+
+
+let jsonText;
+let lines = [];
+let fontSize = 13;
+const lineHeight = 16;
+
+const buttonHeight = 12;
+const buttonX = 78;
+const buttonY = 3;
+
+let valuePositions = [];
+const headerHeight = 16;
+const usableHeight = h - headerHeight;
+const maxLines = Math.floor(usableHeight / lineHeight);
+var numWidth = 0;
+
+// requires the myLocation app
+let loadLocation = function() {
+    location = require("Storage").readJSON(LOCATION_FILE, 1) || {};
+    location.lat = location.lat || 0;
+    location.lon = location.lon || 0;
+    location.location = location.location || null;
+};
+
+let getHr = function(h) {
+    var amPm = "";
+    if (settings.hr_12) {
+        amPm = h < 12 ? "AM" : "PM";
+        h = h % 12;
+        if (h == 0) h = 12;
+    }
+    return [h, amPm];
+};
+
+let extractTime = function(d) {
+    const out = getHr(d.getHours());
+    const h = out[0];
+    const amPm = out[1];
+    const m = d.getMinutes();
+    return `${h}:${("0"+m).substr(-2)}${amPm}`;
+};
+
+let extractDate = function(d) {
+    const weekdays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+    const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
+        "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
+    ];
+
+    const weekday = weekdays[d.getDay()];
+    const month = months[d.getMonth()];
+    const day = d.getDate();
+
+    return `${weekday} ${month} ${day}`;
+};
+
+let getSteps = function() {
+    try {
+        return Bangle.getHealthStatus("day").steps;
+    } catch (e) {
+        if (WIDGETS.wpedom !== undefined)
+            return WIDGETS.wpedom.getSteps();
+        else
+            return null;
+    }
+};
+
+let getVal = function(now, loc) {
+    const vals = {};
+    const currentDateStr = extractDate(now);
+    if (loc.location) {
+        if (lastSunCalcDate !== currentDateStr) {
+            cachedSunTimes = SunCalc.getTimes(now, location.lat, location.lon);
+            lastSunCalcDate = currentDateStr;
+        }
+        vals.rise = extractTime(cachedSunTimes.sunrise);
+        vals.set = extractTime(cachedSunTimes.sunset);
+    }
+    vals.time = extractTime(now);
+    vals.date = currentDateStr;
+    vals.batt_pct = E.getBattery();
+    vals.steps = getSteps();
+    return vals;
+};
+
+let loadJson = function() {
+    const now = new Date();
+    const vals = getVal(now, location);
+    //vals.steps = null;  // For testing; uncomment to see the steps not appear
+    //location.location = null;  // For testing, if null, the time becomes an struct to take up sun's struct
+    let raw;
+
+    if (location.location !== null) {
+        raw = {
+            time: vals.time,
+            dt: vals.date,
+            sun: {
+                rise: vals.rise,
+                set: vals.set,
+            },
+            "batt_%": vals.batt_pct,
+        };
+    } else {
+        raw = {
+            time: {
+                hr: getHr(now.getHours())[0],
+                min: now.getMinutes(),
+            },
+            dt: vals.date,
+            "batt_%": vals.batt_pct,
+        };
+    }
+
+    if (vals.steps != null) raw.steps = vals.steps;
+
+    jsonText = JSON.stringify(raw, null, 2);
+    lines = jsonText.split("\n");
+};
+
+let draw = function() {
+    g.clear();
+    g.setFontAlign(-1, -1);
+    g.setFont("Vector", 10);
+    valuePositions = [];
+
+    g.setColor(clrs.tab);
+
+    g.fillRect(90, 0, w, headerHeight);
+    g.setColor(clrs.brackets);
+    g.drawString("clockface.json", 3, 3);
+
+    g.setFont("Vector", buttonHeight);
+    g.drawString("X", buttonX, buttonY);
+    g.setFont("Vector", fontSize);
+
+    for (let i = 0; i < maxLines; i++) {
+        const y = headerHeight + i * lineHeight;
+        const lineNumberStr = (i + 1).toString().padStart(2, " ") + " ";
+        g.drawString(lineNumberStr, 0, y);
+        numWidth = Math.max(numWidth, g.stringWidth(lineNumberStr));
+    }
+
+    redrawValues();
+};
+
+let redraw = function() {
+    for (let i = 0; i < maxLines; i++) {
+        const lineIndex = i;
+        const line = lines[lineIndex];
+        if (!line) continue;
+        const y = headerHeight + i * lineHeight;
+
+        const indentMatch = line.match(/^(\s*)/);
+        const indent = indentMatch ? indentMatch[1] : "";
+
+        const kvMatch = line.trim().match(/^"([^"]+)":\s*(.+)$/);
+        if (kvMatch) {
+            const key = kvMatch[1];
+            let value = kvMatch[2];
+
+            if (prevVals.key == value) continue;
+            prevVals.key = value;
+
+            // Key
+            g.setColor(clrs.keys);
+            g.drawString(indent + `"${key}"`, numWidth, y);
+            const keyWidth = g.stringWidth(indent + `"${key}"`);
+            const valueX = numWidth + keyWidth;
+            const valueText = ": " + value;
+
+            // Value color
+            if (value.startsWith('"')) {
+                g.setColor(clrs.strings);
+            } else if (value.startsWith('{') || value.startsWith('}')) {
+                g.setColor(clrs.brackets);
+            } else {
+                g.setColor(clrs.ints);
+            }
+            g.drawString(valueText, valueX, y);
+
+            valuePositions.push({
+                key,
+                x: valueX,
+                y,
+                text: value
+            });
+        } else {
+            g.setColor(clrs.brackets);
+            g.drawString(line, numWidth, y);
+        }
+    }
+};
+
+let clearVals = function() {
+    g.setFont("Vector", fontSize);
+    g.setFontAlign(-1, -1);
+    valuePositions.forEach(pos => {
+        g.setColor(clrs.bg);
+        g.fillRect(pos.x, pos.y, w, pos.y + lineHeight);
+    });
+};
+
+let redrawValues = function() {
+    loadJson();
+    clearVals();
+    redraw();
+    if (drawTimeout) clearTimeout(drawTimeout);
+    drawTimeout = setTimeout(function() {
+        drawTimeout = undefined;
+        redrawValues();
+    }, 60000 - (Date.now() % 60000));
+};
+
+Bangle.on('touch', (zone, e) => {
+    if (e.x >= (buttonY - buttonHeight) && e.x <= (buttonX + buttonHeight) &&
+        (e.y >= (buttonY - buttonHeight) && e.y <= (buttonY + buttonHeight))) {
+        Bangle.showLauncher(); // Exit app
+    }
+});
+
+Bangle.on('backlight', function(on) {
+    if (on) {
+        redrawValues();
+    }
+});
+
+Bangle.setUI("clock");
+loadLocation();
+Bangle.loadWidgets();
+widget_utils.hide();
+draw();
+}

apps/jsonclock/app.js

@@ -0,0 +1,15 @@
+{ "id": "jsonclock",
+  "name": "JsonClock",
+  "version": "0.01",
+  "description": "JSON view of the time, date, steps, battery, and sunrise and sunset times",
+  "icon": "app.png",
+  "screenshots": [{"url":"dark-emulator.png"}],
+  "readme": "README.md",
+  "type": "clock",
+  "tags": "clock",
+  "supports": ["BANGLEJS","BANGLEJS2"],
+  "storage": [
+    {"name":"jsonclock.app.js","url":"app.js"},
+    {"name":"jsonclock.img","url":"app-icon.js","evaluate":true}
+  ]
+}