Successfully reported this slideshow.

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

3

Share

Loading in …3
×
1 of 50
1 of 50

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

3

Share

Download to read offline

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

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

More Related Content

More from Jun-ichi Sakamoto

Related Books

Free with a 14 day trial from Scribd

See all

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 :)

×