Nodebots NYCJavascript Workshops

Documentation for workshop done for NYC Javascript:
http://www.meetup.com/NY-JavaScript/events/227872713/

Transcript

1. = Johnny Five Nodebots Workshop
2. Follow along • https://goo.gl/vdshx2
3. NYC Javascript Meetup
7. Who ? Andrew Stef Divy Karen Tiff
8. What ?
9. Plan • Learn what Arduino/Johnny Five is and complete setup(15’) • Form groups and follow workshop steps(60’) • Demo (15’)
10. Before we start • No silly questions • If it doesn’t work it’s probably the hardware :) • We’re here to experiment and learn from each other • Code of conduct: be excellent with each other
11. Arduino
12. Microcontroller A microcontroller is a small computer on a single integrated circuit containing a processor core, memory, and programmable input/output peripherals.
13. Examples Input • Conductive tape • Conductive thread • Anything that conducts electricity
14. Examples output • Sound (buzzer) • Light (Led) • LCD (text)
15. Johnny Five
16. C vs Javascript void loop() { int val = analogRead(A0); Serial.println(val); delay(500); } board.on("ready", function() { var s = new j5.Sensor(‘A0’) setInterval(function() { console.log(s.value); }, 500); }); Typical Arduino Sketch Using johnny-five
17. Johnny-Five API • 36 component classes: Board, Led, Piezo, Button, Pin, Accelerometer, Servo, Button…. • Each component class comes with their own events and methods. Led class has methods: blink(), on(), off(), toggle(), strobe(), fade()… Button class has events: “hold”, “down”/“press”, “up”/ “release”
18. Handling Board Events • Just like JQuery var five = require("johnny-five"); var board = new five.Board(); board.on("ready", function() { var led = new five.Led(13); led.blink(500); }); • Other events likes: “connect”, “warn”, “fail”, “message”
19. Setup • 1. Install Node • 2. Install NPM library Johnny-Five • Here are detailed instructions for setup
20. Resources • http://johnny-five.io/api/ • http://node-ardx.org/ • https://github.com/rwaldron/johnny-five
21. Prototype time!
22. Prototype time • Let’s make teams • 1st step: Choose an input of your choice—we are using a web button—and hook it up to an LED output on your Arduino! • 2nd step: Use or design a sensor of your choice to gather some data and send to your browser to display. • 3rd step: Modify your script from second step to integrate sockets so you can use your sensor to trigger events on multiple machines, and update live! • Demo time (20’)
23. Hello World (Blinky)
24. Hello World (Blinky)
25. RGB LED
26. Step1: RGB
27. Step1: RGB
28. Step 1: RGB Challenge: Make it Purple
29. Step 1 Button 10k resistor
30. Step 1 Button
31. Step 1 Button Challenge: Write the function for button "up" and "hold"
32. Step 1: Pmeter
33. Step 1: Pmeter
34. Step 1: Pmeter Challenge: Change the frequency at which we read it
35. Step 1: Web Button
36. Step 1: Web Button A bit more complex :) follow instructions here: https://goo.gl/3HcwwP
37. Step 1: Web Button Challenge: Make a Web Button to change LED colors
38. Step 2: Collect Some Data
39. Step 2: Collect Some Data - code
40. Step 2: Send the Data to the Browser
41. Step 3: Enter Sockets
42. Step 3 Sockets: Emitting Events
43. Step 3 Sockets: Reacting to Events
44. Emoji Demo!
45. Piano Demo!
46. Your turn: improvise!
47. Now it’s your turn! • Use the tools that we’ve learned to build a cool app that utilizes the Arduino! • Remember, we can • Trigger events from sensors on the Arduino or from buttons on our webpage • Send data gathered by our Arduino to show or trigger events on our app’s webpage • Use sockets to live update on multiple screens
48. Github repo for the workshops • https://github.com/hackidemia/nodebots_nyc_feb
49. Demo time!
50. What’s next ?
51. Get your ticket here •https://goo.gl/jx3PO4