Design Four

An Arduino-based oscilloscope
EECE 3213 Page 1 of 14

0.1 OBJECTIVE

ˆ You will connect VGA with an Arduino and write a Processing program to visualize
the signals on the computer monitor.

0.2 OVERVIEW

In this experiment you will use Arduino IDE (https://www.arduino.cc/en/Main/software)

to program the Arduino to capture VGA output and send to a computer through USB serial
interface. In the computer you will use Processing (https://processing.org/) IDE to
visualize the signals coming from the Arduino.
You will need

ˆ The VGA circuit you have designed earlier

ˆ Arduino IDE installed on your computer

ˆ Processing 3 IDE installed on your computer.

0.3 PRELAB

Before you start this design class please download and install both Arduino IDE and Process-
ing IDE from https://www.arduino.cc/en/Main/software and https://processing.org/
respectively.

0.4 BACKGROUND

0.4.1 Processing IDE

In the context of our design project, Processing IDE is a exible software platform to vi-
sualize any signal obtained from any port (mostly USB). It provides exible programming
environment to easily plot a signal on the computer screen along with ways to create in-
teractive user interface. This IDE is in play since 2001 and thousands of students, artists,
designers, researchers, and hobbyists using Processing for learning and prototyping.
Once you download and unzip Processing 3 IDE, double clicking the processing.exe le
will execute this software. If you are new to it, you may click on the Get Started and it
will walk you through. You will see a play button and stop button to run your program or
stop your program (see gure 1).
On the top right corner you can choose any programming language to program with. By
clicking Add Mode in the dropdown on top right corner you can add p5.js, Python, R,
REPL, or Shader modes (see gure 2)
The processing website is pretty well documented. You should go through it, most
importantly the Environment,Tutorials, and Examples. You will be able to get many
examples and be able to run out of the box.

Page 1
EECE 3213 Page 2 of 14

Figure 1: Processing IDE

Figure 2: The additional mode of Processing programming

Page 2
EECE 3213 Page 3 of 14

Like Arduino code, a Processing code is also called sketch and is similar to an Arduino
sketch. Every Processing code must have two functions setup() and draw() (see code
listing below).

1 void setup(){
2 size(640,480);
3 }
4 void draw(){
5 background(200);
6 fill(255,0,0);
7 circle(mouseX, mouseY,30);
8 }

The code above draws a circle at your mouse position. Line 2 sets up the windows display
size, line 5 sets a background, line 6 sets the ll color of a circle, and line 7 draws circle.
Remember that the draw() function is executed repeatedly but setup() executes once you
start executing the sketch. Good thing is you do not have to compile and upload as it is
done in Arduino.

0.4.2 Connecting Arduino to Processing

By now you know how to use Arduino from Circuit I class and you have drawn circle at
mouse position with Processing in the section above. Now you will learn how Arduino and
Processing can communicate to each other. After this step by step instruction you should
learn

1. Sending data from Arduino to Processing over the serial port

2. Receiving data from Arduino in Processing

3. Sending data from Processing to Arduino

4. Receiving data from Processing in Arduino

Let us start with the Arduino. You will setup your Arduino sketch to send information
over USB serial port. If you have not done so, download and install the Arduino software
for your operating system. You are provided with an Arduino kit with necessary cables.
Follow these steps to create an Arduino code.

1. Open up the Arduino IDE and you will see a window like gure 3. The setup() and
loop() function is already populated.

2. Populate the arduino sketch with the following code

1 void setup() {
2 // put your setup code here, to run once:
3 Serial.begin(19200);
4

Page 3
EECE 3213 Page 4 of 14

Figure 3: Arduino IDE

Page 4
EECE 3213 Page 5 of 14

5 }
6
7 void loop() {
8 // put your main code here, to run repeatedly:
9 Serial.println("3213 Circuit class");
10 delay(200);
11 }
3. Compile and upload to Arduino. You have to connect Arduino before uploading. If
you get an error that the Board at COMX is not available then use Tools > Port
to select your USB (or COM) port. USB is recognized as COM4 port in the gure 4.

Figure 4: Select appropriate COM port for the Arduino IDE.

4. In the Processing IDE we need to nd a way to listed in on what Arduino sketch is
sending. Processing comes with a Serial library pre-designed to do that. Open up
Processing IDE and you will see as in gure 1.

5. Once you open sketch, your rst step is to import the Serial library. Go to Sketch-
>Import Library->Serial, as shown in gure 5.

Page 5
EECE 3213 Page 6 of 14

Figure 5: Importing serial library in Processing IDE

6. You should now see a line like import processing.serial.*; at the top of your
sketch. Below the import statement declare some global variables. All this means is
that these variables can be used anywhere in your sketch.

7. Use the following code to populate the Processing IDE sketch -

1 import processing.serial.*;
2
3 Serial serialport; // Create object from Serial class
4 String textfromarduino; // Data received from the serial port
5 int counter = 0;
6
7 void setup()
8 {
9 //change the 0 to a 1 or 2 etc. to match your port
10 String portName = Serial.list()[0];
11 serialport = new Serial(this, portName, 19200);
12 }
13
14 void draw()
15 {
16 if ( serialport.available() > 0)
17 {

Page 6
EECE 3213 Page 7 of 14

18 // If data is available,
19 //read it and store it in textfromarduino
20 textfromarduino = serialport.readStringUntil('\n');
21 }
22 if (textfromarduino != null)
23 //print it out in the console with counter as line number
24 println(counter ++ +": " + textfromarduino);
25
26 delay(200); // wait 200ms
27 }
28
29

8. Save and run the processing code and you will see the line 3213 Circuit class at the
console of Processing IDE with line number (see gure 6).

Figure 6: Processing IDE is reading from Arduino and printing in console.

9. You have sent data from Arduino to Processing. How about from Processing to Ar-
duino? You will write a code to send 1 or 0 based on mouse click on Processing IDE
to Arduino. Use the following code to populate the Processing sketch.

1 import processing.serial.*;
2
3 Serial serialport; // Create object from Serial class

Page 7
EECE 3213 Page 8 of 14

4 String textfromarduino; // Data received from the serial port

5 int counter = 0;
6
7 void setup()
8 {
9 size(640, 480); //set window size
10 String portName = Serial.list()[0];
11 //change the 0 to a 1 or 2 etc. to match your port
12 serialport = new Serial(this, portName, 19200);
13 }
14
15 void draw()
16 {
17 //these lines are commented out,
18 //you do not need to copy or write
19 /*if ( serialport.available() > 0)
20 { // If data is available,
21 textfromarduino = serialport.readStringUntil('\n');
22 // read it and store it in textfromarduino
23 }
24 if (textfromarduino != null)
25 //print it out in the console
26 println(counter ++ +": " + textfromarduino);
27
28 delay(200); // wait 200ms
29 */
30
31 if (mousePressed == true)
32 {
33 //if we clicked in the window
34 serialport.write('1'); //send a 1
35 println("1");
36 }
37 else
38 { //otherwise
39 serialport.write('0'); //send a 0
40 println("0");
41 }
42 }
43

10. When you execute the above code, it will open a separate window. If you click on that
window console will show 1, 0 otherwise.

11. Now go back to Arduino IDE and use this code below to turn the Arduino LED on

Page 8
EECE 3213 Page 9 of 14

and o, based on the mouse click in Processing. Use this code below in Arduino sketch
(you should already have written processing part of this). Make sure the Processing
code is not running otherwise you will get wired error, because Processing will occupy
USB port and Arduino will try to use that.

char valueFromP;
int LED = 13;

void setup() {
pinMode(LED, OUTPUT);
// put your setup code here, to run once:
Serial.begin(19200);
}

void loop() {
if (Serial.available())
{ // If data is available to read,
valueFromP = Serial.read(); // read it and store it in val
}
if (valueFromP == '1')
{ // If 1 was received
digitalWrite(LED, HIGH); // turn the LED on
} else {
digitalWrite(LED, LOW); // otherwise turn it off
}
delay(10); // Wait 10 milliseconds for next reading
}

12. Upload the Arduino code, then run processing code. There will be a window opened
by processing, click on that and watch the LED in Arduino. You should see the LED
is turning on or o depending on the mouse click on processing windows.

0.5 PROCEDURE

Take these precautions before proceeding further

ˆ Remember to be very careful to connect the VGA output to the ADC pins of Arduino,
which must be less than 5 volts. More that 5 volts may damage the Arduino ADC pin.

ˆ Set the power supply of the op-amp of VGA to maximum ±5 volts. This ensures you
that the output would not get greater than 5V

ˆ Connect GND of the Arduino to any external ground you are using.

Page 9
EECE 3213 Page 10 of 14

Rf

+5 V
R2

−
LM358 +vo (connected to Arduino pin A0)

R1 +
V2 =−5 V +
−
+ −connected
vin -5 V to Arduino pin GND
−

Figure 7: The VGA circuit

1. Set the VGA circuit as gure 7. It is actually a variable gain summing amplier.
The DC input -5V is used to generate an oset (+2.5V) in Arduino input to map the
op-amp output voltage between 0 to 5V to make readable by Arduino, since we are
dealing with alternative (sine, triangle etc) waveform and the Arduino's ADC does not
get negative values. Remember since V2 = −5V the value of R2 must be twice the
value of Rf to maintain the ratio of 0.5 to obtain a +2.5V DC oset. Connect vo to
A0 of Arduino. Do not power on yet.

2. Write the following Arduino sketch, save and upload to your Arduino just for testing.
This code generates a sine wave with frequency 100 Hz.

//Arduino code to generate a sine wave

int timer = 0;
void setup()
{
Serial.begin(19200);
}

void loop()
{

float value = 100 * sin(2 * 3.1415 * 100 * timer++);

value = map(value, -100, 100, 0, 1023);
Serial.print(timer);
Serial.print(",");

Page 10
EECE 3213 Page 11 of 14

timer +=1;
Serial.println(value);
if (timer > 640)
timer = 0;
delay(20);
}

3. Use the following code to run into the Processing IDE.

//Processing code to plot the sine wave generated above.

import processing.serial.*;

Serial arduinoport; // The serial port

float xvalue = 0;
float yvalue = 0;

void setup () {
size(640, 480);

//I know this is first USB, that is why 0,

//change it to 1,2 or 3 if you need to
arduinoport = new Serial(this, Serial.list()[0], 19200);

// don't generate a serialEvent() unless you get a newline character:

arduinoport.bufferUntil('\n');

// set initial background:

background(0);
}

void draw () {
// draw the line:
stroke(255, 0, 0);
//line(x, height, x, height - arduinoValue);
int y = int(height - yvalue);
//line(x1, y1, x2, y2);
ellipse(xvalue, y, 3, 3);

// at the edge of the screen, go back to the beginning:

if (xvalue >= width) {
background(0);
}
}

Page 11
EECE 3213 Page 12 of 14

void serialEvent (Serial arduinoport) {

// get the ASCII string:

String arduinoString = arduinoport.readStringUntil('\n');

String[] list = split(arduinoString, ',');
if (list[0] != null && list[1] != null) {
// trim off any whitespace:
arduinoString = trim(list[0]);
xvalue = int(arduinoString);
xvalue = map(xvalue, 0, 640, 0, width);
arduinoString = trim(list[1]);
// convert to an int and map to the screen height:
yvalue = float(arduinoString);
yvalue = map(yvalue, 0, 1023, 0, height);

println(xvalue + " "+yvalue);

}
}
You will see a graph of sine wave like gure 8.

Figure 8: A sample plot in the Processing of the sine wave generate by the Arduino code
above.

4. Now you know how to generate any signal from Arduino and plot it in Processing
IDE. Below is the actual code which will read analog input from the VGA and send to

Page 12
EECE 3213 Page 13 of 14

processing. Just upload this code to Arduino and then run the same Processing code
to plot sine wave.

5. Draw grid on the Processing IDE using line() function of Processing (nd it from
Processing tutorial).

//Actual code to read A0 value and

//send to USB serial port for Processing IDE
//A0 value is an analog value between 0 to 1023
//The maximum voltage = analog 1023, min = 0
int timer = 0;
void setup()
{
//we are using serial baud rate 19200
Serial.begin(19200);

void loop()
{
//send the timer value
Serial.print(timer);
//send a comma
Serial.print(",");
timer +=1;
//send the value read from A0 pin
Serial.println(analogRead(A0));
// we will set processing window width of 640
if (timer > 640)
timer = 0;
delay(20);
}

6. The VGA input is one terminal of oscilloscope and the ground is another terminal. Use
a function generator to produce sine wave, square wave or triangular wave and feed to
your designed VGA. Run the processing code and observe the output. Connect a real
oscilloscope as well. Match your Processing screen with the oscilloscope screen.

0.6 REPORT

ˆ Attach screen shots of Arduino program, Processing program, and the Processing
screen.

ˆ The VGA inverts the input signal (since it is an inverting amplier). Discuss how you
can revert the output signal on the screen to make it as original input signal (in terms

Page 13
EECE 3213 Page 14 of 14

of phase shift only, not amplitude)? Any idea of altering the Arduino or Processing
code?

ˆ In the practicum session you will make the VGA circuit (gure 7). Upload the Arduino
program so that you do not need to program it in the practicum and bring the nal
Processing code for using in the practicum session.

Page 14