Project 5: Programming a server

While this fablab is more about fabrication and programming, I suddenly had to program my first server to send the values from Arduino (Serial Port) to a (local) web page.

This caused me very long delays and thus I did not want to exclude it from my documentation. In the end I managed to create four example websites, runnable on my mobile, so I could really simulate an app using my FSR sensor.

Below, I will briefly explain the steps I took, without showing too much code.

  1. Using Johnny-Five library
    When I searched the web, I quickly came to this stackoverflow question on how read Arduino’s Serial Port values from inside a script. It lead me to the excellent Johnny-Five library who seemed specialized in this. With very few lines of code, and installing NodeJS (which I had used before), I could now read my Arduino. I first tried their Hello-World example, but then switched to this example to read analog pins from the FSR.
  2. Using NodeJS in a real application
    So, the values were in a script that I could run in the command line (using node <filename>.js). But how could I connect this script to a web page? I started to read all about NodeJS and creating servers. I started with this short NodeJS book, but I stopped with it halfway as I didn’t see a use case for my scenario yet.

    Luckily, fellow-student Hugo gave me the golden tip of this very basic, step-by-step tuturial on how to slowly integrate NodeJS into a real application. With this tutorial I came to a point where I could indeed send the values from the script (server) to the webpage (client) on my localhost:port.

  3. Finding out about server possibilities: ExpressJS and Socket.IO
    I first used ExpressJS, which worked fine, but while following the tutorial I realized that I had to be able to send values synchronized or real-time. This was because I wanted to update the values in the client at any point in time from the server, not only just when the client performed an action such as connecting. This is why I used Socket.IO which allows you to create a WebSocket to do just that.
  4. Loading CSS, Images and other resources in the hosted local webpage
    Now that the values arrived in my webbrowser, it was time to set up my first example. I had something very simple in mind: a circle that would grow its radius dynamically, based on the pressure on the FSR.

    However, as I had built this circle initially using CSS, something terrible went wrong: the server that was running did not display the external resources on the screen. I had to find a way to load external resources. I found out that I firstly had to initialize Arduino, and then start up the server, instead of the other way around. Also, Verena borrowed parts of her code to realize this:

    // Loading the index file . html displayed to the client
    var server = http.createServer(function(req, res) {
        pathname = url.parse(req.url).pathname;
        if(pathname.indexOf(".css") > 0) { 
            fs.readFile('./public/css/style.css', 'utf-8', function(error, content) {
                res.writeHead(200, {"Content-Type": "text/css"});
         } else if(pathname.indexOf(".jpg") > 0) {
            var img = fs.readFileSync('./public/images/family.jpg');
            res.writeHead(200, {'Content-Type': 'image/jpg'});
            res.end(img, 'binary');
            /*fs.readFile('./public/images/family.jpg', 'utf-8', function(error, content) {
                res.writeHead(200, {"Content-Type": "image/jpeg"});
            });  */ 
        } else {
            fs.readFile('./public'+pathname+'.html', 'utf-8', function(error, content) {
                res.writeHead(200, {"Content-Type": "text/html"});
  5. Running local website on my iPhone
    I had already given up the possibility of this, since online tutorials did not work. Then Subbu saved me this time, telling me I had to set up a hotspot on my phone, connect my computer to it, find my new IP address, and connect to that address in my code, instead of the localhost. It worked perfectly!

Using all these tips from all these persons, I created 4 working examples, including a pressure circle, google maps zoom levels, copying an image using pressure and filling a pressure progress bar. I showed the working of the pressure circle in the images below.

If there is one thing I have realized after all of this, it is that the Internet is not enough: my friends and colleagues really helped me out this time with concrete, good examples. That’s why I made the decision: after this project, I will share all code and resources online.

Tagged with: , , ,
Publié dans Uncategorized