Add movement sensor

Author: thegecko

README.md

@@ -22,12 +22,12 @@ Web Components library for micro:bit
 - [x] Connection State
 - [x] Button A State
 - [x] Button B State
+- [x] Movement State
 - [ ] IO Pin State
 
 ## Data
 - [x] Temperature
 - [x] Compass
-- [ ] Movement
 - [ ] Write IO
 
 ## LEDs

src/components.d.ts

@@ -325,6 +325,45 @@ export namespace Components {
     */
     'disconnectedClass'?: string;
   }
+
+  interface MicrobitStateMovement {
+    /**
+    * The frequency to read the sensor
+    */
+    'frequency': number;
+    /**
+    * The css class to use when moved
+    */
+    'movedClass': string;
+    /**
+    * The sensitivity of the sensor
+    */
+    'sensitivity': number;
+    'services': Services;
+    /**
+    * The css class to use when still
+    */
+    'stillClass': string;
+  }
+  interface MicrobitStateMovementAttributes extends StencilHTMLAttributes {
+    /**
+    * The frequency to read the sensor
+    */
+    'frequency'?: number;
+    /**
+    * The css class to use when moved
+    */
+    'movedClass'?: string;
+    /**
+    * The sensitivity of the sensor
+    */
+    'sensitivity'?: number;
+    'services'?: Services;
+    /**
+    * The css class to use when still
+    */
+    'stillClass'?: string;
+  }
 }
 
 declare global {
@@ -343,6 +382,7 @@ declare global {
     'MicrobitStateButtonA': Components.MicrobitStateButtonA;
     'MicrobitStateButtonB': Components.MicrobitStateButtonB;
     'MicrobitStateConnection': Components.MicrobitStateConnection;
+    'MicrobitStateMovement': Components.MicrobitStateMovement;
   }
 
   interface StencilIntrinsicElements {
@@ -360,6 +400,7 @@ declare global {
     'microbit-state-button-a': Components.MicrobitStateButtonAAttributes;
     'microbit-state-button-b': Components.MicrobitStateButtonBAttributes;
     'microbit-state-connection': Components.MicrobitStateConnectionAttributes;
+    'microbit-state-movement': Components.MicrobitStateMovementAttributes;
   }
 
 
@@ -447,6 +488,12 @@ declare global {
     new (): HTMLMicrobitStateConnectionElement;
   };
 
+  interface HTMLMicrobitStateMovementElement extends Components.MicrobitStateMovement, HTMLStencilElement {}
+  var HTMLMicrobitStateMovementElement: {
+    prototype: HTMLMicrobitStateMovementElement;
+    new (): HTMLMicrobitStateMovementElement;
+  };
+
   interface HTMLElementTagNameMap {
     'microbit-compass': HTMLMicrobitCompassElement
     'microbit-temperature': HTMLMicrobitTemperatureElement
@@ -462,6 +509,7 @@ declare global {
     'microbit-state-button-a': HTMLMicrobitStateButtonAElement
     'microbit-state-button-b': HTMLMicrobitStateButtonBElement
     'microbit-state-connection': HTMLMicrobitStateConnectionElement
+    'microbit-state-movement': HTMLMicrobitStateMovementElement
   }
 
   interface ElementTagNameMap {
@@ -479,6 +527,7 @@ declare global {
     'microbit-state-button-a': HTMLMicrobitStateButtonAElement;
     'microbit-state-button-b': HTMLMicrobitStateButtonBElement;
     'microbit-state-connection': HTMLMicrobitStateConnectionElement;
+    'microbit-state-movement': HTMLMicrobitStateMovementElement;
   }
 
 

src/components/data/microbit-compass.tsx

@@ -18,6 +18,7 @@ export class MicrobitCompass {
         }
 
         const service = this.services.magnetometerService;
+        this.bearing = await service.getMagnetometerBearing();
         service.addEventListener("magnetometerbearingchanged", event => this.bearing = event.detail);
     }
 

src/components/data/microbit-temperature.tsx

@@ -39,6 +39,8 @@ export class MicrobitTemperature {
             return;
         }
 
+        const temperature = await service.readTemperature();
+        this.temperature = `${temperature}°c`;
         await service.setTemperaturePeriod(this.temperaturePeriod);
         service.addEventListener("temperaturechanged", temp => this.temperature = `${temp.detail}°c`);
     }

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

@@ -27,18 +27,16 @@ export class MicrobitStateButtonA {
     @State() className = this.releaseClass;
 
     @Watch('services')
-    watchHandler() {
+    async 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;
-        });
+        const state = await service.readButtonAState();
+        this.setClassName(state);
+        service.addEventListener("buttonastatechanged", event => this.setClassName(event.detail));
     }
 
     render() {
@@ -48,6 +46,12 @@ export class MicrobitStateButtonA {
             </span>
         );
     }
+
+    private setClassName(state: number) {
+        this.className = state === 1 ? this.shortPressClass
+        : state === 2 ? this.longPressClass
+        : this.releaseClass;
+    }
 }
 
 DeviceTunnel.injectProps(MicrobitStateButtonA, ['services']);

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

@@ -27,18 +27,16 @@ export class MicrobitStateButtonB {
     @State() className = this.releaseClass;
 
     @Watch('services')
-    watchHandler() {
+    async 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;
-        });
+        const state = await service.readButtonBState();
+        this.setClassName(state);
+        service.addEventListener("buttonbstatechanged", event => this.setClassName(event.detail));
     }
 
     render() {
@@ -48,6 +46,12 @@ export class MicrobitStateButtonB {
             </span>
         );
     }
+
+    private setClassName(state: number) {
+        this.className = state === 1 ? this.shortPressClass
+        : state === 2 ? this.longPressClass
+        : this.releaseClass;
+    }
 }
 
 DeviceTunnel.injectProps(MicrobitStateButtonB, ['services']);

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

@@ -0,0 +1,67 @@
+import { Component, Prop, Element, Watch, State } from "@stencil/core";
+import { Services } from "microbit-web-bluetooth";
+import DeviceTunnel from '../../device-tunnel';
+import { AccelerometerPeriod, AccelerometerData } from "microbit-web-bluetooth/types/services/accelerometer";
+
+@Component({
+    tag: 'microbit-state-movement'
+})
+export class MicrobitStateMovement {
+    @Element() el;
+    @Prop() services: Services = undefined;
+
+    /**
+     * The sensitivity of the sensor
+     */
+    @Prop() sensitivity: number = 1;
+
+    /**
+     * The frequency to read the sensor
+     */
+    @Prop() frequency: number = 20;
+
+    /**
+     * The css class to use when still
+     */
+    @Prop() stillClass: string = "microbit-still";
+
+    /**
+     * The css class to use when moved
+     */
+    @Prop() movedClass: string = "microbit-moved";
+
+    @State() className = this.stillClass;
+
+    @Watch('services')
+    async watchHandler() {
+        if (!this.services || !this.services.accelerometerService) {
+            this.className = this.stillClass;
+            return;
+        }
+
+        const service = this.services.accelerometerService;
+        await service.setAccelerometerPeriod(this.frequency as AccelerometerPeriod);
+        const data = await service.readAccelerometerData();
+        this.setClassName(data);
+        service.addEventListener("accelerometerdatachanged", event => this.setClassName(event.detail));
+    }
+
+    render() {
+        return (
+            <span class={this.className}>
+                <slot />
+            </span>
+        );
+    }
+
+    private setClassName(data: AccelerometerData) {
+        console.log(this.sensitivity);
+        this.className = 
+            (Math.abs(data.x) > this.sensitivity
+            || Math.abs(data.y) > this.sensitivity
+            || Math.abs(data.z) > this.sensitivity) ? this.movedClass
+            : this.stillClass;
+    }
+}
+
+DeviceTunnel.injectProps(MicrobitStateMovement, ['services']);

src/index.html

@@ -3,12 +3,12 @@
 <head>
     <title>Microbit Web Components</title>
     <style>
-        .microbit-connected > .state {
-            background: yellowgreen;
-        }
         .microbit-disconnected > .state {
             background: lightcoral;
         }
+        .microbit-connected > .state {
+            background: yellowgreen;
+        }
         .microbit-release > .state {
             background: lightcoral;
         }
@@ -18,6 +18,12 @@
         .microbit-long-press > .state {
             background: yellowgreen;
         }
+        .microbit-still > .state {
+            background: lightcoral;
+        }
+        .microbit-moved > .state {
+            background: yellowgreen;
+        }
         #compass {
             width: 50px;
             height: 50px;
@@ -56,6 +62,11 @@
                 <span class="state">Button B</span>
             </microbit-state-button-b>
         </div>
+        <div>
+            <microbit-state-movement sensitivity="1.2">
+                <span class="state">Movement</span>
+            </microbit-state-movement>
+        </div>
         <div>
             <microbit-compass>
                 <div id="compass"></div>