Graphing Code from TUtorial Not Working (IDE + Processing)

I'm on Arch Linux, using Arduino 1.6.5 and Processing 3.0b6
Using code from https://www.arduino.cc/en/Tutorial/Graph
I'm trying to graph the input from my Arduino DUE, with the following code:

Tools -> Boards : Arduino DUE (Programming Port)
Tools -> Port -> /dev/ttyACM0

Open Arduino IDE, paste this:

void setup() {
  // initialize the serial communication:
  Serial.begin(9600);
}

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

Chmod A+RW /dev/ttyAMC0

Open Processing, paste this:

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++;
}
}
}

Hit Run.

Problem: Console output

/dev/ttyACM0 /dev/ttyS0 /dev/ttyS1 /dev/ttyS2 /dev/ttyS3
map(NaN, 0, 1023, 0, 300) called, which returns NaN (not a number)

And a window with black background and nothing else appears.
Please help, the graph code won't work on Windows either.
Please check if my step has anything wrong with it.
Thanks.

Please note that I don't give input to A0 (A0 not wired), and the serial monitor still gives me a stream of random number 0-1023.

Please help, the graph code won't work on Windows either.

Most likely because the Arduino is not on the port that Processing thinks it is.

Print the list of serial ports. Make sure that the Arduino IS connected to the one that you tell Processing it is connected to.

The port is the same, /dev/ttyACM0, a print of Serial.list()[0] yields that.
Also a print(inByte) in Processing output a stream of random float as expected.
But why map still says the first parameter (value) is not a float !! ??
I rewrote the map function and it still not graph for me...

float hahaha(float value, float istart, float istop, float ostart, float ostop) {
  float res = ostart + (ostop - ostart) * ((value - istart) / (istop - istart));
  print(res,'\n');
    return res;
}
// convert to an int and map to the screen height:
float inByte = float(inString);
inByte = hahaha(inByte, 0, 1023, 0, height);

Console output:

68.035194 
153.66568 
175.95308 
87.68328 
67.741936 
173.02052 
160.70383 
76.24633 
73.02053 
173.02052 
145.16129 
70.087975 
84.45748 
185.04399 
140.76247 
63.04985 
99.70675 
188.56305 
123.75366 
65.68915 
122.28739 
185.04399 
103.81232 
65.68915 
125.21994 
178.00586 
89.14957 
68.914955 
152.19942 
178.59238 
78.00586 
73.31378 
172.43402 
160.11731 
77.1261 
81.52493 
183.28445 
141.93549 
68.621704 
83.28446 
190.90909 
125.51319 
66.56892 
98.53373 
192.37537 
106.158356 
67.44868 
123.75366 
191.20235 
106.744865 
67.741936 
147.80058 
180.05865 
92.37537 
69.20821 
168.32845 
165.68915 
83.28446 
78.88563 
164.80939 
139.00293 
76.83284 
90.909096 
177.41934 
139.00293 
73.02053 
100.58651 
180.35191 
125.51319 
75.95308 
121.40762 
176.83284 
102.93255 
75.07331 
122.8739 
169.79472 
94.134895 
79.7654 
145.16129 
168.6217 
84.45748 
82.69795 
162.7566 
155.42522 
84.45748 
88.8563 
171.261 
138.41643 
78.00586 
91.20235 
175.36656 
124.63343 
76.53959 
101.17302 
176.24632 
109.38417 
78.29912 
121.11437 
174.78006 
105.571846 
79.47214 
139.58945 
165.3959 
95.60117 
81.231674 
155.71848 
154.2522 
88.56305 
84.16422 
156.01172 
141.93549 
83.57771 
92.961876 
167.74194 
139.00293 
80.35191 
100.58651 
171.55424 
128.1525 
82.40469 
115.83578 
170.08798 
108.5044 
81.231674 
117.888565 
165.9824 
99.41349 
84.16422 
137.24341 
165.3959 
92.082115 
87.39003 
153.66568 
153.07918 
91.78886 
92.082115 
163.34311 
140.17595 
85.04399 
92.961876 
167.74194 
127.85924 
82.69795 
101.75953 
169.79472 
111.73021 
83.57771 
117.595314 
171.55424 
112.02346 
83.57771 
134.89735 
164.51613 
100.29326 
84.75073 
151.6129 
153.66568 
90.61584 
86.21701 
153.66568 
140.76247 
85.04399 
92.668625 
167.15543 
144.28152 
80.93842 
99.41349 
171.261 
127.56599 
81.818184 
112.60997 
172.43402 
112.60997 
80.058655 
113.48974 
168.91496 
102.6393 
84.16422 
134.31085 
168.6217 
92.37537 
85.92375 
151.90616 
158.06451 
92.37537 
89.14957 
163.34311 
145.16129 
85.92375 
91.20235 
169.2082 
129.03226 
82.40469 
99.70675 
170.96774 
118.76833 
82.11144 
112.02346 
173.60704 
116.71554 
81.52493 
129.61877 
168.03519 
101.75953 
82.9912 
147.50734 
158.06451 
92.668625 
85.04399 
148.09384 
148.9736 
87.97654 
90.322586 
163.04987 
148.9736 
82.40469 
96.77419 
169.2082 
132.55132 
83.87097 
106.744865 
171.8475 
121.11437 
81.52493 
107.03812 
170.08798 
108.79766 
83.28446 
125.80645 
169.79472 
97.3607 
85.6305 
143.40176 
161.29033 
97.94721 
87.39003 
156.59824 
150.43988 
91.20235 
89.14957 
165.10265 
135.19061 
85.33724 
96.480934 
166.27567 
124.63343 
84.16422 
105.27859 
170.67448 
127.27273 
82.9912 
121.11437 
168.32845 
108.21115 
84.45748 
138.41643 
160.70383 
99.12024 
85.6305 
138.70969 
153.07918 
94.134895 
90.02933 
154.8387 
150.43988 
86.51026 
95.60117 
164.51613 
137.24341 
87.97654 
101.46628 
167.74194 
127.27273 
84.75073 
102.93255 
169.50146 
110.55719 
85.04399 
119.648094 
169.79472 
101.46628 
86.51026 
136.95015 
163.92963 
102.6393 
87.09677 
151.0264 
152.19942 
93.841644 
88.26979 
162.17009 
139.00293 
87.97654 
94.428154 
162.7566 
130.20528 
86.51026 
101.75953 
167.74194 
131.08504 
84.16422 
114.66276 
167.44868 
113.78299 
86.21701 
131.3783 
161.29033 
103.81232 
87.39003 
132.25806 
154.54546 
98.24046 
90.61584 
148.09384 
153.95894 
91.495605 
94.721405 
158.35776 
143.695 
93.255135 
100.29326 
162.17009 
128.739 
89.73608 
102.05279 
165.3959 
117.0088 
88.56305 
113.78299 
165.68915 
108.21115 
90.322586 
130.20528 
161.87685 
107.03812 
89.14957 
144.57478 
154.2522 
98.82698 
89.44282 
156.01172 
143.695 
92.37537 
92.961876 
157.18474 
131.08504 
88.26979 
100.29326 
165.10265 
131.96481 
84.45748 
110.26393 
167.15543 
120.52786 
85.6305 
125.80645 
163.34311 
104.98534 
85.33724 
127.27273 
157.77126 
98.53373 
87.68328 
144.28152 
158.94427 
91.20235 
90.909096 
157.478 
145.45454 
91.495605 
96.480934 
164.51613 
132.55132 
86.51026 
97.3607 
168.32845 
122.8739 
85.33724 
108.21115 
169.2082 
107.331375 
85.6305 
125.51319 
167.74194 
107.624626 
85.6305 
141.34897 
158.94427 
98.53373 
86.51026 
155.42522 
148.9736 
91.78886 
89.73608 
156.30498 
135.19061 
86.21701 
97.067444 
166.56892 
135.77711 
82.69795 
104.39883 
169.50146 
125.51319 
84.45748 
120.52786 
167.15543 
106.744865 
83.87097 
122.28739 
162.17009 
99.41349 
86.21701 
140.46921 
162.7566 
92.668625 
88.8563 
155.71848 
149.85338 
92.37537 
93.841644 
164.51613 
136.65689 
85.6305 
94.721405 
169.79472 
126.39296 
83.28446 
102.93255 
170.38123 
109.38417 
83.87097 
120.82111 
170.96774 
109.97068 
83.87097 
137.53667 
163.34311 
100.87977 
85.04399 
152.78592 
151.31964 
91.495605 
87.39003 
153.66568 
140.17595 
87.09677 
94.134895 
165.68915 
142.52199 
82.9912 
100.87977 
169.50146 
126.68622 
84.16422 
115.54252 
169.2082 
110.85044 
82.40469 
116.71554 
165.9824 
103.22581 
85.33724 
135.77711 
165.3959 
93.255135 
87.09677 
151.90616 
154.8387 
93.548386 
90.909096 
162.7566 
143.1085 
87.39003 
92.082115 
168.32845 
128.1525 
83.57771 
100.58651 
169.79472 
114.95601 
83.28446 
114.66276 
171.8475 
118.475075 
83.28446 
131.3783 
165.3959 
102.05279 
84.16422 
148.09384 
155.71848 
93.841644 
85.6305 
148.3871 
146.62756 
89.44282 
92.082115 
162.46335 
143.695 
83.28446 
98.82698

It seems that drawing from the SerialEvent just does not work.
Try this version for the receive, NaN s are shown as 'missing' bars

import processing.serial.*;

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

float fValue;
boolean newVal = false;

void setup () {
  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], 115200);
  // don't generate a serialEvent() unless you get a newline character:
  myPort.bufferUntil('\n');
  // set inital background:
  background(0);
  stroke(127, 34, 255);
}

void draw () {
  if (newVal) {
    line(xPos, height, xPos, height - fValue);
    if (++xPos >= width) {
      xPos = 0;
      background(0);
    }
    newVal = false;
  }
}

void serialEvent (Serial myPort) {
  String inString = myPort.readStringUntil('\n');
  if (inString != null) {
    inString = trim(inString);
    fValue = float(inString);
    fValue = map(fValue, 0, 1023, 0, height);
    newVal = true;
  }
}

Here, I tried your code, and yet the graph doesn't show

(Image attached)

The graph box is shown, but nothing on there really.

I don't know why it's so hard... your code still sometimes generate map NaN error, don't know the reason.

It is your data that produces the NaN, everytime something comes in that is, as the name implies, 'Not a Number'.

Or maybe it's Processing's functions that are so bad...
Change to a random function (to leave out NaN):

float inByte = float(inString);
inByte = random(0,1023);
print(inByte,"\n");
inByte = map(inByte, 0, 1023, 0, height);

Still a black window with no graph.
Were you able to graph with your code ?

Or maybe it's Processing's functions that are so bad...

Unlikely!

float inByte = float(inString);

Patently STUPID name for a variable of type float. Do you have some PROOF that inString contains a float representation?

inByte = map(inByte, 0, 1023, 0, height);

The map function expects a integer value as input. Why would you be passing it a float?

PaulS:
The map function expects a integer value as input. Why would you be passing it a float?

Sorry PaulS, this is Processing...

Description 	Re-maps a number from one range to another.

In the first example above, the number 25 is converted from a value in the range of 0 to 100 into a value that ranges from the left edge of the window (0) to the right edge (width).

As shown in the second example, numbers outside of the range are not clamped to the minimum and maximum parameters values, because out-of-range values are often intentional and useful.
Syntax	

map(value, start1, stop1, start2, stop2)

Parameters	
value 	float: the incoming value to be converted
start1 	float: lower bound of the value's current range
stop1 	float: upper bound of the value's current range
start2 	float: lower bound of the value's target range
stop2 	float: upper bound of the value's target range

I totally agree to the absolutly stupid name.

I just made the P-sketch work here and had it fed by an Arduino application that generated some values and text,
I was getting the NaNs on text.

Nice one Whandall - I banged my head against the wall with this, downloaded 'latest' code from Tom Igoe's GitHib (MakingThingsTalk2/SerialStringReaderGrapher.pde at main · tigoe/MakingThingsTalk2 · GitHub) but still no joy.

Then - used your code, sucess, and enjoyed playing with my FSR!!

Regarding the NaN problem: map(NaN, 0, 1023, 0, 300) called, which returns NaN (not a number)

  • I still get that with Whandall's code, but the program still works, and graphs nicely...

If we NEED a fix, I found that adding a println() fixed the NaN issue. You can print anything, but following the code from the book, I used the original

println(sensorValue);

I also changed the code around a bit - changed back variable names, and kept the drawGraph as a separate function:

/* 
   Serial String Reader
   Context: Processing
 
   Reads in a string of characters until it gets a linefeed (ASCII 10).
   Then converts the string into a number.
   
   Modified by Whandall
   
 */
import processing.serial.*;

Serial myPort;              // the serial port
float sensorValue = 0;      // the value from the sensor
float prevSensorValue = 0;  // previous value from the sensor
float lastXPos = 0;         // previous horizontal position
int xPos = 1;               // horizontal position of the graph

boolean newVal = false;



void setup() {
  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()[2], 115200);
  // don't generate a serialEvent() unless you get a newline character:
  myPort.bufferUntil('\n');
  // set inital background:
  background(0);
  stroke(127, 34, 255);
}

void draw () {
  drawGraph();
}


void serialEvent (Serial myPort) {
  String inString = myPort.readStringUntil('\n');
  if (inString != null) {
    inString = trim(inString);
    sensorValue = float(inString);
    sensorValue = map(sensorValue, 0, 1023, 0, height);
    newVal = true;
    println(sensorValue);
  }
} 

void drawGraph()  {
    if (newVal) {
    line(xPos, height, xPos, height - sensorValue);
    if (++xPos >= width) {
      xPos = 0;
      background(0);
    }
    newVal = false;
  }
}