FOR WEB DEVELOPERStangiblejs.com/slides/forwardjs2017/slides.pdf · Workshop with Jean-Philippe...

50
Workshop with Jean-Philippe Côté PHYSICAL COMPUTING FOR WEB DEVELOPERS

Transcript of FOR WEB DEVELOPERStangiblejs.com/slides/forwardjs2017/slides.pdf · Workshop with Jean-Philippe...

Page 1: FOR WEB DEVELOPERStangiblejs.com/slides/forwardjs2017/slides.pdf · Workshop with Jean-Philippe Côté PHYSICAL COMPUTING FOR WEB DEVELOPERS

Workshop with Jean-Philippe Côté

PHYSICAL COMPUTINGFOR

WEB DEVELOPERS

Page 2: FOR WEB DEVELOPERStangiblejs.com/slides/forwardjs2017/slides.pdf · Workshop with Jean-Philippe Côté PHYSICAL COMPUTING FOR WEB DEVELOPERS

Pre-Installed Software

• Arduino IDE

• CH34x Driver

• NW.js (SDK Flavor)

• Node.js

* If you have not yet installed the software as per the pre-workshop instructions, please request one of the

USB keys with all necessary installers.

https://www.arduino.cc

Mac http://bit.ly/2e3lydU

Windows http://www.wch.cn/download/CH341SER_ZIP.html

http://nwjs.io

https://nodejs.org

Page 3: FOR WEB DEVELOPERStangiblejs.com/slides/forwardjs2017/slides.pdf · Workshop with Jean-Philippe Côté PHYSICAL COMPUTING FOR WEB DEVELOPERS
Page 4: FOR WEB DEVELOPERStangiblejs.com/slides/forwardjs2017/slides.pdf · Workshop with Jean-Philippe Côté PHYSICAL COMPUTING FOR WEB DEVELOPERS
Page 5: FOR WEB DEVELOPERStangiblejs.com/slides/forwardjs2017/slides.pdf · Workshop with Jean-Philippe Côté PHYSICAL COMPUTING FOR WEB DEVELOPERS
Page 6: FOR WEB DEVELOPERStangiblejs.com/slides/forwardjs2017/slides.pdf · Workshop with Jean-Philippe Côté PHYSICAL COMPUTING FOR WEB DEVELOPERS

* The libraries are: jQuery, QuickSettings.js, Tone.js and a super simple particle library I put together for this workshop (particle.js).

2. Download: workshop-libs.zip

1. Go to: http://tangiblejs.com/forward2017

Libraries to download

Page 7: FOR WEB DEVELOPERStangiblejs.com/slides/forwardjs2017/slides.pdf · Workshop with Jean-Philippe Côté PHYSICAL COMPUTING FOR WEB DEVELOPERS
Page 8: FOR WEB DEVELOPERStangiblejs.com/slides/forwardjs2017/slides.pdf · Workshop with Jean-Philippe Côté PHYSICAL COMPUTING FOR WEB DEVELOPERS
Page 9: FOR WEB DEVELOPERStangiblejs.com/slides/forwardjs2017/slides.pdf · Workshop with Jean-Philippe Côté PHYSICAL COMPUTING FOR WEB DEVELOPERS
Page 10: FOR WEB DEVELOPERStangiblejs.com/slides/forwardjs2017/slides.pdf · Workshop with Jean-Philippe Côté PHYSICAL COMPUTING FOR WEB DEVELOPERS
Page 11: FOR WEB DEVELOPERStangiblejs.com/slides/forwardjs2017/slides.pdf · Workshop with Jean-Philippe Côté PHYSICAL COMPUTING FOR WEB DEVELOPERS
Page 12: FOR WEB DEVELOPERStangiblejs.com/slides/forwardjs2017/slides.pdf · Workshop with Jean-Philippe Côté PHYSICAL COMPUTING FOR WEB DEVELOPERS
Page 13: FOR WEB DEVELOPERStangiblejs.com/slides/forwardjs2017/slides.pdf · Workshop with Jean-Philippe Côté PHYSICAL COMPUTING FOR WEB DEVELOPERS
Page 14: FOR WEB DEVELOPERStangiblejs.com/slides/forwardjs2017/slides.pdf · Workshop with Jean-Philippe Côté PHYSICAL COMPUTING FOR WEB DEVELOPERS

System-Level Device Detection

* For the device to show up, it must be plugged in!

Windows

Device

Manager

macOS

System

Profiler

Page 15: FOR WEB DEVELOPERStangiblejs.com/slides/forwardjs2017/slides.pdf · Workshop with Jean-Philippe Côté PHYSICAL COMPUTING FOR WEB DEVELOPERS
Page 16: FOR WEB DEVELOPERStangiblejs.com/slides/forwardjs2017/slides.pdf · Workshop with Jean-Philippe Côté PHYSICAL COMPUTING FOR WEB DEVELOPERS
Page 17: FOR WEB DEVELOPERStangiblejs.com/slides/forwardjs2017/slides.pdf · Workshop with Jean-Philippe Côté PHYSICAL COMPUTING FOR WEB DEVELOPERS
Page 18: FOR WEB DEVELOPERStangiblejs.com/slides/forwardjs2017/slides.pdf · Workshop with Jean-Philippe Côté PHYSICAL COMPUTING FOR WEB DEVELOPERS
Page 19: FOR WEB DEVELOPERStangiblejs.com/slides/forwardjs2017/slides.pdf · Workshop with Jean-Philippe Côté PHYSICAL COMPUTING FOR WEB DEVELOPERS
Page 20: FOR WEB DEVELOPERStangiblejs.com/slides/forwardjs2017/slides.pdf · Workshop with Jean-Philippe Côté PHYSICAL COMPUTING FOR WEB DEVELOPERS
Page 21: FOR WEB DEVELOPERStangiblejs.com/slides/forwardjs2017/slides.pdf · Workshop with Jean-Philippe Côté PHYSICAL COMPUTING FOR WEB DEVELOPERS
Page 22: FOR WEB DEVELOPERStangiblejs.com/slides/forwardjs2017/slides.pdf · Workshop with Jean-Philippe Côté PHYSICAL COMPUTING FOR WEB DEVELOPERS
Page 23: FOR WEB DEVELOPERStangiblejs.com/slides/forwardjs2017/slides.pdf · Workshop with Jean-Philippe Côté PHYSICAL COMPUTING FOR WEB DEVELOPERS
Page 24: FOR WEB DEVELOPERStangiblejs.com/slides/forwardjs2017/slides.pdf · Workshop with Jean-Philippe Côté PHYSICAL COMPUTING FOR WEB DEVELOPERS
Page 25: FOR WEB DEVELOPERStangiblejs.com/slides/forwardjs2017/slides.pdf · Workshop with Jean-Philippe Côté PHYSICAL COMPUTING FOR WEB DEVELOPERS
Page 26: FOR WEB DEVELOPERStangiblejs.com/slides/forwardjs2017/slides.pdf · Workshop with Jean-Philippe Côté PHYSICAL COMPUTING FOR WEB DEVELOPERS
Page 27: FOR WEB DEVELOPERStangiblejs.com/slides/forwardjs2017/slides.pdf · Workshop with Jean-Philippe Côté PHYSICAL COMPUTING FOR WEB DEVELOPERS
Page 28: FOR WEB DEVELOPERStangiblejs.com/slides/forwardjs2017/slides.pdf · Workshop with Jean-Philippe Côté PHYSICAL COMPUTING FOR WEB DEVELOPERS
Page 29: FOR WEB DEVELOPERStangiblejs.com/slides/forwardjs2017/slides.pdf · Workshop with Jean-Philippe Côté PHYSICAL COMPUTING FOR WEB DEVELOPERS
Page 30: FOR WEB DEVELOPERStangiblejs.com/slides/forwardjs2017/slides.pdf · Workshop with Jean-Philippe Côté PHYSICAL COMPUTING FOR WEB DEVELOPERS
Page 31: FOR WEB DEVELOPERStangiblejs.com/slides/forwardjs2017/slides.pdf · Workshop with Jean-Philippe Côté PHYSICAL COMPUTING FOR WEB DEVELOPERS
Page 32: FOR WEB DEVELOPERStangiblejs.com/slides/forwardjs2017/slides.pdf · Workshop with Jean-Philippe Côté PHYSICAL COMPUTING FOR WEB DEVELOPERS
Page 33: FOR WEB DEVELOPERStangiblejs.com/slides/forwardjs2017/slides.pdf · Workshop with Jean-Philippe Côté PHYSICAL COMPUTING FOR WEB DEVELOPERS
Page 34: FOR WEB DEVELOPERStangiblejs.com/slides/forwardjs2017/slides.pdf · Workshop with Jean-Philippe Côté PHYSICAL COMPUTING FOR WEB DEVELOPERS
Page 35: FOR WEB DEVELOPERStangiblejs.com/slides/forwardjs2017/slides.pdf · Workshop with Jean-Philippe Côté PHYSICAL COMPUTING FOR WEB DEVELOPERS
Page 36: FOR WEB DEVELOPERStangiblejs.com/slides/forwardjs2017/slides.pdf · Workshop with Jean-Philippe Côté PHYSICAL COMPUTING FOR WEB DEVELOPERS
Page 37: FOR WEB DEVELOPERStangiblejs.com/slides/forwardjs2017/slides.pdf · Workshop with Jean-Philippe Côté PHYSICAL COMPUTING FOR WEB DEVELOPERS
Page 38: FOR WEB DEVELOPERStangiblejs.com/slides/forwardjs2017/slides.pdf · Workshop with Jean-Philippe Côté PHYSICAL COMPUTING FOR WEB DEVELOPERS
Page 39: FOR WEB DEVELOPERStangiblejs.com/slides/forwardjs2017/slides.pdf · Workshop with Jean-Philippe Côté PHYSICAL COMPUTING FOR WEB DEVELOPERS
Page 40: FOR WEB DEVELOPERStangiblejs.com/slides/forwardjs2017/slides.pdf · Workshop with Jean-Philippe Côté PHYSICAL COMPUTING FOR WEB DEVELOPERS
Page 41: FOR WEB DEVELOPERStangiblejs.com/slides/forwardjs2017/slides.pdf · Workshop with Jean-Philippe Côté PHYSICAL COMPUTING FOR WEB DEVELOPERS
Page 42: FOR WEB DEVELOPERStangiblejs.com/slides/forwardjs2017/slides.pdf · Workshop with Jean-Philippe Côté PHYSICAL COMPUTING FOR WEB DEVELOPERS
Page 43: FOR WEB DEVELOPERStangiblejs.com/slides/forwardjs2017/slides.pdf · Workshop with Jean-Philippe Côté PHYSICAL COMPUTING FOR WEB DEVELOPERS
Page 44: FOR WEB DEVELOPERStangiblejs.com/slides/forwardjs2017/slides.pdf · Workshop with Jean-Philippe Côté PHYSICAL COMPUTING FOR WEB DEVELOPERS
Page 45: FOR WEB DEVELOPERStangiblejs.com/slides/forwardjs2017/slides.pdf · Workshop with Jean-Philippe Côté PHYSICAL COMPUTING FOR WEB DEVELOPERS
Page 46: FOR WEB DEVELOPERStangiblejs.com/slides/forwardjs2017/slides.pdf · Workshop with Jean-Philippe Côté PHYSICAL COMPUTING FOR WEB DEVELOPERS
Page 47: FOR WEB DEVELOPERStangiblejs.com/slides/forwardjs2017/slides.pdf · Workshop with Jean-Philippe Côté PHYSICAL COMPUTING FOR WEB DEVELOPERS
Page 48: FOR WEB DEVELOPERStangiblejs.com/slides/forwardjs2017/slides.pdf · Workshop with Jean-Philippe Côté PHYSICAL COMPUTING FOR WEB DEVELOPERS
Page 49: FOR WEB DEVELOPERStangiblejs.com/slides/forwardjs2017/slides.pdf · Workshop with Jean-Philippe Côté PHYSICAL COMPUTING FOR WEB DEVELOPERS

https://github.com/cotejp/forward2017-workshop

To install all necessary Node modules for a project, issue the following command in the project’s folder:

npm install

Source Code

Page 50: FOR WEB DEVELOPERStangiblejs.com/slides/forwardjs2017/slides.pdf · Workshop with Jean-Philippe Côté PHYSICAL COMPUTING FOR WEB DEVELOPERS

Sign Up for the

newsletter!

http://tangiblejs.com/forward2017

http://cote.cc

@jpcote

http://github.com/cotejp

http://tangiblejs.com

@tangiblejs

MERCI.