week14

Recitation: https://vimeo.com/823497767 Review: https://vimeo.com/825611280

Slides: http://academy.cba.mit.edu/classes/interface_application_programming/index.html

Files: color picker arduino sketch color picker processing sketch

Group assignment:
    Compare as many tool options as possible.
    Document your work on the group work page and reflect on your individual page what you learned.

Individual assignment
    Write an application that interfaces a user with input and/or output device(s) on a board that you made.

Learning outcomes

Implement a Graphical User Interface (GUI) using programming and explore protocols to communicate with an MCU board.

Have you answered these questions?

Linked to the group assignment page.
Documented your process.
Explained the GUI that you made and how you did it.
Explained how your application communicates with your MCU board.
Explained any problems you encountered and how you fixed them.
Included original source code (or a screenshot of the app code if that's not possible).
Included a ‘hero shot’ of your application running & communicating with your board.

Processing to Arduino

I will make a demonstration sketch to demonstate communication beetween a Processing user interface and a rgb led strip connected to an arduino. Communication will be made thank to serial communication.

Read data from serial port on arduino side

Arduino will wait for serial message on the form “r,g,b” Those values are then used to set the color of an rgb strip using Adafruit Neopixel library. The complete code is below.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45


#include <Adafruit_NeoPixel.h>
#define DATA_PIN 3
#define NUM_LEDS 5

Adafruit_NeoPixel led_strip(NUM_LEDS, DATA_PIN, NEO_GRB + NEO_KHZ800);

void setup() {

  // put your setup code here, to run once:
  Serial.begin(9600);
  Serial.println("Please send RGB values separated by comas, then ENTER");
  led_strip.begin();

  for(int i = 0; i < NUM_LEDS; i++){
      led_strip.setPixelColor(i, led_strip.Color(0,0,0));
      led_strip.show();
  }
}


void loop() {

  if(Serial.available()){
    //int r = Serial.getChar();
    int r = Serial.parseInt();
    int g = Serial.parseInt();
    int b = Serial.parseInt();

    // look for end of line
    if (Serial.read() == '\n') {
      Serial.print("received values:");
      Serial.print(r);
      Serial.print(",");
      Serial.print(g);
      Serial.print(",");
      Serial.println(b);

      for(int i = 0; i < NUM_LEDS; i++){
          led_strip.setPixelColor(i, led_strip.Color(r,g,b));
      }

      led_strip.show();
    }
  }
}

Send data to serial port from processing

Processing open serial communication with arduino with

1
2


try {myPort = new Serial(this, Serial.list()[0], 9600);}
catch(RuntimeException e){println("Can't open Serial Port");}

where Serial.list()[0] return the name of the first available com port but we can explicitly give the name of the port instead.

We load an image and retrieve the rgb value of the pixel under the mouse cursor with “mouseX” and “mouseY”. This value is send to arduino to be displayed by the led strip.

Complete code below:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69



import processing.serial.*;

Serial myPort;

PImage background_img;  // Declare variable "a" of type PImage
float circle_size_ratio = 0.1;
String previous_message = "";


void setup() {
 size(300, 300);
 surface.setResizable(true);
  
 //background_img = loadImage("color_wheel.png");  // Load the image into the program  
 background_img = loadImage("colorfull_night.jpg");
 //background_img = loadImage("colorfull_image.jpg");
 delay(100);
 
 surface.setSize(background_img.width,background_img.height);
 surface.setResizable(false);
 
 // List all the available serial ports:
  println("Serial ports available:");
  printArray(Serial.list());

  try {myPort = new Serial(this, Serial.list()[0], 9600);}
  catch(RuntimeException e){println("Can't open Serial Port");}

}

void draw() {
  background(0);

  //====================================================
  // Loading image and get pixel color at mouse position
  //====================================================
  image(background_img, 0, 0,width,height);
  
  color c = background_img.get(mouseX,mouseY);
  
  int r = int(red(c));
  int g = int(green(c));
  int b = int(blue(c));
  //println("RGB color:",r,g,b);
  
  //====================================================
  // Magnifier effect
  //====================================================
  int circle_size = int(circle_size_ratio * background_img.width);
  
  fill(c,200); //second parameters is transprency
  ellipse(1.*mouseX,1.*mouseY,  circle_size, circle_size);
  
  //====================================================
  // Send formated message
  //====================================================
  String message = r + "," + g + "," + b + "\n";
  println(message);
  
  if(message != previous_message){
      try{myPort.write(message);}
      catch(RuntimeException e){println("Can't send data");}
  }
  
  previous_message = message;
  
  delay(20);
}

Here is the video of the application running

Arduino to Processing

Now we will use data from a sensor connected to arduino to make react an processing app. Once again, communication will be made thank to serial communication. The processing app will display a sun or a moon depending of a potentiometer position or the intensity of light on a photoresistor. It simply load a tall image containing both sun and moon separated by a blue to black color gradient.

Testing processing app

First we test the app mapping mouseX position to sun-moon position.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


PImage background_img;  // Declare variable "a" of type PImage

int image_height  = 1800;

void setup() {
 size(640, 480);
 background_img = loadImage("sunrise.png");  // Load the image into the program  
}

void draw() {
  background(0.0);

  float r1 = map(mouseX, 0, width, 0, image_height-480);
  
  println(r1);
  image(background_img, 0, -int(r1)); 
}

Listen for serial messages from processing

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36



import processing.serial.*;

Serial myPort;  // Objet Serial pour communiquer avec Arduino
String sensorValue;
PImage background_img;  // Declare variable "a" of type PImage

int image_height  = 1800;


void setup() {
  size(640, 480);
  background_img = loadImage("sunrise.png");  // Load the image into the program  
   
  try {myPort = new Serial(this, Serial.list()[0], 9600);}
  catch(RuntimeException e){println("Can't open Serial Port");}
}

void draw() {
  background(0.0);

  if (myPort.available() > 0) {
    sensorValue = myPort.readStringUntil('\n'); // Read until reciving end of line symbol
    if (sensorValue != null) {
      int sensorValue_parsed = int(sensorValue.trim()); //convert string message to int
      println("Sensor value: " + sensorValue_parsed);
    }
  }

  //float r1 = map(mouseX, 0, width, 0, image_height-480);
  float r1 = map(sensorValue_parsed, 0, 1023, 0, image_height-480);
  
  println(r1);
  image(background_img, 0, -int(r1)); 

}

Sending data from Arduino

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19



int sensor_value = 0; //from 0 to 1023
int prev_sensor_value = 0;
int threshold = 5; // avoid resending data in case of small fluctuation 

void setup() {
  Serial.begin(9600); // Initialise la communication série à 9600 bauds
}

void loop() {
  int sensor_value = analogRead(A0); 
  
  //send value only if different from previous one to avoid flooding communication
  if(abs(prev_sensor_value - sensor_value) > threshold){
  Serial.println(sensor_value); // Send value
  }
  prev_sensor_value = sensor_value;
  delay(200); //
}