Tutorial.Graph History

Hide minor edits - Show changes to output

May 02, 2012, at 04:09 PM by Scott Fitzgerald -
Changed line 35 from:
(:source http://arduino.cc/en/pub/code/master/build/shared/examples/4.Communication/Graph/Graph.ino lang=arduino tabwidth=4:)
to:
(:source http://arduino.cc/en/pub/code/master/build/shared/examples/04.Communication/Graph/Graph.ino lang=arduino tabwidth=4:)
November 16, 2011, at 04:13 AM by Scott Fitzgerald -
Changed line 35 from:
(:source http://arduino.cc/en/pub/code/new-extension/build/shared/examples/4.Communication/Graph/Graph.ino lang=arduino tabwidth=4:)
to:
(:source http://arduino.cc/en/pub/code/master/build/shared/examples/4.Communication/Graph/Graph.ino lang=arduino tabwidth=4:)
September 30, 2011, at 03:13 AM by Scott Fitzgerald -
Changed line 35 from:
(:source http://arduino.cc/en/pub/code/master/build/shared/examples/4.Communication/Graph/Graph.pde lang=arduino tabwidth=4:)
to:
(:source http://arduino.cc/en/pub/code/new-extension/build/shared/examples/4.Communication/Graph/Graph.ino lang=arduino tabwidth=4:)
September 23, 2010, at 10:35 PM by Christian Cerrito -
Changed lines 3-4 from:
!!Graph
to:
!!!Graph
September 23, 2010, at 09:48 PM by Christian Cerrito -
Changed lines 30-32 from:
%width=400px%[[Attach:Graph_schem.png |Attach:Graph_schem.png]]

to:
%width=400px%%height=400px%[[ Attach:AnalogReadSerial_sch.png | Attach:AnalogReadSerial_sch.png]]
September 17, 2010, at 08:59 PM by Tom Igoe -
Changed lines 49-50 from:
%width=600px%[[Attach:max-graph.png|ttach:max-graph.png]]
to:
%width=600px%[[Attach:max-graph.png|Attach:max-graph.png]]
September 17, 2010, at 08:59 PM by Tom Igoe -
Changed lines 49-50 from:
%width=600px%Attach:max-graph.png
to:
%width=600px%[[Attach:max-graph.png|ttach:max-graph.png]]
September 17, 2010, at 08:58 PM by Tom Igoe -
September 17, 2010, at 08:58 PM by Tom Igoe -
Changed lines 49-50 from:
%width=600px%[[Attach:max-graph.png]]
to:
%width=600px%Attach:max-graph.png
September 17, 2010, at 08:57 PM by Tom Igoe -
Changed lines 5-7 from:
A simple example of communication from the Arduino board to the computer: the value of an analog input is printed. We call this "serial" communication because the connection appears to both the Arduino and the computer as an old-fashioned serial port, even though it may actually use
a USB cable.
to:
This example shows you how to send a byte of data from the Arduino to a personal computer and graph the result. This is called serial communication because the connection appears to both the Arduino and the computer as a serial port, even though it may actually use a USB cable.
Changed lines 19-20 from:
An analog input connected to analog input pin 0.
to:
Connect a potentiometer or other analog sensor to analog input 0.
Changed lines 27-30 from:


!!!Schematic
to:
!!!Schematic
Changed lines 39-111 from:
!!! Processing Code

[@

// Graphing sketch


// This program takes ASCII-encoded strings
// from the serial port at 9600 baud and graphs them. It expects values in the
// range 0 to 1023, followed by a newline, or newline and carriage return

// Created 20 Apr 2005
// Updated 18 Jan 2008
// by Tom Igoe
// This example code is in the public domain.

import processing.serial.*;

Serial myPort; // The serial port
int xPos = 1; // horizontal position of the graph

void setup () {
// set the window size:
size(400, 300);

// List all the available serial ports
println(Serial.list());
// I know that the first port in the serial list on my mac
// is always my Arduino, so I open Serial.list()[0].
// Open whatever port is the one you're using.
myPort = new Serial(this, Serial.list()[0], 9600);
// don't generate a serialEvent() unless you get a newline character:
myPort.bufferUntil('\n');
// set inital background:
background(0);
}
void draw () {
// everything happens in the serialEvent()
}

void serialEvent (Serial myPort) {
// get the ASCII string:
String inString = myPort.readStringUntil('\n');

if (inString != null) {
// trim off any whitespace:
inString = trim(inString);
// convert to an int and map to the screen height:
float inByte = float(inString);
inByte = map(inByte, 0, 1023, 0, height);

// draw the line:
stroke(127,34,255);
line(xPos, height, xPos, height - inByte);

// at the edge of the screen, go back to the beginning:
if (xPos >= width) {
xPos = 0;
background(0);
}
else {
// increment the horizontal position:
xPos++;
}
}
}

@]

!!! Output

As you change the value of the analog sensor, you'll get a graph something like this:
to:
!!! Processing Sketch

Using the Processing sketch in the code sample above, you'll get a graph of the sensor's value. As you change the value of the analog sensor, you'll get a graph something like this:
Changed lines 47-50 from:
The max patch looks like this. The text of the patch is linked behind the image.

%width=600px%[[Attach:max-graph.txt|Attach:max-graph.png]]
to:
The max patch looks like this. The text of the patch is in the code sample above. Copy the text and paste it into a new Max window to see the sketch.

%width=600px%[[Attach:max-graph.png]]
September 16, 2010, at 10:11 PM by Tom Igoe -
Changed line 39 from:
(:source http://arduino.cc/en/pub/code/master/build/shared/examples/4.Communication/Graph/Graph.pde language=arduino tabwidth=4:)
to:
(:source http://arduino.cc/en/pub/code/master/build/shared/examples/4.Communication/Graph/Graph.pde lang=arduino tabwidth=4:)
August 27, 2010, at 07:47 AM by Christian Cerrito -
Added lines 123-124:
!!!See Also:
August 27, 2010, at 07:46 AM by Christian Cerrito -
Added lines 122-138:

* [[Reference/serial]]()
* [[Reference/analogRead]]()

* [[Tutorial/Dimmer]] - move the mouse to change the brightness of an LED.
* [[Tutorial/PhysicalPixel | Physical Pixel ]] - turn an LED on and off by sending data from Processing.
* [[Tutorial/VirtualColorMixer | Virtual Color Mixer]] - send multiple variables from an Arduino to the computer and read them in Processing.
* [[Tutorial/SerialCallResponse | Serial Call Response]] - send multiple variables using a call and response (handshaking) method.
* [[Tutorial/SerialCallResponseASCII | Serial Call and Response ASCII]] - send multiple vairables using a call-and-response (handshaking) method, and ASCII-encoding the values before sending.
* [[Tutorial/SwitchCase2 | Serial Input (Switch (case) Statement)]] - How to take different actions based 0n characters received by the serial port.






August 27, 2010, at 07:35 AM by Christian Cerrito -
Added lines 20-21:
An analog input connected to analog input pin 0.
Changed lines 27-29 from:
An analog input connected to analog input pin 0.

to:


August 27, 2010, at 07:34 AM by Christian Cerrito -
Changed lines 19-20 from:
An analog input connected to analog input pin 0.
to:
Changed lines 25-27 from:
to:
An analog input connected to analog input pin 0.

August 27, 2010, at 07:33 AM by Christian Cerrito -
Added lines 10-17:
!!!Hardware Required
* Arduino Board
* Analog Sensor (potentiometer, photocell, FSR, etc.)

'''Software Required'''
* [[http://www.processing.org |Processing]] or
* [[http://www.cycling74.com/products/max5| Max/MSP version 5]]
August 27, 2010, at 07:31 AM by Christian Cerrito -
Changed line 28 from:
(:source http://arduino.cc/en/pub/code/master/build/shared/examples/Communication/Graph/Graph.pde language=arduino tabwidth=4:)
to:
(:source http://arduino.cc/en/pub/code/master/build/shared/examples/4.Communication/Graph/Graph.pde language=arduino tabwidth=4:)
February 23, 2010, at 08:12 PM by Tom Igoe -
Changed lines 28-52 from:
%color=#7e7e7e%/*
%color=#7e7e7e% Graph
%color=#7e7e7e%
%color=#7e7e7e% A simple example of communication from the Arduino board to the computer:
%color=#7e7e7e% the value of analog input 0 is sent out the serial port. We call this "serial"
%color=#7e7e7e% communication because the connection appears to both the Arduino and the
%color=#7e7e7e% computer as a serial port, even though it may actually use
%color=#7e7e7e% a USB cable. Bytes are sent one after another (serially) from the Arduino
%color=#7e7e7e% to the computer.
%color=#7e7e7e%
%color=#7e7e7e% You can use the Arduino serial monitor to view the sent data, or it can
%color=#7e7e7e% be read by Processing, PD, Max/MSP, or any other program capable of reading
%color=#7e7e7e% data from a serial port. The Processing code below graphs the data received
%color=#7e7e7e% so you can see the value of the analog input changing over time.
%color=#7e7e7e%
%color=#7e7e7e% The circuit:
%color=#7e7e7e% Any analog input sensor is attached to analog in pin 0.
%color=#7e7e7e%
%color=#7e7e7e% created 2006
%color=#7e7e7e% by David A. Mellis
%color=#7e7e7e% modified 14 Apr 2009
%color=#7e7e7e% by Tom Igoe and Scott Fitzgerald
%color=#7e7e7e%
%color=#7e7e7e% http://www.arduino.cc/en/Tutorial/Graph
%color=#7e7e7e% */
to:
(:source http://arduino.cc/en/pub/code/master/build/shared/examples/Communication/Graph/Graph.pde language=arduino tabwidth=4:)
Deleted lines 29-41:
%color=#cc6600%void%% %color=#cc6600%'''setup'''%%() {
%color=#7e7e7e%// initialize the serial communication:
%color=#cc6600%Serial%%.%color=#cc6600%begin%%(9600);
}

%color=#cc6600%void%% %color=#cc6600%'''loop'''%%() {
%color=#7e7e7e%// send the value of analog input 0:
%color=#cc6600%Serial%%.%color=#cc6600%println%%(%color=#cc6600%analogRead%%(0));
%color=#7e7e7e%// wait a bit for the analog-to-digital converter
%color=#7e7e7e%// to stabilize after the last reading:
%color=#cc6600%delay%%(10);
}
Changed lines 45-46 from:
to:
// This example code is in the public domain.
August 27, 2009, at 08:56 PM by Tom Igoe -
Added lines 16-18:
[-image developed using [[http://www.fritzing.org |Fritzing]]. For more circuit examples, see the [[http://fritzing.org/projects/|Fritzing project page]] -]

Changed lines 24-26 from:
[-image developed using [[http://www.fritzing.org |Fritzing]]. For more circuit examples, see the [[http://fritzing.org/projects/|Fritzing project page]] -]

to:
August 27, 2009, at 08:55 PM by Tom Igoe -
Changed lines 21-23 from:
to:
[-image developed using [[http://www.fritzing.org |Fritzing]]. For more circuit examples, see the [[http://fritzing.org/projects/|Fritzing project page]] -]

July 05, 2009, at 07:35 PM by Tom Igoe -
Deleted lines 42-43:
%color=#7e7e7e% http://www.arduino.cc/en/Tutorial/Graph
%color=#7e7e7e%
July 05, 2009, at 07:35 PM by Tom Igoe -
Changed lines 23-68 from:
to:
(:div class=code :)

%color=#7e7e7e%/*
%color=#7e7e7e% Graph
%color=#7e7e7e%
%color=#7e7e7e% A simple example of communication from the Arduino board to the computer:
%color=#7e7e7e% the value of analog input 0 is sent out the serial port. We call this "serial"
%color=#7e7e7e% communication because the connection appears to both the Arduino and the
%color=#7e7e7e% computer as a serial port, even though it may actually use
%color=#7e7e7e% a USB cable. Bytes are sent one after another (serially) from the Arduino
%color=#7e7e7e% to the computer.
%color=#7e7e7e%
%color=#7e7e7e% You can use the Arduino serial monitor to view the sent data, or it can
%color=#7e7e7e% be read by Processing, PD, Max/MSP, or any other program capable of reading
%color=#7e7e7e% data from a serial port. The Processing code below graphs the data received
%color=#7e7e7e% so you can see the value of the analog input changing over time.
%color=#7e7e7e%
%color=#7e7e7e% The circuit:
%color=#7e7e7e% Any analog input sensor is attached to analog in pin 0.
%color=#7e7e7e%
%color=#7e7e7e% http://www.arduino.cc/en/Tutorial/Graph
%color=#7e7e7e%
%color=#7e7e7e% created 2006
%color=#7e7e7e% by David A. Mellis
%color=#7e7e7e% modified 14 Apr 2009
%color=#7e7e7e% by Tom Igoe and Scott Fitzgerald
%color=#7e7e7e%
%color=#7e7e7e% http://www.arduino.cc/en/Tutorial/Graph
%color=#7e7e7e% */

%color=#cc6600%void%% %color=#cc6600%'''setup'''%%() {
%color=#7e7e7e%// initialize the serial communication:
%color=#cc6600%Serial%%.%color=#cc6600%begin%%(9600);
}

%color=#cc6600%void%% %color=#cc6600%'''loop'''%%() {
%color=#7e7e7e%// send the value of analog input 0:
%color=#cc6600%Serial%%.%color=#cc6600%println%%(%color=#cc6600%analogRead%%(0));
%color=#7e7e7e%// wait a bit for the analog-to-digital converter
%color=#7e7e7e%// to stabilize after the last reading:
%color=#cc6600%delay%%(10);
}

(:divend:)
!!! Processing Code
Changed lines 70-87 from:
void setup() {
// initialize the serial communication:
Serial.begin(9600);
}

void loop() {
// send the value of analog input 0:
Serial.println(analogRead(0));
// wait a bit for the analog-to-digital converter
// to stabilize after the last reading:
delay(10);
}
@]

!!! Processing Code

[@
to:
June 25, 2009, at 11:26 PM by Tom Igoe -
June 25, 2009, at 11:10 PM by Tom Igoe -
Changed line 13 from:
[-[-click the image to enlarge-]-]
to:
[-click the image to enlarge-]
Changed lines 16-21 from:
to:
!!!Schematic

[-click the image to enlarge-]
%width=400px%[[Attach:Graph_schem.png |Attach:Graph_schem.png]]

April 16, 2009, at 07:56 PM by Tom Igoe -
Deleted lines 10-12:

%width=400px%[[Attach:graph-circuit.png |Attach:graph-circuit.png]]
Added lines 13-16:
[-[-click the image to enlarge-]-]
%width=400px%[[Attach:graph-circuit3.png |Attach:graph-circuit3.png]]

April 15, 2009, at 11:51 PM by Tom Igoe -
Changed line 111 from:
%width=600px%Attach:max-graph.png
to:
%width=600px%[[Attach:max-graph.txt|Attach:max-graph.png]]
April 15, 2009, at 11:50 PM by Tom Igoe -
Changed line 111 from:
%width=600px%[[Attach:max-graph.txt|Attach:max-graph.png]]
to:
%width=600px%Attach:max-graph.png
April 15, 2009, at 11:49 PM by Tom Igoe -
April 15, 2009, at 11:47 PM by Tom Igoe -
Added lines 12-13:
%width=400px%[[Attach:graph-circuit.png |Attach:graph-circuit.png]]
Changed lines 19-20 from:
void setup()
{
to:
void setup() {
// initialize the serial communication:
Changed lines 24-25 from:
void loop()
{
to:
void loop() {
// send the value of analog input 0:
Changed lines 27-29 from:
delay(20);
to:
// wait a bit for the analog-to-digital converter
// to stabilize after the last reading:
delay(10);
Changed lines 36-44 from:
// Graph
// by David A. Mellis
//
// Demonstrates reading data from the Arduino board by graphing the
// values received.
//
// based on Analog In
// by <a href="http://itp.jtnimoy.com">Josh Nimoy</a>.
to:

// Graphing sketch


// This program takes ASCII-encoded strings
// from the serial port at 9600 baud and graphs them. It expects values in the
// range 0 to 1023, followed by a newline, or newline and carriage return

// Created 20 Apr 2005
// Updated 18 Jan 2008
// by Tom Igoe
Changed lines 50-61 from:
Serial port;
String buff = "";
int NEWLINE = 10;

// Store the last 64 values received so we can graph them.
int[] values = new int[64];

void setup()
{
size(512, 256);

println("Available serial ports:");
to:
Serial myPort; // The serial port
int xPos = 1; // horizontal position of the graph

void setup () {
// set the window size:
size(400, 300);

// List all the available serial ports
Changed lines 59-69 from:

// Uses the first port in this list (number 0). Change this to
// select the port corresponding to your Arduino board. The last
// parameter (e.g. 9600) is the speed of the communication. It
// has to correspond to the value passed to Serial.begin() in your
// Arduino sketch.
port = new Serial(this, Serial.list()[0], 9600);

// If you know the name of the port used by the Arduino board, you
// can specify it directly like this.
//port = new Serial(this, "COM1", 9600);
to:
// I know that the first port in the serial list on my mac
// is always my Arduino, so I open Serial.list()[0].
// Open whatever port is the one you're using.
myPort = new Serial(this, Serial.list()[0], 9600);
// don't generate a serialEvent() unless you get a newline character:
myPort.bufferUntil('\n');
// set inital background:
background(0);
Changed lines 68-79 from:

void draw()
{
background(53);
stroke(255);

// Graph the stored values by drawing a lines between them.
for (int i = 0; i < 63; i++)
line(i * 8, 255 - values[i], (i + 1) * 8, 255 - values[i + 1]);

while (port.available() > 0)
serialEvent(port.read());
to:
void draw () {
// everything happens in the serialEvent()
Changed lines 72-96 from:
void serialEvent(int serial)
{
if (serial != NEWLINE) {
// Store all the characters on the line.
buff += char(serial);
} else {
// The end of each line is marked by two characters, a carriage
// return and a newline. We're here because we've gotten a newline,
// but we still need to strip off the carriage return.
buff = buff.substring(0, buff.length()-1);

// Parse the String into an integer. We divide by 4 because
// analog inputs go from 0 to 1023 while colors in Processing
// only go from 0 to 255.
int val = Integer.parseInt(buff)/4;

// Clear the value of "buff"
buff = "";

// Shift over the existing values to make room for the new one.
for (int i = 0; i < 63; i++)
values[i] = values[i + 1];

// Add the received value to the array.
values[63] = val;
to:
void serialEvent (Serial myPort) {
// get the ASCII string:
String inString = myPort.readStringUntil('\n');

if (inString != null) {
// trim off any whitespace:
inString = trim(inString);
// convert to an int and map to the screen height:
float inByte = float(inString);
inByte = map(inByte, 0, 1023, 0, height);

// draw the line:
stroke(127,34,255);
line(xPos, height, xPos, height - inByte);

// at the edge of the screen, go back to the beginning:
if (xPos >= width) {
xPos = 0;
background(0);
}
else {
// increment the horizontal position:
xPos++;
}
Changed lines 98-111 from:
@]
to:

@]

!!! Output

As you change the value of the analog sensor, you'll get a graph something like this:

Attach:graph-output.png

!!! Max Code

The max patch looks like this. The text of the patch is linked behind the image.

%width=600px%[[Attach:max-graph.txt|Attach:max-graph.png]]
March 25, 2007, at 01:14 PM by David A. Mellis -
Added lines 1-15:
''Examples > Communication''

!!Graph

A simple example of communication from the Arduino board to the computer: the value of an analog input is printed. We call this "serial" communication because the connection appears to both the Arduino and the computer as an old-fashioned serial port, even though it may actually use
a USB cable.

You can use the Arduino serial monitor to view the sent data, or it can be read by Processing (see code below), Flash, PD, Max/MSP, etc.

!!! Circuit

An analog input connected to analog input pin 0.

!!! Code
Changed line 24 from:
Serial.print(analogRead(0) / 4, BYTE);
to:
Serial.println(analogRead(0));
Changed lines 27-28 from:

/*
to:
@]

!!! Processing Code

[@
// Graph
// by David A. Mellis
//
// Demonstrates reading data from the Arduino board by graphing the
// values received.
//
// based on Analog In
// by <a href="http://itp.jtnimoy.com">Josh Nimoy</a>.
Added lines 44-47:
String buff = "";
int NEWLINE = 10;

// Store the last 64 values received so we can graph them.
Changed lines 54-56 from:
// Print a list in case COM1 doesn't work out
//println("Available serial ports:");
//printarr(PSerial.list());
to:
println("Available serial ports:");
println(Serial.list());
Changed lines 57-58 from:
//port = new Serial(this, "COM1", 9600);
// Uses the first available port
to:
// Uses the first port in this list (number 0). Change this to
// select the port corresponding to your Arduino board. The last
// parameter (e.g. 9600) is the speed of the communication. It
// has to correspond to the value passed to Serial.begin() in your
// Arduino sketch.
Added lines 63-66:

// If you know the name of the port used by the Arduino board, you
// can specify it directly like this.
//port = new Serial(this, "COM1", 9600);
Added line 74:
// Graph the stored values by drawing a lines between them.
Changed lines 84-87 from:
println(serial);

for (int i = 0; i < 63; i++)
values[i] = values[i + 1];
to:
if (serial != NEWLINE) {
// Store all the characters on the line.
buff += char(serial);
} else {
// The end of each line is marked by two characters, a carriage
// return and a newline. We're here because we've gotten a newline,
// but we still need to strip off the carriage return.
buff = buff.substring(0, buff.length()-1);
Changed lines 93-107 from:
values[63] = serial;
to:
// Parse the String into an integer. We divide by 4 because
// analog inputs go from 0 to 1023 while colors in Processing
// only go from 0 to 255.
int val = Integer.parseInt(buff)/4;

// Clear the value of "buff"
buff = "";

// Shift over the existing values to make room for the new one.
for (int i = 0; i < 63; i++)
values[i] = values[i + 1];

// Add the received value to the array.
values[63] = val;
}
Deleted line 108:
*/
January 14, 2007, at 03:38 PM by David A. Mellis -
Added lines 1-54:
[@
void setup()
{
Serial.begin(9600);
}

void loop()
{
Serial.print(analogRead(0) / 4, BYTE);
delay(20);
}

/*
import processing.serial.*;

Serial port;
int[] values = new int[64];

void setup()
{
size(512, 256);

// Print a list in case COM1 doesn't work out
//println("Available serial ports:");
//printarr(PSerial.list());

//port = new Serial(this, "COM1", 9600);
// Uses the first available port
port = new Serial(this, Serial.list()[0], 9600);
}

void draw()
{
background(53);
stroke(255);

for (int i = 0; i < 63; i++)
line(i * 8, 255 - values[i], (i + 1) * 8, 255 - values[i + 1]);

while (port.available() > 0)
serialEvent(port.read());
}

void serialEvent(int serial)
{
println(serial);

for (int i = 0; i < 63; i++)
values[i] = values[i + 1];

values[63] = serial;
}
*/
@]

Share