Skip to content

Commit 3022a9a

Browse files
volovedvoloved
committed
Refactored
1 parent fd8785f commit 3022a9a

File tree

1 file changed

+85
-71
lines changed

1 file changed

+85
-71
lines changed

‎apps/jsonclock/app.js‎

Lines changed: 85 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,23 @@ const storage = require('Storage');
44
const widget_utils = require('widget_utils');
55
const global_settings = storage.readJSON("setting.json", true) || {};
66
const LOCATION_FILE = "mylocation.json";
7-
const h = g.getHeight();
8-
const w = g.getWidth();
97
let location;
108
let cachedSunTimes = null;
119
let lastSunCalcDate = null;
12-
var prevVals = {};
10+
var valsArrs = {};
1311
let drawTimeout;
1412

13+
const h = g.getHeight();
14+
const w = g.getWidth();
15+
const fontSize = 13;
16+
const lineHeight = 16;
17+
const buttonHeight = 12;
18+
const buttonX = 78;
19+
const buttonY = 3;
20+
const headerHeight = 16;
21+
const usableHeight = h - headerHeight;
22+
const maxLines = Math.floor(usableHeight / lineHeight);
23+
1524
var settings = {
1625
hr_12: global_settings["12hour"] !== undefined ? global_settings["12hour"] : false,
1726
dark_mode: g.theme.dark
@@ -26,22 +35,6 @@ let clrs = {
2635
brackets: g.theme.fg,
2736
};
2837

29-
30-
let jsonText;
31-
let lines = [];
32-
let fontSize = 13;
33-
const lineHeight = 16;
34-
35-
const buttonHeight = 12;
36-
const buttonX = 78;
37-
const buttonY = 3;
38-
39-
let keysDrawn = false;
40-
const headerHeight = 16;
41-
const usableHeight = h - headerHeight;
42-
const maxLines = Math.floor(usableHeight / lineHeight);
43-
var numWidth = 0;
44-
4538
// requires the myLocation app
4639
let loadLocation = function() {
4740
location = require("Storage").readJSON(LOCATION_FILE, 1) || {};
@@ -110,7 +103,17 @@ let getVal = function(now, loc) {
110103
return vals;
111104
};
112105

113-
let loadJson = function() {
106+
107+
let getKeyValRegex = function(line) {
108+
return line.trim().match(/^"([^"]+)":\s*(.+)$/);
109+
};
110+
111+
let getIndentRegex = function(line) {
112+
const indentMatch = line.match(/^(\s*)/);
113+
return indentMatch ? indentMatch[1] : "";
114+
};
115+
116+
let getJsonLine = function() {
114117
const now = new Date();
115118
const vals = getVal(now, location);
116119
//vals.steps = null; // For testing; uncomment to see the steps not appear
@@ -135,9 +138,9 @@ let loadJson = function() {
135138
set: vals.set,
136139
};
137140
}
138-
jsonText = JSON.stringify(raw, null, 2);
139-
lines = jsonText.split("\n");
140-
};
141+
let jsonText = JSON.stringify(raw, null, 2);
142+
return jsonText.split("\n");
143+
};
141144

142145
let draw = function() {
143146
g.clear();
@@ -153,91 +156,101 @@ let draw = function() {
153156
g.setFont("Vector", buttonHeight);
154157
g.drawString("X", buttonX, buttonY);
155158
g.setFont("Vector", fontSize);
156-
159+
160+
var lines = getJsonLine();
161+
var numWidth = 0;
162+
163+
// Draw numbers first to find out their max width
157164
for (let i = 0; i < maxLines; i++) {
158165
const y = headerHeight + i * lineHeight;
159166
const lineNumberStr = (i + 1).toString().padStart(2, " ") + " ";
160167
g.drawString(lineNumberStr, 0, y);
161168
numWidth = Math.max(numWidth, g.stringWidth(lineNumberStr));
162169
}
163-
164-
redrawValues();
165-
};
166-
167-
let redraw = function() {
168-
g.setFont("Vector", fontSize);
169170
for (let i = 0; i < maxLines; i++) {
170-
const lineIndex = i;
171-
const line = lines[lineIndex];
172-
if (!line) continue;
173171
const y = headerHeight + i * lineHeight;
172+
const line = lines[i];
173+
if (!line) continue;
174174

175-
const indentMatch = line.match(/^(\s*)/);
176-
const indent = indentMatch ? indentMatch[1] : "";
177-
178-
const kvMatch = line.trim().match(/^"([^"]+)":\s*(.+)$/);
175+
let kvMatch = getKeyValRegex(line);
179176
if (kvMatch) {
180177
const key = kvMatch[1];
181178
let value = kvMatch[2];
182-
183-
let valPrev = (prevVals[key] && prevVals[key].text) || null;
184-
if (valPrev === value) continue;
185-
186-
if (!keysDrawn) {
187-
prevVals[key] = {};
188-
// Key
189-
g.setColor(clrs.keys);
190-
const keyText = indent + `"${key}"`;
191-
g.drawString(keyText, numWidth, y);
192-
const keyWidth = g.stringWidth(keyText);
193-
let valueX = numWidth + keyWidth;
194179

195-
g.setColor(clrs.brackets);
196-
const colonText = ": ";
197-
g.drawString(colonText, valueX, y);
198-
valueX += g.stringWidth(colonText);
199-
prevVals[key].x = valueX;
200-
prevVals[key].y = y;
201-
}
202-
prevVals[key].text = value;
203-
let pos = prevVals[key];
180+
// Key
181+
g.setColor(clrs.keys);
182+
const indent = getIndentRegex(line);
183+
const keyText = indent + `"${key}"`;
184+
g.drawString(keyText, numWidth, y);
185+
const keyWidth = g.stringWidth(keyText);
186+
let x = numWidth + keyWidth;
204187

205-
// Clear prev values
206-
g.setColor(clrs.bg);
207-
g.fillRect(pos.x, pos.y, w, pos.y + lineHeight);
188+
g.setColor(clrs.brackets);
189+
const colonText = ": ";
190+
g.drawString(colonText, x, y);
191+
x += g.stringWidth(colonText);
208192

209193
// Value color
210194
const endComma = value.endsWith(',');
195+
valsArrs[key] = {text:value, x:x, y:y, endComma:endComma};
211196
if (endComma) value = value.slice(0, -1);
212197
if (value.startsWith('"')) {
213-
g.setColor(clrs.strings);
198+
valsArrs[key].color = clrs.strings;
214199
} else if (value.startsWith('{') || value.startsWith('}')) {
215-
g.setColor(clrs.brackets);
200+
valsArrs[key].color = clrs.brackets;
216201
} else {
217-
g.setColor(clrs.ints);
202+
valsArrs[key].color = clrs.ints;
218203
}
219-
g.drawString(value, pos.x, pos.y);
204+
g.setColor(valsArrs[key].color);
205+
g.drawString(value, x, y);
220206
if (endComma){
221207
g.setColor(clrs.brackets);
222-
g.drawString(',', pos.x + g.stringWidth(value), pos.y);
208+
g.drawString(',', x + g.stringWidth(value), y);
223209
}
224210
}
225-
else if (!keysDrawn) {
211+
else {
226212
g.setColor(clrs.brackets);
227213
g.drawString(line, numWidth, y);
214+
}
215+
}
216+
};
217+
218+
// Redraws only values that changed
219+
let redraw = function() {
220+
g.setFontAlign(-1, -1);
221+
g.setFont("Vector", fontSize);
222+
var lines = getJsonLine();
223+
224+
for (let i = 0; i < lines.length; i++) {
225+
let kvMatch = getKeyValRegex(lines[i]);
226+
if (!kvMatch) continue;
227+
const key = kvMatch[1];
228+
let value = kvMatch[2];
229+
if (!(key in valsArrs)) continue;
230+
let valsArr = valsArrs[key];
231+
if (value === valsArr.text) continue; // No need to update
232+
valsArrs[key].text = value;
233+
234+
// Clear prev values
235+
g.setColor(clrs.bg);
236+
g.fillRect(valsArr.x, valsArr.y, w, valsArr.y + lineHeight);
237+
238+
g.setColor(valsArr.color);
239+
g.drawString(value, valsArr.x, valsArr.y);
240+
if (valsArr.endComma){
241+
g.setColor(clrs.brackets);
242+
g.drawString(',', valsArr.Banglex + g.stringWidth(value), valsArr.y);
243+
}
228244
}
229-
}
230-
keysDrawn = true;
231245
};
232246

233247
let redrawValues = function() {
234-
loadJson();
235248
redraw();
236249
if (drawTimeout) clearTimeout(drawTimeout);
237250
drawTimeout = setTimeout(function() {
238251
drawTimeout = undefined;
239252
redrawValues();
240-
}, 60000 - (Date.now() % 60000));
253+
}, 600 - (Date.now() % 600));
241254
};
242255

243256
Bangle.on('touch', (zone, e) => {
@@ -258,4 +271,5 @@ loadLocation();
258271
Bangle.loadWidgets();
259272
widget_utils.hide();
260273
draw();
274+
redrawValues(); // To set the timeout
261275
}

0 commit comments

Comments
 (0)