Skip to content
Snippets Groups Projects
Interface & Application Programming.md 11 KiB
Newer Older
Mitalee Parikh's avatar
Mitalee Parikh committed
#### [notes](http://academy.cba.mit.edu/classes/interface_application_programming/index.html) + [video](https://vimeo.com/412495586)

Mitalee Parikh's avatar
Mitalee Parikh committed
This week is about writing an application that can be interfaced by a user with an external input &/or output device.    
Mitalee Parikh's avatar
Mitalee Parikh committed

Mitalee Parikh's avatar
Mitalee Parikh committed
Software programming is completely new for me. So I'm going to try briefly whatever I can.  
Mitalee Parikh's avatar
Mitalee Parikh committed

Mitalee Parikh's avatar
Mitalee Parikh committed
Processing
---
Mitalee Parikh's avatar
Mitalee Parikh committed
I start with processing as suggested by Steven.  

A good way to learn about the what and why of 'Processing' is this essay ['A Modern Prometheus'](https://medium.com/processing-foundation/a-modern-prometheus-59aed94abe85) by the initiators of the project.  
Processing is basically a program that connects graphic design to computer science. It has a set of elements for creating visual design with code. The processing website has a good set of [video tutorials that covers the basics](https://processing.org/tutorials/).  
Mitalee Parikh's avatar
Mitalee Parikh committed
Here is a screenshot of a sketch I wrote while learning the basics of the code structure, the void setup and draw, the-coordinate system, and use simple visual elements - shape, colour in greyscale and rgb, interact with the mouse, conditional statements...   
Mitalee Parikh's avatar
Mitalee Parikh committed
![basics](./images/app/sketches.gif)  

Mitalee Parikh's avatar
Mitalee Parikh committed
The processing PDE (processing development environment) looks very similar to the Arduino IDE (integrated Development Environment). I learnt that the Arduino Env was inspired by the Processing Env, and in the process learnt how python and other coding systems are all related and are developed from each other.  
![coding systems](./images/app/p3.png)  
Mitalee Parikh's avatar
Mitalee Parikh committed

Mitalee Parikh's avatar
Mitalee Parikh committed
After playing around with some examples from the P3 library, I really like the program, there are some features like tweak (that visually helps tweak variable values), the error message (that clearly states the error in the code, instead of giving generic error 403292348 that you don't really understand). I look forward to using a lot of [libraries](https://processing.org/reference/libraries/) and the the debugger () that really makes it easy and fun to use.  
Mitalee Parikh's avatar
Mitalee Parikh committed

Mitalee Parikh's avatar
Mitalee Parikh committed
I found that keeping the [Programming reference](file:///Applications/Processing.app/Contents/Java/modes/java/reference/index.html) open is quite useful while making a sketch from scratch.  
Mitalee Parikh's avatar
Mitalee Parikh committed

Mitalee Parikh's avatar
Mitalee Parikh committed
Software Switch + hardware LED  using Processing & Arduino IDE  
---
For this week's assignment I do a simple virtual switch. A button made in processing will control a hardware LED connected to Arduino. With the help of [this guide](https://tutorial.cytron.io/2019/07/26/simple-gui-to-control-led-on-arduino-with-processing/).  
Mitalee Parikh's avatar
Mitalee Parikh committed

The code for Arduino is [here](./images/app/LED_GUI_A.zip). Upload it to an Arduino Uno which has an external LED & resistor connected to Pin 3.  
To check it you can open the serial monitor, and on typing in 't' you can switch on and switch off the LED like so:  
<iframe
  src="http://academany.fabcloud.io/fabacademy/2020/labs/barcelona/students/mitalee-parikh/app-1.mp4">  
</iframe>  

The code for Processing is [here](./images/app/LED_GUI_P.zip).  
You need to mention the port of the Arduino in the processing sketch to interface them together. You can find the port name by typing in this in the terminal:  
```
ls /dev/tty.usb*
Mitalee Parikh's avatar
Mitalee Parikh committed
```   
Mitalee Parikh's avatar
Mitalee Parikh committed
This lists the serial ports connected on Mac OS system. Run the P3 program, and a virtual button will pop up.  
![](./images/app/ss.jpg)  

You can control the external LED through the virtual button like so:  
<iframe
  src="http://academany.fabcloud.io/fabacademy/2020/labs/barcelona/students/mitalee-parikh/app-2.mp4">  
</iframe>  

Mitalee Parikh's avatar
Mitalee Parikh committed
Next, I use the hello board I made in electronic design week to interface with a software switch.
This board has:  
Mitalee Parikh's avatar
Mitalee Parikh committed
LED on pin 8 (PB2)    
Button on pin 7 (PA7)  
Tx on pin 0   
Rx on pin 1   
Mitalee Parikh's avatar
Mitalee Parikh committed
![](./images/app/hello.jpg)  
Mitalee Parikh's avatar
Mitalee Parikh committed

Mitalee Parikh's avatar
Mitalee Parikh committed
First step is to program the hello board using FabISP.
Mitalee Parikh's avatar
Mitalee Parikh committed
![](./images/app/isp.jpg)  
Mitalee Parikh's avatar
Mitalee Parikh committed

In terminal check if the board is detected using avrdude.  
Mitalee Parikh's avatar
Mitalee Parikh committed
![](./images/app/avrdude.jpg)  
Mitalee Parikh's avatar
Mitalee Parikh committed

The code:  
Mitalee Parikh's avatar
Mitalee Parikh committed
```
#include <SoftwareSerial.h>
Mitalee Parikh's avatar
Mitalee Parikh committed
#define rx 1
#define tx 0
Mitalee Parikh's avatar
Mitalee Parikh committed

Mitalee Parikh's avatar
Mitalee Parikh committed
#define led 8                         // declare variables
SoftwareSerial mySerial(rx,tx);
char val;                             // data received from serial port
Mitalee Parikh's avatar
Mitalee Parikh committed

void setup() {
Mitalee Parikh's avatar
Mitalee Parikh committed
  // put your setup code here, to run once:
  pinMode(led, OUTPUT);               // configure led pin as output
  mySerial.begin(9600);               // set serial port to 9600 bps
Mitalee Parikh's avatar
Mitalee Parikh committed
}

void loop() {
Mitalee Parikh's avatar
Mitalee Parikh committed
  if (mySerial.available()){
    // If data is available to read,
    val = mySerial.read();            // read it and store it in val

    if (val == '1'){                  // If 1 was received
      digitalWrite(led, HIGH);        // turn the LED on
    } else if (val == '0'){
      digitalWrite(led, LOW);         // otherwise turn it off
    }
    delay(10); // Wait 10 milliseconds for next reading
  }
}
```

After compiling and uploading using programmer with these settings, disconnect the FabISP.  
Mitalee Parikh's avatar
Mitalee Parikh committed
![](./images/app/settings.jpg)  
Mitalee Parikh's avatar
Mitalee Parikh committed

Next, plug in the hellp board with ftdi wire, I will use a diy ftdi board to do this.  
Mitalee Parikh's avatar
Mitalee Parikh committed
![](./images/app/ftdi.jpg)
Mitalee Parikh's avatar
Mitalee Parikh committed

Change the port to serial port in the 'Tools' drop down and open the serial monitor.   
On input 1 the LED on the board should blink and on input 0, LED should switch off.  
Mitalee Parikh's avatar
Mitalee Parikh committed
<iframe
  src="http://academany.fabcloud.io/fabacademy/2020/labs/barcelona/students/mitalee-parikh/app-1.mp4">
</iframe>    
Mitalee Parikh's avatar
Mitalee Parikh committed

Now that the serial connection is working, open Processing.

The code:  
```
import processing.serial.*;

Serial myPort;              // Create object from Serial class
int ledState = 0;           // start with led OFF
int r = 0;                  // start with black (led OFF)
int g = 0;
int b = 0;

void setup()
{
  size(200,200);            //make our canvas 200 x 200 pixels big
  myPort = new Serial(this, "/dev/cu.usbserial-14310", 9600);
}

void draw() {
  background(255);           // set background to white
  fill(r,g,b);
  rect(25, 25, 150, 150);
}

void mouseReleased(){
  if (ledState == 0){
    ledState = 1;            // toggle led state
    r = 0;                   // set fill color to black
    g = 0;
    b = 0;
    myPort.write('1');        //send a 1
    println("1");   
  } else {                   //otherwise
    ledState = 0;
    r = 255;                 // set fill color to golden yellow
    g = 184;
    b = 28;
    myPort.write('0');       //send a 0
    println("0");
Mitalee Parikh's avatar
Mitalee Parikh committed
  }
Mitalee Parikh's avatar
Mitalee Parikh committed
}
```

Check the serial port name in the code. On running, the GUI serial will show the rectangular virtual switch. On clicking it, the LED of the hello board should switch on and off.  
Mitalee Parikh's avatar
Mitalee Parikh committed
<iframe
  src="http://academany.fabcloud.io/fabacademy/2020/labs/barcelona/students/mitalee-parikh/app-2.mp4">
</iframe>     
Mitalee Parikh's avatar
Mitalee Parikh committed

Hardware Switch + Software LED  using Processing & Arduino IDE  
---
I will use the same hello board which has a push button to trigger colour on a "virtual led" on the serial screen.  
The hello board has the same pins stated above:  
LED on pin 8 (PB2)    
Button on pin 7 (PA7)  
Tx on pin 0   
Rx on pin 1   

This time the code for Arduino:
```
#include <SoftwareSerial.h>
#define rx 1
#define tx 0
#define pb 7

// declare variables
SoftwareSerial mySerial(rx,tx);
int pbState = 0;

void setup() {
  // put your setup code here, to run once:
  pinMode(pb, INPUT_PULLUP);  // configure pb pin as input
  mySerial.begin(9600);       // initialize serial port
}

void loop() {
  // put your main code here, to run repeatedly:
  if (digitalRead(pb) == LOW){  // pb pressed
    delay(10);    // switch debounce
    while (digitalRead(pb) == LOW); // wait for pb release
    if (pbState == 0){  // check current state
      pbState = 1;      // update to new state
    }
    else if (pbState == 1){ // check current state
      pbState = 0;    // update pb state
    }
    mySerial.print(pbState);  // output current pb state
Mitalee Parikh's avatar
Mitalee Parikh committed
  }
Mitalee Parikh's avatar
Mitalee Parikh committed
}
```
Mitalee Parikh's avatar
Mitalee Parikh committed

Mitalee Parikh's avatar
Mitalee Parikh committed
After flashing this, check the serial communication again. Plug out FabISP, plug in ftdi, change to serial port in tools dropdown and open serial monitor. This time, on pressing the pushbutton on the hello board, the serial monitor should return a 0 or a 1.  
Mitalee Parikh's avatar
Mitalee Parikh committed
<iframe
  src="http://academany.fabcloud.io/fabacademy/2020/labs/barcelona/students/mitalee-parikh/app-3.mp4">
</iframe>      
Mitalee Parikh's avatar
Mitalee Parikh committed

After checking this, open processing again and the code:  

```
import processing.serial.*;

Serial port;                             // Create object from Serial class
int val = '0';                           // Data received from the serial port, start black

void setup() {
  size(200, 200);
  frameRate(10);
  // Open the port that the board is connected to and use the same speed (9600 bps)
  port = new Serial(this, "/dev/cu.usbserial-14310", 9600);
}

void draw() {
  if (port.available() > 0) {         // If data is available,
    val = port.read();                   // read it and store it in val
Mitalee Parikh's avatar
Mitalee Parikh committed
  }
Mitalee Parikh's avatar
Mitalee Parikh committed
  background(255);                       // Set background to white
  if (val == '0')  {                       // If the serial value is 0,
    fill(0);                             // set fill to black
  } else if (val == '1'){                               // If the serial value is not 0,
    fill(255,184,28);                           // set fill to golden yellow
  }
  rect(50, 50, 100, 100);
Mitalee Parikh's avatar
Mitalee Parikh committed
}
```

Mitalee Parikh's avatar
Mitalee Parikh committed
Run this after changing to the correct port name and then the pushbutton should be able to change the screen colour.
Mitalee Parikh's avatar
Mitalee Parikh committed
To give the effect of led I made it black and yellow.  
Mitalee Parikh's avatar
Mitalee Parikh committed
<iframe
  src="http://academany.fabcloud.io/fabacademy/2020/labs/barcelona/students/mitalee-parikh/app-4.mp4">
</iframe>      
Mitalee Parikh's avatar
Mitalee Parikh committed

This way, hardware and virtual input outputs can be used together.
Mitalee Parikh's avatar
Mitalee Parikh committed

Mitalee Parikh's avatar
Mitalee Parikh committed
Code Files
---
**Virtual switch + hardware LED**
[Arduino Code](./images/app/t44_ledCtrl.zip)  
[Processing Code](./images/app/t44_ledCtrl_pde.zip)  

**Hardware pushbutton + virtual LED**
[Arduino Code](./images/app/t44_pbToggle.zip)  
[Processing Code](./images/app/t44_pbToggle_pde.zip)  

Mitalee Parikh's avatar
Mitalee Parikh committed
References
---
Mitalee Parikh's avatar
Mitalee Parikh committed
[Processing story](https://medium.com/processing-foundation/a-modern-prometheus-59aed94abe85)  
[Processing tutorials](https://processing.org/tutorials/)  
[connecting Arduino & Processing with this sparkfun guide](https://learn.sparkfun.com/tutorials/connecting-arduino-to-processing/all#introduction)  
Mitalee Parikh's avatar
Mitalee Parikh committed
[Arduino + Processing](https://processing.org/tutorials/electronics)   
[sparkfun tutorial](https://learn.sparkfun.com/tutorials/connecting-arduino-to-processing/all)  
Mitalee Parikh's avatar
Mitalee Parikh committed
[Radar Project](https://howtomechatronics.com/projects/arduino-radar-project/)  
[with BT module](https://randomnerdtutorials.com/getting-started-with-mit-app-inventor-2-and-arduino/)  
[MIT app inventor + arduino](https://howtomechatronics.com/tutorials/arduino/how-to-build-custom-android-app-for-your-arduino-project-using-mit-app-inventor/)  
[MIT app inventor](https://appinventor.mit.edu/)  
[ai2](http://ai2.appinventor.mit.edu/)  
[with python + tk](http://arduinolearning.com/code/led-control-with-arduino-and-python-tkinter.php)  
[this doc](http://archive.fabacademy.org/fabacademy2017/fablabsingapore/students/216/exercise16.html)  
[and this](http://fab.academany.org/2020/labs/singapore/students/noel-kristian/exercise12.html)  
[and this](https://eatpoopandgrowstrong.github.io/FDFAB/hub/interfacingandapplicationsprogramming.html)  
[Open Processing](https://openprocessing.org/)   
[D3js](https://d3js.org/)  
[P5js](https://p5js.org/)