Download to read offline
![@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
イベント
コールバック](https://image.slidesharecdn.com/nodefesthardwarehackingforjavascriptdevelopers-151107050537-lva1-app6891/85/Tokyo-NodeFest-2015-Hardware-Hacking-for-Javascript-Developers-12-320.jpg)
![@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](https://image.slidesharecdn.com/nodefesthardwarehackingforjavascriptdevelopers-151107050537-lva1-app6891/85/Tokyo-NodeFest-2015-Hardware-Hacking-for-Javascript-Developers-35-320.jpg)
![@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!](https://image.slidesharecdn.com/nodefesthardwarehackingforjavascriptdevelopers-151107050537-lva1-app6891/85/Tokyo-NodeFest-2015-Hardware-Hacking-for-Javascript-Developers-40-320.jpg)
![@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!](https://image.slidesharecdn.com/nodefesthardwarehackingforjavascriptdevelopers-151107050537-lva1-app6891/85/Tokyo-NodeFest-2015-Hardware-Hacking-for-Javascript-Developers-41-320.jpg)
Uploaded byTomomi Imura
[Tokyo NodeFest 2015] Hardware Hacking for Javascript Developers
電球をスマホから作動できたり、体重や心拍数をブラウザからモニタリングできたり、いろいろなモノがモバイルやインターネット上に接続されるようになり、今やモノのインターネット (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)
More Related Content
Similar to [Tokyo NodeFest 2015] Hardware Hacking for Javascript Developers
![[POST.Dev Japan] VS Code で試みる開発体験の向上](https://cdn.slidesharecdn.com/ss_thumbnails/post-dev-preso-ja-221001031122-f93d151f-thumbnail.jpg?width=640&height=640&fit=bounds)
![[Japan M365 Dev UG] Teams Toolkit v4 を使ってみよう！](https://cdn.slidesharecdn.com/ss_thumbnails/teams-toolkit-ga-jajp-220805195240-2ac76ea5-thumbnail.jpg?width=640&height=640&fit=bounds)
![[#DevRelAsia Keynote 2020] Developer Centric Design for Better Experience](https://cdn.slidesharecdn.com/ss_thumbnails/developer-centricdesignforbetterexperiences1-201114033033-thumbnail.jpg?width=640&height=640&fit=bounds)
![[2019 Serverless Summit] Building Serverless Slack Chatbot on IBM Cloud Func...](https://cdn.slidesharecdn.com/ss_thumbnails/2019ibmserverlesschatbot-190726190247-thumbnail.jpg?width=640&height=640&fit=bounds)
![[2019 south bay meetup] Building more contextual message with Block Kit](https://cdn.slidesharecdn.com/ss_thumbnails/2019southbaymeetupblockkitpracticalguide-190712041223-thumbnail.jpg?width=640&height=640&fit=bounds)
![[TechWorldSummit Stockholm 2019] Building Bots for Human with Conversational ...](https://cdn.slidesharecdn.com/ss_thumbnails/building2019stockholmbotsforhumanwithconversationalinterface-190604131903-thumbnail.jpg?width=640&height=640&fit=bounds)
![[日本語] Slack Bot Workshop + Intro Block Kit](https://cdn.slidesharecdn.com/ss_thumbnails/print2019jp-ibmwatsonslackbothands-onblockkit-190311140905-thumbnail.jpg?width=640&height=640&fit=bounds)
![[DevRelCon Tokyo 2019] Developer Experience Matters](https://cdn.slidesharecdn.com/ss_thumbnails/2019ver-developerexperiencematters-190309083301-thumbnail.jpg?width=640&height=640&fit=bounds)
![[DevRel Summit 2018] Because we all learn things differently](https://cdn.slidesharecdn.com/ss_thumbnails/copyofdevrelsummit2018becausewealllearnthingsdifferently-181117003934-thumbnail.jpg?width=640&height=640&fit=bounds)
![[DevRelCon July 2018] Because we all learn things differently](https://cdn.slidesharecdn.com/ss_thumbnails/becausewealllearnthingsdifferently-180715033614-thumbnail.jpg?width=640&height=640&fit=bounds)
![[Japanese] Developing a bot for your workspace 翻訳ボットを作る!](https://cdn.slidesharecdn.com/ss_thumbnails/developingabotforyourworkspace1-171116000401-thumbnail.jpg?width=640&height=640&fit=bounds)
![[Forward4 Webinar 2016] Building IoT Prototypes w/ Raspberry Pi](https://cdn.slidesharecdn.com/ss_thumbnails/raspberrypiwebinar-171022063713-thumbnail.jpg?width=640&height=640&fit=bounds)
![[DevRelCon Tokyo 2017] Creative Technical Content for Better Developer Experi...](https://cdn.slidesharecdn.com/ss_thumbnails/creativetechnicalcontentforbetterdx-170723020024-thumbnail.jpg?width=640&height=640&fit=bounds)
[Tokyo NodeFest 2015] Hardware Hacking for Javascript Developers
- 1. @girlie_mac Hardware Hacking for JavaScriptDevs Tomomi Imura (@girlie_mac) Hardware Hacking for JavaScript Devs https://flic.kr/p/8tuc1u by randomliteraturecouncil CC-BY 2.0 2015 東京 Node 学園祭
- 2. @girlie_mac I am a: ●Front-End Engineer ● N00b Hardware Hacker ● Sr. Developer Evangelist at PubNub ● San Francisco Dweller
- 3. @girlie_mac Internet of Thingsの時代 Source: Cisco IBSG https://www.cisco.com/web/about/ac79/docs/innov/IoT_IBSG_0411FINAL.pdf 500億！
- 4. @girlie_mac Withings: Smart BodyAnalyzer GE Link Cinder Sensing Cooker Nest: Learning Thermostat Whistle: Connected pet collar Amazon Dash Button
- 5.
- 6.
- 7. @girlie_mac Arduino (Genuino) ● MCUのキット ● オープンソースなハードウェア とソフトウェア (IDE) ● ディベロッパ・フレンドリー
- 8.
- 9. @girlie_mac LittleBits & Arduinoat Heart 9V BATTERY USB PLUG TO COMPUTER MODULES
- 10.
- 11. @girlie_mac Tessel USB PLUGS TO COMPUTER ETHERNET MODULES GPIODIGITAL PINS EXTRA USB PORTS
- 12. @girlie_mac Programming Tessel inNode.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. @girlie_mac Raspberry Pi USB TOPOWER SOURCE TO MONITOR TO MOUSE TO KEYBOARD WI-FI ADAPTER SD CARD GPIO DIGITAL PINS 4 EXTRA USB PORTS ETHERNET
- 14.
- 15.
- 16. @girlie_mac LED: Hello Worldof Hardware
- 17.
- 18. @girlie_mac オームの法則 R = V -Vs f I 電源電圧 (V) LED にかかる電圧 (V) LED に流れる電流 (A) 抵抗 (Ω)
- 19. @girlie_mac オームの法則と抵抗 R = 3.3 -1.9 0.02 電源電圧 (V) LED にかかる電圧 (V) LED に流れる電流 (A) 抵抗 (Ω) = 70Ω
- 20.
- 21.
- 22.
- 23. @girlie_mac Programming Pi withNode.js node-arm を使って Node.js をインストール $ wget http://node-arm.herokuapp.com/node_latest_armhf.deb $ sudo dpkg -i node_latest_armhf.deb もしくは特定バージョンの Node
- 24. @girlie_mac Johnny-Five ● JS で書けるロボティクス・フレーム ワーク ●Arduino 互換機で作動 ● 他機種はIOプラグインで ● http://johnny-five.io/ Woot!
- 25. @girlie_mac Johnny-Five & Raspi-io $npm install johnny-five $ npm install raspi-io
- 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.
- 28.
- 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. @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. @girlie_mac RGB LED でHue もどきを作る カソードコモン４本足 LED R G B GNDアナログ PWM pins
- 32.
- 33. @girlie_mac RGB LED でHue もどきを作る {'red':215, 'green':50, 'blue':255} publish data subscribe data Software UI Physical Output
- 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. @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.
- 37.
- 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.
- 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. @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.
- 43.
- 44. @girlie_mac I hacked hardwareso you can too! International NodeBots Day!
- 45.