読者です 読者をやめる 読者になる 読者になる

気ままにIoTメモ

Iotに関わること関わらないこと備忘録

C++用CSVライブラリ

研究では主にシミュレーション結果をdouble型のcsvファイルで保存します。
Pythonだとpandasがあるのでcsvを読み込むのが簡単なのですが、c++で欲しい感じのcsvライブラリが無かったので作りました。

次のようなファイルを

,x,y
0,1.1,1.00E+00
1,1.2,2.00E+00
2,2.1,3.00E+00
3,2.2,4.00E+00
4,1.00E-01,5.00E+00
5,1.23456789,6.00E+00

id=1行x列の値がtable.data[1]["x"]でデータを読めるようになっています(読み込み専用)。

一応公開しておきます。

GitHub - hsgwa/csv_for_c_cpp: C/C++用csvライブラリ(研究室用)

シリアル通信から標準出力へ

Arduinoやmbedなどでセンシングした値をシリアル通信で確認するのは簡単なのですが、保存に少しつまづいたのでメモ。

シリアル通信で送られてきた値を確認する方法はArduino IDEのSerial Monitorやscreenコマンドを使う方法など色々あります。
Mac の screen コマンドでシリアル通信 - Qiita
Arduinoでシリアル(serial)通信をしてみよう

screenコマンドでも-Lオプションを追加すれば標準出力出来るらしいのですが、screenコマンドの使い勝手が少々ややこしい。
macos - How can I redirect the output of screen to a file? - Ask Different
Linux screen コマンド 使い方 - Qiita

結局、pySerialを使った方法が一番しっくり来ました。
Arduino Playground - Python

import sys, serial
ser = serial.Serial('/dev/tty.usbserial', 9600)
while (1):
    sys.stdout.write(ser.readline())

実行してあげれば受信したデータを標準出力に流せます。
後はリダイレクトしてcsv保存すればグラフに使えるし、 パイプでつないであげればC言語などでリアルタイム処理なんて事にも使えそうです。

※screenやpySerialのボーレートは標準の値が決まってるので注意

2017年1月21日追記
Arduinoではうまくいかなかったため、

import time
time.sleep(5)
ser.write('5')

whileの前に入れることで動作しました。

/dev/tty.usbserialは環境によって異なります。ArduinoIDEで確認するかls /dev/ |grep usbコマンドで確認できます。

Learn to Build Modern Web Apps with MEANを終えて

以前、MEANスタックの勉強を投稿してからLearn to Build Modern Web Apps with MEANで学習をはじめましたが、2週間ぐらいかけてようやく一通り終わりました。

一通り参考になったサイトを列挙。

チームラボオンラインスキルアップ課題
チープラボの3ヶ月集中講座用のドキュメントです。就活生向けに作られるため、基礎から幅広く書いてあります。

ドットインストール
MongoDB/Express/AngularJS/NodeJS一通りあるだけでなく、環境構築なども。(一部課金あり)

Code School | Shaping up with angular.js
AngularJS公式のFree Courseより。クオリティが高くて分かりやすかった。 その他の公式ドキュメントもそのうち読みたい。
Code SchoolにはMEANスタック周辺の動画あり。(課金)

2017/01/04追記
結局Code Schoolに課金してあれこれ学ぶことにしました。

「MEANスタックで始めるWebアプリ開発入門
概要や使い方が書かれている数少ない日本語のドキュメントです。 最終記事が2016年11月17日なのでまだ新しい。

初心者向けAngularJS
Angular JS関連は資料が多くてありがたいです。

▶特に参考になったQiitaの投稿
- 旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門
- Angular#serviceと#factoryの違い。どういう時どっちを利用するか。定義方法。使い方を理解するまとめ
- JSON Web Token の効用

英語も食わず嫌いしないで読んでみると、日本語より質の高いもの多い。 公式ちゃんと読めってよく分かった(汗) プログラミングの学習環境はかなり整っていて助かります。

第三回匠の駅シンポジウムに参加

先日「第三回匠の駅シンポジウム」に発表者として参加させていただきました。
かなりローカルな発表会でしたが、製作中の物についてお話させていただきました。 「作ろうとしているものはどんな物か」をしっかり伝えたのは始めてだったので、良いフィードバックがもらえたと思います。

発表資料はこちら。

www.youtube.com

前半のIoTの説明は飛ばしていただいて大丈夫です。
僕自身が欲しいので、作れる方いたら是非作って欲しいです。

アイコンやイラストの素材は
Free vector icons - SVG, PSD, PNG, EPS & Icon Font - Thousands of free icons
かわいいフリー素材集 いらすとや
から使わせていただきました。
(´-`).。oO(いらすとや だけでストーリーが組めるなんて便利...)

2016年11月30日追記
ちょうど考えていたのは広義のIoTと呼ばれる類に属するようで、ABBALabの考えるIoTとも少し似ている所があるようです。
実用化が近づく「日本のIoTスタートアップ」。世界に負けないモノづくりを秋葉原から - さくらのナレッジ

ARで3Dアトラクタ

3次元の図形を確認する時には「回転・移動・拡大」という操作をします。

マウスやキーボードで操作するには少し“慣れ”が必要なのですが、 3Dプリンタで印刷する以外にもARを使った方法があると思うので作ってみました。

今回はローレンツアトラクタを視覚化。

AR用に正六面体を製作。 f:id:htn_hs:20161126110527j:plain ハリボテなので、ルービックキューブにそれぞれのパターンを貼り付けています(笑)

プログラムにはNyARToolkit for processing.EN使いました。
公式でも同じような事がされているようです。
Multimarker Tracking [ARToolkit]

実行結果。 f:id:htn_hs:20161126110816p:plain 計算結果をリアルタイムに好きな角度で見ることができます。

300個のバラバラな初期値で開始させると、アトラクタに収束していく様子が確認できます。
www.youtube.com

1個だけで計算させ、軌跡を描かせるとローレンツアトラクタが確認できます。
www.youtube.com

カメラに1面分は映さないといけないので、 目と同じ視線の位置に設置すれば「アトラクタを持っている気分」になれるかもしれません。

リアルタイムに描画させるために、刻みの荒いオイラー法で計算させています。 より正確なアトラクタを確認するには、予め計算させておいた値を描画させると良いと思います。

今回は立体を意識して正六面体を使用したのですが、基準面の切り替わり時にどうしても飛んでしまいました。 外形が理解できればいい程度なら表と裏の2面だけの方が使いやすいかもしれません。

GitHub - hsgwa/ar_view

2016年12月2日追記
動画では全体的に青いですが、プログラムの150行目をfill(100, 100, 100);に変更すれば治ります。

2016年12月14日追記
探したらARToolkit公式も同じようなことをしていました。 Multimarker Tracking

MEANスタックの勉強

Webアプリ作りたいな、ということでMEANスタックを勉強中です。

MEANスタックとは
MongoDB / Express / AngularJS / NodeJS
の頭文字であり、フロントエンド〜サーバーサイドまでJavascriptで済ませてしまう構成のことです。現在使われているLAMPに置き換わるかもしれないという事で注目されているようです。

「MEANスタックで始めるWebアプリ開発入門」最新記事一覧 - ITmedia Keywords
MEANスタック内にも色々あるようで、調べることは多そう。
(日本語のドキュメントはまだ「環境構築」や「試してみた」ばかり)

MEANスタック MEAN.IOおよびMEAN.JSの使い方 | hrendoh's memo
MEANのそれぞれの役割はなんとなく分かってきたのですが、「どうつなげていくの?」というのが分からないので

Learn to Build Modern Web Apps with MEAN - Thinkster
こちらを参考にMEANを基礎から勉強していこうと思います。

最初にドットインストールで分かった気になりつつ、
公式サイトのチュートリアルQiitaの投稿から拾っていけば理解できそうです。

2016/11/27 追記
AngularJSの$scopeをController as で置き換えるべき理由 - Qiita
Digging into Angular’s “Controller as” syntax
$scopeを積極的に使っているthinksterの内容は少し古め?
2016年12月6日 追記
Shaping Up with AngularJS - Why use this instead of $scope? - AngularJS - Code School Forum

2016/12/04 追記
Learn to Build Modern Web Apps with MEANを終えて

Socket.IOでデバイス⇔サーバー⇔ブラウザ通信

Socket.IOで以下のような1対1のリアルタイム通信をしてみました。

f:id:htn_hs:20161119053741p:plain
(※今回はラズパイではなくMac上のターミナルでテストしています)

重要なコードだけ記載しておきます。

バイス側はSocket.IOでサーバ・クライアント間通信とほぼ同じ。 jsonデータを送信するように変更しています。

var settings = require('./settings'),
    io = require('socket.io-client');

var url = settings.host + ':' + settings.port;

var socket = io.connect('http://' + url);

socket.on('connect', function() {
    socket.on('emit_from_server', function(msg) {
        socket.json.emit('emit_from_device', {
            msg: msg + ' -> device ',
            name: 'device'
        });
    });
    socket.json.emit('emit_from_device', {
        msg: 'initialize',
        name: 'device'
    });
});
console.log('device connecting...');

サーバー側からデータを受信した時、 " -> device" を加えてサーバー側に送信しています。 socket.ioのidを設定するために最初だけメッセージを送信しています。

サーバー側は参考リンクに詳細が書かれています。

expressのサーバーのポート:3000
socketサーバーのポート:8888

まだ1対1でしかテストしていませんが、Socket.IOで送信先を指定してデータを送信しています。 (io.toでJSONがうまく送信できなかったのでもう少し調べる必要あり)

var http = require('http');

var server = http.createServer(function (req, res) {
    res.writeHead(200, {'Content-Type':'text/html'});
    res.end('server connected');
});
var io = require('socket.io').listen(server);

server.listen(8888);

var client_id;
var device_id;
io.sockets.on('connection', function (socket) {

    socket.on('emit_from_device', function(data) {
        device_id = socket.id;

        io.to(client_id).emit('emit_from_server', data.msg + '-> server ');
    });
    socket.on('emit_from_client', function(data) {
        client_id = socket.id;

        io.to(device_id).emit('emit_from_server', data.msg + '-> server ');
    });
});

クライアント側からデータを受信した時、 " -> server" を加えてデバイス側に送信しています。

実際にはjadeテンプレートで記述しましたが、生成後のHTMLは次の通りです。

<!DOCTYPE html>
<html>
<head>
<title>Express</title>
<link rel="stylesheet" href="/stylesheets/style.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<ul></ul>
<script type="text/javascript" src="http://localhost:8888/socket.io/socket.io.js"></script>
<script type="text/javascript">
var socket;
$(function(){
  socket = io.connect("http://localhost:8888");

  setInterval(function() {
    socket.json.emit('emit_from_client', {
      msg: 'client',
      name: 'client'
    });
  }, 1000);

  socket.on('emit_from_server', function (data) {
    var li = $('<li>').text(data + '-> client');
    $('ul').append(li);
  });
});
</script>
</body>
</html>

1秒間隔で"client"を送信、サーバー側からデータの受信時に" -> client"を加えてliタグで表示しています。

実行結果 f:id:htn_hs:20161119053837p:plain

クライアント側からデバイス側までデータを往復させることができました。

iot_lab/04_dev_cli_server at master · hsgwa/iot_lab · GitHub

参考

Express×socket.ioを使ってwebsocketで遊ぼう~第1話~ - Qiita

【Node.js】Socket.IO@1.0を読んでみた【WebSocket】 | FiS Project

Socket.IO — Rooms and Namespaces

Sending message to a specific ID in Socket.IO 1.0 - Stack Overflow

socket.io(node.js)のserver -> clienetの送信まとめ - thinking now...

HTMLのテンプレート的なの (Jade記法) - Qiita