Add state components

Author: thegecko

README.md

@@ -19,13 +19,14 @@ Web Components library for micro:bit
 - [x] Serial Number
 
 ## State Class Wrappers
-- [ ] Connection State
-- [ ] Button State
+- [x] Connection State
+- [x] Button A State
+- [x] Button B State
 - [ ] IO Pin State
 
 ## Data
 - [x] Temperature
-- [ ] Compass
+- [x] Compass
 - [ ] Movement
 - [ ] Write IO
 

src/components.d.ts

@@ -18,6 +18,13 @@ import {
 
 export namespace Components {
 
+  interface MicrobitCompass {
+    'services': Services;
+  }
+  interface MicrobitCompassAttributes extends StencilHTMLAttributes {
+    'services'?: Services;
+  }
+
   interface MicrobitTemperature {
     /**
     * The text shown when disconnected
@@ -233,10 +240,96 @@ export namespace Components {
     'setDeviceInformation'?: (deviceInformation: DeviceInformation) => void;
     'setServices'?: (services: Services) => void;
   }
+
+  interface MicrobitStateButtonA {
+    /**
+    * The css class to use when long-pressed
+    */
+    'longPressClass': string;
+    /**
+    * The css class to use when released
+    */
+    'releaseClass': string;
+    'services': Services;
+    /**
+    * The css class to use when short-pressed
+    */
+    'shortPressClass': string;
+  }
+  interface MicrobitStateButtonAAttributes extends StencilHTMLAttributes {
+    /**
+    * The css class to use when long-pressed
+    */
+    'longPressClass'?: string;
+    /**
+    * The css class to use when released
+    */
+    'releaseClass'?: string;
+    'services'?: Services;
+    /**
+    * The css class to use when short-pressed
+    */
+    'shortPressClass'?: string;
+  }
+
+  interface MicrobitStateButtonB {
+    /**
+    * The css class to use when long-pressed
+    */
+    'longPressClass': string;
+    /**
+    * The css class to use when released
+    */
+    'releaseClass': string;
+    'services': Services;
+    /**
+    * The css class to use when short-pressed
+    */
+    'shortPressClass': string;
+  }
+  interface MicrobitStateButtonBAttributes extends StencilHTMLAttributes {
+    /**
+    * The css class to use when long-pressed
+    */
+    'longPressClass'?: string;
+    /**
+    * The css class to use when released
+    */
+    'releaseClass'?: string;
+    'services'?: Services;
+    /**
+    * The css class to use when short-pressed
+    */
+    'shortPressClass'?: string;
+  }
+
+  interface MicrobitStateConnection {
+    /**
+    * The css class to use when connected
+    */
+    'connectedClass': string;
+    'device': BluetoothDevice;
+    /**
+    * The css class to use when disconnected
+    */
+    'disconnectedClass': string;
+  }
+  interface MicrobitStateConnectionAttributes extends StencilHTMLAttributes {
+    /**
+    * The css class to use when connected
+    */
+    'connectedClass'?: string;
+    'device'?: BluetoothDevice;
+    /**
+    * The css class to use when disconnected
+    */
+    'disconnectedClass'?: string;
+  }
 }
 
 declare global {
   interface StencilElementInterfaces {
+    'MicrobitCompass': Components.MicrobitCompass;
     'MicrobitTemperature': Components.MicrobitTemperature;
     'MicrobitFirmware': Components.MicrobitFirmware;
     'MicrobitHardware': Components.MicrobitHardware;
@@ -247,9 +340,13 @@ declare global {
     'MicrobitText': Components.MicrobitText;
     'MicrobitApp': Components.MicrobitApp;
     'MicrobitConnect': Components.MicrobitConnect;
+    'MicrobitStateButtonA': Components.MicrobitStateButtonA;
+    'MicrobitStateButtonB': Components.MicrobitStateButtonB;
+    'MicrobitStateConnection': Components.MicrobitStateConnection;
   }
 
   interface StencilIntrinsicElements {
+    'microbit-compass': Components.MicrobitCompassAttributes;
     'microbit-temperature': Components.MicrobitTemperatureAttributes;
     'microbit-firmware': Components.MicrobitFirmwareAttributes;
     'microbit-hardware': Components.MicrobitHardwareAttributes;
@@ -260,9 +357,18 @@ declare global {
     'microbit-text': Components.MicrobitTextAttributes;
     'microbit-app': Components.MicrobitAppAttributes;
     'microbit-connect': Components.MicrobitConnectAttributes;
+    'microbit-state-button-a': Components.MicrobitStateButtonAAttributes;
+    'microbit-state-button-b': Components.MicrobitStateButtonBAttributes;
+    'microbit-state-connection': Components.MicrobitStateConnectionAttributes;
   }
 
 
+  interface HTMLMicrobitCompassElement extends Components.MicrobitCompass, HTMLStencilElement {}
+  var HTMLMicrobitCompassElement: {
+    prototype: HTMLMicrobitCompassElement;
+    new (): HTMLMicrobitCompassElement;
+  };
+
   interface HTMLMicrobitTemperatureElement extends Components.MicrobitTemperature, HTMLStencilElement {}
   var HTMLMicrobitTemperatureElement: {
     prototype: HTMLMicrobitTemperatureElement;
@@ -323,7 +429,26 @@ declare global {
     new (): HTMLMicrobitConnectElement;
   };
 
+  interface HTMLMicrobitStateButtonAElement extends Components.MicrobitStateButtonA, HTMLStencilElement {}
+  var HTMLMicrobitStateButtonAElement: {
+    prototype: HTMLMicrobitStateButtonAElement;
+    new (): HTMLMicrobitStateButtonAElement;
+  };
+
+  interface HTMLMicrobitStateButtonBElement extends Components.MicrobitStateButtonB, HTMLStencilElement {}
+  var HTMLMicrobitStateButtonBElement: {
+    prototype: HTMLMicrobitStateButtonBElement;
+    new (): HTMLMicrobitStateButtonBElement;
+  };
+
+  interface HTMLMicrobitStateConnectionElement extends Components.MicrobitStateConnection, HTMLStencilElement {}
+  var HTMLMicrobitStateConnectionElement: {
+    prototype: HTMLMicrobitStateConnectionElement;
+    new (): HTMLMicrobitStateConnectionElement;
+  };
+
   interface HTMLElementTagNameMap {
+    'microbit-compass': HTMLMicrobitCompassElement
     'microbit-temperature': HTMLMicrobitTemperatureElement
     'microbit-firmware': HTMLMicrobitFirmwareElement
     'microbit-hardware': HTMLMicrobitHardwareElement
@@ -334,9 +459,13 @@ declare global {
     'microbit-text': HTMLMicrobitTextElement
     'microbit-app': HTMLMicrobitAppElement
     'microbit-connect': HTMLMicrobitConnectElement
+    'microbit-state-button-a': HTMLMicrobitStateButtonAElement
+    'microbit-state-button-b': HTMLMicrobitStateButtonBElement
+    'microbit-state-connection': HTMLMicrobitStateConnectionElement
   }
 
   interface ElementTagNameMap {
+    'microbit-compass': HTMLMicrobitCompassElement;
     'microbit-temperature': HTMLMicrobitTemperatureElement;
     'microbit-firmware': HTMLMicrobitFirmwareElement;
     'microbit-hardware': HTMLMicrobitHardwareElement;
@@ -347,6 +476,9 @@ declare global {
     'microbit-text': HTMLMicrobitTextElement;
     'microbit-app': HTMLMicrobitAppElement;
     'microbit-connect': HTMLMicrobitConnectElement;
+    'microbit-state-button-a': HTMLMicrobitStateButtonAElement;
+    'microbit-state-button-b': HTMLMicrobitStateButtonBElement;
+    'microbit-state-connection': HTMLMicrobitStateConnectionElement;
   }
 
 

src/components/data/microbit-compass.tsx

@@ -0,0 +1,37 @@
+import { Component, Prop, Element, State, Watch } from "@stencil/core";
+import { Services } from "microbit-web-bluetooth";
+import DeviceTunnel from '../../device-tunnel';
+
+@Component({
+    tag: 'microbit-compass'
+})
+export class MicrobitCompass {
+    @Element() el;
+    @Prop() services: Services = undefined;
+
+    @State() bearing: number = 0;
+
+    @Watch('services')
+    async watchHandler() {
+        if (!this.services || !this.services.magnetometerService) {
+            return;
+        }
+
+        const service = this.services.magnetometerService;
+        service.addEventListener("magnetometerbearingchanged", event => this.bearing = event.detail);
+    }
+
+    render() {
+        const style = {
+            position: "absolute",
+            transform: `rotate(${this.bearing}deg)`
+        };
+        return (
+            <span style={style}>
+                <slot />
+            </span>
+        );
+    }
+}
+
+DeviceTunnel.injectProps(MicrobitCompass, ['services']);

src/components/state/microbit-state-button-a.tsx

@@ -0,0 +1,53 @@
+import { Component, Prop, Element, Watch, State } from "@stencil/core";
+import { Services } from "microbit-web-bluetooth";
+import DeviceTunnel from '../../device-tunnel';
+
+@Component({
+    tag: 'microbit-state-button-a'
+})
+export class MicrobitStateButtonA {
+    @Element() el;
+    @Prop() services: Services = undefined;
+
+    /**
+     * The css class to use when released
+     */
+    @Prop() releaseClass: string = "microbit-release";
+
+    /**
+     * The css class to use when short-pressed
+     */
+    @Prop() shortPressClass: string = "microbit-short-press";
+
+    /**
+     * The css class to use when long-pressed
+     */
+    @Prop() longPressClass: string = "microbit-long-press";
+
+    @State() className = this.releaseClass;
+
+    @Watch('services')
+    watchHandler() {
+        if (!this.services || !this.services.buttonService) {
+            this.className = this.releaseClass;
+            return;
+        }
+
+        const service = this.services.buttonService;
+        service.addEventListener("buttonastatechanged", event => {
+            this.className = event.detail === 1 ? this.shortPressClass
+                : event.detail === 2 ? this.longPressClass
+                : this.releaseClass;
+        });
+    }
+
+    render() {
+        return (
+            <span class={this.className}>
+                <slot />
+            </span>
+        );
+    }
+}
+
+DeviceTunnel.injectProps(MicrobitStateButtonA, ['services']);

src/components/state/microbit-state-button-b.tsx

@@ -0,0 +1,53 @@
+import { Component, Prop, Element, Watch, State } from "@stencil/core";
+import { Services } from "microbit-web-bluetooth";
+import DeviceTunnel from '../../device-tunnel';
+
+@Component({
+    tag: 'microbit-state-button-b'
+})
+export class MicrobitStateButtonB {
+    @Element() el;
+    @Prop() services: Services = undefined;
+
+    /**
+     * The css class to use when released
+     */
+    @Prop() releaseClass: string = "microbit-release";
+
+    /**
+     * The css class to use when short-pressed
+     */
+    @Prop() shortPressClass: string = "microbit-short-press";
+
+    /**
+     * The css class to use when long-pressed
+     */
+    @Prop() longPressClass: string = "microbit-long-press";
+
+    @State() className = this.releaseClass;
+
+    @Watch('services')
+    watchHandler() {
+        if (!this.services || !this.services.buttonService) {
+            this.className = this.releaseClass;
+            return;
+        }
+
+        const service = this.services.buttonService;
+        service.addEventListener("buttonbstatechanged", event => {
+            this.className = event.detail === 1 ? this.shortPressClass
+                : event.detail === 2 ? this.longPressClass
+                : this.releaseClass;
+        });
+    }
+
+    render() {
+        return (
+            <span class={this.className}>
+                <slot />
+            </span>
+        );
+    }
+}
+
+DeviceTunnel.injectProps(MicrobitStateButtonB, ['services']);

src/components/state/microbit-state-connection.tsx

@@ -0,0 +1,31 @@
+import { Component, Prop, Element } from "@stencil/core";
+import DeviceTunnel from '../../device-tunnel';
+
+@Component({
+    tag: 'microbit-state-connection'
+})
+export class MicrobitStateConnection {
+    @Element() el;
+    @Prop() device: BluetoothDevice = undefined;
+
+    /**
+     * The css class to use when connected
+     */
+    @Prop() connectedClass: string = "microbit-connected";
+
+    /**
+     * The css class to use when disconnected
+     */
+    @Prop() disconnectedClass: string = "microbit-disconnected";
+
+    render() {
+        const className = this.device ? this.connectedClass : this.disconnectedClass;
+        return (
+            <span class={className}>
+                <slot />
+            </span>
+        );
+    }
+}
+
+DeviceTunnel.injectProps(MicrobitStateConnection, ['device']);