Lyza Danger Gardner

Transcript

1. JavaScript on Things Lyza Danger Gardner
2. JavaScript on Things A Web Developer’s Introduction to Electronics Lyza Danger Gardner @lyzadanger FrontFest Moscow, 2017
3. JavaScript Things on
4. JavaScript hardware work with making
5. Web-connected devices Huh?
6. Software + hardware ★ JavaScript ★ Web standards ★ Web development workflows ★ electronic components ★ embedded systems
7. web-connected devices Software + hardware ₌
9. “Where do I start?”
10. Let’s start.
11. YOU KNOW: ★ some JavaScript ★ nothing about electronic circuits
12. npm install johnny-five terminal $
13. ★ links ★ code ★ diagrams ★ instructions https://github.com/lyzadanger/jsot-moscow/
14. https://github.com/lyzadanger/jsot-moscow/ will appear again on the last slide
15. hardware embedded systems
16. INPUT OUTPUT
17. INPUT OUTPUT
23. ★ processor ★ I/O (input and output) support ★ non-volatile memory (ROM) firmware
24. MCU microcontroller
25. EMBEDDED SYTEM: ★ processor ★ I/O capabilities ★ program storage (ROM) often constrained
26. EMBEDDED SYTEM: ★ processor ★ I/O capabilities ★ program storage (ROM) ★ designed to do one thing ★ power-efficient ★ small, “embedded” MCU
27. MCU microcontroller
28. development boards
29. Arduino Uno
30. Arduino Uno 1 R3 ATMega 328P MCU 1
31. Arduino Uno 1 2 R3 ATMega 328P MCU 1 USB interface 2
32. JavaScript hardware? work with How does
33. 3 WAYS: 1.host-client 2.embedded JavaScript 3.single-board computers (SBCs)
34. 3 WAYS:host-client ★ constrained 8-bit MCU ★ only 2k ROM for programs ★ cannot run JS or Node.js directly Arduino Uno R3 ATMega 328P MCU
35. 3 WAYS:host-client ★ JavaScript logic executes on host ★ Microcontroller/board is client host client
36. 3 WAYS: 1.host-client 2.embedded JavaScript
37. 3 WAYS: embedded JavaScript ★ constrained microcontrollers ★ optimized subset of JavaScript ★ not usually a full OS Espruino Pico STM32F401CDU6 ARM Cortex M4
38. 3 WAYS: embedded JavaScript Espruino Pico Espruino Web IDE
39. 3 WAYS: 1.host-client 2.embedded JavaScript 3.single-board computers (SBCs)
40. 3 WAYS:Single-board computers (SBCs) Raspberry Pi 3, Model B ★ powerful, runs “real” OS ★ I/O support (pins) ★ sometimes overwhelming for beginners Quad Core 1.2GHz Broadcom BCM2837
41. Today’s hardware Arduino Uno R3 Tessel 2 host-client SBC
42. Johnny-Five http://johnny-five.io/
43. npm install johnny-five terminal $
44. Button Led Piezo Light GPS Multi LCD Thermometer Component Classes
45. const blinky = new five.Led('A5'); blinky.blink(); code fragment
46. Same Behavior…
47. …many platforms Arduino Tessel BeagleBoard Raspberry Pi
48. index.js const five = require('johnny-five'); const board = new five.Board({ // ... });
49. …many platforms Arduino Tessel BeagleBoard Raspberry Pi Same Behavior…
50. Arduino Tessel BeagleBoard Raspberry Pi firmata tessel-io beaglebone-io raspi-io I/O plugins johnny-five
51. npm install tessel-io terminal $ tessel-io
52. index.js const five = require('johnny-five'); const board = new five.Board({ }); const Tessel = require('tessel-io'); io: new Tessel() board.on('ready', () => { const blinky = new five.Led('A5'); blinky.blink(); });
53. Preparing Arduino Uno
54. ★ File -> ★ Examples -> ★ Firmata -> ★ StandardFirmataPlus Arduino IDE
55. Upload Firmata Sketch StandardFirmataPlus sketch
56. World Arduino Uno & with Hello, Johnny-Five
57. Arduino Uno 1 2 R3 ATMega 328P MCU 1 USB interface 2 Digital I/O pins 3 3
58. Built-In LED ★ pin 13 has a built-in LED ★ LED turns on when pin 13 set HIGH ★ no need to build LED circuit
59. $ mkdir hello-world $ cd hello-world $ npm install johnny-five terminal
60. index.js const five = require('johnny-five'); const board = new five.Board(); board.on('ready', () => { const blinkyLED = new five.Led(13);
61. http://johnny-five.io/api/led/ Johnny-Five Documentation: Led
62. const five = require('johnny-five'); const board = new five.Board(); board.on('ready', () => { const blinkyLED = new five.Led(13); blinkyLED.blink(); }); index.js
63. 1510087983163 Available /dev/cu.usbmodem1411 1510087983197 Connected /dev/cu.usbmodem1411 1510087984798 Repl Initialized >> terminal $ node index.js
64. TODO
65. ★ host and client communicate using firmata ★ Johnny-Five API includes “component classes” like Led ★ LED only blinks while host is running script Recap: Hello, World
66. World Tessel 2 & with Hello, Johnny-Five
67. Tessel 1 2 580MHz Mediatek MT7620n 1
68. Tessel 1 2 580MHz Mediatek MT7620n 1 USB interface 2 2
69. npm install -g t2-cli terminal $
70. list t2 terminal $ $ t2 run myScript.js $ t2 init
71. tessel.io Documentation https://tessel.io/t2-start
72. Arduino BeagleBoard Raspberry Pi firmata Tessel tessel-io beaglebone-io raspi-io I/O plugins johnny-five
73. Terminal $ mkdir hello-world-tessel-2 $ cd hello-world-tessel-2 $ t2 init $ npm install johnny-five tessel-io
74. index.js const five = require(‘johnny-five'); const board = new five.Board(); board.on('ready', () => { const blinkyLED = new five.Led(13); blinkyLED.blink(); }); const Tessel = require('tessel-io');
75. index.js const five = require(‘johnny-five'); const board = new five.Board({ }); board.on('ready', () => { const blinkyLED = new five.Led(13); blinkyLED.blink(); }); const Tessel = require('tessel-io'); io: new Tessel()
76. index.js const five = require(‘johnny-five'); const board = new five.Board({ }); board.on('ready', () => { const blinkyLED = new five.Led(13); blinkyLED.blink(); }); const Tessel = require('tessel-io'); io: new Tessel()
77. https://github.com/rwaldron/tessel-io
78. https://github.com/rwaldron/tessel-io
79. index.js const five = require(‘johnny-five'); const board = new five.Board({ }); board.on('ready', () => { const blinkyLED = new five.Led(“L1”); blinkyLED.blink(250); }); const Tessel = require('tessel-io'); io: new Tessel()
80. $ t2 run index.js INFO Looking for your Tessel... INFO Connected to brightspot. INFO Building project. INFO Writing project to RAM on brightspot (1318.912 kB)... INFO Deployed. INFO Running index.js... 1510090718990 Available Tessel 2 (brightspot) 1510090719161 Connected Tessel 2 (brightspot) 1510090719219 Repl Initialized >> terminal
81. TODO
82. https://github.com/rwaldron/tessel-io
83. index.js const five = require('johnny-five'); const Tessel = require('tessel-io'); const board = new five.Board({ io: new Tessel() }); board.on('ready', () => { const blinkyLED = new five.Led('L1'); blinkyLED.blink(250); }); const blinkyLED2 = new five.Led('L2'); blinkyLED2.blink(500);
85. Part the Hardware
86. Ohm’s Law
88. племя гномов a tribe of gnomes
89. бесконечное количество медуз infinite supply of jellyfish
94. V: I: R: Voltage Current Resistance
95. Voltage V:
96. SPLASH!! Voltage V:
97. SPLASH!! (plop) Voltage V:
98. Voltage V: Volts (V)
99. V: I: Voltage Current
100. Current I:
101. Current I: Amps (A)
102. V: I: R: Voltage Current Resistance
103. Resistance R:
104. Resistance R: Ohms(Ω)
105. V: I: R: Voltage Current Resistance Volts Amps Ohms (V) (A) (Ω)
106. V I R Voltage Current Resistance Volts Amps Ohms (V) (A) (Ω)
107. I R V Voltage
108. I R V · ₌ Voltage Current Resistance Voltage
109. I R V · ₌ Voltage Current Resistance Voltage
110. I R V Current
111. I R V ₌ Current Voltage Resistance Current
112. I R V ₌ Current Voltage Resistance Current
113. I R V Resistance
114. I R V ₌ Current Voltage Resistance Resistance
115. I R V ₌ Current Voltage Resistance Resistance
117. I R V Ohm’s Law in the Real World
118. I R V
119. I R V
120. I R V ?
121. R I V ₌
122. R I V ₌ 6V
123. R I V ₌ 6V 20mA
124. R I V ₌ 6V .02A
125. ₌ 6 .02 R
126. ₌ 300 R Ω
127. Building a simple circuit
128. LED + anode - cathode
130. Resistor 220Ω ₌ 300 R Ω
131. 220Ω
133. Power source
134. DC power (batteries) 220Ω resistor LED jumper wires
135. breadboard
136. notch breadboard connections
137. 220Ω + - 6V Simple LED Circuit LED Resistor DC source
147. I V ₌ 6V .02A R
148. 6V 0V
149. 6V 0V -1.8V
150. R I V ₌ 6V .02A
151. R I V ₌ (6V - 1.8V) .02A
152. R I V ₌ 4.2V .02A
153. R ₌ 210Ω 220Ω
154. Where Hardware meets digital logic
155. Arduino Uno 1 2 R3 ATMega 328P MCU 1 USB interface 2 Digital I/O pins 3 3 4 4 4 Power pins
159. Digital I/O (output)
160. Arduino Uno 1 2 R3 ATMega 328P MCU 1 USB interface 2 Digital I/O pins 3 3 4 4 4 Power pins
161. LOW HIGH
162. LOW HIGH On Off Yes No TRUE FALSE 1 0
163. LOW HIGH 0V +5V
164. +5V 0V LOW HIGH Digital Output
167. index.js const five = require('johnny-five'); const board = new five.Board(); board.on('ready', () => { const blinkyLED = new five.Led(13); blinkyLED.blink(); });
168. index.js const five = require('johnny-five'); const board = new five.Board(); board.on('ready', () => { const blinkyLED = new five.Led(5); blinkyLED.blink(); });
169. $ node index.js 1510087983163 Available /dev/cu.usbmodem1411 1510087983197 Connected /dev/cu.usbmodem1411 1510087984798 Repl Initialized >> terminal
171. Digital I/O (Tessel 2)
172. Tessel 1 2 580MHz Mediatek MT7620n 1 USB interface 2 2 3 3 3 I/O “Ports”
173. Port A Port B
174. Port A Port B GND +3.3V GND +3.3V
175. Port A Port B A0 A1 A2 A3 A4 A5 A6 A7 B0 B1 B2 B3 B4 B5 B6 B7 GND +3.3V GND +3.3V
176. Port B B0 B1 B2 B3 B4 B5 B6 B7 GND +3.3V
177. LOW HIGH 0V +5V +3.3V
178. R I V ₌ (5V - 1.8V) .02A
179. R I V ₌(3.3V - 1.8V) .02A
180. R I V ₌ 1.5V .02A
181. R ₌ 75Ω 100Ω
182. A5
183. $ mkdir hello-world-circuit-t2 $ cd hello-world-circuit-t2 $ t2 init $ npm install johnny-five tessel-io terminal
184. index.js const five = require(‘johnny-five'); const Tessel = require('tessel-io'); const board = new five.Board({ io: new Tessel() }); board.on('ready', () => { const blinkyLED = new five.Led(“L1”); blinkyLED.blink(250); });
185. index.js const five = require(‘johnny-five'); const Tessel = require('tessel-io'); const board = new five.Board({ io: new Tessel() }); board.on('ready', () => { const blinkyLED = new five.Led(“A5”); blinkyLED.blink(250); });
186. $ t2 run index.js INFO Looking for your Tessel... INFO Connected to brightspot. INFO Building project. INFO Writing project to RAM on brightspot (1318.912 kB)... INFO Deployed. INFO Running index.js... 1510090718990 Available Tessel 2 (brightspot) 1510090719161 Connected Tessel 2 (brightspot) 1510090719219 Repl Initialized >> terminal
187. TODO
189. index.js const five = require(‘johnny-five'); const Tessel = require('tessel-io'); const board = new five.Board({ io: new Tessel() }); board.on('ready', () => { const blinkyLED = new five.Led(“A5”); blinkyLED.blink(250); });
190. index.js const five = require(‘johnny-five'); const Tessel = require('tessel-io'); const board = new five.Board({ io: new Tessel() }); board.on('ready', () => { const blinkyLED = new five.Led(“A5”); blinkyLED.pulse(); });
191. $ t2 run index.js INFO Looking for your Tessel... INFO Connected to brightspot. INFO Building project. INFO Writing project to RAM on brightspot (1318.912 kB)... INFO Deployed. INFO Running index.js... 1510090718990 Available Tessel 2 (brightspot) 1510090719161 Connected Tessel 2 (brightspot) 1510090719219 Repl Initialized >> terminal
192. TODO
193. pulse blink
194. http://johnny-five.io/api/led/
195. johnny-five.io/api/led “This operation will only work with Leds attached to PWM pins”
196. +3.3V 0V LOW HIGH PWM?
197. HIGH LOW 0V +3.3V
198. HIGH LOW +3.3V 0V
200. HIGH LOW +3.3V 0V 50% duty cycle
201. HIGH LOW +3.3V 0V 25% duty cycle
202. Pulse Width Modulation
203. PWM
204. Arduino Uno 1 2 R3 ATMega 328P MCU 1 USB interface 2 Digital I/O pins 3 3 4 4 4 Power pins
205. Arduino Uno R3 3 ~
206. Arduino Uno 1 2 R3 ATMega 328P MCU 1 USB interface 2 Digital I/O pins 3 3 4 4 4 Power pins ~ PWM
207. Port A Port B A0 A1 A2 A3 A4 A5 A6 A7 B0 B1 B2 B3 B4 B5 B6 B7 GND +3.3V GND +3.3V Tessel 2 ~ ~
209. RGB LED + + + - Common-cathode RGB LED
211. index.js const five = require('johnny-five'); const board = new five.Board(); const colors = [ '#ff0000', // red '#ff7f00', // orange '#ffff00', // yellow '#00ff00', // green '#0000ff', // blue '#4b0082', // indigo '#9400D3' // violet ];
212. http://johnny-five.io/api/led.rgb/ Led.RGB.color method
213. index.js ‘#ff0000', // red '#ff7f00', // orange '#ffff00', // yellow '#00ff00', // green '#0000ff', // blue '#4b0082', // indigo '#9400D3' // violet ]; const five = require('johnny-five'); const board = new five.Board(); const colors = [
214. index.js ‘#ff0000', // red '#ff7f00', // orange '#ffff00', // yellow '#00ff00', // green '#0000ff', // blue '#4b0082', // indigo '#9400D3' // violet ]; const five = require('johnny-five'); const board = new five.Board(); const colors = [ board.on('ready', () => { const rgb = new five.Led.RGB({ pins: [3, 5, 6] }); var colorIndex = 0; setInterval(() => { rgb.color(colors[colorIndex]); colorIndex++; if (colorIndex >= colors.length) { colorIndex = 0; } }, 1000); });
215. index.js board.on('ready', () => { const rgb = new five.Led.RGB({ pins: [3, 5, 6] }); var colorIndex = 0; setInterval(() => { rgb.color(colors[colorIndex]); colorIndex++; if (colorIndex >= colors.length) { colorIndex = 0; } }, 1000); });
216. $ node index.js 1510087983163 Available /dev/cu.usbmodem1411 1510087983197 Connected /dev/cu.usbmodem1411 1510087984798 Repl Initialized >> terminal
217. TODO
218. HIGH LOW +5V 0V Digital Input
219. +5V 0V Analog Signal
220. +5V 0V Analog Signal
221. Analog-to- Digital Conversion
222. ADC
223. Arduino Uno 1 2 R3 ATMega 328P MCU 1 USB interface 2 Digital I/O pins 3 3 4 4 4 Power pins ~ PWM 5 Analog in (ADC) 5
224. +5V 0V 10-bit ADC 0 1023
225. TMP36 + -
227. http://johnny-five.io/api/thermometer/
228. index.js const five = require('johnny-five'); const board = new five.Board(); board.on('ready', () => { }); const thermo = new five.Thermometer({ controller: 'TMP36', pin: 'A0' }); thermo.on('change', () => { console.log(`${thermo.celsius}°C`); });
229. $ node index.js 1510087983163 Available /dev/cu.usbmodem1411 1510087983197 Connected /dev/cu.usbmodem1411 1510087984798 Repl Initialized >> 22.84°C 21.28°C 21.31°C 21.36°C 21.38°C 21.4°C 21.42°C 21.44°C 21.46°C 21.48°C 21.47°C 21.49°C 21.5°C terminal
231. bits bits
232. serial bits bits
233. parallel bits bits serial
234. Parallel LCD Module
238. ★ Asynchronous (TTL) Serial ★ Synchronous Serial • I2C • SPI
239. TX Asynchronous (TTL) Serial TX RX RX GND
240. MCU GPS protocol?
241. start parity stop data data frame
242. Adafruit Ultimate GPS
243. 8 N 1 9600 8N1
244. GPS UART serial parallel
245. Arduino Uno 1 2 R3 ATMega 328P MCU 1 USB interface 2 Digital I/O pins 3 3 4 4 4 Power pins ~ PWM 5 Analog in (ADC) 5 TTL Serial (RX 0, TX 1) 6 6
246. BeagleBoard Raspberry Pi Tessel tessel-io beaglebone-io raspi-io Arduino firmata I/O plugins johnny-five
247. Arduino Uno 1 2 R3 ATMega 328P MCU 1 USB interface 2 Digital I/O pins 3 3 4 4 4 Power pins ~ PWM 5 Analog in (ADC) 5 TTL Serial (RX 0, TX 1) 6 6
248. Arduino Uno 1 2 R3 ATMega 328P MCU 1 USB interface 2 Digital I/O pins 3 3 4 4 4 Power pins ~ PWM 5 Analog in (ADC) 5 TTL Serial (RX 0, TX 1) 6 6 ★ Software Serial (firmata; TX 10, RX 11) 6
249. http://johnny-five.io/api/gps/
251. index.js const five = require('johnny-five'); const board = new five.Board(); board.on('ready', function () { }); const gps = new five.GPS([11, 10]); board.repl.inject({ gps: gps });
252. terminal $ node index.js 1479058386733 Device(s) /dev/cu.usbmodem1411 1479058386761 Connected /dev/cu.usbmodem1411 1479058388413 Repl Initialized >> 42.38 >> gps.latitude
253. I2C Serial SCL SCL SCL SCL SDA SDA SDA SDA Master Slave Slave Slave
254. Protocol
255. Arduino Uno 1 2 R3 ATMega 328P MCU 1 USB interface 2 Digital I/O pins 3 3 4 4 4 Power pins ~ PWM 5 Analog in (ADC) 5 TTL Serial (RX 0, TX 1) 6 6 ★ Software Serial (firmata; TX 10, RX 11) 6 7 7 I2C Serial (SCL A5, SDA A4)
256. BMP 180 ★ temperature sensor ★ atmospheric pressure sensor ★ 3.3V
257. Port A Port B A0 A1 A2 A3 A4 A5 A6 A7 B0 B1 B2 B3 B4 B5 B6 B7 GND +3.3V GND +3.3V Tessel 2 SCL SDA SCL SDA
259. http://johnny-five.io/api/multi/
260. const five = require(‘johnny-five'); const Tessel = require('tessel-io'); const board = new five.Board({ io: new Tessel() }); board.on('ready', () => { }); index.js weatherSensor.on('change', () => { console.log(weatherSensor.thermometer.C); console.log(weatherSensor.barometer.pressure); }); const weatherSensor = new five.Multi({ controller: 'BMP180' });
261. Where to from here?
262. https://learn.sparkfun.com/tutorials Learning Resources
263. http://johnny-five.io/ Learning Resources
264. https://store.arduino.cc/usa/arduino-starter-kit Learning Resources
265. https://www.sparkfun.com/products/13847 Learning Resources
266. Bonus! Extra examples!
267. Weatherball
268. warmer the same colder
269. https://darksky.net/dev
270. $ mkdir weatherball $ cd weatherball $ npm install johnny-five request terminal
271. VIDEO
274. JavaScript on Things ★ coming holiday season 2017! ★ available in e-Book prerelease now https://www.manning.com/books/javascript-on-things
275. Thank you! https://github.com/lyzadanger/jsot-moscow/ https://www.lyza.com @lyzadanger https://www.manning.com/books/javascript-on-things