Home Classes Final Project About Me

WEEK 12: INTERFACE AND APPLICATION PROGRAMMING


Objectives

Group assignment:
  • compare as many tool options as possible
  • Individual assignment:
  • write an application that interfaces with an input and/or output device that you made

  • Have I...?

  • Described my process using words/images/screenshots? YES
  • Explained the the GUI that I made and I you did it? YES
  • Outlined problems and how I fixed them? YES
  • Included original code? YES

  • The plan for this week is to create a simple application that could read water flow data sent from the Satshakit I made during Embedded Programming Week and translate them in graphics. I decide for the moment to use a Sasthakit because I can treat it as an Arduino Uno. During this week I can already start working on what will be my final project and for that reason I decided to focus my attention on JavaScript and on a Node.js framework suggested me by my instructor Matteo. I never programmed in JavaScript so I predict it will be hard and I have to start from the base!
    Node.js is an open-source, cross-platform JavaScript run-time environment that executes JavaScript code server-side. Via
    Node.js, however, can't be used alone: it needs other stuffs to work with other hardware components. For this reason integrate Johnny Five and PubNub to Node.
    Johnny-Five is the JavaScript Robotics & IoT Platform. Via

    PubNub is a global Data Stream Network (DSN) and realtime infrastructure-as-a-service (IaaS) company based in San Francisco, California. The company makes products for software and hardware developers to build realtime web, mobile, and Internet of Things (IoT) applications. Via
    The "chain" for this weekly assignment is infact somthing like that:
    Sensor --> My Board (with Firmata) --> Johnny Five --> PubNub --> EON (PubNub's framework for dynamic charts)

    SETTING UP FRAMEWORKS AND SATSHAKIT

    My instructor Matteo suggested me this interesting tutorial that explains how to interface an hardware with web in real-time. For this week I decided to use my satshakit I made during Embedded Programming Week because I can treat it as an Arduino Uno.
    Yes, I know, it's not a my own board. But this week I want to focus only on the app. I will create a new board next week for Networking and Communications and I will add here that board next time. For the moment I only create a simple support board with some traces in order to add some available VCC and GND pins.




    Infact, in order to interface with the app, I need to flash on satshakit the Firmata library from Arduino IDE. So I clicked on File - Examples - Firmata - StandardFirmata and I uploaded the code to the satshakit with my programmator.
    The Firmata library implements the Firmata protocol for communicating with software on the host computer. This allows you to write custom firmware without having to create your own protocol and objects for the programming environment that you are using. Via
    Next, I installed all softwares I need. First of all I installed Node.js downloading installer package from the official website. Than other software from terminal commands:
    sudo npm install johnny-five
    sudo npm install pubnub
    sudo npm install eon-chart --save
    I also created a new PubNub account inside its official website.

    A JS FILE TO READ SERIAL DATA FROM SATSHAKIT

    As first thing I decided to create a JavaScript file that could read data from my Satshakit and print them in a terminal window. I decided to use JavaScript because using this language I could create a dynamic website that could be useful for my final project.
    I have take a look at example's page in Johnny Five site, searching a simple code already optimized for my water flow sensor but I didn't find anything. So I decided to treat it as a generic analog sensor and I found a comprehensive documentation at this page.
    So I created a new dario.js file containing the following code:
          
    var five = require("johnny-five");
    var board = new five.Board();
    
    board.on("ready", function() {
      console.log('ready');
      var sensor = new five.Sensor("A0");
      
     sensor.on('data', function() {
        console.log(this.value);
      });
    }); 
          
          
    I also connected my sensor to the A0 pin and the FDTI cable to my Satshakit
  • Black - GND
  • Red - VCC
  • Orange - Tx (to microcontroller's Rx, PD0)
  • Yellow - Rx (to microcontroller's Tx, PD1)
  • and I launched the dario.js file from terminal going to its folder and send node dario.js. The answer I had was this one:


    I say that my .js file could interface itself with my Satshakit.

    INTEGRATE PUBNUB IN MY JS

    After that I integrate PubNub in my .js file, following the tutorial I linked before (obviusly modifying sub and pub keys with mine own ones). After integrate code found there, terminal couldn't launch it as did before. This happened because I didn't initialize PubNub in my file using PubNub = require('pubnub'); (as suggested by Simone referring to this tutorial). Correcting this missing, terminal could launch again my .js file and read data from serial port also with PubNub integration.

    THE HTML PAGE WITH PUBNUB AND DYNAMIC EON CHART

    So, as last part, I build an HTML page to traduce data recived from serial port in a dynamic chart using PubNub's EON. I decided to use the Realtime Spline Chart. But after some personalization for my code, the result is that the chart is always to 0, even if my serial print data properly.


    For the other graphic parts I added also Bootstrap and FlatUI.
    I notice that I forgot to include function publish() in my code, with setInterval(publish, 1000); that publish data every second. Adding these voices the result is that my chart update itself every second as I said but it continue read something different to data from serial port.


    I also added time and date to the bottom of the page and I added history: true, in my HTML to save previous data. After some review, I also notice that I didn't defined any variables to explain what I recive from serial port. I modified them and this is the result. At this point, my serial monitor read data (something) from the sensor and transmit them to the chart, but it isn't the value I want. Infact during previous week I used the attachInterrupt function, thing I should include in my JavaScript code to let my chart works as I want. Probably do I have to use Break and Continue function of JavaScript or something else like this one? I must do this integration. But for now I share my code, files and the last version of my water flow chart. You can have a preview clicking Here.


    waterflow.js

          
          
          
          

    waterflow.html

          
          
          
          
          
    --> Download week12.zip (ZIP Archive, 134 KB)

    The new board

    As I said, for this weekly assingment I used a Sathsakit and not a my own board. So I tried again the same code with a new board created for Week 13. You can find download links and other information about this board (ready to read data from my water flow sensor and print them via serial communication) at Week 13 page.


    Useful Links

  • Firmata Library
  • Interact With the Web in Real-time Using Arduino, Firebase and Angular.js
  • Firebase IoT Tutorial
  • Installing Python and PySerial
  • Python HTTP Requests for Humans™
  • Node.JS V4 Publish/Subscribe Tutorial for Realtime Apps
  • Visualizing Real-Time Arduino Sensor Data With Johnny-Five and PubNub EON.js
  • PubNub JavaScript V4 SDK 4.20.2