Add serial components

Author: thegecko

README.md

@@ -36,8 +36,8 @@ Web Components library for micro:bit
 - [x] Read/Write LED Matrix
 
 # Serial
-- [ ] Send Message
-- [ ] Receive Message
+- [x] Send Message
+- [x] Receive Message
 
 ### Events
 - [ ] Send Event

src/components.d.ts

@@ -287,6 +287,36 @@ export namespace Components {
     'setServices'?: (services: Services) => void;
   }
 
+  interface MicrobitReceive {
+    'services': Services;
+  }
+  interface MicrobitReceiveAttributes extends StencilHTMLAttributes {
+    'services'?: Services;
+  }
+
+  interface MicrobitSend {
+    /**
+    * The text shown on the button
+    */
+    'buttonLabel': string;
+    /**
+    * The delimiter to use
+    */
+    'delimiter': string;
+    'services': Services;
+  }
+  interface MicrobitSendAttributes extends StencilHTMLAttributes {
+    /**
+    * The text shown on the button
+    */
+    'buttonLabel'?: string;
+    /**
+    * The delimiter to use
+    */
+    'delimiter'?: string;
+    'services'?: Services;
+  }
+
   interface MicrobitStateButtonA {
     /**
     * The css class to use when long-pressed
@@ -427,6 +457,8 @@ declare global {
     'MicrobitApp': Components.MicrobitApp;
     'MicrobitCalibrate': Components.MicrobitCalibrate;
     'MicrobitConnect': Components.MicrobitConnect;
+    'MicrobitReceive': Components.MicrobitReceive;
+    'MicrobitSend': Components.MicrobitSend;
     'MicrobitStateButtonA': Components.MicrobitStateButtonA;
     'MicrobitStateButtonB': Components.MicrobitStateButtonB;
     'MicrobitStateConnection': Components.MicrobitStateConnection;
@@ -447,6 +479,8 @@ declare global {
     'microbit-app': Components.MicrobitAppAttributes;
     'microbit-calibrate': Components.MicrobitCalibrateAttributes;
     'microbit-connect': Components.MicrobitConnectAttributes;
+    'microbit-receive': Components.MicrobitReceiveAttributes;
+    'microbit-send': Components.MicrobitSendAttributes;
     'microbit-state-button-a': Components.MicrobitStateButtonAAttributes;
     'microbit-state-button-b': Components.MicrobitStateButtonBAttributes;
     'microbit-state-connection': Components.MicrobitStateConnectionAttributes;
@@ -532,6 +566,18 @@ declare global {
     new (): HTMLMicrobitConnectElement;
   };
 
+  interface HTMLMicrobitReceiveElement extends Components.MicrobitReceive, HTMLStencilElement {}
+  var HTMLMicrobitReceiveElement: {
+    prototype: HTMLMicrobitReceiveElement;
+    new (): HTMLMicrobitReceiveElement;
+  };
+
+  interface HTMLMicrobitSendElement extends Components.MicrobitSend, HTMLStencilElement {}
+  var HTMLMicrobitSendElement: {
+    prototype: HTMLMicrobitSendElement;
+    new (): HTMLMicrobitSendElement;
+  };
+
   interface HTMLMicrobitStateButtonAElement extends Components.MicrobitStateButtonA, HTMLStencilElement {}
   var HTMLMicrobitStateButtonAElement: {
     prototype: HTMLMicrobitStateButtonAElement;
@@ -570,6 +616,8 @@ declare global {
     'microbit-app': HTMLMicrobitAppElement
     'microbit-calibrate': HTMLMicrobitCalibrateElement
     'microbit-connect': HTMLMicrobitConnectElement
+    'microbit-receive': HTMLMicrobitReceiveElement
+    'microbit-send': HTMLMicrobitSendElement
     'microbit-state-button-a': HTMLMicrobitStateButtonAElement
     'microbit-state-button-b': HTMLMicrobitStateButtonBElement
     'microbit-state-connection': HTMLMicrobitStateConnectionElement
@@ -590,6 +638,8 @@ declare global {
     'microbit-app': HTMLMicrobitAppElement;
     'microbit-calibrate': HTMLMicrobitCalibrateElement;
     'microbit-connect': HTMLMicrobitConnectElement;
+    'microbit-receive': HTMLMicrobitReceiveElement;
+    'microbit-send': HTMLMicrobitSendElement;
     'microbit-state-button-a': HTMLMicrobitStateButtonAElement;
     'microbit-state-button-b': HTMLMicrobitStateButtonBElement;
     'microbit-state-connection': HTMLMicrobitStateConnectionElement;

src/components/led/microbit-text.tsx

@@ -49,13 +49,13 @@ export class MicrobitText {
                     type="input"
                     disabled={this.disabled}
                     maxLength={20}
-                    onKeyPress={e => this.handleKeyPress(e)}></input>
+                    onKeyUp={e => this.handleKey(e)}></input>
                 {button}
             </span>
         );
     }
 
-    private handleKeyPress(event) {
+    private handleKey(event) {
         if (event.keyCode == 13) {
             this.writeText();
         } else {

src/components/serial/microbit-receive.tsx

@@ -0,0 +1,41 @@
+import { Component, Prop, Element, State, Watch } from "@stencil/core";
+import { Services } from "microbit-web-bluetooth";
+import DeviceTunnel from '../../device-tunnel';
+
+@Component({
+    tag: 'microbit-receive'
+})
+export class MicrobitReceive {
+    @Element() el;
+    @Prop() services: Services = undefined;
+
+    @State() disabled = true;
+    @State() data: string = "";
+
+    @Watch('services')
+    async watchHandler() {
+        this.disabled = !this.services || !this.services.uartService;
+
+        const service = this.services.uartService;
+
+        if (!service) {
+            this.data = "";
+            return;
+        }
+
+        await service.addEventListener("receiveString", event => this.data += event.detail);
+    }
+
+    render() {
+        const style = {
+            whiteSpace: 'pre'
+        };
+        return (
+            <span style={style}>
+                {this.data}
+            </span>
+        );
+    }
+}
+
+DeviceTunnel.injectProps(MicrobitReceive, ['services']);

src/components/serial/microbit-send.tsx

@@ -0,0 +1,68 @@
+import { Component, Prop, Element, State, Watch } from "@stencil/core";
+import { Services } from "microbit-web-bluetooth";
+import DeviceTunnel from '../../device-tunnel';
+
+@Component({
+    tag: 'microbit-send'
+})
+export class MicrobitSend {
+    @Element() el;
+    @Prop() services: Services = undefined;
+
+    /**
+     * The text shown on the button
+     */
+    @Prop() buttonLabel: string = "";
+
+    /**
+     * The delimiter to use
+     */
+    @Prop() delimiter: string = "";
+
+    @State() disabled = true;
+
+    private text = "";
+
+    @Watch('services')
+    async watchHandler() {
+        this.disabled = !this.services || !this.services.uartService;
+    }
+
+    render() {
+        let button: JSX.Element;
+        
+        if (this.buttonLabel) {
+            button = <input
+                type="submit"
+                disabled={this.disabled}
+                value={this.buttonLabel}
+                onClick={() => this.sendText()}></input>;
+        }
+
+        return (
+            <span>
+                <input
+                    type="input"
+                    disabled={this.disabled}
+                    maxLength={20}
+                    onKeyUp={e => this.handleKey(e)}></input>
+                {button}
+            </span>
+        );
+    }
+
+    private handleKey(event) {
+        if (event.keyCode == 13) {
+            this.sendText();
+        } else {
+            this.text = event.target.value;
+        }
+    }
+
+    private async sendText() {
+        const text = `${this.text}${this.delimiter}`;
+        await this.services.uartService.sendString(text);
+    }
+}
+
+DeviceTunnel.injectProps(MicrobitSend, ['services']);

src/index.html

@@ -68,7 +68,6 @@
         <microbit-firmware></microbit-firmware>
         <microbit-hardware></microbit-hardware>
         <microbit-temperature></microbit-temperature>
-        <microbit-text button-label="Write"></microbit-text>
         <microbit-state-connection>
             <span class="state">Connected</span>
         </microbit-state-connection>
@@ -108,6 +107,9 @@
             <div id="matrix-4-3" class="microbit-matrix-led"></div>
             <div id="matrix-4-4" class="microbit-matrix-led"></div>
         </microbit-matrix>
+        <microbit-text button-label="Write"></microbit-text>
+        <microbit-send delimiter=":" button-label="Send"></microbit-send>
+        <microbit-receive></microbit-receive>
         <microbit-calibrate></microbit-calibrate>
         <microbit-compass>
             <div id="compass"></div>