Interfaces

Johnny 5

Johnny 5 is a javascript library that works with node. I want to use Node in my project(I have used Node.js to test many of my sensors using Neil's example code.)
Here is the process:
  • Install Node.js
  • NPM install Johnny5(npm install johnny-five)
  • Upload the StandardFirmata(in Arduino Examples) onto board
  • Create a script
  • Node run the script
  • Node setup webserver
  • View the webserver page generated by Node.js
  • The board works great. I will need to create a socket as in Neil's examples. This easily sends commands from the computer to the board. The script which runs the board is on the computer. I can see some advantages, but I need to find a way to send the commands back to the computer. One thing that I did not realize was that npm is local unless you say otherwise. Unlike install applications from the command line in other programs, npm install is local. Even though I had added a package on another project, I did not add to all projects. I need to npm install all dependencies.

    Processing

    I used processing in my input project: Input Devices

    Processing works very nicely with the Arduino, but I felt limited on the graphics.

    Python Applications

    I have used several of the example python applications to test components this year. I adapted Neil's Step Response RX TX to use in my final project. Final Project Documentations.

    Three.js

    I have spent most my time on this week's excersice playing with Three.js. The 3D library is great. I have an adapted code from one of the examples. A ball. I would like to play a simple game with an outside input.(A game similiar to Pong) I am struggling getting this to work. It has taken me a while to rap my head around Node.js. I can have Node.js act as the intermediate listening to both the webpage and the microcontroller.
    Still struggling to get the inputs right. Here is the javascript code for the game:

    Javascript + Firmata

    In my final project, I had my sensor board(a capacitor sensor) communicate with the computer through Node.js The Node.js script saved the state of the sensor to a file. That same file was opened by a different javascript running on a webpage. This allowed the sensor to continually update its state and a display to show this changes. This was my work around for not getting the socket to work. This works for the project, and may be better, since I could create a log. I would like to get the socket working in the future.

    WebRTC

    WebRTC has several features one of which is an API which will allow us to take an image. I would like to combine my project with it. I want my sensor device for my final project to trigger the computer app to take a picture. Example from HTML5Rocks:Tutorial
        //Example Code
            var video = document.querySelector('video');
            var canvas = document.querySelector('canvas');
            var ctx = canvas.getContext('2d');
            var localMediaStream = null;
    
        function snapshot() {
            if (localMediaStream) {
                ctx.drawImage(video, 0, 0);
                // "image/webp" works in Chrome.
                // Other browsers will fall back to image/png.
                document.querySelector('img').src = canvas.toDataURL('image/webp');
            }
        }
    
        video.addEventListener('click', snapshot, false);
    
        // Not showing vendor prefixes or code that works cross-browser.
        navigator.getUserMedia({video: true}, function(stream) {
            video.src = window.URL.createObjectURL(stream);
            localMediaStream = stream;
        }, errorCallback);
    
    
        

    Interfacing with Processing


    Purpose

    The microcontroller board is sending data. The goal is to take that data, read it in with the computer, and display it.
                 //Code based on SimpleRead Example in Processing
    //Edit by D Conner 2016
    
    
    import processing.serial.*;
    
    Serial myPort;  // Create object from Serial class
    int val;      // Data received from the serial port
    
    void setup()
    {
      size(1020, 400);
      String portName = Serial.list()[2];// Port 2 is Com 3 on my computer
      myPort = new Serial(this, portName, 9600);
      val =510;//The sensor has an average initial value of 510.(Max is 1024, so this is almost half.)
    }
    
    void draw()
    {
    
      if ( myPort.available() > 0) {  // If data is available,
        String r = myPort.readString();//Read in a string
    
        String[] outputValues = split(r, " = ");//The expected input is "Out = 'value'"
        if(outputValues.length>1){  //Ensure the data has the Out value
        if(outputValues[0].equals("out")){
    
           try {
          int n = Integer.parseInt(outputValues[1].trim());//Check to see if input is a integer.
            println(n);
            val = n;
           } catch(NumberFormatException e) {}
    
         }}
    }//If statement(port available)
      background(255);             // Set background to white
      if (val > 510) {              // If the value is greater than 510, color bar green
        fill(0,255,0);
        rect(510, 50, val-510, 100);// make a bar that is the magnitude of the strength
      }
      else {                       // If the value is less than 510, color bar red. Draw bar equal in magnitude.
        fill(255,0,0);
          rect(val, 50, 510-val, 100);
      }
    
    
    }
    
    
     

    Processing Code


    Explanation(Code used to read Hall Sensor)

  • Line 5: Import serial library into our program.
  • Line 7 & 8; Creat global variables for port and data recieved
  • Line 12: Set the size of the window.
  • L13:Find the name of the device plugged in. For me it was usually the third entry, i.e the [2] index
  • L15:Declare port and baud rate.
  • L16:Reference variable which represents the mid value of the sensor.
    The device reads from 0-1024. Maybe the mid value is low because of the Earth's magnetic field.
  • L18: The draw function is used by processing to draw to the window.
  • L21:Conditional statement to check if we are getting data.
  • L24:Read in the data to the variable r.
  • L25: The sensor is sending data as "Out: 510". The 510 number changes with the sensor. The code splits the string to get just the value(510 in this example.)
  • L26: Conditional to make sure there was some data.(probably unecessary.)
  • L27: Conditional to make sure the string started with the word "Out".
    This makes sure that the next item we read was intended.
  • L28-L32: Try statement makes sure that the read-in is a number.
  • L36: Sets the background to white.
  • L37-39: Draws a rectangle from the mid point to the right.
    The size of the rectangle depends on the magnitude of the signal above the 510 reference.
    The color of the bar is green.
  • L41-43:Draws a bar to the left, colored red, with magnitude equal to the difference below the 510 reference.
  • When the code is run from within Processing, the chart pops up and starts displaying.