Arduino で超音波距離センサ(SRF02)を読んで Mac や Raspberry Pi から MQTT で Sango に publish して、websocket で Chart.js に描画したり、PC で excel に出力したりしたメモ


#概要
登場する要素を全部羅列したら日本語としてとても読むに耐えないタイトルになってしまいましたことをお詫びいたします。基本的に自分への備忘録としての性格のドキュメントなのですが、どなたかのご参考になることもあるかと存じ、僭越ながらここにメモを残させていただきました次第にございますれば、記述内容のおかしい所や効率的でない箇所などのご指摘をいただけましたら恐縮至極でございます。

システム構成を図示すると以下になります

1. センサー側の実装
図の左下緑色の丸のLAN。この LAN の中でセンサー(SRF02)を Arduino で読み取り、シリアルを通じて Mac や Raspberry Pi 等の Network Interface を持つ機器にに送ります。さらにこれらの機器から mqtt で broker (Sango) に publish します。Internet への接続は mobile router を使います

2. MQTT Broker
図の右下、mqtt broker として時雨堂さんご提供の mqtt broker service である Sango をつかわせていただきます。また、Sango を subscribe して Chart.js でグラフを描画する Web Application を置く Web Server も用意します。Sango には WebSocket で接続します

3. アプリケーション側の実装
図の上部、上で述べた Web application を iOS や PC から ブラウザでアクセスすることで、センサの値をリアルタイムのグラフで参照することができます。さらに PC などで subscribe した値を csv で書き出すことで、遠隔地のセンサーのリアルタイムな値の記録を自席PCで Excel などの表計算ソフトで処理できるようになります

![スクリーンショット 2014-10-26 19.54.51.png](https://qiita-image-store.s3.amazonaws.com/0/46544/f2b05ca7-cc47-0d65-1223-84ab2011815d.png "スクリーンショット 2014-10-26 19.54.51.png")

ソフトウェア構造と配置は以下のようになります

1. SRF02 の値をシリアルに書く Arduino のスケッチ
この部分を書き換えることで、このシステムは他のセンサーについても同様に利用できます。配置先はもちろん Arduino になります

2. Arduino のシリアルを読んで、センサー値を mqtt で publish するプログラム
シェルスクリプトで行う方法もあるとおもいますが、今回は python で実装しました。mqtt のクライアントには python のライブラリが存在するので [paho](http://www.eclipse.org/paho/) を使用しましたが、シェルスクリプトでの実装だと [mosquitto](http://mosquitto.org) での実装もあるかと思います。配置先は Raspberry Pi や Mac などの TCP の使える環境になります

3. publish された topic を読んでグラフにする Web Application
普通の Web Application です。Sango の WebSocket インターフェースに接続し、paho の javascript library を使って mqtt で topic を読んで Chart.js でグラフを書きます。WebServer にデプロイします

4. publish された topic を読んで CSV でロギングする
こちらもシェルスクリプトにすることも可能だと思いますが paho を利用した python アプリケーションとして実装しました。配置先は PC などを想定していますがなんでもかまいません。遠隔地のセンサーの値を自席PC でCSV ロギングできれば便利ですね


完成品の挙動は[このyoutubeのように](https://www.youtube.com/watch?v=y2qMK0VOtXI)なります

# 1.センサー側の実装
##  SRF02 を Aruduino で読む
[SRF02](http://akizukidenshi.com/catalog/g/gM-06685/)は小型軽量な超音波測距センサーです。Arduino とのピンの接続及び計測値をシリアルに書き出すためのスケッチは[開発元のサイト](http://www.dfrobot.com/wiki/index.php?title=SRF02_Ultrasonic_sensor_(SKU:SEN0005))で公開されています。この資料の "Connection Diagram(IIC Mode)" のとおりに SRF02 と Arduino を結線ます。さらに"Sample Code(IIC Mode)"のスケッチは接続動作確認に利用する他、このI2Cのスケッチを流用して、Mac や Raspberry Pi からの距離測定コマンドが来た時だけ測定した距離をシリアルに書くように以下のように変更します

```c:sketch_SRF02_from_serial
#include <Wire.h>
byte val=0;

void setup()
{
  Wire.begin();                // join i2c bus (address optional for master)
  Serial.begin(9600);          // start serial communication at 9600bps
}

int reading = 0;

void loop()
{
  // step 1: instruct sensor to read echoes
  Wire.beginTransmission(112); // transmit to device #112 (0x70)
  // the address specified in the datasheet is 224 (0xE0)
  // but i2c adressing uses the high 7 bits so it's 112
  Wire.write(byte(0x00));      // sets register pointer to the command register (0x00)
  Wire.write(byte(0x51));      // command sensor to measure in "centimeters" (0x51)
  // use 0x51 for centimeters
  // use 0x52 for ping microseconds
  Wire.endTransmission();      // stop transmitting

  // step 2: wait for readings to happen
  delay(70);                   // datasheet suggests at least 65 milliseconds

  // step 3: instruct sensor to return a particular echo reading
  Wire.beginTransmission(112); // transmit to device #112
  Wire.write(byte(0x02));      // sets register pointer to echo #1 register (0x02)
  Wire.endTransmission();      // stop transmitting

  // step 4: request reading from sensor
  Wire.requestFrom(112, 2);    // request 2 bytes from slave device #112

  // step 5: receive reading from sensor
  if (2 <= Wire.available())   // if two bytes were received
  {
    reading = Wire.read();  // receive high byte (overwrites previous reading)
    reading = reading << 8;    // shift high byte to be high 8 bits
    reading |= Wire.read(); // receive low byte as lower 8 bits
    // 'a' が入力されると値を返す
    val = Serial.read();
    if (val == 'a'){
      Serial.println(reading);   // print the reading
      //Serial.println("cm");
    }
  }

//  delay(250);                  // wait a bit since people have to read the output :)
  delay(10);                  // wait a bit since people have to read the output :)
}
```
元のスケッチに対して、シリアルから 'a' が送られてきた時にだけシリアルに値を書く等の変更をしています

## paho-mqtt のインストール
pip がインストールされている前提で、以下になります
```
sudo pip install paho-mqtt
```

## その他、便利なソフトウェアのインストール
Raspbian はデフォルトで screen がないのでインストールしておきます(Mac にはデフォルトであります)
```
sudo apt-get install screen
```


## Raspberry Pi で mqtt を publish する場合
### Arduino と Raspberry Pi を USB で接続
Aruduino を USB ケーブル経由で Raspbery Pi に接続します。接続の確認は /dev 配下に Arduino が tty として見えていれば成功しています。具体的には　Raspberry Pi の terminal を開き

```
ls /dev/ttyACM*
```
で、ttyACM0 があれば接続しています。Arduino を複数接続していると ttyACM1 等、同様の tty が複数みえるかもしれません。
Arduino から Raspberry Pi への USB ケーブルの接続が浅く、Arduino への給電はできているものの接続ができていない場合、Arduino は正常に動作していながらも tty は見えず、少しハマッたりします（私ははまりました）

### SRF02の疎通確認
[開発元のサイト](http://www.dfrobot.com/wiki/index.php?title=SRF02_Ultrasonic_sensor_(SKU:SEN0005))の資料の"Sample Code(IIC Mode)"のスケッチを Arduino に書き込み、 "Connection Diagram(IIC Mode)" のとおりに SRF02 と Arduino を結線し、Arudino と Raspberry Pi を接続します。Arduino が動き出すと SRF02 の赤い LED がピコピコと点滅します。
Raspberry Pi のターミナルを開き、/dev/ttyACM0 が見えていることを確認し、以下のようにこの tty を開きます
```
screen /dev/ttyACM0 9600
```
SRF02 で読み取った距離がターミナルに表示されれば疎通 OK です
screen の終了は `CNTL + A, CNTL + ¥` です
次に、Arduino のスケッチを前述の`sketch_SRF02_from_serial`に変更し、再度 screen で接続します。今度は Raspberry Pi 側から 'a' を入力した時だけ、距離が帰ってきます

### Paho による publish
[そこはかとなく書くよん。](http://tdoc.info/blog/2014/09/25/mqtt_python.html)を参考にさせていただいて以下のコードを用意しました。「Sango のアカウント情報の定義」の部分をご自身の Sango のアカウント情報で書き換えてください
トピックはここではでは test_topic としていますが、subscribe 側を # で受けるのなら何でもいいです。

```python:pub.py
import paho.mqtt.client as mqtt
from time import sleep
import serial
ser = serial.Serial('/dev/ttyACM0', 9600, timeout=1)

if __name__ == '__main__':

###
### 以下、Sango のアカウント情報の定義
###
    username = Sango のユーザ名
    password = Sango のパスワード
    host = 'free.mqtt.shiguredo.jp'
    topic = 'Sango のユーザ名/test_topic'
###
###
###
    port = 1883

    client = mqtt.Client()
    client.username_pw_set(username, password=password)
    client.connect(host, port=port, keepalive=60)

    while 1:
        # value = random.random() * 100
        ser.write('a'); # シリアルへの書き出しコマンド
        sleep(0.05)
        value = ser.readline()
        print '[{}] Sending message to sango.'.format(value)
        client.publish(topic, '{}'.format(value))
        ser.readline() # もしさらに値があれば読み捨て
        sleep(0.5)
```

内容は paho と serial を import し、ループを回して定期的にシリアル（につながった Arduino）に 'a' コマンドを送り、少し待ってからシリアルに帰ってきている距離値を読み、mqtt で publish します。

`python pub.py` で、Sango への距離データの publish が始まります

## Mac で mqtt を publish する場合
Mac による実装も Raspberry Pi による実装とほぼ同じです、SRF02 をつないだ Arduino を USB で Raspbery Pi に繋ぐ変わりに Mac に繋ぎ、`screen` で疎通確認をした後、python のプログラムでシリアルを読んで Sango に publish します。Raspberry Pi との変更点は Arduino の tty の見え方が違います

Raspberry Pi
- /dev/ttyACM0

Mac
- /dev/tty.usbmodem1421

pub.py も、この部分のみ違い、以下のようになります

```python:pub.py
import paho.mqtt.client as mqtt
from time import sleep
import serial
ser = serial.Serial('/dev/tty.usbmodem1421', 9600, timeout=1)

if __name__ == '__main__':

###
### 以下、Sango のアカウント情報の定義
###
    username = Sango のユーザ名
    password = Sango のパスワード
    host = 'free.mqtt.shiguredo.jp'
    topic = 'Sango のユーザ名/test_topic'
###
###
###
    port = 1883

    client = mqtt.Client()
    client.username_pw_set(username, password=password)
    client.connect(host, port=port, keepalive=60)

    while 1:
        # value = random.random() * 100
        ser.write('a'); # シリアルへの書き出しコマンド
        sleep(0.05)
        value = ser.readline()
        print '[{}] Sending message to sango.'.format(value)
        client.publish(topic, '{}'.format(value))
        ser.readline() # もしさらに値があれば読み捨て
        sleep(0.5)
```

# 2. MQTT Broker
MQTT Broker には[時雨堂](https://shiguredo.jp)様の MQTT as a Service である [Sango](https://sango.shiguredo.jp) の無料プランを使わせていただきました。サポートの方がとても親切で感激いたしました

# 3. Web でグラフ表示
[Sango の使い方 Javascript Websocket 編](http://tdoc.info/blog/2014/09/25/mqtt_javascript.html) と[Chart.js の documentation ](http://www.chartjs.org/docs/)の "Line CHart" を参考にさせていただき、以下のようなコードを用意しました。ここでも「Sango のアカウント情報の定義」の部分をご自身の Sango のアカウント情報で書き換えてください

```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>チャート</title>
  <script src="mqttws31.js" type="text/javascript"></script>
  <script src="Chart.js"></script>
  <script>

  var myLineChart;
  window.onload = function (){
  // コンテキストの取得
  var ctx = document.getElementById("myChart").getContext("2d");
  // イニシャルデータ
  var data = {
    labels: ["", "", "", "", "", "", "", "", "", "", ""],
    datasets: [
        {
            label: "My Second dataset",
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00]
        }
    ]
	};
  //　描画
  //var myLineChart = new Chart(ctx).Line(data/*, options*/);
//  myLineChart = new Chart(ctx).Line(data/*, options*/);
  myLineChart = new Chart(ctx).Line(data, {scaleOverride: true,scaleSteps: 25,scaleStepWidth: 10,scaleStartValue: 0,scaleShowGridLines : false});

  myLineChart.addData([0], "");
  // 先頭データ削除
  myLineChart.removeData();
	}
  </script>
  <script>
	var client; // MQTTのクライアントです
	var clientId = "clientid-test"; // ClientIDを指定します。

	function connect(){
//
// Sango のアカウント情報の定義
//
	    var user_name = Sango のユーザ名;
	    var pass = Sango のパスワード;
//
//
//
	    var wsurl = "ws://free.mqtt.shiguredo.jp:8080/mqtt";

	    // WebSocketURLとClientIDからMQTT Clientを作成します
	    client = new Paho.MQTT.Client(wsurl, clientId);

	    // connectします
	    client.connect({userName: user_name, password: pass, onSuccess:onConnect, onFailure: failConnect});

	}

	// 接続が失敗したら呼び出されます
	function failConnect(e) {
	    console.log("connect failed");
	    console.log(e);
	}

	// 接続に成功したら呼び出されます
	function onConnect() {
	    console.log("onConnect");
			subscribe();
	}

	// メッセージが到着したら呼び出されるコールバック関数
	function onMessageArrived(message) {
		console.log("onMessageArrived:"+message.payloadString);
      // データ追加
      myLineChart.addData([parseFloat(message.payloadString)], "");
      // 先頭データ削除
      myLineChart.removeData();
	}

	function subscribe(){
	    // コールバック関数を登録します
	    client.onMessageArrived = onMessageArrived;

		//
		// Sango のアカウント情報の定義（その２）
		//
	    var topic = "Sango のユーザ名/#";
		//
		//
		//

	    // Subscribeします
	    client.subscribe(topic);
	}
	connect();
	//subscribe();
  </script>
</head>
<body>
    <p>計測値</p>
		<canvas id="myChart" width="800" height="400"></canvas>
</body>
</html>
```

index.html と同じフォルダに mqttws31.js と Chart.js が必要です。これらはそれぞれ、以下からダウンロードできます。

mqtt31.js: http://git.eclipse.org/c/paho/org.eclipse.paho.mqtt.javascript.git/plain/src/mqttws31.js
Chart.js: https://github.com/nnnick/Chart.js

コードの内容は以下です
1. HTML5 Canvas 内に、値がすべて 0 でチャートを描画する
2. paho で Sango のトピックを subscribe
3. メッセージを受け取るたび(onMessageArrived)に Chart に値を add し、先頭を remove することでチャートをリアルタイムに更新する

私は最初 connect が非同期である事を見落としていて、上の index.html でもコメントアウトしてあるとおり connect と subscribe を逐次的に呼び出すコードを書いていて
`Error: AMQJ5001E Invalid state not connected.`
とエラーになるのが解決できず、Sango のサポート様にQAを上げてしまい諦めて寝てしまったのですが、朝起きるともう回答をいただいていて大変感激いたしました。稚拙な質問を上げてしまいご迷惑をお掛けしたことをこの場を借りてお詫び致しますとともに、激烈に迅速なご対応をいただけた事に感銘いたしました次第です。

# 4. CSV でロギング
[そこはかとなく書くよん。](http://tdoc.info/blog/2014/09/25/mqtt_python.html)を参考にさせていただいてというかほとんど流用させていただき以下のコードを用意しました。ここでも「Sango のアカウント情報の定義」の部分をご自身の Sango のアカウント情報で書き換えてください

```python:sub.py
import paho.mqtt.client as mqtt
import sys
import os

sys.stdout = os.fdopen(sys.stdout.fileno(), 'w', 0)

def on_connect(client, userdata, flags, rc):
    #print('Connected with result code '+str(rc))
    client.subscribe(Sango のユーザ名 + "/#") # ここも変更


def on_message(client, userdata, msg):
    st = msg.payload[:-2]
    #print(repr(msg.topic + ' ' + str(msg.payload)))
    print(st)


if __name__ == '__main__':

###
### 以下、Sango のアカウント情報の定義
###
    username = Sango のユーザ名
    password = Sango のパスワード
    host = 'free.mqtt.shiguredo.jp'
    topic = 'Sango のユーザ名/test_topic'
###
###
###
    port = 1883

    client = mqtt.Client()
    client.on_connect = on_connect
    client.on_message = on_message

    client.username_pw_set(username, password=password)
    client.connect(host, port=port, keepalive=60)
    client.loop_forever()
```

`python sub.py > log.csv` で、Sango から受け取った距離データの log.csv へのロギングが始まります

# 5. 感想
「速くて早い」というか、動作はとにかく速く読み取ったセンサの値がリアルタイムでチャートに反映されている感じです。また MQTT Broker (Sango) がメッセージ・キューを管理してくれているおかげでコードが大変シンプルになり、実装も実質一晩とまさに quick development でした
テレメータの案件、今後は全部これでいいような気も...