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

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

　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のインストール

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

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

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

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

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

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

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

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

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

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

備考

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

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

関連リンク