Graph with Processing Arduino as webserver

Hello my dear people,

when it comes to programming, you could say I am a noob. Though I will have to finish a project, where I use an NTC with an Arduino for a temperature sensor. The Arduino is then used as webserver, so I can access it from a network. So far so good, that was the easy task, did that. It works.
Problem is: Now we were told to draw a Graph for our temperatures with processing. There is also no problem with this when accessing it via USB. When I wnat to use Processing as Client to gather data from the webserver though it stops working. I don’t really know how to get these two to communicate. Could you please help? I’ll post my Codes below:

(Note: No matter how ugly it’ll look. It just has to show something)

The arduino Code for the webserver (it’s the standard code from the examples):

/*
Web Server

A simple web server that shows the value of the analog input pins.
using an Arduino Wiznet Ethernet shield.

Circuit:

  • Ethernet shield attached to pins 10, 11, 12, 13
  • Analog inputs attached to pins A0 through A5 (optional)

created 18 Dec 2009
by David A. Mellis
modified 9 Apr 2012
by Tom Igoe

*/

#include <SPI.h>
#include <Ethernet.h>

// Enter a MAC address and IP address for your controller below.
// The IP address will be dependent on your local network:
byte mac = {
0x90, 0xA2, 0xDA, 0x0E, 0x0B, 0xAE };
IPAddress ip(132,252,134,253);

// Initialize the Ethernet server library
// with the IP address and port you want to use
// (port 80 is default for HTTP):
EthernetServer server(80);

void setup() {
// Open serial communications and wait for port to open:
Serial.begin(9600);
while (!Serial) {
; // wait for serial port to connect. Needed for Leonardo only
}

// start the Ethernet connection and the server:
Ethernet.begin(mac, ip);
server.begin();
Serial.print("server is at ");
Serial.println(Ethernet.localIP());
}

void loop() {
// listen for incoming clients
EthernetClient client = server.available();
if (client) {
Serial.println(“new client”);
// an http request ends with a blank line
boolean currentLineIsBlank = true;
while (client.connected()) {
if (client.available()) {
char c = client.read();
Serial.write(c);
// if you’ve gotten to the end of the line (received a newline
// character) and the line is blank, the http request has ended,
// so you can send a reply
if (c == ‘\n’ && currentLineIsBlank) {
// send a standard http response header
client.println(“HTTP/1.1 200 OK”);
client.println(“Content-Type: text/html”);
client.println(“Connection: close”); // the connection will be closed after completion of the response
client.println(“Refresh: 5”); // refresh the page automatically every 5 sec
client.println();
client.println("");
client.println("");
// output the value of each analog input pin
for (int analogChannel = 0; analogChannel < 1; analogChannel++) {
int sensorReading = analogRead(analogChannel);

client.print(sensorReading);
}
client.println("");
break;
}
if (c == ‘\n’) {
// you’re starting a new line
currentLineIsBlank = true;
}
else if (c != ‘\r’) {
// you’ve gotten a character on the current line
currentLineIsBlank = false;
}
}
}
// give the web browser time to receive the data
delay(1);
// close the connection:
client.stop();
Serial.println(“client disonnected”);
}
}

Now the Code for Processing

import processing.net.*;

int yPos ;

Client myClient;
int dataIn;

void setup(){
size(400, 400); // Zeichenflächen Ausdehnung in Pixel
// smooth(); // Antialiasing (Kantenglättung)
background(10);
strokeWeight(0.1); // dünne Linie
stroke(255);
fill(255 / 2); // dunkelgraue Schrift
// Raster zeichnen alle 50 Pixel eine Linie
for (int i = 50; i < width; i += 50)
{
line (i, 0, i, height); // senkrechte Linien
line (0, i, width, i); // wagrechte Linien
if (i % 10 == 0) { // jede Linie beschriften
textAlign(CENTER); // Text mittig
text(i / 10, i, 12); // obere Beschriftung
textAlign(RIGHT); // Text rechtsbündig
text(i / 10, 20, i + 6); // linke Beschriftung
}
}
{
fill(255); // Textfarbe schwarz
stroke(0, 127, 0); // Linienfarbe dunkel-grün
strokeWeight(1); // Liniendicke 1 Pixel
line(0, 30, width, 30); // X-Achse
line(30, 0, 30, height); // Y-Achse

yPos = new int[width];

}

myClient = new Client(this, “132.252.134.253”, 80);

}

void draw()
{
if (myClient.available() > 0) {
dataIn = myClient.read();

println(dataIn);}

stroke (150,0,0); strokeWeight(0.00000001);
int yPosPrev = 0, xPosPrev = 0;

for(int x = 1; x < width; x++)
yPos[x-1] = yPos;

yPos[width - 1] = dataIn;

for(int x = 0; x < width; x++)
{
if(x > 0)
line (xPosPrev, yPosPrev, x, yPos);
xPosPrev = x;
yPosPrev = yPos;
}
}

It did work thogh with these Codes via USB:

Arduino (standard Analog Read from the examples):

/*
AnalogReadSerial
Reads an analog input on pin 0, prints the result to the serial monitor.
Attach the center pin of a potentiometer to pin A0, and the outside pins to +5V and ground.

This example code is in the public domain.
*/

#include <SPI.h>
#include <Ethernet.h>

byte mac = {
0x90, 0xA2, 0xDA, 0x0E, 0x0B, 0xAE };
IPAddress ip(132,252,134,253);

// Initialize the Ethernet server library
// with the IP address and port you want to use
// (port 80 is default for HTTP):
EthernetServer server(80);

// the setup routine runs once when you press reset:
void setup() {
// initialize serial communication at 9600 bits per second:
Serial.begin(9600);
}

// the loop routine runs over and over again forever:
void loop() {
// read the input on analog pin 0:
int sensorValue = analogRead(A0);
// print out the value you read:
Serial.println(sensorValue);
delay(1000); // delay in between reads for stability
}

Processing (very ugly, not very useful, but you could see something

import processing.serial.*;

Serial serial;

int sensorValue;
int yPos ;

void setup(){
size(400, 400); // Zeichenflächen Ausdehnung in Pixel
smooth(); // Antialiasing (Kantenglättung)
background(0); // hellgrauer Hintergrund
strokeWeight(0.1); // dünne Linie
stroke(255); // graue Linien
fill(255 / 2); // dunkelgraue Schrift
// Raster zeichnen alle 50 Pixel eine Linie
for (int i = 50; i < width; i += 50)
{
line (i, 0, i, height); // senkrechte Linien
line (0, i, width, i); // wagrechte Linien
if (i % 10 == 0) { // jede Linie beschriften
textAlign(CENTER); // Text mittig
text(i / 10, i, 12); // obere Beschriftung
textAlign(RIGHT); // Text rechtsbündig
text(i / 10, 20, i + 6); // linke Beschriftung
}
}
{
fill(255); // Textfarbe schwarz
stroke(0, 127, 0); // Linienfarbe dunkel-grün
strokeWeight(1); // Liniendicke 1 Pixel
line(0, 30, width, 30); // X-Achse
line(30, 0, 30, height); // Y-Achse
line(350, 20, 380, 20); // Pfeil X-Achse
line(375, 17, 380, 20);
line(375, 23, 380, 20);
line(40, 282, 40, 320); // Pfeil Y-Achse
line(40, 320, 37, 313);
line(40, 320, 43, 313);
strokeWeight(0.5); // dünne Linie
line(240, 90, 260, 110); // Fadenkreuz pos(25,10)
line(260, 90, 240, 110);
textAlign(LEFT); // Text linksbündig
textLeading(15); // Zeilenabstand 15 Pixel
stroke(0);
fill(0);

yPos = new int[width];

}

// String adaptor= “/dev/cu.usbmodem1421”;
serial = new Serial(this, “COM3”, 9600);

}

void draw()
{
if ( serial.available() > 0) {

sensorValue = serial.read();

println(sensorValue);}

stroke (255,0,0); strokeWeight(0.1);
int yPosPrev = 0, xPosPrev = 0;

for(int x = 1; x < width; x++)
yPos[x-1] = yPos;

yPos[width - 1] = sensorValue;

for(int x = 0; x < width; x++)
{
if(x > 0)
line (xPosPrev, yPosPrev, x, yPos);
xPosPrev = x;
yPosPrev = yPos;
}
}

EDIT: The Problem ist, that the grid is shown, but there doesn't seem to be any data read or shown.

Is this real time graphing? No need to save the data on an ad card? Use the code] tag on your code. Nobody wants to read all that.

strokeWeight(0.00000001);

From: http://py.processing.org/reference/strokeWeight.html

Sets the width of the stroke used for lines, points, and the border around shapes. All widths are set in units of pixels.

That means that strokeWeight() takes an integer.

Hello my dear people,

7 below:

http://forum.arduino.cc/index.php/topic,148850.0.html