Skip to content

Commit 8f921b1

Browse files
author
thyttan
committed
edgeclk: (WIP) draw time ASAP, cascade in the rest of info afterwards
1 parent 74f8fb9 commit 8f921b1

File tree

3 files changed

+110
-88
lines changed

3 files changed

+110
-88
lines changed

‎apps/edgeclk/ChangeLog‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,4 @@
44
0.04: Added option to display live updates of step count.
55
0.05: Reset graphics before initial clearing of the screen. Helps in some
66
situations if using fastload utils.
7+
0.06: (WIP) Draw time ASAP - cascade in the rest of info semi-gracefully.

‎apps/edgeclk/app.js‎

Lines changed: 108 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -34,52 +34,58 @@
3434
const stepIcon2 = atob('ExoBAfAAPgMHwfD4dx8ccAcH/8B/8Af8AH8AD+AB/AA/gAfwAP4AAAAD+AD/gBxwB48A4OA8HgcBwcAcOAOGADA=');
3535

3636

37+
let timeBetweenDraw = 200;
38+
3739
/* Draw Functions
3840
------------------------------------------------------------------------------*/
39-
40-
const drawAll = function () {
41-
const date = new Date();
42-
43-
drawDate(date);
44-
if (settings.showSeconds) drawSecs(date);
45-
drawTime(date);
46-
drawLower();
41+
const drawBar = function (top, progress) {
42+
// draw frame
43+
g.drawRect(0, top, g.getWidth() - 1, top + 5);
44+
g.drawRect(1, top + 1, g.getWidth() - 2, top + 4);
45+
// clear bar area
46+
g.clearRect(2, top + 2, g.getWidth() - 3, top + 3);
47+
// draw bar
48+
const barLen = progress >= 1 ? g.getWidth() : (g.getWidth() - 4) * progress;
49+
if (barLen < 1) return;
50+
g.drawLine(2, top + 2, barLen + 2, top + 2);
51+
g.drawLine(2, top + 3, barLen + 2, top + 3);
4752
};
4853

49-
const drawLower = function (stepsOnlyCount) {
50-
if (charging) {
51-
drawCharge();
52-
} else {
53-
drawSteps(stepsOnlyCount);
54-
}
55-
56-
drawWeather();
57-
};
54+
g.clearRect(0,24,175,175);
5855

59-
const drawWeather = function () {
60-
if (!settings.showWeather){
61-
return;
62-
}
56+
let firstDate = new Date();
57+
const drawTime = function (date) {
58+
const top = 72;
59+
g.reset();
6360

64-
g.setFontCustom(font, 48, 10, 512 + 12); // double size (1<<9)
65-
g.setFontAlign(1, 1); // right bottom
66-
67-
try{
68-
const weather = require('weather');
69-
const w = weather.get();
70-
let temp = parseInt(w.temp-273.15);
71-
temp = temp < 0 ? '\\' + String(temp*-1) : String(temp);
61+
const h = date.getHours();
62+
g.setFontCustom(font, 48, 10, 1024 + 12); // triple size (2<<9)
63+
g.setFontAlign(-1, -1); // left top
64+
g.drawString((settings.twentyFourH ? h : (h % 12 || 12)).toString().padStart(2, 0),
65+
0, top+12, true);
66+
g.setFontAlign(0, -1); // center top
67+
g.drawString(':', g.getWidth()/2, top+12, false);
68+
const m = date.getMinutes();
69+
g.setFontAlign(1, -1); // right top
70+
g.drawString(m.toString().padStart(2, 0),
71+
g.getWidth(), top+12, true);
7272

73-
g.drawString(temp, g.getWidth()-40, g.getHeight() - 1, true);
74-
75-
// clear icon area in case weather condition changed
76-
g.clearRect(g.getWidth()-40, g.getHeight()-30, g.getWidth(), g.getHeight());
77-
weather.drawIcon(w, g.getWidth()-20, g.getHeight()-15, 14);
73+
if (settings.showAmPm) {
74+
g.setFontCustom(font, 48, 10, 512 + 12); // double size (1<<9)
75+
g.setFontAlign(1, 1); // right bottom
76+
g.drawString(h < 12 ? 'AM' : 'PM', g.getWidth(), g.getHeight() - 1, true);
77+
}
78+
g.flip();
7879

79-
} catch(e) {
80-
g.drawString("???", g.getWidth()-3, g.getHeight() - 1, true);
80+
setTimeout(()=>{
81+
if (settings.dayBar) {
82+
drawBar(top, (h*60+m)/1440);
83+
} else {
84+
drawLine(top);
8185
}
86+
}, timeBetweenDraw + 50)
8287
};
88+
drawTime(firstDate);
8389

8490
const drawDate = function (date) {
8591
const top = 30;
@@ -120,42 +126,10 @@
120126
drawLine(top);
121127
}
122128
};
123-
124-
const drawTime = function (date) {
125-
const top = 72;
126-
g.reset();
127-
128-
const h = date.getHours();
129-
g.setFontCustom(font, 48, 10, 1024 + 12); // triple size (2<<9)
130-
g.setFontAlign(-1, -1); // left top
131-
g.drawString((settings.twentyFourH ? h : (h % 12 || 12)).toString().padStart(2, 0),
132-
0, top+12, true);
133-
g.setFontAlign(0, -1); // center top
134-
g.drawString(':', g.getWidth()/2, top+12, false);
135-
const m = date.getMinutes();
136-
g.setFontAlign(1, -1); // right top
137-
g.drawString(m.toString().padStart(2, 0),
138-
g.getWidth(), top+12, true);
139-
140-
if (settings.showAmPm) {
141-
g.setFontCustom(font, 48, 10, 512 + 12); // double size (1<<9)
142-
g.setFontAlign(1, 1); // right bottom
143-
g.drawString(h < 12 ? 'AM' : 'PM', g.getWidth(), g.getHeight() - 1, true);
144-
}
145-
146-
if (settings.dayBar) {
147-
drawBar(top, (h*60+m)/1440);
148-
} else {
149-
drawLine(top);
150-
}
151-
};
152-
153-
const drawSecs = function (date) {
154-
g.reset();
155-
g.setFontCustom(font, 48, 10, 512 + 12); // double size (1<<9)
156-
g.setFontAlign(1, 1); // right bottom
157-
g.drawString(date.getSeconds().toString().padStart(2, 0), g.getWidth(), g.getHeight() - 1, true);
158-
};
129+
setTimeout(()=>{
130+
drawDate(firstDate);
131+
g.flip();
132+
},timeBetweenDraw)
159133

160134
const drawSteps = function (onlyCount) {
161135
g.reset();
@@ -186,6 +160,66 @@
186160
}
187161
};
188162

163+
const drawWeather = function () {
164+
if (!settings.showWeather){
165+
return;
166+
}
167+
168+
g.setFontCustom(font, 48, 10, 512 + 12); // double size (1<<9)
169+
g.setFontAlign(1, 1); // right bottom
170+
171+
try{
172+
const weather = require('weather');
173+
const w = weather.get();
174+
let temp = parseInt(w.temp-273.15);
175+
temp = temp < 0 ? '\\' + String(temp*-1) : String(temp);
176+
177+
g.drawString(temp, g.getWidth()-40, g.getHeight() - 1, true);
178+
179+
// clear icon area in case weather condition changed
180+
g.clearRect(g.getWidth()-40, g.getHeight()-30, g.getWidth(), g.getHeight());
181+
weather.drawIcon(w, g.getWidth()-20, g.getHeight()-15, 14);
182+
183+
} catch(e) {
184+
g.drawString("???", g.getWidth()-3, g.getHeight() - 1, true);
185+
}
186+
};
187+
188+
const drawLower = function (stepsOnlyCount) {
189+
if (charging) {
190+
drawCharge();
191+
} else {
192+
drawSteps(stepsOnlyCount);
193+
}
194+
195+
drawWeather();
196+
};
197+
setTimeout(()=>{
198+
drawLower();
199+
g.flip();
200+
},2*timeBetweenDraw)
201+
202+
const drawSecs = function (date) {
203+
g.reset();
204+
g.setFontCustom(font, 48, 10, 512 + 12); // double size (1<<9)
205+
g.setFontAlign(1, 1); // right bottom
206+
g.drawString(date.getSeconds().toString().padStart(2, 0), g.getWidth(), g.getHeight() - 1, true);
207+
};
208+
setTimeout(()=>{
209+
drawSecs(firstDate);
210+
g.flip();
211+
},2*timeBetweenDraw+100)
212+
213+
214+
const drawAll = function () {
215+
const date = new Date();
216+
217+
drawTime(date);
218+
if (settings.showSeconds) drawSecs(date);
219+
drawDate(date);
220+
drawLower();
221+
};
222+
189223
const drawCharge = function () {
190224
g.reset();
191225
g.setFontCustom(font, 48, 10, 512 + 12); // double size (1<<9)
@@ -198,19 +232,6 @@
198232
g.drawImage(plugIcon, 0, g.getHeight() - 26);
199233
};
200234

201-
const drawBar = function (top, progress) {
202-
// draw frame
203-
g.drawRect(0, top, g.getWidth() - 1, top + 5);
204-
g.drawRect(1, top + 1, g.getWidth() - 2, top + 4);
205-
// clear bar area
206-
g.clearRect(2, top + 2, g.getWidth() - 3, top + 3);
207-
// draw bar
208-
const barLen = progress >= 1 ? g.getWidth() : (g.getWidth() - 4) * progress;
209-
if (barLen < 1) return;
210-
g.drawLine(2, top + 2, barLen + 2, top + 2);
211-
g.drawLine(2, top + 3, barLen + 2, top + 3);
212-
};
213-
214235
const drawLine = function (top) {
215236
const width = g.getWidth();
216237
g.drawLine(0, top + 2, width, top + 2);
@@ -336,8 +357,8 @@
336357
/* Startup Process
337358
------------------------------------------------------------------------------*/
338359

339-
g.clear(1);
340-
drawAll();
360+
//g.clearRect(0,24,175,175);
361+
//drawAll();
341362
startTimers();
342363
registerEvents();
343364

‎apps/edgeclk/metadata.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"id": "edgeclk",
33
"name": "Edge Clock",
44
"shortName": "Edge Clock",
5-
"version": "0.05",
5+
"version": "0.06",
66
"description": "Crisp clock with perfect readability.",
77
"readme": "README.md",
88
"icon": "app.png",

0 commit comments

Comments
 (0)