From c734ef8347f9c3c20d08b957c7b3e94b00812f80 Mon Sep 17 00:00:00 2001 From: stweedo Date: Fri, 16 Jun 2023 09:24:11 -0500 Subject: [PATCH] Wrap program in IIFE so variables don't leak --- apps/boxclk/app.js | 424 +++++++++++++++++++++++---------------------- 1 file changed, 213 insertions(+), 211 deletions(-) diff --git a/apps/boxclk/app.js b/apps/boxclk/app.js index a2202cb68..bf4309737 100644 --- a/apps/boxclk/app.js +++ b/apps/boxclk/app.js @@ -1,223 +1,225 @@ -let w = g.getWidth(); -let h = g.getHeight(); -let totalWidth, totalHeight; -let touchHandler; -let dragHandler; -let drawTimeout; -let enableSuffix = true; -let storage = require("Storage"); -let locale = require("locale"); -let date = new Date(); +(function() { + let w = g.getWidth(); + let h = g.getHeight(); + let totalWidth, totalHeight; + let touchHandler; + let dragHandler; + let drawTimeout; + let enableSuffix = true; + let storage = require("Storage"); + let locale = require("locale"); + let date = new Date(); -let bgImage; -let boxesConfig = storage.readJSON('boxclk.json', 1) || {}; -let boxes = {}; + let bgImage; + let boxesConfig = storage.readJSON('boxclk.json', 1) || {}; + let boxes = {}; -function loadCustomFont() { - Graphics.prototype.setFontBrunoAce = function() { - // Actual height 23 (24 - 2) - return this.setFontCustom( - E.toString(require('heatshrink').decompress(atob('ABMHwADBh4DKg4bKgIPDAYUfAYV/AYX/AQMD/gmC+ADBn/AByE/GIU8AYUwLxcfAYX/8AnB//4JIP/FgMP4F+CQQBBjwJBFYRbBAd43DHoJpBh/g/xPEK4ZfDgEEORKDDAY8////wADLfZrTCgITBnhEBAYJMBAYMPw4DCM4QDjhwDCjwDBn0+AYMf/gDBh/4AYMH+ADBLpc4ToK/NGYZfnAYcfL4U/x5fBW4LvB/7vC+LvBgHAsBfIn76Cn4WBcYQDFEgJ+CQQYDyH4L/BAZbHLNYjjCAZc8ngDunycBZ4KkBa4KwBnEHY4UB+BfMgf/ZgMH/4XBc4cf4F/gE+ZgRjwAYcfj5jBM4U4M4RQBM4UA8BjIngDFEYJ8BAYUDAYQvCM4ZxBC4V+AYQvBnkBQ4M8gabBJQPAI4WAAYM/GYQaBAYJKCnqyCn5OCn4aBAYIaBAYJPCU4IABnBhIuDXCFAMD+Z/BY4IDBQwOPwEfv6TDAYUPAcwrDAYQ7BAYY/BI4cD8bLCK4RfEAA0BRYTeDcwIrFn0Pw43Bg4DugYDBjxBBU4SvDMYMH/5QBgP/LAQAP8EHN4UPwADHB4YAHA'))), - 46, - atob("CBEdChgYGhgaGBsaCQ=="), - 32|65536 - ); - }; -} - -for (let key in boxesConfig) { - if (key === 'bg' && boxesConfig[key].img) { - bgImage = storage.read(boxesConfig[key].img); - } else { - boxes[key] = Object.assign({}, boxesConfig[key]); + function loadCustomFont() { + Graphics.prototype.setFontBrunoAce = function() { + // Actual height 23 (24 - 2) + return this.setFontCustom( + E.toString(require('heatshrink').decompress(atob('ABMHwADBh4DKg4bKgIPDAYUfAYV/AYX/AQMD/gmC+ADBn/AByE/GIU8AYUwLxcfAYX/8AnB//4JIP/FgMP4F+CQQBBjwJBFYRbBAd43DHoJpBh/g/xPEK4ZfDgEEORKDDAY8////wADLfZrTCgITBnhEBAYJMBAYMPw4DCM4QDjhwDCjwDBn0+AYMf/gDBh/4AYMH+ADBLpc4ToK/NGYZfnAYcfL4U/x5fBW4LvB/7vC+LvBgHAsBfIn76Cn4WBcYQDFEgJ+CQQYDyH4L/BAZbHLNYjjCAZc8ngDunycBZ4KkBa4KwBnEHY4UB+BfMgf/ZgMH/4XBc4cf4F/gE+ZgRjwAYcfj5jBM4U4M4RQBM4UA8BjIngDFEYJ8BAYUDAYQvCM4ZxBC4V+AYQvBnkBQ4M8gabBJQPAI4WAAYM/GYQaBAYJKCnqyCn5OCn4aBAYIaBAYJPCU4IABnBhIuDXCFAMD+Z/BY4IDBQwOPwEfv6TDAYUPAcwrDAYQ7BAYY/BI4cD8bLCK4RfEAA0BRYTeDcwIrFn0Pw43Bg4DugYDBjxBBU4SvDMYMH/5QBgP/LAQAP8EHN4UPwADHB4YAHA'))), + 46, + atob("CBEdChgYGhgaGBsaCQ=="), + 32|65536 + ); + }; } -} -let boxPos = {}; -let isDragging = {}; -let wasDragging = {}; - -Object.keys(boxes).forEach((boxKey) => { - let boxConfig = boxes[boxKey]; - boxPos[boxKey] = { - x: w * boxConfig.boxPos.x, - y: h * boxConfig.boxPos.y - }; - isDragging[boxKey] = false; - wasDragging[boxKey] = false; -}); - -let g_drawString = g.drawString; -g.drawString = function(box, str, x, y) { - outlineText(box, str, x, y); - g.setColor(box.color); - g_drawString.call(g, str, x, y); -}; - -function outlineText(box, str, x, y) { - let px = box.outline; - let dx = [-px, 0, px, -px, px, -px, 0, px]; - let dy = [-px, -px, -px, 0, 0, px, px, px]; - g.setColor(box.outlineColor); - for (let i = 0; i < dx.length; i++) { - g_drawString.call(g, str, x + dx[i], y + dy[i]); + for (let key in boxesConfig) { + if (key === 'bg' && boxesConfig[key].img) { + bgImage = storage.read(boxesConfig[key].img); + } else { + boxes[key] = Object.assign({}, boxesConfig[key]); + } } -} -function calcBoxSize(boxItem) { - g.reset(); - g.setFontAlign(0,0); - g.setFont(boxItem.font, boxItem.fontSize); - let strWidth = g.stringWidth(boxItem.string) + 2 * boxItem.outline; - let fontHeight = g.getFontHeight() + 2 * boxItem.outline; - totalWidth = strWidth + 2 * boxItem.xPadding; - totalHeight = fontHeight + 2 * boxItem.yPadding; -} + let boxPos = {}; + let isDragging = {}; + let wasDragging = {}; -function calcBoxPos(boxKey) { - return { - x1: boxPos[boxKey].x - totalWidth / 2, - y1: boxPos[boxKey].y - totalHeight / 2, - x2: boxPos[boxKey].x + totalWidth / 2, - y2: boxPos[boxKey].y + totalHeight / 2 - }; -} - -function getDate() { - const date = new Date(); - const dayOfMonth = date.getDate(); - const month = locale.month(date, 1); - const year = date.getFullYear(); - let suffix; - if ([1, 21, 31].includes(dayOfMonth)) { - suffix = "st"; - } else if ([2, 22].includes(dayOfMonth)) { - suffix = "nd"; - } else if ([3, 23].includes(dayOfMonth)) { - suffix = "rd"; - } else { - suffix = "th"; - } - let dayOfMonthStr = enableSuffix ? dayOfMonth + suffix : dayOfMonth; - return month + " " + dayOfMonthStr + ", " + year; -} - -function getDayOfWeek(date) { - return locale.dow(date, 0); -} - -function draw(boxes) { - date = new Date(); - g.clear(); - if (bgImage) { - g.drawImage(bgImage, 0, 0); - } - if (boxes.time) { - boxes.time.string = locale.time(date, 1); - } - if (boxes.date) { - boxes.date.string = getDate(); - } - if (boxes.dow) { - boxes.dow.string = getDayOfWeek(date); - } - if (boxes.batt) { - boxes.batt.string = E.getBattery() + "%"; - } Object.keys(boxes).forEach((boxKey) => { - let boxItem = boxes[boxKey]; + let boxConfig = boxes[boxKey]; + boxPos[boxKey] = { + x: w * boxConfig.boxPos.x, + y: h * boxConfig.boxPos.y + }; + isDragging[boxKey] = false; + wasDragging[boxKey] = false; + }); + + let g_drawString = g.drawString; + g.drawString = function(box, str, x, y) { + outlineText(box, str, x, y); + g.setColor(box.color); + g_drawString.call(g, str, x, y); + }; + + function outlineText(box, str, x, y) { + let px = box.outline; + let dx = [-px, 0, px, -px, px, -px, 0, px]; + let dy = [-px, -px, -px, 0, 0, px, px, px]; + g.setColor(box.outlineColor); + for (let i = 0; i < dx.length; i++) { + g_drawString.call(g, str, x + dx[i], y + dy[i]); + } + } + + function calcBoxSize(boxItem) { + g.reset(); + g.setFontAlign(0,0); + g.setFont(boxItem.font, boxItem.fontSize); + let strWidth = g.stringWidth(boxItem.string) + 2 * boxItem.outline; + let fontHeight = g.getFontHeight() + 2 * boxItem.outline; + totalWidth = strWidth + 2 * boxItem.xPadding; + totalHeight = fontHeight + 2 * boxItem.yPadding; + } + + function calcBoxPos(boxKey) { + return { + x1: boxPos[boxKey].x - totalWidth / 2, + y1: boxPos[boxKey].y - totalHeight / 2, + x2: boxPos[boxKey].x + totalWidth / 2, + y2: boxPos[boxKey].y + totalHeight / 2 + }; + } + + function getDate() { + const date = new Date(); + const dayOfMonth = date.getDate(); + const month = locale.month(date, 1); + const year = date.getFullYear(); + let suffix; + if ([1, 21, 31].includes(dayOfMonth)) { + suffix = "st"; + } else if ([2, 22].includes(dayOfMonth)) { + suffix = "nd"; + } else if ([3, 23].includes(dayOfMonth)) { + suffix = "rd"; + } else { + suffix = "th"; + } + let dayOfMonthStr = enableSuffix ? dayOfMonth + suffix : dayOfMonth; + return month + " " + dayOfMonthStr + ", " + year; + } + + function getDayOfWeek(date) { + return locale.dow(date, 0); + } + + function draw(boxes) { + date = new Date(); + g.clear(); + if (bgImage) { + g.drawImage(bgImage, 0, 0); + } + if (boxes.time) { + boxes.time.string = locale.time(date, 1); + } + if (boxes.date) { + boxes.date.string = getDate(); + } + if (boxes.dow) { + boxes.dow.string = getDayOfWeek(date); + } + if (boxes.batt) { + boxes.batt.string = E.getBattery() + "%"; + } + Object.keys(boxes).forEach((boxKey) => { + let boxItem = boxes[boxKey]; + calcBoxSize(boxItem); + const pos = calcBoxPos(boxKey); + if (isDragging[boxKey]) { + g.setColor(boxItem.border); + g.drawRect(pos.x1, pos.y1, pos.x2, pos.y2); + } + g.drawString( + boxItem, + boxItem.string, + boxPos[boxKey].x + boxItem.xOffset, + boxPos[boxKey].y + boxItem.yOffset + ); + }); + if (!Object.values(isDragging).some(Boolean)) { + if (drawTimeout) clearTimeout(drawTimeout); + drawTimeout = setTimeout(() => draw(boxes), 60000 - (Date.now() % 60000)); + } + } + + function setup() { + // Define the touchHandler function + touchHandler = function(zone, e) { + wasDragging = Object.assign({}, isDragging); + let boxTouched = false; + Object.keys(boxes).forEach((boxKey) => { + if (touchInText(e, boxes[boxKey], boxKey)) { + isDragging[boxKey] = true; + wasDragging[boxKey] = true; + boxTouched = true; + } + }); + if (!boxTouched) { + Object.keys(isDragging).forEach((boxKey) => { + isDragging[boxKey] = false; + }); + } + if (Object.values(wasDragging).some(Boolean) || !boxTouched) { + draw(boxes); + } + }; + + // Define the dragHandler function + dragHandler = function(e) { + Object.keys(boxes).forEach((boxKey) => { + if (isDragging[boxKey]) { + let boxItem = boxes[boxKey]; + calcBoxSize(boxItem); + let newX = boxPos[boxKey].x + e.dx; + let newY = boxPos[boxKey].y + e.dy; + if (newX - totalWidth / 2 >= 0 && + newX + totalWidth / 2 <= w && + newY - totalHeight / 2 >= 0 && + newY + totalHeight / 2 <= h ) { + boxPos[boxKey].x = newX; + boxPos[boxKey].y = newY; + } + const pos = (boxKey); + g.clearRect(pos.x1, pos.y1, pos.x2, pos.y2); + } + }); + draw(boxes); + }; + + Bangle.on('touch', touchHandler); + Bangle.on('drag', dragHandler); + + Bangle.setUI({ + mode : "clock", + remove : function() { + // remove the event handlers when the app should be removed + Bangle.removeListener('touch', touchHandler); + Bangle.removeListener('drag', dragHandler); + if (drawTimeout) clearTimeout(drawTimeout); + drawTimeout = undefined; + delete Graphics.prototype.setFontBrunoAce; + g.drawString = g_drawString; + require("widget_utils").show(); + } + }); + loadCustomFont(); + draw(boxes); + } + + function touchInText(e, boxItem, boxKey) { calcBoxSize(boxItem); const pos = calcBoxPos(boxKey); - if (isDragging[boxKey]) { - g.setColor(boxItem.border); - g.drawRect(pos.x1, pos.y1, pos.x2, pos.y2); - } - g.drawString( - boxItem, - boxItem.string, - boxPos[boxKey].x + boxItem.xOffset, - boxPos[boxKey].y + boxItem.yOffset - ); - }); - if (!Object.values(isDragging).some(Boolean)) { - if (drawTimeout) clearTimeout(drawTimeout); - drawTimeout = setTimeout(() => draw(boxes), 60000 - (Date.now() % 60000)); + return e.x >= pos.x1 && + e.x <= pos.x2 && + e.y >= pos.y1 && + e.y <= pos.y2; } -} -function setup() { - // Define the touchHandler function - touchHandler = function(zone, e) { - wasDragging = Object.assign({}, isDragging); - let boxTouched = false; - Object.keys(boxes).forEach((boxKey) => { - if (touchInText(e, boxes[boxKey], boxKey)) { - isDragging[boxKey] = true; - wasDragging[boxKey] = true; - boxTouched = true; - } - }); - if (!boxTouched) { - Object.keys(isDragging).forEach((boxKey) => { - isDragging[boxKey] = false; - }); - } - if (Object.values(wasDragging).some(Boolean) || !boxTouched) { - draw(boxes); - } - }; - - // Define the dragHandler function - dragHandler = function(e) { - Object.keys(boxes).forEach((boxKey) => { - if (isDragging[boxKey]) { - let boxItem = boxes[boxKey]; - calcBoxSize(boxItem); - let newX = boxPos[boxKey].x + e.dx; - let newY = boxPos[boxKey].y + e.dy; - if (newX - totalWidth / 2 >= 0 && - newX + totalWidth / 2 <= w && - newY - totalHeight / 2 >= 0 && - newY + totalHeight / 2 <= h ) { - boxPos[boxKey].x = newX; - boxPos[boxKey].y = newY; - } - const pos = (boxKey); - g.clearRect(pos.x1, pos.y1, pos.x2, pos.y2); - } - }); - draw(boxes); - }; - - Bangle.on('touch', touchHandler); - Bangle.on('drag', dragHandler); - - Bangle.setUI({ - mode : "clock", - remove : function() { - // remove the event handlers when the app should be removed - Bangle.removeListener('touch', touchHandler); - Bangle.removeListener('drag', dragHandler); - if (drawTimeout) clearTimeout(drawTimeout); - drawTimeout = undefined; - delete Graphics.prototype.setFontBrunoAce; - g.drawString = g_drawString; - require("widget_utils").show(); - } - }); - loadCustomFont(); - draw(boxes); -} - -function touchInText(e, boxItem, boxKey) { - calcBoxSize(boxItem); - const pos = calcBoxPos(boxKey); - return e.x >= pos.x1 && - e.x <= pos.x2 && - e.y >= pos.y1 && - e.y <= pos.y2; -} - -Bangle.loadWidgets(); -require("widget_utils").swipeOn(); -setup(); + Bangle.loadWidgets(); + require("widget_utils").swipeOn(); + setup(); +})(); \ No newline at end of file