WebUSBを使ってブラウザのJavaScriptからArduinoを制御してみよう！

WebUSB WebUSBSerial(1, "localhost");

省略

    <div id="app">
        <button id="connect" @click="connectButtonAction" v-cloak>{{connectButtonText}}</button>
        <span id="status" v-cloak>{{statusText}}</span>

        <color-picker v-model="color" @input="onColorInput"></color-picker>
        <h1 v-text="msg"></h1>
        <pre v-html="color"></pre>

        <script src="https://jp.vuejs.org/js/vue.min.js"></script>
        <script src="https://unpkg.com/@radial-color-picker/vue-color-picker"></script>
        <script src="serial.js"></script>
        <script src="app.js"></script>
     </div>

省略        

var ColorPicker = VueColorPicker;

var app = new Vue({
    el: '#app',
    components: {
        ColorPicker: ColorPicker
    },
    data: {
        msg: 'WebUSB & Radial Color Picker - Vue',
        color: {
            hue: 50,
            saturation: 100,
            luminosity: 50,
            alpha: 1
        },
        statusText: '',
        connectButtonText: 'Connect',
        port: {},
    },

    methods: {
        // HSV(L)をRGBに変換
        hsv2rgb: function(hue, saturation, value) {
          // まるっとここの中身なので省略 http://shanabrian.com/web/javascript/color-code-convert-hsv-to-10rgb.php
        },

        //デバイスとの接続
        connect: async function() {
            try {
                await this.port.connect();
                console.log('connecting...');
                this.statusText = 'connected';
                this.connectButtonText = 'Disconnect';

                //デバイス側から値が送られてくるのを待ち受ける
                this.port.onReceive = data => {
                    let textDecoder = new TextDecoder();
                    console.log(textDecoder.decode(data));
                }

                this.port.onReceiveError = error => console.error(error);                
            } catch (error) {
                console.log(error);
                this.statusText = error;                
            }
        },

        //カラーピッカーの値が変わると反応
        onColorInput: function() {
            if (!this.port) return;
            let view = new Uint8Array(3);

            //HSV(L)の値をRGBに変換
            const color = this.hsv2rgb(this.color.hue,this.color.saturation,this.color.luminosity);

            view[0] = parseInt(color.red);
            view[1] = parseInt(color.green);
            view[2] = parseInt(color.blue);
            this.port.send(view); //データをUSBデバイスに送信

            console.log(this.color.hue,this.color.saturation,this.color.luminosity);
            console.log(this.hsv2rgb(this.color.hue,this.color.saturation,this.color.luminosity));
        },

        //connectボタンのトグル処理
        connectButtonAction: async function(){
            if (this.port) {
                this.port.disconnect();
                this.connectButtonText = 'Connect';
                this.statusText = '';
                this.port = null;
            } else {
                try {
                    const selectedPort = await serial.requestPort();
                    this.port = selectedPort;
                    this.connect();                    
                } catch (error) {
                    this.statusText = error;                    
                }
            }
        }
    },
    //ページ立ち上げ時
    mounted: async function() {
        const ports = await serial.getPorts();
        if (ports.length == 0) {
            this.statusText = 'No device found.';
        } else {
            this.statusText = 'Connecting...';
            this.port = ports[0];
            this.connect();
        }
    }
});