Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
スマホで操作する
カメラ付きWi-Fiラジコンカー
― C#とラズパイとWebアプリの技術で作っちゃおう! ―
今晩の宿「ホテルニューおはる」¥3,600
#ohotech
ハッシュタグ#ohotechでツイートはじめ、
facebook やブログなどへの投稿OKです
最近は TypeScript をたくさん書いてます
皆さんの興味分野は何ですか?
SignalYN http://j.mp/1JG1DWJ
Goal
このセッションで伝えたいこと
私の年1回の学習発表会です
• 私がどんなことをどの程度成し遂げたかをわ
かってもらえたら目標達成です 
• さらに何かひとつでも
「あれやってみようかな」
「これ面白そう」
と共感を得られることがあれば、仲間が増えた
ような気がして嬉しいで...
昨年のOhotechで学んだ成果
投げ銭 as a Service http://j.mp/1GknH9h
で、今年の作品 =「スマホで操作す
るカメラ付きWi-Fiラジコンカー」
• C#とラズパイとWebアプリの技術で作っちゃ
います。
※今回は「特盛」なので、玄人向けということで、「ラズパイとはなんぞや?」
「C#とは?」といった説明はスライド...
Let’s try it!
試してみよう!
SSID ohotech13a
http://192.168.43.200/
Why do you made it?
制作の動機
OLYMPUS AIR A01 を見たのがきっかけ
ラズパイ使えば、同じようなの作れるんじゃね?
これを...
こうじゃ。
勉強会コミュニティ & 宿泊イベント
Code in 定山渓温泉
...の集合写真を撮るのに使おう!
と思ったら、クロージングどたばたして
忘れてしまった...orz
☁
☁
How does it work?
仕組みの解説
HTTP 通信
Raspberry Pi Model B+
Spec ARM 700MHz / 512MB RAM
OS Linux Distribution “Raspbian”
Runtime mono
HTTP Server XSP3
A...
GPIOのピンの電圧On/Offは簡単
• ラズパイの GPIO のピンは「ファイル」とし
て読み書きできる
• なので、HTTP 要求に応じて所定の「ファイ
ル」に書き込む Web アプリをラズパイ上で動
かせば、それはすなわち、GPIO の...
ファイルの読み書きなのでシェル
コマンドでもできる
$ echo 25 > /sys/class/gpio/export
$ echo out > /sys/class/gpio/gpio/25/direction
$ echo 1 > /sy...
模型組み立てのほうが、よっぽど大変
Web アプリは C# で書きました
• ラズパイでも C# 製の Web アプリが動きます
• 「sudo apt-get install mono-complete」っ
てやっておけば、実行環境の準備はOK!
• xsp3 っていうコマンド...
なぜ C#?
• 単に自分がC#に慣れてるから
• もし皆さんが似たようなことやるとしても、
Python、Ruby、Node.js、etc... 好きな言
語・処理系でできる程度には簡単なアプリです
Visual Studioで開発は超快適♪
• Windows 上でビルドした .exe や .dll を、そ
のままラズパイに送り込めば動きます
• C#、というか .NET 製な .exe や .dll は、IL
(中間言語) を収録してい...
カメラは USB 接続
• ラズパイはUSB接続機器が使えるのが楽ちん。
• NFC (Felica) の読み書きとか、GPS とか、色々使える
• カメラでの画像撮影は、Linux 系では鉄板な
fswebcamコマンドを実行することで実現
...
HTML側は jQueryでゴリゴリ
• AngularJS 等、MV* なライブラリは未使用
• 但し JavaScript を生で書かずに TypeScript
使用。
• TypeScript に慣れたので...
実はこの手のアプリは初めてではないです
まずは実証実験 http://j.mp/1KTAWiZ
LED点灯/消灯と、押ボタンのOn/Off状態をリアルタ
イムで表示する、Webアプリの実装。
次にクリスマスツリー http://j.mp/1MJikFe
こどもたち向け。スマホのブラウザから、点灯させる
LED の色が指定できる。
Build INSIDERに寄稿 http://j.mp/signalr-rbpi
ということで、
ドォーン!
どやっ!
ソースコードは GitHub にあります
https://github.com/codejp/code2015-cameracar
完!
Happy Coding :)
One more thing.
USB 接続
USB 接続 Wi-Fiドングル
カメラ
Wi-Fi
プロセッサ
GPIO
ラズパイ、GPIOを介して実世界
に作用するのは面白いのですが...
• 配線やパッケージングが厄介。
• 追加の部品も多く、結果として安く済まない。
ケ...
ここで、皆さんお持ちのスマホを見てみましょう。
カメラ
Wi-Fi
バッテリー、配線込み
プロセッサ
ケーシング済み
カメラ
Wi-Fi
バッテリー、配線込み
プロセッサ
ケーシング済み
GPIO がないだけ で、
ほかは完璧じゃないッスか!
スマホの画面を白黒明滅させるのを、
光学センサで読み取れば、
GPIO の OUT 相当が実現できるのでは!?
Let’s try it!
試してみよう!
SignalR 使う。
http://www.slideshare.net/jsakamoto/osc13-do
SSID ohotech13a
http://192.168.43.210/ http://192.168.43.210/controller.html
白・黒の窓の開閉が制御される側 窓の開閉切替を指示する側
LED
フォトダイ
オード
白/黒が開閉する
SignalRなWebア
プリをブラウザで
開いている
LEDが光った!
ブラウザの表示コンテ
ンツが白くなったら、
この明かりにフォトダ
イオードが反応して...
動画 https://youtu.be/bqUF-Atn8y4
カメラ
Wi-Fi
バッテリー、配線込み
プロセッサ
ケーシング済み
GPIO の Out は達成!
Learn, Practice, Share.
Happy Coding :)
Upcoming SlideShare
Loading in …5
×

Ohotech特盛#13 スマホで操作する カメラ付きWi-Fiラジコンカー ― C#とラズパイとWebアプリの技術で作っちゃおう! ―

7,319 views

Published on

2015年10月3日に開催された ohotech 特盛#13 にて紹介いたしました、「スマホで操作する カメラ付きWi-Fiラジコンカー ― C#とラズパイとWebアプリの技術で作っちゃおう! ―」のスライドを、一般公開用に再編集したものです。

Published in: Technology
  • Be the first to comment

Ohotech特盛#13 スマホで操作する カメラ付きWi-Fiラジコンカー ― C#とラズパイとWebアプリの技術で作っちゃおう! ―

  1. 1. スマホで操作する カメラ付きWi-Fiラジコンカー ― C#とラズパイとWebアプリの技術で作っちゃおう! ―
  2. 2. 今晩の宿「ホテルニューおはる」¥3,600
  3. 3. #ohotech ハッシュタグ#ohotechでツイートはじめ、 facebook やブログなどへの投稿OKです
  4. 4. 最近は TypeScript をたくさん書いてます
  5. 5. 皆さんの興味分野は何ですか? SignalYN http://j.mp/1JG1DWJ
  6. 6. Goal このセッションで伝えたいこと
  7. 7. 私の年1回の学習発表会です • 私がどんなことをどの程度成し遂げたかをわ かってもらえたら目標達成です  • さらに何かひとつでも 「あれやってみようかな」 「これ面白そう」 と共感を得られることがあれば、仲間が増えた ような気がして嬉しいですね!
  8. 8. 昨年のOhotechで学んだ成果 投げ銭 as a Service http://j.mp/1GknH9h
  9. 9. で、今年の作品 =「スマホで操作す るカメラ付きWi-Fiラジコンカー」 • C#とラズパイとWebアプリの技術で作っちゃ います。 ※今回は「特盛」なので、玄人向けということで、「ラズパイとはなんぞや?」 「C#とは?」といった説明はスライドからは割愛させていただきます。
  10. 10. Let’s try it! 試してみよう!
  11. 11. SSID ohotech13a http://192.168.43.200/
  12. 12. Why do you made it? 制作の動機
  13. 13. OLYMPUS AIR A01 を見たのがきっかけ
  14. 14. ラズパイ使えば、同じようなの作れるんじゃね?
  15. 15. これを...
  16. 16. こうじゃ。
  17. 17. 勉強会コミュニティ & 宿泊イベント Code in 定山渓温泉
  18. 18. ...の集合写真を撮るのに使おう!
  19. 19. と思ったら、クロージングどたばたして 忘れてしまった...orz ☁ ☁
  20. 20. How does it work? 仕組みの解説
  21. 21. HTTP 通信 Raspberry Pi Model B+ Spec ARM 700MHz / 512MB RAM OS Linux Distribution “Raspbian” Runtime mono HTTP Server XSP3 Application ASP.NET MVC3 / C# Wi-Fiで直接通信 • スマホの Web ブラウザで操作 • Webカメラで撮影した画像を1fpsで表示 USB 接続 Webカメラ モータードライバ x 3 モーター x 3基 GPIO USB 接続 Wi-Fiドングル 構成
  22. 22. GPIOのピンの電圧On/Offは簡単 • ラズパイの GPIO のピンは「ファイル」とし て読み書きできる • なので、HTTP 要求に応じて所定の「ファイ ル」に書き込む Web アプリをラズパイ上で動 かせば、それはすなわち、GPIO のピンの電圧 を On/Off する Web アプリになる
  23. 23. ファイルの読み書きなのでシェル コマンドでもできる $ echo 25 > /sys/class/gpio/export $ echo out > /sys/class/gpio/gpio/25/direction $ echo 1 > /sys/class/gpio/gpio/25/value
  24. 24. 模型組み立てのほうが、よっぽど大変
  25. 25. Web アプリは C# で書きました • ラズパイでも C# 製の Web アプリが動きます • 「sudo apt-get install mono-complete」っ てやっておけば、実行環境の準備はOK! • xsp3 っていうコマンドで ASP.NET な Web サーバーを起動できたり ※厳密には mono を構成する全ては要らないんだろうけど、面倒なので mono-complete!
  26. 26. なぜ C#? • 単に自分がC#に慣れてるから • もし皆さんが似たようなことやるとしても、 Python、Ruby、Node.js、etc... 好きな言 語・処理系でできる程度には簡単なアプリです
  27. 27. Visual Studioで開発は超快適♪ • Windows 上でビルドした .exe や .dll を、そ のままラズパイに送り込めば動きます • C#、というか .NET 製な .exe や .dll は、IL (中間言語) を収録しているので、同じバイナ リファイルが Windows 上でもラズパイ上で も動く ※ただしカメラへのアクセス方法とか、GPIOのデバイスファイルのパス とかはWinとラズパイとでは違うので、#if~#endif のプリプロセッ サでコンパイル仕分けたり、若干の互換レイヤーを書いたり、は必要。
  28. 28. カメラは USB 接続 • ラズパイはUSB接続機器が使えるのが楽ちん。 • NFC (Felica) の読み書きとか、GPS とか、色々使える • カメラでの画像撮影は、Linux 系では鉄板な fswebcamコマンドを実行することで実現 ※画像はストリーミングじゃなくて、オレオレ実装なポーリン グで毎秒1フレームで更新してます。ここだけ複数スレッドが 交錯するため、同期処理がちょっと凝った作りにしてます。
  29. 29. HTML側は jQueryでゴリゴリ • AngularJS 等、MV* なライブラリは未使用 • 但し JavaScript を生で書かずに TypeScript 使用。 • TypeScript に慣れたので...
  30. 30. 実はこの手のアプリは初めてではないです
  31. 31. まずは実証実験 http://j.mp/1KTAWiZ LED点灯/消灯と、押ボタンのOn/Off状態をリアルタ イムで表示する、Webアプリの実装。
  32. 32. 次にクリスマスツリー http://j.mp/1MJikFe こどもたち向け。スマホのブラウザから、点灯させる LED の色が指定できる。
  33. 33. Build INSIDERに寄稿 http://j.mp/signalr-rbpi
  34. 34. ということで、
  35. 35. ドォーン! どやっ!
  36. 36. ソースコードは GitHub にあります https://github.com/codejp/code2015-cameracar
  37. 37. 完! Happy Coding :)
  38. 38. One more thing.
  39. 39. USB 接続 USB 接続 Wi-Fiドングル カメラ Wi-Fi プロセッサ GPIO ラズパイ、GPIOを介して実世界 に作用するのは面白いのですが... • 配線やパッケージングが厄介。 • 追加の部品も多く、結果として安く済まない。 ケース 電源用MicroUSBケーブル バッテリー
  40. 40. ここで、皆さんお持ちのスマホを見てみましょう。
  41. 41. カメラ Wi-Fi バッテリー、配線込み プロセッサ ケーシング済み
  42. 42. カメラ Wi-Fi バッテリー、配線込み プロセッサ ケーシング済み GPIO がないだけ で、 ほかは完璧じゃないッスか!
  43. 43. スマホの画面を白黒明滅させるのを、 光学センサで読み取れば、 GPIO の OUT 相当が実現できるのでは!?
  44. 44. Let’s try it! 試してみよう!
  45. 45. SignalR 使う。 http://www.slideshare.net/jsakamoto/osc13-do
  46. 46. SSID ohotech13a http://192.168.43.210/ http://192.168.43.210/controller.html 白・黒の窓の開閉が制御される側 窓の開閉切替を指示する側
  47. 47. LED フォトダイ オード 白/黒が開閉する SignalRなWebア プリをブラウザで 開いている
  48. 48. LEDが光った! ブラウザの表示コンテ ンツが白くなったら、 この明かりにフォトダ イオードが反応して... 動画 https://youtu.be/bqUF-Atn8y4
  49. 49. カメラ Wi-Fi バッテリー、配線込み プロセッサ ケーシング済み GPIO の Out は達成!
  50. 50. Learn, Practice, Share. Happy Coding :)

×