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.

[Tokyo NodeFest 2015] Hardware Hacking for Javascript Developers

13,600 views

Published on

電球をスマホから作動できたり、体重や心拍数をブラウザからモニタリングできたり、いろいろなモノがモバイルやインターネット上に接続されるようになり、今やモノのインターネット (Internet of Things) の時代と言われています。Web Developer は既にソフトウェアでアプリケーションのプロトタイプをするスキルを持ち合わせているのだから、この際ハードウェアも含めて Internet of Everything のプロトタイプをしてみませんか?

このスライドは、2015年11月7日に東京、渋谷で行われた NodeFest からのもので、Node.js / Johnny-Five を使って Arduino や Raspberry Pi と、Front-end JavaScript そして PubNub を使ってモノのインターネットのプロトタイプをしてみよう、という内容です。

- Arduino
- Raspberry Pi
- Johnny-Five JS robotics framework
- PubNub
- Prototyping Phillips Hue Clone
- KittyCam (Raspberry Pi camera w/ cat facial recognition)

Published in: Technology
  • DOWNLOAD THAT BOOKS/FILE INTO AVAILABLE FORMAT - (Unlimited) ......................................................................................................................... ......................................................................................................................... Download FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes Christian, Classics, Comics, Contemporary, Cookbooks, Art, Biography, Business, Chick Lit, Children's, Manga, Memoir, Music, Science, Science Fiction, Self Help, History, Horror, Humor And Comedy, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • If you want to download or read this book, copy link or url below in the New tab ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THAT BOOKS/FILE INTO AVAILABLE FORMAT - (Unlimited) ......................................................................................................................... ......................................................................................................................... Download FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes Christian, Classics, Comics, Contemporary, Cookbooks, Art, Biography, Business, Chick Lit, Children's, Manga, Memoir, Music, Science, Science Fiction, Self Help, History, Horror, Humor And Comedy, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes.........ACCESS WEBSITE Over for All Ebooks ..... (Unlimited) ......................................................................................................................... Download FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes ,Download or read Ebooks here ... ......................................................................................................................... Download FULL PDF EBOOK here { http://bit.ly/2m6jJ5M }
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

[Tokyo NodeFest 2015] Hardware Hacking for Javascript Developers

  1. 1. @girlie_mac Hardware Hacking for JavaScript Devs Tomomi Imura (@girlie_mac) Hardware Hacking for JavaScript Devs https://flic.kr/p/8tuc1u by randomliteraturecouncil CC-BY 2.0 2015 東京 Node 学園祭
  2. 2. @girlie_mac I am a: ● Front-End Engineer ● N00b Hardware Hacker ● Sr. Developer Evangelist at PubNub ● San Francisco Dweller
  3. 3. @girlie_mac Internet of Things の時代 Source: Cisco IBSG https://www.cisco.com/web/about/ac79/docs/innov/IoT_IBSG_0411FINAL.pdf 500億!
  4. 4. @girlie_mac Withings: Smart Body Analyzer GE Link Cinder Sensing Cooker Nest: Learning Thermostat Whistle: Connected pet collar Amazon Dash Button
  5. 5. @girlie_mac 猫も杓子も インターネット キタ━━━(゚∀゚)━━━!!!
  6. 6. @girlie_mac ニュータイプ なのか…? Srsly, where should I start?
  7. 7. @girlie_mac Arduino (Genuino) ● MCU のキット ● オープンソースなハードウェア とソフトウェア (IDE) ● ディベロッパ・フレンドリー
  8. 8. @girlie_mac LittleBits
  9. 9. @girlie_mac LittleBits & Arduino at Heart 9V BATTERY USB PLUG TO COMPUTER MODULES
  10. 10. @girlie_mac Arduino-Compatible MCUs BeagleBone C.H.I.P mCookie Petduino LinkIt One
  11. 11. @girlie_mac Tessel USB PLUGS TO COMPUTER ETHERNET MODULES GPIO DIGITAL PINS EXTRA USB PORTS
  12. 12. @girlie_mac Programming Tessel in Node.js var tessel = require('tessel'); var camera = require('camera-vc0706').use(tessel.port['A']); camera.on('ready', function() { camera.takePicture(function(err, image) { if (err) { console.log(err); } else { var name = 'pic-' + Date.now() + '.jpg'; process.sendfile(name, image); camera.disable(); } }); }); カメラモジュールの 差し込まれたポート ready イベント コールバック
  13. 13. @girlie_mac Raspberry Pi USB TO POWER SOURCE TO MONITOR TO MOUSE TO KEYBOARD WI-FI ADAPTER SD CARD GPIO DIGITAL PINS 4 EXTRA USB PORTS ETHERNET
  14. 14. @girlie_mac Raspbian OS
  15. 15. @girlie_mac Programming Raspberry Pi プリインストールされた言語 C / C++
  16. 16. @girlie_mac LED: Hello World of Hardware
  17. 17. @girlie_mac Circuit 電気回路 3.3V (Raspberry Pi) LED
  18. 18. @girlie_mac オームの法則 R = V - Vs f I 電源電圧 (V) LED にかかる電圧 (V) LED に流れる電流 (A) 抵抗 (Ω)
  19. 19. @girlie_mac オームの法則と抵抗 R = 3.3 - 1.9 0.02 電源電圧 (V) LED にかかる電圧 (V) LED に流れる電流 (A) 抵抗 (Ω) = 70Ω
  20. 20. @girlie_mac ラズベリーパイでの回路 3.3V (Pin 1) GND アノード (足の長い方) カソード
  21. 21. @girlie_mac LED をプログラムで操作 GPIO-4 (Pin 7)
  22. 22. @girlie_mac Programming MCU with Node.js
  23. 23. @girlie_mac Programming Pi with Node.js node-arm を使って Node.js をインストール $ wget http://node-arm.herokuapp.com/node_latest_armhf.deb $ sudo dpkg -i node_latest_armhf.deb もしくは特定バージョンの Node
  24. 24. @girlie_mac Johnny-Five ● JS で書けるロボティクス・フレーム ワーク ● Arduino 互換機で作動 ● 他機種はIOプラグインで ● http://johnny-five.io/ Woot!
  25. 25. @girlie_mac Johnny-Five & Raspi-io $ npm install johnny-five $ npm install raspi-io
  26. 26. @girlie_mac Blinking LED var five = require('johnny-five'); var raspi = require('raspi-io'); var board = new five.Board({io: new raspi()}); board.on('ready', function() { var led = new five.Led(7); // インスタンスの作成 led.blink(500); // 500ms 間隔の on-off フェイズで "blink" (チカチカ) させる }); Pin 7 (GPIO-4) ラズパイ用プラグイン。 Arduino を使う場合は必要 なし
  27. 27. @girlie_mac スマートなんちゃらを プロトタイプしてみよう
  28. 28. @girlie_mac デバイス間データのストリーミング PubNub を使って Publish/Subscribe
  29. 29. @girlie_mac ブラウザからデータを送信 var pubnub = PUBNUB.init({ subscribe_key: 'sub-c-...', publish_key: 'pub-c-...' }); function lightOn() { pubnub.publish({ channel: 'remote-led', message: {light: true}, callback: function(m) {console.log(m);}, error: function(err) {console.log(err);} }); } document.querySelector('button') .addEventListener('click', lightOn); クリックイベントの 発生 <script src="http://cdn.pubnub. com/pubnub-3.7.15.min.js"></script>
  30. 30. @girlie_mac MCU でデータを受信 var pubnub = require('pubnub').init({ subscribe_key: 'sub-c-...', publish_key: 'pub-c-...' }); pubnub.subscribe({ channel: 'remote-led', callback: function(m) { if(m.light) { // Johnny-Five でLチカ! } } }); led.pulse();
  31. 31. @girlie_mac RGB LED で Hue もどきを作る カソードコモン4本足 LED R G B GNDアナログ PWM pins
  32. 32. @girlie_mac
  33. 33. @girlie_mac RGB LED で Hue もどきを作る {'red':215, 'green':50, 'blue':255} publish data subscribe data Software UI Physical Output
  34. 34. @girlie_mac ブラウザからデータを送信 redInput.addEventListener('change', function(e){ publishUpdate({color: 'red', brightness: +this.value}); }, false); function publishUpdate(data) { pubnub.publish({ channel: 'hue', message: data }); } その値を PubNub に送信し て、MCU 側に伝える UI で赤色の値が変 更
  35. 35. @girlie_mac MCU でデータを受信 var led = new five.Led.RGB([7, 5, 3]); pubnub.subscribe({ channel: 'hue', callback: function(m) { if(led) { r = (m.color === 'red') ? m.brightness : r; g = (m.color === 'green') ? m.brightness : g; b = (m.color === 'blue') ? m.brightness : b; led.color({red: r, blue: b, green: g}); } } }); GPIO ピンに接続 された LED ア ノードに各色の 値を伝達 http://johnny-five.io/examples/led-rgb/ pin#s for R, G, B
  36. 36. @girlie_mac KittyCam
  37. 37. @girlie_mac
  38. 38. @girlie_mac KittyCam in Node.js 1. 動きを察知 (Johnny-Five IR.Motion obj) 2. 写真を撮影 (Raspistill, command line tool) 3. ネコ顔認識 (KittyDar) 4. クラウド (Cloudinary) に写真を保存 5. データを PubNub でパプリッシュ 6. web でストリーム (PubNub でデータをサブスク ライブ)
  39. 39. @girlie_mac PIR Sensor(焦電型赤外線センサ)
  40. 40. @girlie_mac PIR Sensor > Run Camera board.on('ready', function() { // `motion` ハードウェア・インスタンスを生成 var motion = new five.Motion(7); //pin 7 (GPIO 4) にワイヤーが接続 // セッションが始まると 'calibrated' が発火 motion.on('calibrated', function() {console.log('calibrated');}); motion.on('motionstart', function() { // 動きが感知されたぞ! // raspistill コマンドでカメラを動かす var filename = 'photo/image_'+i+'.jpg'; var args = ['-w', '320', '-h', '240', '-o', filename, '-t', '1']; var spawn = child_process.spawn('raspistill', args); ... motion detected! Take a photo!
  41. 41. @girlie_mac Processing Photo ... spawn.on('exit', function(code) { if((/jpg$/).test(filename)) { var imgPath = __dirname + '/' + filename; // Child process: 画像ファイルを読み取り、別プロセスで KittyDar を使ってネコの顔を認識 var args = [imgPath]; var fork = child_process.fork(__dirname+'/detectCatsFromPhoto.js'); fork.send(args); // the child process is completed fork.on('message', function(base64) { if(base64) { // クラウドストレージへ送る } }); ... var kittydar = require ('kittydar'); a cat detected!
  42. 42. @girlie_mac github.com/girliemac/RPi-KittyCam
  43. 43. @girlie_mac https://twit.tv/shows/new-screen-savers/episodes/19
  44. 44. @girlie_mac I hacked hardware so you can too! International NodeBots Day!
  45. 45. @girlie_mac Thank you! @girlie_mac github.com/girliemac speakerdeck.com/girlie_mac pubnub.com github.com/pubnub

×