Skip to content

Commit 4d1a522

Browse files
bobripplingbobrippling
authored
Merge pull request #4075 from matharden/blockclock
Add Block Clock watch face app
2 parents 347f0b4 + 919b27d commit 4d1a522

File tree

9 files changed

+231
-0
lines changed

9 files changed

+231
-0
lines changed

‎apps/blockclock/ChangeLog‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
0.1: New clock app - "Block Clock"

‎apps/blockclock/README.md‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# Block Clock
2+
3+
A clock made from blocks where numbers are overly simplified and barely readable, this clock hopelessly strives for aesthetics rather than utility.
4+
5+
Time is displayed in a grid of 4 numbers…
6+
7+
> **HH
8+
> MM**
9+
10+
<img alt="Photo of Block Clock" src="blockclock-photo-2339.png" width="400" />
11+
12+
### The digits
13+
14+
Each number is a grid of 4 blocks.
15+
16+
| 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
17+
| :---: | :---: | :---: | :---: | :---: | :---: | :---: | :---: | :---: | :---: |
18+
| ⬛⬛<br>⬛⬛ | ⬛⬜<br>⬛⬜ | ⬛⬜<br>⬜⬛ | ⬛⬜<br>⬜⬜ | ⬜⬛<br>⬛⬜ | ⬜⬜<br>⬜⬛ | ⬜⬛<br>⬜⬜ | ⬜⬜<br>⬛⬛ | ⬜⬜<br>⬜⬜ | ⬜⬜<br>⬛⬜ |
19+
20+
Example time: 12:34
21+
22+
⬛⬜⬛⬜<br>⬛⬜⬜⬛<br>⬛⬜⬜⬛<br>⬜⬜⬛⬜
23+
24+
## Options
25+
26+
### Beginner mode
27+
28+
Joins the blocks of a digit together.
29+
30+
### Colour mode
31+
32+
Display each digit as a different color.
33+
34+
Example time: 12:34
35+
36+
⬛🟨⬛🟦<br>⬛🟨🟦⬛<br>⬛🟩🟪⬛<br>🟩🟩⬛🟪

‎apps/blockclock/app.js‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
var settings = Object.assign({
2+
beginner: false,
3+
colour: false,
4+
}, require('Storage').readJSON("blockclock.json", true) || {});
5+
6+
// Gap between digits.
7+
const digitGap = settings.beginner ? 4 : 3;
8+
const blockGap = settings.beginner ? 0 : 3;
9+
// Size of a block ("pixel").
10+
const blockSize = settings.beginner ? 41 : 40;
11+
// Colours.
12+
const colours = {
13+
normal: ["#000", "#fff"],
14+
colour: [
15+
"#000", "#ff0", "#0ff", "#0f0", "#f0f",
16+
],
17+
};
18+
// A digit is made-up of four blocks.
19+
// [0][1]
20+
// [2][3]
21+
const digits = [
22+
[
23+
// Top left
24+
[0,0],
25+
[1 * blockSize, 1 * blockSize]
26+
],
27+
[
28+
// Top right
29+
[1 * blockSize + blockGap, 0],
30+
[2 * blockSize + blockGap, 1 * blockSize]
31+
],
32+
[
33+
// Bottom left
34+
[0, 1 * blockSize + blockGap],
35+
[1 * blockSize, 2 * blockSize + blockGap]
36+
],
37+
[
38+
// Bottom right
39+
[1 * blockSize + blockGap, 1 * blockSize + blockGap],
40+
[2 * blockSize + blockGap, 2 * blockSize + blockGap]
41+
]
42+
];
43+
// Top-left of each digit.
44+
const digitGrid = [
45+
[
46+
// Hour tens
47+
digitGap,
48+
digitGap
49+
],
50+
[
51+
// Hour units
52+
2 * digitGap + blockGap + 2 * blockSize,
53+
digitGap
54+
],
55+
[
56+
// Minute tens
57+
digitGap,
58+
2 * digitGap + blockGap + 2 * blockSize
59+
],
60+
[
61+
// Minute units
62+
2 * digitGap + blockGap + 2 * blockSize,
63+
2 * digitGap + blockGap + 2 * blockSize]
64+
];
65+
66+
// Decimal representation of the digit's binary value.
67+
const numbers = [0, 5, 6, 7, 9, 14, 11, 12, 15, 13];
68+
69+
// Global timer.
70+
let timer = null;
71+
72+
function getArray(num) {
73+
return num.toString(2).padStart(4, 0).split("").map(Number);
74+
}
75+
76+
function buildBangleClock() {
77+
// Clear background.
78+
g.clear(1);
79+
//Bangle.drawWidgets();
80+
g.reset();
81+
// Set background.
82+
g.setColor("#000");
83+
g.fillRect(0, 0, g.getWidth(), g.getWidth());
84+
85+
const time = new Date();
86+
// Get numbers.
87+
const clockDigits = getDigits(time);
88+
for (const idx in clockDigits) {
89+
buildBangleDigit(~~idx, clockDigits[idx]);
90+
}
91+
92+
const t = time.getSeconds()*1000 + time.getMilliseconds();
93+
timer = setTimeout(buildBangleClock, 60000 - t); // time till next minute
94+
}
95+
96+
function getDigits(time) {
97+
const hours = `${time.getHours()}`.padStart(2, 0).split("");
98+
const hourDigit1 = hours[0], hourDigit2 = hours[1];
99+
const minutes = `${time.getMinutes()}`.padStart(2, 0).split("");
100+
const minDigit1 = minutes[0], minDigit2 = minutes[1];
101+
102+
return [
103+
numbers[~~hourDigit1],
104+
numbers[~~hourDigit2],
105+
numbers[~~minDigit1],
106+
numbers[~~minDigit2]
107+
];
108+
}
109+
110+
function buildBangleDigit(pos, number) {
111+
const digitArray = getArray(number);
112+
// Draw each of the four blocks.
113+
for (let block=0; block<4; block++) {
114+
if (settings.colour) {
115+
g.setColor(
116+
digitArray[block]
117+
? colours.colour[pos + 1]
118+
: colours.colour[0]
119+
);
120+
} else {
121+
g.setColor(colours.normal[~~digitArray[block]]);
122+
}
123+
g.fillRect(
124+
digitGrid[pos][0] + digits[block][0][0],
125+
digitGrid[pos][1] + digits[block][0][1],
126+
digitGrid[pos][0] + digits[block][1][0],
127+
digitGrid[pos][1] + digits[block][1][1]
128+
);
129+
}
130+
}
131+
132+
Bangle.on("lcdPower", function(on) {
133+
if (on) {
134+
buildBangleClock();
135+
} else {
136+
if (timer) {
137+
clearTimeout(timer);
138+
}
139+
}
140+
});
141+
Bangle.setUI("clock");
142+
buildBangleClock();

‎apps/blockclock/app.png‎

339 Bytes
Loading

‎apps/blockclock/blockclock-photo-2339.png‎

365 KB
Loading

‎apps/blockclock/icon.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
require("heatshrink").decompress(atob("mEwgIPMg/+v/v/gF2IP5BHAAk/+EACIQF1RJAF5ABQA="))

‎apps/blockclock/metadata.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"id": "blockclock",
3+
"name": "Block Clock",
4+
"version": "0.1",
5+
"description": "This is a simple clock using minimalist 2x2 pixel numerical digits",
6+
"icon": "app.png",
7+
"type": "clock",
8+
"tags": "clock",
9+
"supports": ["BANGLEJS","BANGLEJS2"],
10+
"readme": "README.md",
11+
"allow_emulator": true,
12+
"storage": [
13+
{"name":"blockclock.app.js","url":"app.js"},
14+
{"name":"blockclock.settings.js","url":"settings.js"},
15+
{"name":"blockclock.img","url":"icon.js","evaluate":true}
16+
],
17+
"data": [{"name":"blockclock.json"}],
18+
"screenshots" : [ { "url":"screenshot_2140.png" } ]
19+
}

‎apps/blockclock/screenshot_2140.png‎

17.2 KB
Loading

‎apps/blockclock/settings.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
(function(back) {
2+
var FILE = "blockclock.json";
3+
4+
// Load settings
5+
var settings = Object.assign({
6+
beginner: false,
7+
colour: false,
8+
}, require('Storage').readJSON(FILE, true) || {});
9+
10+
function writeSettings() {
11+
require('Storage').writeJSON(FILE, settings);
12+
}
13+
14+
E.showMenu({
15+
"" : { "title" : "Block Clock" },
16+
"< Back" : () => back(),
17+
'Beginner mode': {
18+
value: !!settings.beginner,
19+
onchange: v => {
20+
settings.beginner = v;
21+
writeSettings();
22+
}
23+
},
24+
'Colour mode': {
25+
value: !!settings.colour,
26+
onchange: v => {
27+
settings.colour = v;
28+
writeSettings();
29+
}
30+
},
31+
});
32+
})

0 commit comments

Comments
 (0)