little bits & node.js iot for beginner
TRANSCRIPT
Summary
• Little bits
• Arduino
• Node.js
• Demo
• Q&A
Little bits
• Modular electronic components that snap together via magnetic connectors
• Designed for education
• Arduino coding kit
Arduino coding kit• 1 x arduino
• 1 x fork
• 1 x power
• 1 x button
• 2 x dimmer
• 1 x bargraph
• 1 x servo
ArduinoIt's an open-source physical computing platform based on a simple microcontroller board, and a development environment for writing software for the board
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..”
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
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 and Y values from dimmers and communicate to our client (socket.io + johnny-five)
Server codeboard.on("ready", function() { ! joystick = new five.Joystick({ pins: ["A1", "A0"], freq: 100 }); button=new five.Button(0);
Server code
html = fs.readFileSync('draw.html').toString(); ! server = http.createServer(function (req, res) { res.writeHead(200, {'Content-Type': 'text/html'}); res.end(html); });
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'); }); });
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; });
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-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.