I2C接続小型キャラクタLCDモジュール(1)

秋月に550円でi2C接続のLCDがあったのでラズパイのnodeで動かすまでのメモ。

f:id:htn_hs:20170114124950j:plain AQM1602XA-RN-GBW
ST7032で制御されており、I2Cで制御できるようになっています。

LCD側の電流の引き込み能力が低いため、ラズパイとLCDモジュールの間にI2Cバスリピーターが必要になるようです。
Umbrella RaspberryPi I2C接続のキャラクタLCDを使う (AQM1602)

今回はバスリピーターには秋月に売ってるPCA9515ADを使いました。 秋月さまが用意してくれている「Raspberry Pi B3/B2/A+ と I2C 液晶モジュールの接続方法」通りに接続。

npmにはLCD用のモジュールもあるのですが、I2Cで制御するようなモジュールは良いものがまだありませんでした。
唯一、ちょうどaqm0802a-i2c-lcdがあったのですが、「This npm module is not yet ready for use.」とのこと。

nodeのモジュールは無くても、First stepsなどのドキュメントはあったのでその通りに進めます。

I2Cを有効にする

sudo raspi-config

i2c-toolsのインストール

sudo apt-get update
sudo apt-get install i2c-tools

I2Cバスデバイスの番号( i2c-1)を確認

sudo i2cdetect -l

バスに接続されているデバイス(0x3e)を確認

sudo i2cdetect -y 1

LCDの初期設定

sudo i2cset -y 1 0x3e 0x00 0x38 0x39 0x14 0x70 0x56 0x6c i  
sudo i2cset -y 1 0x3e 0x00 0x38 0x0d 0x01 i

文字の出力

sudo i2cset -y 1 0x3e 0x40 0x48 0x65 0x6c 0x6c 0x6f i

f:id:htn_hs:20170114132346j:plain
[Hello]の文字を確認できました。

次はnode用のプログラムを作っていこうと思います。

マイコン内蔵RGB PL9823

秋月より

マイコンで1個ずつ制御することができるマイコン(シフトレジスタ)内蔵の画期的なフルカラーRGBのLEDです。

接続が簡単だったので秋月にて購入。 とりあえず光らせられたのでメモ。

買ってから気づいたのですが、少し変わった“味のある仕様書“な上に結構高速なPWMを必要とし、Arduinoだと駆動させるだけでCPUが精一杯になっちゃうぐらい難ありなLEDらしいです。

Raspberry PiでフルカラーLED:腰も砕けよ 膝も折れよ:So-net blog

PL9823の制御 - ロボボボいじりにうってつけのwiki

ただ、中身に使われているWS281xで調べてみればライブラリもドキュメントも多く、npmにもrpi-ws281x-nativeというライブラリがありました。今回は説明通りにサンプルを動かします。

他のライブラリの説明を読むと、5V推奨だけど3.3Vでも一応動かせられるみたい。 GitHub - jgarff/rpi_ws281x: Userspace Raspberry Pi PWM library for WS281X LEDs

とりあえず今回はレベル変換省いた次の回路でテスト。

f:id:htn_hs:20170112005420j:plain

Wiring | NeoPixels on Raspberry Pi | Adafruit Learning System

サンプル動かすだけなのでコマンドだけ。

npm install rpi-ws281x-native
sudo node node_modules/rpi-ws281x-native/examples/rainbow.js

www.youtube.com

たまに光り方が怪しい時があるような気がしますが、ちゃんと動作します。

推奨は5Vなので、普通に使う時はレベル変換が必要な点に注意。

Promiseを使うためにNodeの手動インストール

Node.jsのコードをラズパイ上で走らせたらPromise is not definedと出て、バージョン確認したらv0.10.29だったため更新することに。
Node.js ES2015/ES6 support

sudo apt-get install nodejsでインストールすると古かったり、コマンドがnodejsになったりと面倒が多い。
ラズパイでは別の方法でインストールが必要みたい。

参考になった主なリンク

最後のリンク通りに進める。

$ sudo curl -sL https://deb.nodesource.com/setup_4.x | sudo bash -

## You appear to be running on ARMv6 hardware. Unfortunately this is not currently supported by the NodeSource Linux distributions. Please use the 'linux-armv6l' binary tarballs available directly from nodejs.org for Node.js v4 and later.

仕方ないので手動でインストール。
Node.js v4以降のlinux-armv6lを使ってくれ、と言うことなのでMacと同じv7.4.0をインストールすることに。

wget  https://nodejs.org/dist/v7.4.0/node-v7.4.0-linux-armv6l.tar.xz
tar -xvf node-v7.4.0-linux-armv6l.tar.xz
cd node-v7.4.0-linux-armv6l
sudo cp -R * /usr/local/
sudo reboot

Node v7.4.0 (Current) | Node.js

今回は手動インストールしましたが、nvmを使ったほうが無難。

Raspberry PiでIoTなシステム開発:nodeのインストールが楽になった | 法務ネット:弁護士 川内康雄

Error: Module did not self-register.と言われましたが、node_modules内を一度削除し、再度npm installすることで解消されました。

An angular.js wrapper for Chart.js

Epochも良かったのですがAngularJSと相性の良さそうなライブラリがあったので試し。

The 38 best tools for data visualization
試してみるのはリンク先でperfect data visualization tool for hobbies and small projects と評されている Chart.js。

大体サンプル通りにやってみます。

mkdir chartjs
cd chartjs
express --view=ejs
npm install
npm install --save
npm install --save angular-chart.js

app.jsに追記

app.use(express.static(path.join(__dirname, 'node_modules')));

views/index.ejsのbodyを書き換え

  <body ng-app="app">
    <div ng-controller="BarCtrl">
      <canvas id="bar" class="chart chart-bar" chart-data="data" chart-labels="labels" chart-series="series">
      </canvas>
    </div>

    <script src="/angular/angular.min.js"></script>
    <script src="/chart.js/dist/Chart.min.js"></script>
    <script src="/angular-chart.js/dist/angular-chart.min.js"></script>
    <script>
      angular.module("app", ["chart.js"]).controller("BarCtrl", function ($scope) {
        $scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
        $scope.series = ['Series'];
        $scope.data = [
          [65, 59, 80, 81, 56, 38, 11]
        ];

        setInterval(function(){
          $scope.data = $scope.data.map(function (data) {
            return data.map(function (y) {
              y = y + Math.random() * 10 - 5;
              return parseInt(y < 0 ? 0 : y > 100 ? 100 : y);
            });
          });
          $scope.$apply();
        }, 1000);
      });
    </script>
  </body>

npm startし、http://localhost:3000/で確認。

f:id:htn_hs:20170104165225p:plain

Chart.jsクオリティのきれいなグラフが描けました。

$scope.$apply();することで自動的にデータが更新された時も値が反映され、リアルタイムにデータ更新することが出来ます。

グラフの種類が少なくても問題なければとても良さそう。

2017年1月10日 追記
directive内で表示させようとしても表示できない?

参考

AngularJS: Parent scope is not updated in directive (with isolated scope) two way binding - Stack Overflow

angular-chart.js - beautiful, reactive, responsive charts for Angular.JS using Chart.js

iot_lab/06_chartjs at master · hsgwa/iot_lab · GitHub

リアルタイム用グラフライブラリ Epoch

A general purpose real-time charting library for building beautiful, smooth, and high performance visualizations.

公式いわく、美しく、滑らかで高いパフォーマンスの可視化のための汎用リアルタイムグラフライブラリ「Epoch」

ブラウザの更新をしなくてもSocket.IOと合わせてリアルタイムにグラフを更新したい、ということで使ってみます。
普通に公式のGetting started通りに進めます。

まずはExpressと必要なモジュールインストール。

mkdir epoch
cd epoch
express --view=ejs
npm install
npm install epoch-charting --save
npm install jquery --save

app.jsに追加

app.use(express.static(path.join(__dirname, 'node_modules')));

views/index.ejsのheadderタグに追加

  <link rel="stylesheet" type="text/css" href="epoch-charting/dist/css/epoch.min.css">
  <script src="jquery/dist/jquery.min.js"></script>
  <script src="d3/d3.min.js"></script>
  <script src="epoch-charting/dist/js/epoch.min.js"></script>

最後にviews/index.ejsのbodyタグでグラフ作成。

  <div id="area" class="epoch category10" style="height: 200px; width: 400px;"></div>
  <script>
  var data = [
  { label: 'Layer 1', values: [ {x: 0, y: 0}, {x: 1, y: 1}, {x: 2, y: 2} ] },
  { label: 'Layer 2', values: [ {x: 0, y: 0}, {x: 1, y: 1}, {x: 2, y: 4} ] }
  ];
  var areaChartInstance = $('#area').epoch({
  type: 'area',
  data: data,
  axes: ['left', 'right', 'bottom']
});
</script>

npm startで実行し、localhost:3000で確認。

f:id:htn_hs:20170104135053p:plain

あとは公式のサンプル通りにいじればデータの可視化ができそうです。

グラフの種類が多くないので、リアルタイムにこだわらない・もっとリッチなグラフを使いたい場合他のライブラリを使った方がいいかもしれません。

参考

Epoch

iot_lab/05_epoch at master · hsgwa/iot_lab · GitHub

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ライブラリ(研究室用)

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

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

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

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

結局、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