- The document discusses using Little Bits modular electronic components and an Arduino coding kit to build an interactive etch-a-sketch project using Node.js and the johnny-five library. - It provides instructions for setting up the Arduino board and uploading code to control dimmer modules and read button input to draw on a web canvas. - The demo draws on the canvas by moving a line between the x,y coordinates received from the dimmer modules over socket.io, and clears when the button is pressed.

1. Little bits & node.js
IOT for beginner
Michele Capra
!
@piccoloaiutante
!
michele.capra@nearform.com

2. Summary
• Little bits
• Arduino
• Node.js
• Demo
• Q&A

3. Little bits
• Modular electronic components that
snap together via magnetic connectors
• Designed for education
• Arduino coding kit

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. 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. 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. 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. Demo
• Using dimmers to draw to the screen
just like an Etch-a-sketch.

9. Little bits in
action
• 1x Arduino
• 1x power
• 1 x fork
• 2 x dimmers
• 1 x button

10. The circuit

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. Server code
board.on("ready", function() {
!
joystick = new five.Joystick({
pins: ["A1", "A0"],
freq: 100
});
button=new five.Button(0);

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. 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. 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. Demo time

17. That’s all

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.