├── .gitignore
├── .npmignore
├── index.html
├── stencil.config.ts
├── .vscode
└── tasks.json
├── src
├── microbit-store.ts
├── microbit-compass
│ ├── readme.md
│ └── microbit-compass.tsx
├── microbit-receive
│ ├── readme.md
│ └── microbit-receive.tsx
├── microbit-dfu
│ ├── readme.md
│ └── microbit-dfu.tsx
├── microbit-calibrate
│ ├── readme.md
│ └── microbit-calibrate.tsx
├── microbit-send
│ ├── readme.md
│ └── microbit-send.tsx
├── microbit-text
│ ├── readme.md
│ └── microbit-text.tsx
├── microbit-name
│ ├── microbit-name.tsx
│ └── readme.md
├── microbit-connect
│ ├── readme.md
│ └── microbit-connect.tsx
├── microbit-model
│ ├── readme.md
│ └── microbit-model.tsx
├── microbit-serial
│ ├── readme.md
│ └── microbit-serial.tsx
├── microbit-connection
│ ├── readme.md
│ └── microbit-connection.tsx
├── microbit-firmware
│ ├── readme.md
│ └── microbit-firmware.tsx
├── microbit-hardware
│ ├── readme.md
│ └── microbit-hardware.tsx
├── microbit-manufacturer
│ ├── readme.md
│ └── microbit-manufacturer.tsx
├── microbit-movement
│ ├── readme.md
│ └── microbit-movement.tsx
├── store.ts
├── microbit-button-a
│ ├── readme.md
│ └── microbit-button-a.tsx
├── microbit-button-b
│ ├── readme.md
│ └── microbit-button-b.tsx
├── microbit-matrix
│ ├── readme.md
│ └── microbit-matrix.tsx
├── microbit-temperature
│ ├── readme.md
│ └── microbit-temperature.tsx
└── components.d.ts
├── tsconfig.json
├── LICENSE
├── package.json
├── circle.yml
├── README.md
└── examples
└── index.html
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | .stencil
3 | dist
4 | node_modules
5 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | .stencil
3 | .vscode
4 | node_modules
5 | .gitignore
6 | circle.yml
7 | index.html
8 | npm-debug.log
9 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
--------------------------------------------------------------------------------
/stencil.config.ts:
--------------------------------------------------------------------------------
1 | import { Config } from '@stencil/core';
2 |
3 | export const config: Config = {
4 | namespace: 'microbit',
5 | outputTargets: [
6 | { type: 'dist' },
7 | { type: 'docs-readme' }
8 | ],
9 | devServer: {
10 | reloadStrategy: 'pageReload'
11 | }
12 | };
13 |
--------------------------------------------------------------------------------
/.vscode/tasks.json:
--------------------------------------------------------------------------------
1 | {
2 | // See https://go.microsoft.com/fwlink/?LinkId=733558
3 | // for the documentation about the tasks.json format
4 | "version": "2.0.0",
5 | "tasks": [
6 | {
7 | "type": "npm",
8 | "script": "watch",
9 | "group": {
10 | "kind": "build",
11 | "isDefault": true
12 | }
13 | }
14 | ]
15 | }
16 |
--------------------------------------------------------------------------------
/src/microbit-store.ts:
--------------------------------------------------------------------------------
1 | import { Services } from "microbit-web-bluetooth";
2 | import { DeviceInformation } from "microbit-web-bluetooth/types/services/device-information";
3 | import { Store } from "./store";
4 |
5 | export interface MicrobitStore {
6 | device: BluetoothDevice;
7 | services: Services;
8 | deviceInformation: DeviceInformation;
9 | }
10 |
11 | export const microbitStore = new Store();
12 |
--------------------------------------------------------------------------------
/src/microbit-compass/readme.md:
--------------------------------------------------------------------------------
1 | # microbit-compass
2 |
3 |
4 |
5 |
6 |
7 |
8 | ## Properties
9 |
10 | | Property | Attribute | Description | Type | Default |
11 | | ---------- | --------- | ----------- | ---------- | ------- |
12 | | `services` | -- | | `Services` | `null` |
13 |
14 |
15 | ----------------------------------------------
16 |
17 | *Built with [StencilJS](https://stenciljs.com/)*
18 |
--------------------------------------------------------------------------------
/src/microbit-receive/readme.md:
--------------------------------------------------------------------------------
1 | # microbit-receive
2 |
3 |
4 |
5 |
6 |
7 |
8 | ## Properties
9 |
10 | | Property | Attribute | Description | Type | Default |
11 | | ---------- | --------- | ----------- | ---------- | ------- |
12 | | `services` | -- | | `Services` | `null` |
13 |
14 |
15 | ----------------------------------------------
16 |
17 | *Built with [StencilJS](https://stenciljs.com/)*
18 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "allowSyntheticDefaultImports": true,
4 | "allowUnreachableCode": false,
5 | "declaration": false,
6 | "experimentalDecorators": true,
7 | "lib": [
8 | "dom",
9 | "es2017"
10 | ],
11 | "moduleResolution": "node",
12 | "module": "esnext",
13 | "target": "es2017",
14 | "noUnusedLocals": true,
15 | "noUnusedParameters": true,
16 | "jsx": "react",
17 | "jsxFactory": "h"
18 | },
19 | "include": [
20 | "src",
21 | "types/jsx.d.ts"
22 | ],
23 | "exclude": [
24 | "node_modules"
25 | ]
26 | }
27 |
--------------------------------------------------------------------------------
/src/microbit-dfu/readme.md:
--------------------------------------------------------------------------------
1 | # microbit-dfu
2 |
3 |
4 |
5 |
6 |
7 |
8 | ## Properties
9 |
10 | | Property | Attribute | Description | Type | Default |
11 | | ---------- | ----------- | ------------------------------------- | ---------- | ---------------- |
12 | | `dfuLabel` | `dfu-label` | The button label to initiate DFU mode | `string` | `"Initiate DFU"` |
13 | | `services` | -- | | `Services` | `null` |
14 |
15 |
16 | ----------------------------------------------
17 |
18 | *Built with [StencilJS](https://stenciljs.com/)*
19 |
--------------------------------------------------------------------------------
/src/microbit-calibrate/readme.md:
--------------------------------------------------------------------------------
1 | # microbit-calibrate
2 |
3 |
4 |
5 |
6 |
7 |
8 | ## Properties
9 |
10 | | Property | Attribute | Description | Type | Default |
11 | | ---------------- | ----------------- | ----------------------------- | ---------- | ------------- |
12 | | `calibrateLabel` | `calibrate-label` | The button label to calibrate | `string` | `"Calibrate"` |
13 | | `services` | -- | | `Services` | `null` |
14 |
15 |
16 | ----------------------------------------------
17 |
18 | *Built with [StencilJS](https://stenciljs.com/)*
19 |
--------------------------------------------------------------------------------
/src/microbit-send/readme.md:
--------------------------------------------------------------------------------
1 | # microbit-send
2 |
3 |
4 |
5 |
6 |
7 |
8 | ## Properties
9 |
10 | | Property | Attribute | Description | Type | Default |
11 | | ------------- | -------------- | ---------------------------- | ---------- | ------- |
12 | | `buttonLabel` | `button-label` | The text shown on the button | `string` | `""` |
13 | | `delimiter` | `delimiter` | The delimiter to use | `string` | `""` |
14 | | `services` | -- | | `Services` | `null` |
15 |
16 |
17 | ----------------------------------------------
18 |
19 | *Built with [StencilJS](https://stenciljs.com/)*
20 |
--------------------------------------------------------------------------------
/src/microbit-text/readme.md:
--------------------------------------------------------------------------------
1 | # microbit-text
2 |
3 |
4 |
5 |
6 |
7 |
8 | ## Properties
9 |
10 | | Property | Attribute | Description | Type | Default |
11 | | ------------- | -------------- | ---------------------------- | ---------- | ------- |
12 | | `buttonLabel` | `button-label` | The text shown on the button | `string` | `""` |
13 | | `scrollDelay` | `scroll-delay` | The speed to scroll the text | `number` | `100` |
14 | | `services` | -- | | `Services` | `null` |
15 |
16 |
17 | ----------------------------------------------
18 |
19 | *Built with [StencilJS](https://stenciljs.com/)*
20 |
--------------------------------------------------------------------------------
/src/microbit-name/microbit-name.tsx:
--------------------------------------------------------------------------------
1 | import { Component, Prop, Element } from "@stencil/core";
2 | import { microbitStore } from '../microbit-store';
3 |
4 | @Component({
5 | tag: 'microbit-name'
6 | })
7 | export class MicrobitName {
8 | constructor() {
9 | microbitStore.addListener(this);
10 | }
11 |
12 | @Element()
13 | protected el;
14 |
15 | @Prop({mutable: true})
16 | public device: BluetoothDevice = null;
17 |
18 | /**
19 | * The text shown when disconnected
20 | */
21 | @Prop()
22 | public disconnectedText: string = "Disconnected";
23 |
24 | public render() {
25 | return this.device ? this.device.name : this.disconnectedText;
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/src/microbit-name/readme.md:
--------------------------------------------------------------------------------
1 | # microbit-name
2 |
3 |
4 |
5 |
6 |
7 |
8 | ## Properties
9 |
10 | | Property | Attribute | Description | Type | Default |
11 | | ------------------ | ------------------- | -------------------------------- | ----------------- | ---------------- |
12 | | `device` | -- | | `BluetoothDevice` | `null` |
13 | | `disconnectedText` | `disconnected-text` | The text shown when disconnected | `string` | `"Disconnected"` |
14 |
15 |
16 | ----------------------------------------------
17 |
18 | *Built with [StencilJS](https://stenciljs.com/)*
19 |
--------------------------------------------------------------------------------
/src/microbit-connect/readme.md:
--------------------------------------------------------------------------------
1 | # microbit-connect
2 |
3 |
4 |
5 |
6 |
7 |
8 | ## Properties
9 |
10 | | Property | Attribute | Description | Type | Default |
11 | | ----------------- | ------------------ | ------------------------------ | ----------------- | -------------- |
12 | | `connectLabel` | `connect-label` | The button label to connect | `string` | `"Connect"` |
13 | | `device` | -- | | `BluetoothDevice` | `null` |
14 | | `disconnectLabel` | `disconnect-label` | The button label to disconnect | `string` | `"Disconnect"` |
15 |
16 |
17 | ----------------------------------------------
18 |
19 | *Built with [StencilJS](https://stenciljs.com/)*
20 |
--------------------------------------------------------------------------------
/src/microbit-model/readme.md:
--------------------------------------------------------------------------------
1 | # microbit-model
2 |
3 |
4 |
5 |
6 |
7 |
8 | ## Properties
9 |
10 | | Property | Attribute | Description | Type | Default |
11 | | ------------------- | ------------------- | ----------------------------------- | ------------------- | ------------------------- |
12 | | `deviceInformation` | -- | | `DeviceInformation` | `null` |
13 | | `disconnectedText` | `disconnected-text` | The text shown when disconnected | `string` | `"Disconnected"` |
14 | | `noInfo` | `no-info` | The text shown when no model number | `string` | `"No model number found"` |
15 |
16 |
17 | ----------------------------------------------
18 |
19 | *Built with [StencilJS](https://stenciljs.com/)*
20 |
--------------------------------------------------------------------------------
/src/microbit-serial/readme.md:
--------------------------------------------------------------------------------
1 | # microbit-serial
2 |
3 |
4 |
5 |
6 |
7 |
8 | ## Properties
9 |
10 | | Property | Attribute | Description | Type | Default |
11 | | ------------------- | ------------------- | ------------------------------------ | ------------------- | -------------------------- |
12 | | `deviceInformation` | -- | | `DeviceInformation` | `null` |
13 | | `disconnectedText` | `disconnected-text` | The text shown when disconnected | `string` | `"Disconnected"` |
14 | | `noInfo` | `no-info` | The text shown when no serial number | `string` | `"No serial number found"` |
15 |
16 |
17 | ----------------------------------------------
18 |
19 | *Built with [StencilJS](https://stenciljs.com/)*
20 |
--------------------------------------------------------------------------------
/src/microbit-connection/readme.md:
--------------------------------------------------------------------------------
1 | # microbit-connection
2 |
3 |
4 |
5 |
6 |
7 |
8 | ## Properties
9 |
10 | | Property | Attribute | Description | Type | Default |
11 | | ------------------- | -------------------- | -------------------------------------- | ----------------- | ------------------------- |
12 | | `connectedClass` | `connected-class` | The CSS class to use when connected | `string` | `"microbit-connected"` |
13 | | `device` | -- | | `BluetoothDevice` | `null` |
14 | | `disconnectedClass` | `disconnected-class` | The CSS class to use when disconnected | `string` | `"microbit-disconnected"` |
15 |
16 |
17 | ----------------------------------------------
18 |
19 | *Built with [StencilJS](https://stenciljs.com/)*
20 |
--------------------------------------------------------------------------------
/src/microbit-firmware/readme.md:
--------------------------------------------------------------------------------
1 | # microbit-firmware
2 |
3 |
4 |
5 |
6 |
7 |
8 | ## Properties
9 |
10 | | Property | Attribute | Description | Type | Default |
11 | | ------------------- | ------------------- | --------------------------------------- | ------------------- | ----------------------------- |
12 | | `deviceInformation` | -- | | `DeviceInformation` | `null` |
13 | | `disconnectedText` | `disconnected-text` | The text shown when disconnected | `string` | `"Disconnected"` |
14 | | `noInfo` | `no-info` | The text shown when no firmware version | `string` | `"No firmware version found"` |
15 |
16 |
17 | ----------------------------------------------
18 |
19 | *Built with [StencilJS](https://stenciljs.com/)*
20 |
--------------------------------------------------------------------------------
/src/microbit-hardware/readme.md:
--------------------------------------------------------------------------------
1 | # microbit-hardware
2 |
3 |
4 |
5 |
6 |
7 |
8 | ## Properties
9 |
10 | | Property | Attribute | Description | Type | Default |
11 | | ------------------- | ------------------- | --------------------------------------- | ------------------- | ----------------------------- |
12 | | `deviceInformation` | -- | | `DeviceInformation` | `null` |
13 | | `disconnectedText` | `disconnected-text` | The text shown when disconnected | `string` | `"Disconnected"` |
14 | | `noInfo` | `no-info` | The text shown when no hardware version | `string` | `"No hardware version found"` |
15 |
16 |
17 | ----------------------------------------------
18 |
19 | *Built with [StencilJS](https://stenciljs.com/)*
20 |
--------------------------------------------------------------------------------
/src/microbit-manufacturer/readme.md:
--------------------------------------------------------------------------------
1 | # microbit-manufacturer
2 |
3 |
4 |
5 |
6 |
7 |
8 | ## Properties
9 |
10 | | Property | Attribute | Description | Type | Default |
11 | | ------------------- | ------------------- | ---------------------------------------- | ------------------- | ------------------------------ |
12 | | `deviceInformation` | -- | | `DeviceInformation` | `null` |
13 | | `disconnectedText` | `disconnected-text` | The text shown when disconnected | `string` | `"Disconnected"` |
14 | | `noInfo` | `no-info` | The text shown when no manufacturer name | `string` | `"No manufacturer name found"` |
15 |
16 |
17 | ----------------------------------------------
18 |
19 | *Built with [StencilJS](https://stenciljs.com/)*
20 |
--------------------------------------------------------------------------------
/src/microbit-movement/readme.md:
--------------------------------------------------------------------------------
1 | # microbit-movement
2 |
3 |
4 |
5 |
6 |
7 |
8 | ## Properties
9 |
10 | | Property | Attribute | Description | Type | Default |
11 | | ------------- | ------------- | -------------------------------- | ---------- | ------------------ |
12 | | `frequency` | `frequency` | The frequency to read the sensor | `number` | `20` |
13 | | `movedClass` | `moved-class` | The CSS class to use when moved | `string` | `"microbit-moved"` |
14 | | `sensitivity` | `sensitivity` | The sensitivity of the sensor | `number` | `1` |
15 | | `services` | -- | | `Services` | `null` |
16 | | `stillClass` | `still-class` | The CSS class to use when still | `string` | `"microbit-still"` |
17 |
18 |
19 | ----------------------------------------------
20 |
21 | *Built with [StencilJS](https://stenciljs.com/)*
22 |
--------------------------------------------------------------------------------
/src/store.ts:
--------------------------------------------------------------------------------
1 | export class Store {
2 | private data: { [key: string]: any } = {};
3 | private listeners: Partial[] =[];
4 |
5 | private _update(key: string, value: any) {
6 | this.data[key.toString()] = value;
7 |
8 | this.listeners.forEach(listener => {
9 | if (listener[key] !== undefined) {
10 | listener[key] = value;
11 | }
12 | });
13 | }
14 |
15 | public addListener(listener: Partial) {
16 | this.listeners.push(listener);
17 | Object.keys(this.data).forEach(key => {
18 | if (listener[key] !== undefined) {
19 | listener[key] = this.data[key];
20 | }
21 | });
22 | }
23 |
24 | public update(key: K, value: T[K]) {
25 | this._update(key, value);
26 | }
27 |
28 | public empty() {
29 | Object.keys(this.data).forEach(key => {
30 | this._update(key, null);
31 | });
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/src/microbit-button-a/readme.md:
--------------------------------------------------------------------------------
1 | # microbit-button-a
2 |
3 |
4 |
5 |
6 |
7 |
8 | ## Properties
9 |
10 | | Property | Attribute | Description | Type | Default |
11 | | ----------------- | ------------------- | --------------------------------------- | ---------- | ------------------------ |
12 | | `longPressClass` | `long-press-class` | The CSS class to use when long-pressed | `string` | `"microbit-long-press"` |
13 | | `releaseClass` | `release-class` | The CSS class to use when released | `string` | `"microbit-release"` |
14 | | `services` | -- | | `Services` | `null` |
15 | | `shortPressClass` | `short-press-class` | The CSS class to use when short-pressed | `string` | `"microbit-short-press"` |
16 |
17 |
18 | ----------------------------------------------
19 |
20 | *Built with [StencilJS](https://stenciljs.com/)*
21 |
--------------------------------------------------------------------------------
/src/microbit-button-b/readme.md:
--------------------------------------------------------------------------------
1 | # microbit-button-b
2 |
3 |
4 |
5 |
6 |
7 |
8 | ## Properties
9 |
10 | | Property | Attribute | Description | Type | Default |
11 | | ----------------- | ------------------- | --------------------------------------- | ---------- | ------------------------ |
12 | | `longPressClass` | `long-press-class` | The CSS class to use when long-pressed | `string` | `"microbit-long-press"` |
13 | | `releaseClass` | `release-class` | The CSS class to use when released | `string` | `"microbit-release"` |
14 | | `services` | -- | | `Services` | `null` |
15 | | `shortPressClass` | `short-press-class` | The CSS class to use when short-pressed | `string` | `"microbit-short-press"` |
16 |
17 |
18 | ----------------------------------------------
19 |
20 | *Built with [StencilJS](https://stenciljs.com/)*
21 |
--------------------------------------------------------------------------------
/src/microbit-matrix/readme.md:
--------------------------------------------------------------------------------
1 | # microbit-matrix
2 |
3 |
4 |
5 |
6 |
7 |
8 | ## Properties
9 |
10 | | Property | Attribute | Description | Type | Default |
11 | | ------------ | ------------- | --------------------------------------- | ---------- | ------------------------------------ |
12 | | `idTemplate` | `id-template` | The template for identifying child LEDs | `string` | `"microbit-matrix-${row}-${column}"` |
13 | | `offClass` | `off-class` | The CSS class for off LEDs | `string` | `"microbit-matrix-off"` |
14 | | `onClass` | `on-class` | The CSS class for on LEDs | `string` | `"microbit-matrix-on"` |
15 | | `services` | -- | | `Services` | `null` |
16 |
17 |
18 | ----------------------------------------------
19 |
20 | *Built with [StencilJS](https://stenciljs.com/)*
21 |
--------------------------------------------------------------------------------
/src/microbit-model/microbit-model.tsx:
--------------------------------------------------------------------------------
1 | import { Component, Prop, Element } from "@stencil/core";
2 | import { DeviceInformation } from "microbit-web-bluetooth/types/services/device-information";
3 | import { microbitStore } from '../microbit-store';
4 |
5 | @Component({
6 | tag: 'microbit-model'
7 | })
8 | export class MicrobitModel {
9 | constructor() {
10 | microbitStore.addListener(this);
11 | }
12 |
13 | @Element()
14 | protected el;
15 |
16 | @Prop({mutable: true})
17 | public deviceInformation: DeviceInformation = null;
18 |
19 | /**
20 | * The text shown when disconnected
21 | */
22 | @Prop()
23 | public disconnectedText: string = "Disconnected";
24 |
25 | /**
26 | * The text shown when no model number
27 | */
28 | @Prop()
29 | public noInfo: string = "No model number found";
30 |
31 | public render() {
32 | return this.deviceInformation ? this.deviceInformation.modelNumber || this.noInfo : this.disconnectedText;
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/src/microbit-serial/microbit-serial.tsx:
--------------------------------------------------------------------------------
1 | import { Component, Prop, Element } from "@stencil/core";
2 | import { DeviceInformation } from "microbit-web-bluetooth/types/services/device-information";
3 | import { microbitStore } from '../microbit-store';
4 |
5 | @Component({
6 | tag: 'microbit-serial'
7 | })
8 | export class MicrobitSerial {
9 | constructor() {
10 | microbitStore.addListener(this);
11 | }
12 |
13 | @Element()
14 | protected el;
15 |
16 | @Prop({mutable: true})
17 | public deviceInformation: DeviceInformation = null;
18 |
19 | /**
20 | * The text shown when disconnected
21 | */
22 | @Prop()
23 | public disconnectedText: string = "Disconnected";
24 |
25 | /**
26 | * The text shown when no serial number
27 | */
28 | @Prop()
29 | public noInfo: string = "No serial number found";
30 |
31 | public render() {
32 | return this.deviceInformation ? this.deviceInformation.serialNumber || this.noInfo : this.disconnectedText;
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/src/microbit-firmware/microbit-firmware.tsx:
--------------------------------------------------------------------------------
1 | import { Component, Prop, Element } from "@stencil/core";
2 | import { DeviceInformation } from "microbit-web-bluetooth/types/services/device-information";
3 | import { microbitStore } from '../microbit-store';
4 |
5 | @Component({
6 | tag: 'microbit-firmware'
7 | })
8 | export class MicrobitFirmware {
9 | constructor() {
10 | microbitStore.addListener(this);
11 | }
12 |
13 | @Element()
14 | protected el;
15 |
16 | @Prop({mutable: true})
17 | public deviceInformation: DeviceInformation = null;
18 |
19 | /**
20 | * The text shown when disconnected
21 | */
22 | @Prop()
23 | public disconnectedText: string = "Disconnected";
24 |
25 | /**
26 | * The text shown when no firmware version
27 | */
28 | @Prop()
29 | public noInfo: string = "No firmware version found";
30 |
31 | public render() {
32 | return this.deviceInformation ? this.deviceInformation.firmwareRevision || this.noInfo : this.disconnectedText;
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/src/microbit-hardware/microbit-hardware.tsx:
--------------------------------------------------------------------------------
1 | import { Component, Prop, Element } from "@stencil/core";
2 | import { DeviceInformation } from "microbit-web-bluetooth/types/services/device-information";
3 | import { microbitStore } from '../microbit-store';
4 |
5 | @Component({
6 | tag: 'microbit-hardware'
7 | })
8 | export class MicrobitHardware {
9 | constructor() {
10 | microbitStore.addListener(this);
11 | }
12 |
13 | @Element()
14 | protected el;
15 |
16 | @Prop({mutable: true})
17 | public deviceInformation: DeviceInformation = null;
18 |
19 | /**
20 | * The text shown when disconnected
21 | */
22 | @Prop()
23 | public disconnectedText: string = "Disconnected";
24 |
25 | /**
26 | * The text shown when no hardware version
27 | */
28 | @Prop()
29 | public noInfo: string = "No hardware version found";
30 |
31 | public render() {
32 | return this.deviceInformation ? this.deviceInformation.hardwareRevision || this.noInfo : this.disconnectedText;
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/src/microbit-connection/microbit-connection.tsx:
--------------------------------------------------------------------------------
1 | import { h, Component, Prop, Element } from "@stencil/core";
2 | import { microbitStore } from '../microbit-store';
3 |
4 | @Component({
5 | tag: 'microbit-connection'
6 | })
7 | export class MicrobitConnection {
8 | constructor() {
9 | microbitStore.addListener(this);
10 | }
11 |
12 | @Element()
13 | protected el;
14 |
15 | @Prop({mutable: true})
16 | public device: BluetoothDevice = null;
17 |
18 | /**
19 | * The CSS class to use when connected
20 | */
21 | @Prop()
22 | public connectedClass: string = "microbit-connected";
23 |
24 | /**
25 | * The CSS class to use when disconnected
26 | */
27 | @Prop()
28 | public disconnectedClass: string = "microbit-disconnected";
29 |
30 | public render() {
31 | const className = this.device ? this.connectedClass : this.disconnectedClass;
32 | return (
33 |
34 |
35 |
36 | );
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/src/microbit-manufacturer/microbit-manufacturer.tsx:
--------------------------------------------------------------------------------
1 | import { Component, Prop, Element } from "@stencil/core";
2 | import { DeviceInformation } from "microbit-web-bluetooth/types/services/device-information";
3 | import { microbitStore } from '../microbit-store';
4 |
5 | @Component({
6 | tag: 'microbit-manufacturer'
7 | })
8 | export class MicrobitManufacturer {
9 | constructor() {
10 | microbitStore.addListener(this);
11 | }
12 |
13 | @Element()
14 | protected el;
15 |
16 | @Prop({mutable: true})
17 | public deviceInformation: DeviceInformation = null;
18 |
19 | /**
20 | * The text shown when disconnected
21 | */
22 | @Prop()
23 | public disconnectedText: string = "Disconnected";
24 |
25 | /**
26 | * The text shown when no manufacturer name
27 | */
28 | @Prop()
29 | public noInfo: string = "No manufacturer name found";
30 |
31 | public render() {
32 | return this.deviceInformation ? this.deviceInformation.manufacturer || this.noInfo : this.disconnectedText;
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2019 Rob Moran
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "microbit-web-components",
3 | "version": "0.3.0",
4 | "description": "Web Components library for micro:bit",
5 | "homepage": "https://github.com/thegecko/microbit-web-components",
6 | "license": "MIT",
7 | "main": "dist/index.js",
8 | "module": "dist/microbit/microbit.esm.js",
9 | "types": "dist/types/components.d.ts",
10 | "collection": "dist/collection/collection-manifest.json",
11 | "files": [
12 | "dist/"
13 | ],
14 | "repository": {
15 | "type": "git",
16 | "url": "git+https://github.com/thegecko/microbit-web-components.git"
17 | },
18 | "author": "Rob Moran ",
19 | "keywords": [
20 | "micro:bit",
21 | "microbit",
22 | "webcomponents",
23 | "web-components"
24 | ],
25 | "scripts": {
26 | "build": "stencil build --docs",
27 | "watch": "stencil build --prod --watch --serve",
28 | "test": "stencil test --spec --e2e",
29 | "test.watch": "stencil test --spec --e2e --watchAll"
30 | },
31 | "engines": {
32 | "node": ">=8.14.0"
33 | },
34 | "dependencies": {
35 | "@stencil/core": "^1.1.6",
36 | "microbit-web-bluetooth": "^0.4.0"
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/src/microbit-temperature/readme.md:
--------------------------------------------------------------------------------
1 | # microbit-temperature
2 |
3 |
4 |
5 |
6 |
7 |
8 | ## Properties
9 |
10 | | Property | Attribute | Description | Type | Default |
11 | | ------------------- | -------------------- | ------------------------------------------ | ---------- | ------------------------ |
12 | | `disconnectedText` | `disconnected-text` | The text shown when disconnected | `string` | `"Disconnected"` |
13 | | `noTemperature` | `no-temperature` | The text shown when no temperature | `string` | `"No temperature found"` |
14 | | `services` | -- | | `Services` | `null` |
15 | | `temperaturePeriod` | `temperature-period` | The interval to check the temperature (ms) | `number` | `100` |
16 | | `temperatureSuffix` | `temperature-suffix` | The text to display after the temperature | `string` | `"°c"` |
17 |
18 |
19 | ----------------------------------------------
20 |
21 | *Built with [StencilJS](https://stenciljs.com/)*
22 |
--------------------------------------------------------------------------------
/src/microbit-dfu/microbit-dfu.tsx:
--------------------------------------------------------------------------------
1 | import { h, Component, Prop, Element, State, Watch } from "@stencil/core";
2 | import { Services } from "microbit-web-bluetooth";
3 | import { microbitStore } from '../microbit-store';
4 |
5 | @Component({
6 | tag: 'microbit-dfu'
7 | })
8 | export class MicrobitDfu {
9 | constructor() {
10 | microbitStore.addListener(this);
11 | }
12 |
13 | @Element()
14 | protected el;
15 |
16 | @Prop({mutable: true})
17 | public services: Services = null;
18 |
19 | /**
20 | * The button label to initiate DFU mode
21 | */
22 | @Prop()
23 | public dfuLabel: string = "Initiate DFU"
24 |
25 | @State()
26 | protected disabled = true;
27 |
28 | @Watch('services')
29 | protected async servicesUpdated() {
30 | this.disabled = !this.services || !this.services.dfuControlService;
31 | }
32 |
33 | private async calibrate() {
34 | if (this.services.dfuControlService) {
35 | await this.services.dfuControlService.requestDfu();
36 | }
37 | }
38 |
39 | public render() {
40 | return (
41 |
42 | );
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/src/microbit-calibrate/microbit-calibrate.tsx:
--------------------------------------------------------------------------------
1 | import { h, Component, Prop, Element, State, Watch } from "@stencil/core";
2 | import { Services } from "microbit-web-bluetooth";
3 | import { microbitStore } from '../microbit-store';
4 |
5 | @Component({
6 | tag: 'microbit-calibrate'
7 | })
8 | export class MicrobitCalibrate {
9 | constructor() {
10 | microbitStore.addListener(this);
11 | }
12 |
13 | @Element()
14 | protected el;
15 |
16 | @Prop({mutable: true})
17 | public services: Services = null;
18 |
19 | /**
20 | * The button label to calibrate
21 | */
22 | @Prop()
23 | public calibrateLabel: string = "Calibrate"
24 |
25 | @State()
26 | protected disabled = true;
27 |
28 | @Watch('services')
29 | protected async servicesUpdated() {
30 | this.disabled = !this.services || !this.services.magnetometerService;
31 | }
32 |
33 | private async calibrate() {
34 | if (this.services.magnetometerService) {
35 | await this.services.magnetometerService.calibrate();
36 | }
37 | }
38 |
39 | public render() {
40 | return (
41 |
42 | );
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/src/microbit-receive/microbit-receive.tsx:
--------------------------------------------------------------------------------
1 | import { h, Component, Prop, Element, State, Watch } from "@stencil/core";
2 | import { Services } from "microbit-web-bluetooth";
3 | import { microbitStore } from '../microbit-store';
4 |
5 | @Component({
6 | tag: 'microbit-receive'
7 | })
8 | export class MicrobitReceive {
9 | constructor() {
10 | microbitStore.addListener(this);
11 | }
12 |
13 | @Element()
14 | protected el;
15 |
16 | @Prop({mutable: true})
17 | public services: Services = null;
18 |
19 | @State()
20 | protected disabled = true;
21 |
22 | @State()
23 | protected data: string = "";
24 |
25 | @Watch('services')
26 | protected async servicesUpdated() {
27 | this.disabled = !this.services || !this.services.uartService;
28 |
29 | const service = this.services.uartService;
30 |
31 | if (!service) {
32 | this.data = "";
33 | return;
34 | }
35 |
36 | await service.addEventListener("receiveText", event => this.data += event.detail);
37 | }
38 |
39 | public render() {
40 | const style = {
41 | whiteSpace: 'pre'
42 | };
43 | return (
44 |
45 | {this.data}
46 |
47 | );
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/src/microbit-compass/microbit-compass.tsx:
--------------------------------------------------------------------------------
1 | import { h, Component, Prop, Element, State, Watch } from "@stencil/core";
2 | import { Services } from "microbit-web-bluetooth";
3 | import { microbitStore } from '../microbit-store';
4 |
5 | @Component({
6 | tag: 'microbit-compass'
7 | })
8 | export class MicrobitCompass {
9 | constructor() {
10 | microbitStore.addListener(this);
11 | }
12 |
13 | @Element()
14 | protected el;
15 |
16 | @Prop({mutable: true})
17 | public services: Services = null;
18 |
19 | @State()
20 | protected bearing: number = 0;
21 |
22 | @Watch('services')
23 | protected async servicesUpdated() {
24 | if (!this.services || !this.services.magnetometerService) {
25 | return;
26 | }
27 |
28 | const service = this.services.magnetometerService;
29 | await service.addEventListener("magnetometerbearingchanged", event => this.bearing = event.detail);
30 | this.bearing = await service.readMagnetometerBearing();
31 | }
32 |
33 | public render() {
34 | const style = {
35 | position: "absolute",
36 | transform: `rotate(${this.bearing}deg)`
37 | };
38 | return (
39 |
40 |
41 |
42 | );
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/circle.yml:
--------------------------------------------------------------------------------
1 | version: 2
2 |
3 | jobs:
4 | build:
5 | docker:
6 | - image: circleci/node:8
7 | steps:
8 | - checkout
9 | - run: npm install
10 | - run: npm run build
11 | - persist_to_workspace:
12 | root: ../
13 | paths:
14 | - project
15 |
16 | deploy:
17 | docker:
18 | - image: circleci/node:8
19 | steps:
20 | - attach_workspace:
21 | at: ../
22 | - run: 'echo "//registry.npmjs.org/:_authToken=${NPM_TOKEN}" > ~/.npmrc'
23 | - run: npm --no-git-tag-version version prerelease --preid=next.$(echo $CIRCLE_SHA1 | cut -c -7)
24 | - run: npm publish --tag next || true
25 | - run: mkdir ~/.ssh/ && echo -e "Host github.com\n\tStrictHostKeyChecking no\n" > ~/.ssh/config
26 | - run: git config --global user.name thegecko
27 | - run: git config --global user.email github@thegecko.org
28 | - run: git add --force dist
29 | - run: git stash save
30 | - run: git checkout gh-pages
31 | - run: git merge master --no-commit -X theirs
32 | - run: git checkout stash -- .
33 | - run: git commit --allow-empty --message "Automatic Deployment [skip ci]"
34 | - run: git push
35 |
36 | workflows:
37 | version: 2
38 | commit:
39 | jobs:
40 | - build
41 | - deploy:
42 | requires:
43 | - build
44 | filters:
45 | branches:
46 | only: master
47 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # micro:bit Web Components
2 |
3 | [](https://www.npmjs.com/package/microbit-web-components)
4 | [](https://spdx.org/licenses/MIT.html)
5 |
6 | Web Components library for micro:bit
7 |
8 | # Example
9 |
10 | All of the implemented web components can be found in the [example page](https://github.com/thegecko/microbit-web-components/blob/master/examples/index.html) live here:
11 |
12 | https://thegecko.github.io/microbit-web-components
13 |
14 | # Device Setup
15 |
16 | Please refer to the [microbit-web-bluetooth](https://github.com/thegecko/microbit-web-bluetooth) documentation for creating a `.hex` file for your device and some sample programs:
17 |
18 | https://thegecko.github.io/microbit-web-bluetooth/docs/index.html#device-setup
19 |
20 | # Implementation Status
21 |
22 | ## Actions
23 | - [x] Connect/Disconnect
24 | - [x] Calibrate Compass
25 |
26 | ## Device Information
27 | - [x] Name
28 | - [x] Firmware Version
29 | - [x] Hardware Version
30 | - [x] Manufacturer Name
31 | - [x] Model Number
32 | - [x] Serial Number
33 |
34 | ## State Class Wrappers
35 | - [x] Connection State
36 | - [x] Button A State
37 | - [x] Button B State
38 | - [x] Movement State
39 | - [ ] IO Pin State
40 |
41 | ## Data
42 | - [x] Temperature
43 | - [x] Compass
44 | - [ ] Write IO
45 |
46 | ## LEDs
47 | - [x] Write Text
48 | - [x] Read/Write LED Matrix
49 |
50 | # Serial
51 | - [x] Send Message
52 | - [x] Receive Message
53 |
54 | ### Events
55 | - [ ] Send Event
56 | - [ ] Receive Event
57 | - [ ] Client Channel Selection
58 | - [ ] Microbit Channel Selection
59 |
60 | ### Firmware
61 | - [x] Initiate DFU Mode
62 | - [ ] Update Firmware
63 |
--------------------------------------------------------------------------------
/src/microbit-button-a/microbit-button-a.tsx:
--------------------------------------------------------------------------------
1 | import { h, Component, Prop, Element, Watch, State } from "@stencil/core";
2 | import { Services } from "microbit-web-bluetooth";
3 | import { microbitStore } from '../microbit-store';
4 |
5 | @Component({
6 | tag: 'microbit-button-a'
7 | })
8 | export class MicrobitButtonA {
9 | constructor() {
10 | microbitStore.addListener(this);
11 | }
12 |
13 | @Element()
14 | protected el;
15 |
16 | @Prop({mutable: true})
17 | public services: Services = null;
18 |
19 | /**
20 | * The CSS class to use when released
21 | */
22 | @Prop()
23 | public releaseClass: string = "microbit-release";
24 |
25 | /**
26 | * The CSS class to use when short-pressed
27 | */
28 | @Prop()
29 | public shortPressClass: string = "microbit-short-press";
30 |
31 | /**
32 | * The CSS class to use when long-pressed
33 | */
34 | @Prop()
35 | public longPressClass: string = "microbit-long-press";
36 |
37 | @State()
38 | protected className = this.releaseClass;
39 |
40 | @Watch('services')
41 | protected async servicesUpdated() {
42 | if (!this.services || !this.services.buttonService) {
43 | this.className = this.releaseClass;
44 | return;
45 | }
46 |
47 | const service = this.services.buttonService;
48 | await service.addEventListener("buttonastatechanged", event => this.setClassName(event.detail));
49 | this.setClassName(await service.readButtonAState());
50 | }
51 |
52 | private setClassName(state: number) {
53 | this.className = state === 1 ? this.shortPressClass
54 | : state === 2 ? this.longPressClass
55 | : this.releaseClass;
56 | }
57 |
58 | public render() {
59 | return (
60 |
61 |
62 |
63 | );
64 | }
65 | }
66 |
--------------------------------------------------------------------------------
/src/microbit-button-b/microbit-button-b.tsx:
--------------------------------------------------------------------------------
1 | import { h, Component, Prop, Element, Watch, State } from "@stencil/core";
2 | import { Services } from "microbit-web-bluetooth";
3 | import { microbitStore } from '../microbit-store';
4 |
5 | @Component({
6 | tag: 'microbit-button-b'
7 | })
8 | export class MicrobitButtonB {
9 | constructor() {
10 | microbitStore.addListener(this);
11 | }
12 |
13 | @Element()
14 | protected el;
15 |
16 | @Prop({mutable: true})
17 | public services: Services = null;
18 |
19 | /**
20 | * The CSS class to use when released
21 | */
22 | @Prop()
23 | public releaseClass: string = "microbit-release";
24 |
25 | /**
26 | * The CSS class to use when short-pressed
27 | */
28 | @Prop()
29 | public shortPressClass: string = "microbit-short-press";
30 |
31 | /**
32 | * The CSS class to use when long-pressed
33 | */
34 | @Prop()
35 | public longPressClass: string = "microbit-long-press";
36 |
37 | @State()
38 | protected className = this.releaseClass;
39 |
40 | @Watch('services')
41 | protected async servicesUpdated() {
42 | if (!this.services || !this.services.buttonService) {
43 | this.className = this.releaseClass;
44 | return;
45 | }
46 |
47 | const service = this.services.buttonService;
48 | await service.addEventListener("buttonbstatechanged", event => this.setClassName(event.detail));
49 | this.setClassName(await service.readButtonBState());
50 | }
51 |
52 | private setClassName(state: number) {
53 | this.className = state === 1 ? this.shortPressClass
54 | : state === 2 ? this.longPressClass
55 | : this.releaseClass;
56 | }
57 |
58 | public render() {
59 | return (
60 |
61 |
62 |
63 | );
64 | }
65 | }
66 |
--------------------------------------------------------------------------------
/src/microbit-connect/microbit-connect.tsx:
--------------------------------------------------------------------------------
1 | import { h, Component, Prop, Element } from "@stencil/core";
2 | import { requestMicrobit, getServices } from "microbit-web-bluetooth";
3 | import { microbitStore } from '../microbit-store';
4 |
5 | @Component({
6 | tag: 'microbit-connect'
7 | })
8 | export class MicrobitConnect {
9 | @Element()
10 | protected el;
11 |
12 | @Prop({mutable: true})
13 | public device: BluetoothDevice = null;
14 |
15 | /**
16 | * The button label to connect
17 | */
18 | @Prop()
19 | public connectLabel: string = "Connect"
20 |
21 | /**
22 | * The button label to disconnect
23 | */
24 | @Prop()
25 | public disconnectLabel: string = "Disconnect"
26 |
27 | private getLabel() {
28 | return this.device ? this.disconnectLabel : this.connectLabel;
29 | }
30 |
31 | private async connectDisconnect() {
32 | if (this.device) {
33 | if (this.device.gatt.connected) {
34 | await this.device.gatt.disconnect();
35 | }
36 | this.device = null;
37 | microbitStore.empty();
38 | return;
39 | }
40 |
41 | const device = await requestMicrobit(window.navigator.bluetooth);
42 | if (device) {
43 | this.device = device;
44 | microbitStore.update("device", device);
45 | const services = await getServices(device);
46 | microbitStore.update("services", services);
47 | if (services.deviceInformationService) {
48 | const deviceInformation = await services.deviceInformationService.readDeviceInformation();
49 | microbitStore.update("deviceInformation", deviceInformation);
50 | }
51 | device.addEventListener("gattserverdisconnected", this.connectDisconnect.bind(this));
52 | }
53 | }
54 |
55 | public render() {
56 | return (
57 |
58 | );
59 | }
60 | }
61 |
--------------------------------------------------------------------------------
/src/microbit-temperature/microbit-temperature.tsx:
--------------------------------------------------------------------------------
1 | import { Component, Prop, Element, State, Watch } from "@stencil/core";
2 | import { Services } from "microbit-web-bluetooth";
3 | import { microbitStore } from '../microbit-store';
4 |
5 | @Component({
6 | tag: 'microbit-temperature'
7 | })
8 | export class MicrobitTemperature {
9 | constructor() {
10 | microbitStore.addListener(this);
11 | }
12 |
13 | @Element()
14 | protected el;
15 |
16 | @Prop({mutable: true})
17 | public services: Services = null;
18 |
19 | /**
20 | * The interval to check the temperature (ms)
21 | */
22 | @Prop()
23 | public temperaturePeriod: number = 100;
24 |
25 | /**
26 | * The text shown when disconnected
27 | */
28 | @Prop()
29 | public disconnectedText: string = "Disconnected";
30 |
31 | /**
32 | * The text shown when no temperature
33 | */
34 | @Prop()
35 | public noTemperature: string = "No temperature found";
36 |
37 | /**
38 | * The text to display after the temperature
39 | */
40 | @Prop()
41 | public temperatureSuffix: string = "°c";
42 |
43 | @State()
44 | protected temperature: string = this.disconnectedText;
45 |
46 | @Watch('services')
47 | protected async servicesUpdated() {
48 | if (!this.services) {
49 | this.temperature = this.disconnectedText;
50 | return;
51 | }
52 |
53 | const service = this.services.temperatureService;
54 |
55 | if (!service) {
56 | this.temperature = this.noTemperature;
57 | return;
58 | }
59 |
60 | const temperature = await service.readTemperature();
61 | this.temperature = `${temperature}${this.temperatureSuffix}`;
62 | await service.setTemperaturePeriod(this.temperaturePeriod);
63 | await service.addEventListener("temperaturechanged", temp => this.temperature = `${temp.detail}${this.temperatureSuffix}`);
64 | }
65 |
66 | public render() {
67 | return this.temperature;
68 | }
69 | }
70 |
--------------------------------------------------------------------------------
/src/microbit-send/microbit-send.tsx:
--------------------------------------------------------------------------------
1 | import { h, Component, Prop, Element, State, Watch, JSX } from "@stencil/core";
2 | import { Services } from "microbit-web-bluetooth";
3 | import { microbitStore } from '../microbit-store';
4 |
5 | @Component({
6 | tag: 'microbit-send'
7 | })
8 | export class MicrobitSend {
9 | constructor() {
10 | microbitStore.addListener(this);
11 | }
12 |
13 | @Element()
14 | protected el;
15 |
16 | @Prop({mutable: true})
17 | public services: Services = null;
18 |
19 | /**
20 | * The text shown on the button
21 | */
22 | @Prop()
23 | public buttonLabel: string = "";
24 |
25 | /**
26 | * The delimiter to use
27 | */
28 | @Prop()
29 | public delimiter: string = "";
30 |
31 | @State()
32 | protected disabled = true;
33 |
34 | private text = "";
35 |
36 | @Watch('services')
37 | protected async servicesUpdated() {
38 | this.disabled = !this.services || !this.services.uartService;
39 | }
40 |
41 | private handleKey(event) {
42 | if (event.keyCode == 13) {
43 | this.sendText();
44 | } else {
45 | this.text = event.target.value;
46 | }
47 | }
48 |
49 | private async sendText() {
50 | const text = `${this.text}${this.delimiter}`;
51 | await this.services.uartService.sendText(text);
52 | }
53 |
54 | public render() {
55 | let button: JSX.Element;
56 |
57 | if (this.buttonLabel) {
58 | button = this.sendText()}>;
63 | }
64 |
65 | return (
66 |
67 | this.handleKey(e)}>
72 | {button}
73 |
74 | );
75 | }
76 | }
77 |
--------------------------------------------------------------------------------
/src/microbit-text/microbit-text.tsx:
--------------------------------------------------------------------------------
1 | import { h, Component, Prop, Element, State, Watch, JSX } from "@stencil/core";
2 | import { Services } from "microbit-web-bluetooth";
3 | import { microbitStore } from '../microbit-store';
4 |
5 | @Component({
6 | tag: 'microbit-text'
7 | })
8 | export class MicrobitText {
9 | constructor() {
10 | microbitStore.addListener(this);
11 | }
12 |
13 | @Element()
14 | protected el;
15 |
16 | @Prop({mutable: true})
17 | public services: Services = null;
18 |
19 | /**
20 | * The text shown on the button
21 | */
22 | @Prop()
23 | public buttonLabel: string = "";
24 |
25 | /**
26 | * The speed to scroll the text
27 | */
28 | @Prop()
29 | public scrollDelay: number = 100;
30 |
31 | @State()
32 | protected disabled = true;
33 |
34 | private text = "";
35 |
36 | @Watch('services')
37 | protected async servicesUpdated() {
38 | this.disabled = !this.services || !this.services.ledService;
39 |
40 | if (this.services && this.services.ledService) {
41 | await this.services.ledService.setScrollingDelay(this.scrollDelay);
42 | }
43 | }
44 |
45 | private handleKey(event) {
46 | if (event.keyCode == 13) {
47 | this.writeText();
48 | } else {
49 | this.text = event.target.value;
50 | }
51 | }
52 |
53 | private async writeText() {
54 | await this.services.ledService.writeText(this.text);
55 | }
56 |
57 | public render() {
58 | let button: JSX.Element;
59 |
60 | if (this.buttonLabel) {
61 | button = this.writeText()}>;
66 | }
67 |
68 | return (
69 |
70 | this.handleKey(e)}>
75 | {button}
76 |
77 | );
78 | }
79 | }
80 |
--------------------------------------------------------------------------------
/src/microbit-movement/microbit-movement.tsx:
--------------------------------------------------------------------------------
1 | import { h, Component, Prop, Element, Watch, State } from "@stencil/core";
2 | import { Services } from "microbit-web-bluetooth";
3 | import { AccelerometerPeriod, AccelerometerData } from "microbit-web-bluetooth/types/services/accelerometer";
4 | import { microbitStore } from '../microbit-store';
5 |
6 | @Component({
7 | tag: 'microbit-movement'
8 | })
9 | export class MicrobitMovement {
10 | constructor() {
11 | microbitStore.addListener(this);
12 | }
13 |
14 | @Element()
15 | protected el;
16 |
17 | @Prop({mutable: true})
18 | public services: Services = null;
19 |
20 | /**
21 | * The sensitivity of the sensor
22 | */
23 | @Prop()
24 | public sensitivity: number = 1;
25 |
26 | /**
27 | * The frequency to read the sensor
28 | */
29 | @Prop()
30 | public frequency: number = 20;
31 |
32 | /**
33 | * The CSS class to use when still
34 | */
35 | @Prop()
36 | public stillClass: string = "microbit-still";
37 |
38 | /**
39 | * The CSS class to use when moved
40 | */
41 | @Prop()
42 | public movedClass: string = "microbit-moved";
43 |
44 | @State()
45 | protected className = this.stillClass;
46 |
47 | @Watch('services')
48 | protected async servicesUpdated() {
49 | if (!this.services || !this.services.accelerometerService) {
50 | this.className = this.stillClass;
51 | return;
52 | }
53 |
54 | const service = this.services.accelerometerService;
55 | await service.setAccelerometerPeriod(this.frequency as AccelerometerPeriod);
56 | const data = await service.readAccelerometerData();
57 | this.setClassName(data);
58 | await service.addEventListener("accelerometerdatachanged", event => this.setClassName(event.detail));
59 | }
60 |
61 | private setClassName(data: AccelerometerData) {
62 | this.className =
63 | (Math.abs(data.x) > this.sensitivity
64 | || Math.abs(data.y) > this.sensitivity
65 | || Math.abs(data.z) > this.sensitivity) ? this.movedClass
66 | : this.stillClass;
67 | }
68 |
69 | public render() {
70 | return (
71 |
72 |
73 |
74 | );
75 | }
76 | }
77 |
--------------------------------------------------------------------------------
/src/microbit-matrix/microbit-matrix.tsx:
--------------------------------------------------------------------------------
1 | import { Component, Prop, Element, Watch } from "@stencil/core";
2 | import { Services } from "microbit-web-bluetooth";
3 | import { LedMatrix } from "microbit-web-bluetooth/types/services/led";
4 | import { microbitStore } from '../microbit-store';
5 |
6 |
7 | type ElMatrix = [
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 | [HTMLElement, HTMLElement, HTMLElement, HTMLElement, HTMLElement]
13 | ];
14 |
15 | @Component({
16 | tag: 'microbit-matrix'
17 | })
18 | export class MicrobitMatrix {
19 | constructor() {
20 | microbitStore.addListener(this);
21 | }
22 |
23 | @Element()
24 | protected el;
25 |
26 | @Prop({mutable: true})
27 | public services: Services = null;
28 |
29 | /**
30 | * The template for identifying child LEDs
31 | */
32 | @Prop()
33 | public idTemplate: string = "microbit-matrix-${row}-${column}";
34 |
35 | /**
36 | * The CSS class for off LEDs
37 | */
38 | @Prop()
39 | public offClass: string = "microbit-matrix-off";
40 |
41 | /**
42 | * The CSS class for on LEDs
43 | */
44 | @Prop()
45 | public onClass: string = "microbit-matrix-on";
46 |
47 | private matrix: LedMatrix;
48 | private elements: ElMatrix;
49 |
50 | @Watch('services')
51 | protected async servicesUpdated() {
52 | const els: HTMLElement[][] = [[], [], [], [], []];
53 |
54 | for (let i = 0; i < 5; i++) {
55 | for (let j = 0; j < 5; j++) {
56 | const id = this.idTemplate.replace("${row}", i.toString()).replace("${column}", j.toString());
57 | const led = document.getElementById(id);
58 | if (led) {
59 | els[i][j] = led;
60 | led.onclick = () => this.toggle(i, j);
61 | led.classList.toggle(this.onClass, false);
62 | led.classList.toggle(this.offClass, false);
63 | }
64 | }
65 | }
66 | this.elements = els as ElMatrix;
67 |
68 | if (!this.services || !this.services.ledService) {
69 | return;
70 | }
71 |
72 | this.matrix = await this.services.ledService.readMatrixState();
73 | await this.updateMatrix();
74 | }
75 |
76 | private async toggle(row: number, column: number) {
77 | this.matrix[row][column] = !this.matrix[row][column];
78 | await this.services.ledService.writeMatrixState(this.matrix);
79 | this.updateMatrix();
80 | }
81 |
82 | private updateMatrix() {
83 | this.matrix.forEach((rows: Boolean[], row) => {
84 | rows.forEach((value: boolean, column) => {
85 | const led = this.elements[row][column];
86 | if (led) {
87 | led.classList.toggle(this.onClass, value);
88 | led.classList.toggle(this.offClass, !value);
89 | }
90 | });
91 | });
92 | }
93 | }
94 |
--------------------------------------------------------------------------------
/examples/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Microbit Web Components
5 |
6 |
68 |
69 |
70 |
71 |
72 |
73 | micro:bit Web Components
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 | Connected
85 |
86 |
87 | Button A
88 |
89 |
90 | Button B
91 |
92 |
93 | Movement
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |