Why am I seeing Uncaught TypeError: Assignment to a constant?

[voloved]

Hey,

I'm working on my first clock.
The two difficulties I'm having both involve gracefully killing it.
Below is my app's code. I scoped the whole thing, so that things like const storage should disappear when I run load() or press the physical button, but they don't. I referenced other clock faces, but cannot find what they are doing that my code is missing.

Some help would be appreciated!

Issues:

1. I cannot find a manual way to kill my app. I want to do so with a tap in a certain place, but the best I can find in the Software Reference doc is showLauncher. Is there a better way?
2. I press the physical button. I enter the launcher. I press it again, and get the following message in the emulator:

Uncaught TypeError: Assignment to a constant
 at line 8 col 27 in jsonclock.app.js
const storage=require("Storage");

https://github.com/voloved/BangleApps/blob/devolov/apps/jsonclock/app.js

{
var 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();
    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); // just stringify the object
    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);
    loadJson();
    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));
    }

    redraw();
};

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(); // I am unable to find a way to ext the  app in the Software Referneces
    }
});

Bangle.on('backlight', function(on) {
    if (on) {
        redrawValues(); // or just draw() if you want full re-render
    }
});

Bangle.setUI({
    mode: "clock",
    remove: function() {
        if (drawTimeout) clearTimeout(drawTimeout);
        drawTimeout = undefined;
    }
});

loadLocation();
Bangle.loadWidgets();
widget_utils.hide();
draw();
}

[voloved]

Update: Issue was me. I had an improperly-scope version set to my main face face.
So I'd test my working code that's stored in RAM, get to the launcher, leave the launcher, and get to my incorrect code that's stored in flash.

I am still looking for the correct way to leave the face via a tap on the screen.

[thyttan]

I am still looking for the correct way to leave the face via a tap on the screen.

The most common way to leave the clock face for the launcher is probably using the hardware button (automatically set when specifying the clock mode to setUI).

You probably also saw the red back widget button, which you could add by specifying a "back" function when calling setUI. But since you hide widgets that probably makes less sense.

I would do what you do with the touch listener. But refacator so you define it as a named function, e.g. let touchHandler = (zone, e) => { ... } , and specify that in the setUI call:

let touchHandler = (zone, e) => {
    if (e.x >= (buttonY - buttonHeight) && e.x <= (buttonX + buttonHeight) &&
        (e.y >= (buttonY - buttonHeight) && e.y <= (buttonY + buttonHeight))) {
        Bangle.showLauncher(); // I am unable to find a way to ext the  app in the Software Referneces
    }
};

Bangle.setUI({
    mode: "clock",
    touch: touchHandler,
    remove: function() {
        if (drawTimeout) clearTimeout(drawTimeout);
        drawTimeout = undefined;
    }
});

[voloved]

Thanks! I tested that out and saw that the widgets don't update on the Launcher with this. I'm sure I can just perform a widget show command, but keeping the code as is has it working exactly as I'd like.

I PR'd it to the main repo.
espruino/BangleApps#3812