Chapter 5 🕩

Connecting the dots

We have come a long way in our quest to connect physical objects to the internet. In this chapter we return to our “light bulb server”.

Connecting the dots

With all the elements needed to build our our light-bulb server, lets take a look at how the pieces fit together.

Download example file

To make the installation process simpler, the example project contains a npm package file “package.json”. If you open the project folder in the terminal and write “npm install”, all the dependancies will be installed automatically for your.

The “main.js” file, already contains the libraries from the previous chapters. It loads the web server, sets up the webSocket connection, and it connects to the Arduino.

Preparation

Before we start programming, lets just take a second and look at our project description once again.

“... create a website that is connected to a light bulb in your office. Every time a user visits your website you would like this light bulb to be turned on. The light bulb should turn itself off when a user leaves your website.”

The program

On the client (www > js > main.js)

Connect to the webSocket server, once the website is loaded.


function main() {

    "use strict";
    
    // connect to the light bulb server
    var socket = io.connect('http://localhost');
}
window.addEventListener('DOMContentLoaded', main);
                     

On the server

Initialise the webServer, socket.io, and firmata. (Note that if no server ip is given the server will use the computers ip address.)
Wait for the arduino to connect, then configure the pins.
Use socket.io to listen for webSocket connections and turn the lamp on if somebody connects. Turn the lamp off if somebody disconnects.


"use strict";


// Web server (to configure the web server open "webServer.js")
var ip   = undefined;
var port = 8080;
var server = require('./webServer').start(ip, port);

// Web sockets (to configure the webSocket server open "socketServer.js")
var io = require('./socketServer').start(server);

// Firmata
var serialPort = '/dev/tty.usbmodemfd131';
var board = require('./firmataConnector').start(serialPort);


// Arduino is connected
board.on('connection', function () {
    
    // Set pin 13 to output
    board.pinMode(13, board.OUTPUT);
    
    // WebSocket connection handler
    io.sockets.on('connection', function (socket) {
        
        console.log('client connected: '+ socket.id);
        board.digitalWrite(13, board.HIGH);
        
        socket.on('disconnect', function () {
            
            console.log('client disconnected: '+ socket.id);
            board.digitalWrite(13, board.LOW);
        });
    });
});
                     

If you followed the entire course this should not be a problem for you to build by now. You may however notice that there is a small problem with this program. Since there can be more than one visitor on our site we might turn off the light even though there still are users connected to the site. This is a bit sloppy so we should fix it.

💡 Exercise

Every-time a new uses visits your website, the LED should become a little brighter. The light bulb should dim again when a user leaves the site. If there are no users on the site the LED should be off.

Tip: You will need a counter to keep track on the amount of visitors your site has. You will also want to use analogWrite on a pin set to PWM to dim the light.

if you are having trouble you can download the solution for reference.

Conclusion

This chapter concludes this reader. This does however not mean that you are done! You should try to come up with a couple of experiments you wan to test to get more comfortable with this way of designing web applications. I would suggest you try to connect a joystick module to the socketServer. You could also use a thermistor, or relay, or motor, or...
The possibilities are endless.