気の向くままに辿るIT/ICT/IoT
webzoit.net
IoT・電子工作

JavaScriptでブラウザからArduinoのLEDをON/OFF

ウェブ造ホーム前へ次へ
サイト内検索
カスタム検索
Arduinoって?

JavaScriptでブラウザからArduinoのLEDをON/OFF

JavaScriptでブラウザからArduinoのLEDをON/OFF

JavaScript/WebソケットでArduinoのLEDをON/OFFするブラウザ上の壁面スイッチ
2018/03/16

 JavaScriptでブラウザからArduinoのLEDをON/OFFしてみるページ。

 今回は、Arduino Project Hubの中からGerardo Ramírez氏がアップしているJohnny Five and Socket.IO LED web switchをそのまま使用させて頂いた。

 ブラウザ上に表示したリアルな壁面スイッチ画像をクリックするとArduinoボード上(側)のLEDのオン/オフを切り替えることができる。

 配布できる形で完成したプロジェクトなので当然と言えば当然だが、これについては、スクリプトを書くどころか、コピペすらする必要はない。

 途中、(実際たいしたことはないが、)ディスク容量食いすぎ...と思ったにも関わらず、できてみると、プロジェクトの中身自体はすごいことになっているようだが、見た目上は、たった、これだけのことでリアリティが増し、感心のあまり、記事にしようとまで思うとは...我ながら驚くと同時にビジュアル(視覚情報・見た目・見栄え)は重要だと改めて気付かされた...。

ArduinoボードにStandardFirmataをアップロード

 もちろん、後でもよいが、今回は、まず、ArduinoボードにArduino IDEのサンプルスケッチStandardFirmataをアップロードしておくものとする。

 サンプルスケッチStandardFirmataは、Arduino IDEの[ファイル/File] => [スケッチ例/Examples] => [Firmata]にある。

Node.jsのインストール

 公式サイト上にある各OSにおけるパッケージマネージャを利用した Node.js のインストールを参考にNode.jsをインストールする。

 各OSのリポジトリなどにある可能性もあるが、複数のパッケージが必要だったり、パッケージが古かったり、情報が古くて正解が見えづらかったりと何かと手間がかかることがあるため、リンク先を参照するのが最も手軽で簡単、確実、賢明と思われる。

 ちなみに自身は、Debian(Linux)を使っている。

Johnny-Fiveのインストール

$ npm install johnny-five

 Node.jsをインストールするとnodeコマンドやnpmコマンドもインストールされ、どこからでもユーザー権限で実行できるようになっているはずなので端末(ターミナル)からnpmコマンドを使ってJohnny-Fiveをインストールする。

スケッチのダウンロードと展開

$ cd path/to/johnny-five-led-sockets-master
$

 geradrum/johnny-five-led-socketsをダウンロード、任意のディレクトリに展開、そのパスに移動。

スクリプトのビルド・実行と終了

$ npm run dev
$ npm run build
$ npm run arduino:dev
1519700796010 Available /dev/ttyUSB0
1519700799850 Connected /dev/ttyUSB0
...
[1] 1521254397437 Repl Initialized
[1] >> New connection: /arduino#omBfDfSafDgdqwSkAAAB
>>

 [npm run dev]、[npm run build]は初回のみ、続いてローカルサーバを起動する[npm run arduino:dev]とした場合には、ブラウザを開き、localhost:4000にアクセス。

 ローカルではなく、プロダクションサーバ?(外のサーバ?)にアクセスする場合は、[npm run arduino:dev]ではなく、[npm run arduino]とする模様。

...
[0] Broadcasting: led:off
[0] Broadcasting: led:on
[0] Broadcasting: led:off
...

 ブラウザに表示されたリアルな壁面スイッチをクリックすると状態に応じてブラウザの明るさが明るくなったり、暗くなったりすると同時にArduino側のLEDが点灯・消灯する。

 気の利いたことにブラウザ上の壁面スイッチは消灯時、緑のLEDランプが点灯した画像となる。

[0] Broadcasting: led:off
[0] Broadcasting: led:on
[0] Broadcasting: led:off
...
[Ctrl]+[C]
1519700809406 Board Closing.
...
$

 端末側を終了するには、キーボードで[Ctrl]+[C](ブラウザを閉じても端末の方は終了しない)。

 ちなみにプロンプト[>>]が出ている時は、[.exit]とタイプするか、キーボードで[Ctrl]+[C]。

EasyWordMall Arduino UNO R3互換ボード(USBケーブル付属)

EasyWordMall Arduino Pro Mini互換ボード Atmega328 5V 16MHz

Rasbeeオリジナル FT232RL互換 3.3V/5V FTDI/USB/TTL変換アダプタ

KKHMF Arduino Nano Ver 3.0互換ボード ATmega328P CH340G 5V 16MHz

備考

 Lチカはしてみたものの、あまり使う機会はないかなと思っていたが、JavaScriptもいいかも...。

 ただ、プロジェクトサイズもそこそこあって中身を見ると、さて、早速、1から何か作ってみるか!という気にはなれそうもないが...。

ウェブ造ホーム前へ次へ