Skip to content

Commit 7b9c22b

Browse files
thegeckothegecko
committed
Add LED Matrix
1 parent 7818167 commit 7b9c22b

File tree

8 files changed

+191
-6
lines changed

8 files changed

+191
-6
lines changed

‎.npmignore

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.DS_Store
2+
.stencil
3+
.vscode
4+
node_modules
5+
.gitignore
6+
circle.yml
7+
index.html
8+
npm-debug.log

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ Web Components library for micro:bit
3232

3333
## LEDs
3434
- [x] Write Text
35-
- [ ] Read/Write LED Matrix
35+
- [x] Read/Write LED Matrix
3636

3737
# Serial
3838
- [ ] Send Message

‎package-lock.json

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,6 @@
3535
"@joseph184/rollup-plugin-node-builtins": "2.1.4",
3636
"@stencil/core": "^0.18.1",
3737
"@stencil/state-tunnel": "0.0.8",
38-
"microbit-web-bluetooth": "^0.1.1"
38+
"microbit-web-bluetooth": "^0.1.2"
3939
}
4040
}

‎src/components.d.ts

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -186,6 +186,37 @@ export namespace Components {
186186
'noInfo'?: string;
187187
}
188188

189+
interface MicrobitMatrix {
190+
/**
191+
* The template for identifying child LEDs
192+
*/
193+
'idTemplate': string;
194+
/**
195+
* The css class for off LEDs
196+
*/
197+
'offClass': string;
198+
/**
199+
* The css class for on LEDs
200+
*/
201+
'onClass': string;
202+
'services': Services;
203+
}
204+
interface MicrobitMatrixAttributes extends StencilHTMLAttributes {
205+
/**
206+
* The template for identifying child LEDs
207+
*/
208+
'idTemplate'?: string;
209+
/**
210+
* The css class for off LEDs
211+
*/
212+
'offClass'?: string;
213+
/**
214+
* The css class for on LEDs
215+
*/
216+
'onClass'?: string;
217+
'services'?: Services;
218+
}
219+
189220
interface MicrobitText {
190221
/**
191222
* The text shown on the button
@@ -376,6 +407,7 @@ declare global {
376407
'MicrobitModel': Components.MicrobitModel;
377408
'MicrobitName': Components.MicrobitName;
378409
'MicrobitSerial': Components.MicrobitSerial;
410+
'MicrobitMatrix': Components.MicrobitMatrix;
379411
'MicrobitText': Components.MicrobitText;
380412
'MicrobitApp': Components.MicrobitApp;
381413
'MicrobitConnect': Components.MicrobitConnect;
@@ -394,6 +426,7 @@ declare global {
394426
'microbit-model': Components.MicrobitModelAttributes;
395427
'microbit-name': Components.MicrobitNameAttributes;
396428
'microbit-serial': Components.MicrobitSerialAttributes;
429+
'microbit-matrix': Components.MicrobitMatrixAttributes;
397430
'microbit-text': Components.MicrobitTextAttributes;
398431
'microbit-app': Components.MicrobitAppAttributes;
399432
'microbit-connect': Components.MicrobitConnectAttributes;
@@ -452,6 +485,12 @@ declare global {
452485
new (): HTMLMicrobitSerialElement;
453486
};
454487

488+
interface HTMLMicrobitMatrixElement extends Components.MicrobitMatrix, HTMLStencilElement {}
489+
var HTMLMicrobitMatrixElement: {
490+
prototype: HTMLMicrobitMatrixElement;
491+
new (): HTMLMicrobitMatrixElement;
492+
};
493+
455494
interface HTMLMicrobitTextElement extends Components.MicrobitText, HTMLStencilElement {}
456495
var HTMLMicrobitTextElement: {
457496
prototype: HTMLMicrobitTextElement;
@@ -503,6 +542,7 @@ declare global {
503542
'microbit-model': HTMLMicrobitModelElement
504543
'microbit-name': HTMLMicrobitNameElement
505544
'microbit-serial': HTMLMicrobitSerialElement
545+
'microbit-matrix': HTMLMicrobitMatrixElement
506546
'microbit-text': HTMLMicrobitTextElement
507547
'microbit-app': HTMLMicrobitAppElement
508548
'microbit-connect': HTMLMicrobitConnectElement
@@ -521,6 +561,7 @@ declare global {
521561
'microbit-model': HTMLMicrobitModelElement;
522562
'microbit-name': HTMLMicrobitNameElement;
523563
'microbit-serial': HTMLMicrobitSerialElement;
564+
'microbit-matrix': HTMLMicrobitMatrixElement;
524565
'microbit-text': HTMLMicrobitTextElement;
525566
'microbit-app': HTMLMicrobitAppElement;
526567
'microbit-connect': HTMLMicrobitConnectElement;

‎src/components/led/microbit-matrix.tsx

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
import { Component, Prop, Element, Watch } from "@stencil/core";
2+
import { Services } from "microbit-web-bluetooth";
3+
import DeviceTunnel from '../../device-tunnel';
4+
import { LedMatrix } from "microbit-web-bluetooth/types/services/led";
5+
6+
type ElMatrix = [
7+
[HTMLElement, HTMLElement, HTMLElement, HTMLElement, HTMLElement],
8+
[HTMLElement, HTMLElement, HTMLElement, HTMLElement, HTMLElement],
9+
[HTMLElement, HTMLElement, HTMLElement, HTMLElement, HTMLElement],
10+
[HTMLElement, HTMLElement, HTMLElement, HTMLElement, HTMLElement],
11+
[HTMLElement, HTMLElement, HTMLElement, HTMLElement, HTMLElement]
12+
];
13+
14+
@Component({
15+
tag: 'microbit-matrix'
16+
})
17+
export class MicrobitMatrix {
18+
@Element() el;
19+
@Prop() services: Services = undefined;
20+
21+
/**
22+
* The template for identifying child LEDs
23+
*/
24+
@Prop() idTemplate: string = "microbit-matrix-${row}-${column}";
25+
26+
/**
27+
* The css class for off LEDs
28+
*/
29+
@Prop() offClass: string = "microbit-matrix-off";
30+
31+
/**
32+
* The css class for on LEDs
33+
*/
34+
@Prop() onClass: string = "microbit-matrix-on";
35+
36+
private matrix: LedMatrix;
37+
private elements: ElMatrix;
38+
39+
@Watch('services')
40+
async watchHandler() {
41+
const els: HTMLElement[][] = [[], [], [], [], []];
42+
43+
for (let i = 0; i < 5; i++) {
44+
for (let j = 0; j < 5; j++) {
45+
const id = this.idTemplate.replace("${row}", i.toString()).replace("${column}", j.toString());
46+
const led = document.getElementById(id);
47+
if (led) {
48+
els[i][j] = led;
49+
led.onclick = () => this.toggle(i, j);
50+
led.classList.toggle(this.onClass, false);
51+
led.classList.toggle(this.offClass, false);
52+
}
53+
}
54+
}
55+
this.elements = els as ElMatrix;
56+
57+
if (!this.services || !this.services.ledService) {
58+
return;
59+
}
60+
61+
await this.updateMatrix();
62+
}
63+
64+
render() {
65+
return <div></div>;
66+
}
67+
68+
private async toggle(row: number, column: number) {
69+
this.matrix[row][column] = !this.matrix[row][column];
70+
await this.services.ledService.setMatrixState(this.matrix);
71+
await this.updateMatrix();
72+
}
73+
74+
private async updateMatrix() {
75+
this.matrix = await this.services.ledService.getMatrixState();
76+
this.matrix.forEach((rows: Boolean[], row) => {
77+
rows.forEach((value: boolean, column) => {
78+
const led = this.elements[row][column];
79+
if (led) {
80+
led.classList.toggle(this.onClass, value);
81+
led.classList.toggle(this.offClass, !value);
82+
}
83+
});
84+
});
85+
}
86+
}
87+
88+
DeviceTunnel.injectProps(MicrobitMatrix, ['services']);

‎src/components/state/microbit-state-movement.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,6 @@ export class MicrobitStateMovement {
5555
}
5656

5757
private setClassName(data: AccelerometerData) {
58-
console.log(this.sensitivity);
5958
this.className =
6059
(Math.abs(data.x) > this.sensitivity
6160
|| Math.abs(data.y) > this.sensitivity

‎src/index.html

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,28 @@
2424
.microbit-moved > .state {
2525
background: yellowgreen;
2626
}
27+
.microbit-matrix {
28+
display: flex;
29+
flex-wrap: wrap;
30+
justify-content: space-between;
31+
align-content: space-between;
32+
width: 170px;
33+
height: 170px;
34+
background-color: black;
35+
}
36+
.microbit-matrix-led {
37+
width: 9px;
38+
height: 17px;
39+
margin: 7px 11px;
40+
border-radius: 2px;
41+
}
42+
.microbit-matrix-off {
43+
background: #333;
44+
}
45+
.microbit-matrix-on {
46+
background: #f88;
47+
box-shadow: 0 0 8px 2px #ff1777;
48+
}
2749
#compass {
2850
width: 50px;
2951
height: 50px;
@@ -67,6 +89,33 @@
6789
<span class="state">Movement</span>
6890
</microbit-state-movement>
6991
</div>
92+
<microbit-matrix class="microbit-matrix" id-template="matrix-${row}-${column}">
93+
<div id="matrix-0-0" class="microbit-matrix-led"></div>
94+
<div id="matrix-0-1" class="microbit-matrix-led"></div>
95+
<div id="matrix-0-2" class="microbit-matrix-led"></div>
96+
<div id="matrix-0-3" class="microbit-matrix-led"></div>
97+
<div id="matrix-0-4" class="microbit-matrix-led"></div>
98+
<div id="matrix-1-0" class="microbit-matrix-led"></div>
99+
<div id="matrix-1-1" class="microbit-matrix-led"></div>
100+
<div id="matrix-1-2" class="microbit-matrix-led"></div>
101+
<div id="matrix-1-3" class="microbit-matrix-led"></div>
102+
<div id="matrix-1-4" class="microbit-matrix-led"></div>
103+
<div id="matrix-2-0" class="microbit-matrix-led"></div>
104+
<div id="matrix-2-1" class="microbit-matrix-led"></div>
105+
<div id="matrix-2-2" class="microbit-matrix-led"></div>
106+
<div id="matrix-2-3" class="microbit-matrix-led"></div>
107+
<div id="matrix-2-4" class="microbit-matrix-led"></div>
108+
<div id="matrix-3-0" class="microbit-matrix-led"></div>
109+
<div id="matrix-3-1" class="microbit-matrix-led"></div>
110+
<div id="matrix-3-2" class="microbit-matrix-led"></div>
111+
<div id="matrix-3-3" class="microbit-matrix-led"></div>
112+
<div id="matrix-3-4" class="microbit-matrix-led"></div>
113+
<div id="matrix-4-0" class="microbit-matrix-led"></div>
114+
<div id="matrix-4-1" class="microbit-matrix-led"></div>
115+
<div id="matrix-4-2" class="microbit-matrix-led"></div>
116+
<div id="matrix-4-3" class="microbit-matrix-led"></div>
117+
<div id="matrix-4-4" class="microbit-matrix-led"></div>
118+
</microbit-matrix>
70119
<div>
71120
<microbit-compass>
72121
<div id="compass"></div>

0 commit comments

Comments
 (0)