Skip to content

15. Interface and application programming

This week I worked on writing an application that interfaces a user with an input and/or output device that you made. [Reference]

Group assignment

This week of group assignment, We try to compare as many tool options as possible.. Click HERE to see more detail of the group assignment.

Individual assignment

Heroshot

Processing

For doing this week assignment, I used Processing for coding the interfaces.

Touch sensor (Test board)

In the beginning, I used the test board with the touch sensor first to test out the code.

And I used some example code in the 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
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
/**
 * Simple Read
 * 
 * Read data from the serial port and change the color of a rectangle
 * when a switch connected to a Wiring or Arduino board is pressed and released.
 * This example works with the Wiring / Arduino program that follows below.
 */


import processing.serial.*;

Serial myPort;  // Create object from Serial class
int val;      // Data received from the serial port

void setup() 
{
  size(200, 200);
  // I know that the first port in the serial list on my mac
  // is always my  FTDI adaptor, so I open Serial.list()[0].
  // On Windows machines, this generally opens COM1.
  // Open whatever port is the one you're using.
  String portName = Serial.list()[0];
  myPort = new Serial(this, portName, 9600);
}

void draw()
{
  if ( myPort.available() > 0) {  // If data is available,
    val = myPort.read();         // read it and store it in val
  }
  background(255);             // Set background to white
  if (val == 0) {              // If the serial value is 0,
    fill(0);                   // set fill to black
  } 
  else {                       // If the serial value is not 0,
    fill(204);                 // set fill to light gray
  }
  rect(50, 50, 100, 100);
}



/*

// Wiring / Arduino Code
// Code for sensing a switch status and writing the value to the serial port.

int switchPin = 4;                       // Switch connected to pin 4

void setup() {
  pinMode(switchPin, INPUT);             // Set pin 0 as an input
  Serial.begin(9600);                    // Start serial communication at 9600 bps
}

void loop() {
  if (digitalRead(switchPin) == HIGH) {  // If switch is ON,
    Serial.write(1);               // send 1 to Processing
  } else {                               // If the switch is not ON,
    Serial.write(0);               // send 0 to Processing
  }
  delay(100);                            // Wait 100 milliseconds
}

*/

 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
/**
 * Mouse Functions. 
 * 
 * Click on the box and drag it across the screen. 
 */

float bx;
float by;
int boxSize = 75;
boolean overBox = false;
boolean locked = false;
float xOffset = 0.0; 
float yOffset = 0.0; 

void setup() {
  size(640, 360);
  bx = width/2.0;
  by = height/2.0;
  rectMode(RADIUS);  
}

void draw() { 
  background(0);

  // Test if the cursor is over the box 
  if (mouseX > bx-boxSize && mouseX < bx+boxSize && 
      mouseY > by-boxSize && mouseY < by+boxSize) {
    overBox = true;  
    if(!locked) { 
      stroke(255); 
      fill(153);
    } 
  } else {
    stroke(153);
    fill(153);
    overBox = false;
  }

  // Draw the box
  rect(bx, by, boxSize, boxSize);
}

void mousePressed() {
  if(overBox) { 
    locked = true; 
    fill(255, 255, 255);
  } else {
    locked = false;
  }
  xOffset = mouseX-bx; 
  yOffset = mouseY-by; 

}

void mouseDragged() {
  if(locked) {
    bx = mouseX-xOffset; 
    by = mouseY-yOffset; 
  }
}

void mouseReleased() {
  locked = false;
}

Here is the result: I don’t mean it to blink. However, it works.

Arduino IDE Code:

 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
int inputPin = 5; // Input sensor pin number
int outputPin = 4;
int outputPin2 = 2;

void setup() {
  pinMode(inputPin, INPUT); // Set pin mode (INPUT / OUTPUT)
  pinMode(outputPin, OUTPUT); // Set pin mode (INPUT / OUTPUT)
  pinMode(outputPin2, OUTPUT); // Set pin mode (INPUT / OUTPUT)
  Serial.begin(9600); // sets the data rate in bits per second (baud) for serial data tranmission
}

void loop() {
  int inputValue = analogRead(inputPin); // read inputPin analog signal (0-1023)
//  Serial.write(inputPin);
  if (inputValue != 0){
    analogWrite(outputPin, 255);
    analogWrite(outputPin2, 0);
    Serial.print(0);
  } else {
    analogWrite(outputPin2, 255);
    analogWrite(outputPin, 0);
  }

  delay(100);
}

Processing Code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import processing.serial.*;

Serial myPort;  // Create object from Serial class

color currentColor;


void setup() {
  size(640, 360);
  String portName = Serial.list()[0];
  myPort = new Serial(this, portName, 9600);
}

void draw() {

  if ( myPort.read() > 0) {  // If data is available,
    currentColor = color(255);
  } else {
    currentColor = color(0);
  }

  background(currentColor);
}

Touch sensor (Own board)

After the test board is success, I worked on my own ESP32 board. This board is made for my final project. Then I test the interface program with it.

And it works the same.

Arduino IDE Code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
int inputPin = 14; // Input sensor pin number

void setup() {
  pinMode(inputPin, INPUT); // Set pin mode (INPUT / OUTPUT)
  Serial.begin(115200); // sets the data rate in bits per second (baud) for serial data tranmission
}

void loop() {
  int inputValue = analogRead(inputPin); // read inputPin analog signal (0-1023)
//  Serial.write(inputPin);
  if (inputValue != 0){
    Serial.print(1);
  }

  delay(100);
}

Processing Code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import processing.serial.*;

Serial myPort;  // Create object from Serial class

color currentColor;


void setup() {
  size(640, 360);
  String portName = Serial.list()[0];
  myPort = new Serial(this, portName, 115200);
}

void draw() {

  if ( myPort.read() > 0) {  // If data is available,
    currentColor = color(255);
  } else {
    currentColor = color(0);
  }

  background(currentColor);
}

How it works?

In Arduino IDE: If the touch sensor detects something, It will send ‘1’; If no, then do nothing.

In Processing: If receiving any value, make the background white; If no, then make the background black.

Control LED

Then I also try to use the interface to control the LED.

Here is the result: It works. ^^

Arduino IDE Code:

 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
70
71
72
73
74
75
76
77
78
79
80
const int button = 2;
const int led =  4;

const int unit = 100;   // base time unit for morse code, smaller is faster
const int dot = unit; // same as dit (.)
const int dash = unit * 3;  // same as dah (-)
const int intra_char_space = unit;  // the gap between dits and dahs within a character
const int inter_char_space = unit * 3;  // the gap between the characters of a word
const int word_space = unit * 7;  // the gap between two words

void setup() {
  pinMode(button, INPUT); // Set pin mode (INPUT / OUTPUT)
  pinMode(led, OUTPUT); // Set pin mode (INPUT / OUTPUT)
  Serial.begin(9600); // sets the data rate in bits per second (baud) for serial data tranmission
}

// functions of breathing light

void breathing() {
  for (int i = 0; i < 255; i++) {
    analogWrite(led, i);
    delay(1);
  }
  for (int i = 255; i > 0; i--) {
    analogWrite(led, i);
    delay(1);
  }
}

// functions of morse code

// "_" is used for spaces in between words. Every char already ends with a inter_char_space of 3 time units.
void _() {
  delay(word_space - inter_char_space);
}

void s() {
  // ...
  analogWrite(led, 255);
  delay(dot);
  analogWrite(led, 0);
  delay(intra_char_space);
  analogWrite(led, 255);
  delay(dot);
  analogWrite(led, 0);
  delay(intra_char_space);
  analogWrite(led, 255);
  delay(dot);
  analogWrite(led, 0);
  delay(inter_char_space);
}

void o() {
  // ---
  analogWrite(led, 255);
  delay(dash);
  analogWrite(led, 0);
  delay(intra_char_space);
  analogWrite(led, 255);
  delay(dash);
  analogWrite(led, 0);
  delay(intra_char_space);
  analogWrite(led, 255);
  delay(dash);
  analogWrite(led, 0);
  delay(inter_char_space);
}

void loop() {
  if (Serial.read() == 0) {
    breathing();
  } else if (Serial.read() == 1) {
    s();
    o();
    s();
    _();
  } else {
    analogWrite(led, 0);
  }
}

Processing Code:

 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
import processing.serial.*;

Serial myPort;  // Create object from Serial class

float bx;
float by;
int boxSize = 75;
boolean overBox = false;
boolean locked = false;
float xOffset = 0.0; 
float yOffset = 0.0; 

void setup() {
  size(640, 360);
  bx = width/2.0;
  by = height/2.0;
  rectMode(RADIUS);  
  String portName = Serial.list()[0];
  myPort = new Serial(this, portName, 9600);
}

void draw() { 
  background(0);

  // Test if the cursor is over the box 
  if (mouseX > bx-boxSize && mouseX < bx+boxSize && 
      mouseY > by-boxSize && mouseY < by+boxSize) {
    overBox = true;  
    if(!locked) { 
      stroke(255); 
      fill(153);
      myPort.write(0);
    } 
  } else {
    stroke(153);
    fill(153);
    overBox = false;
  }

  // Draw the box
  rect(bx, by, boxSize, boxSize);
}

void mousePressed() {
  if(overBox) { 
    locked = true; 
    fill(255, 255, 255);
    myPort.write(1);
  } else {
    locked = false;
    myPort.write(1);
  }
  xOffset = mouseX-bx; 
  yOffset = mouseY-by; 

}

void mouseDragged() {
  if(locked) {
    bx = mouseX-xOffset; 
    by = mouseY-yOffset; 
    //myPort.write(0);
  }
}

void mouseReleased() {
  locked = false;
}

How it works?

In Processing: If mouse click on black area, send ‘1’; If mouse hover on white area, send ‘0’.

In Arduino IDE: If receiving ‘0’, do breathing light; If receiving ‘1’, do SOS; If no, turn off the LED.

Last update: June 26, 2022