Skip to content

Commit eb791f2

Browse files
author
thyttan
committed
Merge branch 'animation-fun' into app-loader
2 parents c8ab0a9 + 8f921b1 commit eb791f2

File tree

11 files changed

+214
-111
lines changed

11 files changed

+214
-111
lines changed

‎apps/dtlaunch/ChangeLog‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,3 +36,5 @@ when moving pages. Add caching for faster startups.
3636
clearing cache when changing those settings.
3737
Bangle 2: Use a separate cache file from the standard launcher.
3838
Bangle 2: Don't leave cache file after uninstalling the app.
39+
0.29: (WIP) Bangle 2: Start drawing UI ASAP - cascading in elements to initial
40+
page.

‎apps/dtlaunch/app-b2.js‎

Lines changed: 71 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -44,10 +44,6 @@
4444
initPageAppLast = Math.min(page*4+3, apps.length-1);
4545
}
4646

47-
for (let i = initPageAppZeroth; i <= initPageAppLast; i++) { // Initially only load icons for the current page.
48-
if (apps[i].icon)
49-
apps[i].icon = s.read(apps[i].icon); // should just be a link to a memory area
50-
}
5147

5248
let Napps = apps.length;
5349
let Npages = Math.ceil(Napps/4);
@@ -57,6 +53,36 @@
5753
const XOFF = 24;
5854
const YOFF = 30;
5955

56+
let dotIntvLen = 85;
57+
let delayTillFirstIcon = 135; //dotIntvLen*Npages;
58+
g.reset();
59+
g.clearRect(0,24,175,175);
60+
let O = 88+YOFF/2-12*(Npages/2);
61+
let j = 0;
62+
let drawDot = ()=>{
63+
let y = O+j*12;
64+
g.setColor(g.theme.fg);
65+
if (j==page) g.fillCircle(XOFF/2,y,4);
66+
else g.drawCircle(XOFF/2,y,4);
67+
g.flip();
68+
j++;
69+
if (j==Npages) {
70+
clearInterval(dotIntv);
71+
}
72+
}
73+
drawDot();
74+
let dotIntv = setInterval(drawDot, dotIntvLen)
75+
76+
77+
//
78+
// for (let j=0;j<Npages;j++){
79+
// let y = O+j*12;
80+
// g.setColor(g.theme.fg);
81+
// if (j==page) g.fillCircle(XOFF/2,y,4);
82+
// else g.drawCircle(XOFF/2,y,4);
83+
// g.flip();
84+
// }
85+
6086
let drawIcon= function(p,n,selected) {
6187
let x = (n%2)*72+XOFF;
6288
let y = n>1?72+YOFF:YOFF;
@@ -83,23 +109,48 @@
83109
g.drawString(line.trim(),x+36,y+54+lineY*8);
84110
};
85111

112+
let intv;
86113
let drawPage = function(p){
87-
g.reset();
88-
g.clearRect(0,24,175,175);
89-
let O = 88+YOFF/2-12*(Npages/2);
90-
for (let j=0;j<Npages;j++){
91-
let y = O+j*12;
92-
g.setColor(g.theme.fg);
93-
if (j==page) g.fillCircle(XOFF/2,y,4);
94-
else g.drawCircle(XOFF/2,y,4);
114+
if (!isFirstDrawPage) {
115+
g.reset();
116+
g.clearRect(0,24,175,175);
117+
let O = 88+YOFF/2-12*(Npages/2);
118+
for (let j=0;j<Npages;j++){
119+
let y = O+j*12;
120+
g.setColor(g.theme.fg);
121+
if (j==page) g.fillCircle(XOFF/2,y,4);
122+
else g.drawCircle(XOFF/2,y,4);
123+
}
95124
}
96-
for (let i=0;i<4;i++) {
125+
g.flip();
126+
setTimeout(()=>{
127+
let i=0;
128+
drawIcon(p,i,selected==i && !settings.direct);
129+
i++;
130+
intv = setInterval(()=>{
97131
if (!apps[p*4+i]) return i;
98132
drawIcon(p,i,selected==i && !settings.direct);
99-
}
100-
g.flip();
133+
g.flip();
134+
i++
135+
if (i==4) {
136+
clearInterval(intv);
137+
intv = undefined;
138+
}
139+
}, 90)
140+
}, 100);
141+
//for (let i=0;i<4;i++) {
142+
// if (!apps[p*4+i]) return i;
143+
// drawIcon(p,i,selected==i && !settings.direct);
144+
//g.flip();
145+
//}
101146
};
102147

148+
for (let i = initPageAppZeroth; i <= initPageAppLast; i++) { // Initially only load icons for the current page.
149+
if (apps[i].icon)
150+
apps[i].icon = s.read(apps[i].icon); // should just be a link to a memory area
151+
//drawPage(page);
152+
}
153+
103154
let buzzShort = function() {
104155
if (settings.interactionBuzz) Bangle.buzz(20);
105156
};
@@ -109,7 +160,10 @@
109160

110161
Bangle.drawWidgets(); // To immediately update widget field to follow current theme - remove leftovers if previous app set custom theme.
111162
Bangle.loadWidgets();
112-
drawPage(page);
163+
let isFirstDrawPage = true;
164+
//drawPage(page);
165+
//isFirstDrawPage = false;
166+
setTimeout(()=>{drawPage(page); isFirstDrawPage = false; },delayTillFirstIcon);
113167

114168
for (let i = 0; i < apps.length; i++) { // Load the rest of the app icons that were not initially.
115169
if (i >= initPageAppZeroth && i <= initPageAppLast) continue;
@@ -194,6 +248,7 @@
194248
touch : touchListenerDt,
195249
remove : ()=>{
196250
if (timeoutToClock) {clearTimeout(timeoutToClock);}
251+
if (intv) {clearInterval(intv)}
197252
global.dtlaunch.handlePagePersist(page);
198253
}
199254
});

‎apps/dtlaunch/metadata.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"id": "dtlaunch",
33
"name": "Desktop Launcher",
4-
"version": "0.28",
4+
"version": "0.29",
55
"description": "Desktop style App Launcher with six (four for Bangle 2) apps per page - fast access if you have lots of apps installed.",
66
"screenshots": [{"url":"shot1.png"},{"url":"shot2.png"},{"url":"shot3.png"}],
77
"icon": "icon.png",

‎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)