Add DFU mode

README.md

@@ -47,4 +47,5 @@ Web Components library for micro:bit
 - [ ] Microbit Channel Selection
 
 ### Firmware
+- [x] Initiate DFU Mode
 - [ ] Update Firmware

examples/index.html

@@ -122,6 +122,7 @@ <h1>micro:bit Web Components</h1>
         <microbit-text button-label="Write"></microbit-text>
         <microbit-send delimiter=":" button-label="Send"></microbit-send>
         <microbit-receive></microbit-receive>
+        <microbit-dfu></microbit-dfu>
         <microbit-calibrate></microbit-calibrate>
         <microbit-compass>
             <div id="compass"></div>

src/components.d.ts

@@ -76,6 +76,13 @@ export namespace Components {
     */
     'disconnectedClass': string;
   }
+  interface MicrobitDfu {
+    /**
+    * The button label to initiate DFU mode
+    */
+    'dfuLabel': string;
+    'services': Services;
+  }
   interface MicrobitFirmware {
     'deviceInformation': DeviceInformation;
     /**
@@ -257,6 +264,12 @@ declare global {
     new (): HTMLMicrobitConnectionElement;
   };
 
+  interface HTMLMicrobitDfuElement extends Components.MicrobitDfu, HTMLStencilElement {}
+  var HTMLMicrobitDfuElement: {
+    prototype: HTMLMicrobitDfuElement;
+    new (): HTMLMicrobitDfuElement;
+  };
+
   interface HTMLMicrobitFirmwareElement extends Components.MicrobitFirmware, HTMLStencilElement {}
   var HTMLMicrobitFirmwareElement: {
     prototype: HTMLMicrobitFirmwareElement;
@@ -335,6 +348,7 @@ declare global {
     'microbit-compass': HTMLMicrobitCompassElement;
     'microbit-connect': HTMLMicrobitConnectElement;
     'microbit-connection': HTMLMicrobitConnectionElement;
+    'microbit-dfu': HTMLMicrobitDfuElement;
     'microbit-firmware': HTMLMicrobitFirmwareElement;
     'microbit-hardware': HTMLMicrobitHardwareElement;
     'microbit-manufacturer': HTMLMicrobitManufacturerElement;
@@ -413,6 +427,13 @@ declare namespace LocalJSX {
     */
     'disconnectedClass'?: string;
   }
+  interface MicrobitDfu extends JSXBase.HTMLAttributes<HTMLMicrobitDfuElement> {
+    /**
+    * The button label to initiate DFU mode
+    */
+    'dfuLabel'?: string;
+    'services'?: Services;
+  }
   interface MicrobitFirmware extends JSXBase.HTMLAttributes<HTMLMicrobitFirmwareElement> {
     'deviceInformation'?: DeviceInformation;
     /**
@@ -561,6 +582,7 @@ declare namespace LocalJSX {
     'microbit-compass': MicrobitCompass;
     'microbit-connect': MicrobitConnect;
     'microbit-connection': MicrobitConnection;
+    'microbit-dfu': MicrobitDfu;
     'microbit-firmware': MicrobitFirmware;
     'microbit-hardware': MicrobitHardware;
     'microbit-manufacturer': MicrobitManufacturer;

src/microbit-dfu/microbit-dfu.tsx

@@ -0,0 +1,44 @@
+import { h, Component, Prop, Element, State, Watch } from "@stencil/core";
+import { Services } from "microbit-web-bluetooth";
+import { microbitStore } from '../microbit-store';
+
+@Component({
+    tag: 'microbit-dfu'
+})
+export class MicrobitDfu {
+    constructor() {
+        microbitStore.addListener(this);
+    }
+
+    @Element()
+    protected el;
+
+    @Prop({mutable: true})
+    public services: Services = null;
+
+    /**
+     * The button label to initiate DFU mode
+     */
+    @Prop()
+    public dfuLabel: string = "Initiate DFU"
+
+    @State()
+    protected disabled = true;
+
+    @Watch('services')
+    protected async servicesUpdated() {
+        this.disabled = !this.services || !this.services.dfuControlService;
+    }
+
+    private async calibrate() {
+        if (this.services.dfuControlService) {
+            await this.services.dfuControlService.requestDfu();
+        }
+    }
+
+    public render() {
+        return (
+            <button disabled={this.disabled} onClick={() => this.calibrate()}>{this.dfuLabel}</button>
+        );
+    }
+}

src/microbit-dfu/readme.md

@@ -0,0 +1,18 @@
+# microbit-dfu
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property   | Attribute   | Description                           | Type       | Default          |
+| ---------- | ----------- | ------------------------------------- | ---------- | ---------------- |
+| `dfuLabel` | `dfu-label` | The button label to initiate DFU mode | `string`   | `"Initiate DFU"` |
+| `services` | --          |                                       | `Services` | `null`           |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*