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.
Little bits & node.js
IOT for beginner
Michele Capra
!
@piccoloaiutante
!
michele.capra@nearform.com
Summary
• Little bits
• Arduino
• Node.js
• Demo
• Q&A
Little bits
• Modular electronic components that
snap together via magnetic connectors
• Designed for education
• Arduino ...
Arduino coding kit
• 1 x arduino
• 1 x fork
• 1 x power
• 1 x button
• 2 x dimmer
• 1 x bargraph
• 1 x servo
Arduino
It's an open-source physical computing platform based on a simple
microcontroller board, and a development environ...
Node.js & johnny-
five
• johnny-five is an Open Source, Firmata
Protocol based, IoT and Robotics
programming framework
• “...
Setting up Arduino
board
!
• Connect the Arduino module to the
computer using USB
• Connect power module because the
Ardui...
Demo
• Using dimmers to draw to the screen
just like an Etch-a-sketch.
Little bits in
action
• 1x Arduino
• 1x power
• 1 x fork
• 2 x dimmers
• 1 x button
The circuit
Code
• Webpage as web interface for our etch-
a-sketch (HTML5 canvas + socket.io)
• Node webserver that will read the X
an...
Server code
board.on("ready", function() {
!
joystick = new five.Joystick({
pins: ["A1", "A0"],
freq: 100
});
button=new f...
Server code
html = fs.readFileSync('draw.html').toString();
!
server = http.createServer(function (req, res) {
res.writeHe...
Server code
io.listen(server).on('connection', function (socket) {
// send the X, Y values to the client
joystick.on("axis...
Client code
!
socket.on('clear', function(){
context.clearRect(0,0,600,400);
context.beginPath();
});
!
socket.on('drawing...
Demo time
That’s all
Credits
• little-bits-js:Anna Gerber has created
several exercise that you could do
with little bits, included the etch-a-...
Upcoming SlideShare
Loading in …5
×

Little bits & node.js IOT for beginner

1,667 views

Published on

An introduction to node.js, Arduino and Little Bits hardware

Published in: Technology
  • Be the first to comment

Little bits & node.js IOT for beginner

  1. 1. Little bits & node.js IOT for beginner Michele Capra ! @piccoloaiutante ! michele.capra@nearform.com
  2. 2. Summary • Little bits • Arduino • Node.js • Demo • Q&A
  3. 3. Little bits • Modular electronic components that snap together via magnetic connectors • Designed for education • Arduino coding kit
  4. 4. Arduino coding kit • 1 x arduino • 1 x fork • 1 x power • 1 x button • 2 x dimmer • 1 x bargraph • 1 x servo
  5. 5. Arduino It's an open-source physical computing platform based on a simple microcontroller board, and a development environment for writing software for the board
  6. 6. Node.js & johnny- five • johnny-five is an Open Source, Firmata Protocol based, IoT and Robotics programming framework • “..johnny-five wants to be a baseline control kit for hardware projects, allowing you the freedom to build, grow and experiment with diverse JavaScript libraries of your own choice..”
  7. 7. Setting up Arduino board ! • Connect the Arduino module to the computer using USB • Connect power module because the Arduino module is not powered via USB. • Upload StandardFirmata to Arduino board using the Arduino IDE
  8. 8. Demo • Using dimmers to draw to the screen just like an Etch-a-sketch.
  9. 9. Little bits in action • 1x Arduino • 1x power • 1 x fork • 2 x dimmers • 1 x button
  10. 10. The circuit
  11. 11. Code • Webpage as web interface for our etch- a-sketch (HTML5 canvas + socket.io) • Node webserver that will read the X and Y values from dimmers and communicate to our client (socket.io + johnny-five)
  12. 12. Server code board.on("ready", function() { ! joystick = new five.Joystick({ pins: ["A1", "A0"], freq: 100 }); button=new five.Button(0);
  13. 13. Server code html = fs.readFileSync('draw.html').toString(); ! server = http.createServer(function (req, res) { res.writeHead(200, {'Content-Type': 'text/html'}); res.end(html); });
  14. 14. Server code io.listen(server).on('connection', function (socket) { // send the X, Y values to the client joystick.on("axismove", function(err, timestamp) { console.log(this.fixed.x, this.fixed.y); socket.emit('drawing', this.fixed); }); ! button.on("press", function(value){ socket.emit('clear'); }); });
  15. 15. Client code ! socket.on('clear', function(){ context.clearRect(0,0,600,400); context.beginPath(); }); ! socket.on('drawing', function (data) { $('#status').html('Connected (x: ' + data.x + ', y: ' + data.y + ')'); // scale values to match canvas size data.x *= 600; data.y *= 400; // if values have changed, draw a line to the new position if (prev && (prev.x != data.x || prev.y != data.y)) { context.moveTo(prev.x, prev.y); context.lineTo(data.x, data.y); context.stroke(); } prev = data; });
  16. 16. Demo time
  17. 17. That’s all
  18. 18. Credits • little-bits-js:Anna Gerber has created several exercise that you could do with little bits, included the etch-a- sketch that you’ve seen (https:// github.com/AnnaGerber/little-bits-js) • Images of bits used in this presentation have been sourced from littlebits.cc and used under a Creative Commons CC-BY-SA license.

×