みかづきブログ その3

3ヶ月つづけてみました。

chrome.serial をつかって Google Chrome でシリアル通信を受信する


Chromeアプリをつくろう - みかづきブログ その3

前回は全く役に立たないChromeアプリをつくってみました が、今回は chrome.serial をつかってシリアル通信を受け取る Chromeアプリをつくってみたいと思います。

f:id:kimizuka:20150112234933j:plain


manifest.json

前回との最も大きな変更点はシリアルのパーミッションをリクエストしているところです。

{
  "name": "Chrome App Sumple",
  "description": "Receive Serial.",
  "version": "1.1",
  "manifest_version": 2,
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  },
  "icons": {
    "128": "package-128.png"
  },
  "permissions": [ // パーミッションをリクエスト
     "serial"
  ]
}

background.js

前回をまるで変わっていません。

chrome.app.runtime.onLaunched.addListener(function(){
  chrome.app.window.create('index.html', {
    'bounds': {
      'width': 400,
      'height': 400, 
      'top': 0,
      'left': 0
    }
  });
});

index.html

外部スクリプトをロードしています。

<script src="main.js"></script>

main.js

今回追加されたファイルです。かなり探り探り書いてます。

(function(win, doc) {

  "use strict";

  var connectionId = "",
      serialString = "",
      DEVICE_INDEX = 0,
      BITRATE = 115200,
      RECEIVE_TIMEOUT = 5000;

  win.addEventListener("load", handleLoad, false);

  function handleLoad() {
    console.info("LOADED.");

    chrome.serial.onReceive.addListener(handleReceive);
    chrome.serial.onReceiveError.addListener(handleReceiveError);

    chrome.serial.getDevices(function(devices) {
      console.info("READY.");
      chrome.serial.connect(devices[DEVICE_INDEX].path, {bitrate: BITRATE, receiveTimeout: RECEIVE_TIMEOUT}, handleConnect);
    });
  }

  function handleConnect(evt) {
    connectionId = evt.connectionId;
  }

  function handleReceive(evt) {
    if (evt.connectionId === connectionId && evt.data) {

      var str = convertArrayBufferToString(evt.data);

      // 改行コードでデータの終了を判断
      if (str[str.length - 1] === "\n") {
        console.log(serialString);
        serialString = "";
      } else {
        serialString += str;
      }
    }
  }

  function handleDisconnect(evt) {
    if (evt) {
      console.log("DISCONNECTED.");
    } else {
      console.log("ERROR.");
    }
  }

  function handleReceiveError(info) {
    console.log("END.");
    chrome.serial.disconnect(connectionId, handleDisconnect)
  }

  // シリアルを文字列に変換する
  function convertArrayBufferToString(buf) {
    var bufView = new Uint8Array(buf),
        encodedString = String.fromCharCode.apply(null, bufView);

    return decodeURIComponent(escape(encodedString));
  }

})(window, document);

一応見つかったデバイスの先頭に自動で接続してシリアルを受け取りつづけ、改行コードを受け取ったところでコンソールに表示するという挙動を確認できました。
拡張機能の「ビューを検証」で index.html を選択するとコンソールが確認できます。

いまだ何の役にも立たないアプリですが、今回は以上です。