next topic »

[Reply #15 on:]

Thanks... I approached it the second way, by separating the values with comma. I managed to get the 4 graphs representing the four different sensors, but my graphs are turning out really small and unreadable. Another thing, because each sensor is represented in a different unit, so I can't scale them out. Some graphs are clear others are not. Any help?
Oh and .. is there a way I could grid in processing? And have a x and y axis? Sorry I'm totally new to processing, and I tried my best.

Thanks

[Reply #16 on:]

This is the processing code I've used so far:

Code:

import processing.serial.*;

int maxNumberOfSensors = 4;       // Arduino has 4 sensors connected
boolean fontInitialized = false;  // whether the font's been initialized
Serial myPort;                    // The serial port

float[] previousValue = new float[maxNumberOfSensors];  // array of previous values
float xpos = 0;                     // x position of the graph
PFont myFont;                     // font for writing text to the window

void setup () {
  // set up the window to whatever size you want:
  size(1000, 500);       
  // List all the available serial ports:
  println(Serial.list());

  // is always my  Arduino or Wiring module, so I open Serial.list()[0].
  // Open whatever port is the one you're using.
  String portName = Serial.list()[0];
  myPort = new Serial(this, portName, 9600);
  myPort.clear();

  myPort.bufferUntil('\n');
  // create a font with the fourth font available to the system:
  myFont = createFont("Times New Roman", 12);
  textFont(myFont);
  fontInitialized = true;
  // set inital background:
  background(255);
  // turn on antialiasing:
  smooth();
}

void draw () {
  // nothing happens in the draw loop,
 
}

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

  // if it's not empty:
  if (inString != null) {
    // trim off any whitespace:
    inString = trim(inString);

    // convert to an array of ints:
    int incomingValues[] = int(split(inString, ","));

    // print out the values
      //print("length: " + incomingValues.length + " values.\t");
    if (incomingValues.length <= maxNumberOfSensors && incomingValues.length > 0) {
      for (int i = 0; i < incomingValues.length; i++) {

        // map the incoming values (0 to  1023) to an appropriate
        // graphing range (0 to window height/number of values):
        float ypos = map(incomingValues[i], 0, 1023, 0, height/incomingValues.length);

        // figure out the y position for this particular graph:
        float graphBottom = i * height/incomingValues.length ;
        ypos = ypos + graphBottom;

        // make a black block to erase the previous text:
        noStroke();
        fill(170);
       //rect(10, graphBottom, 50, 15);

        // print the sensor numbers to the screen:
        fill(0);
        int textPos = int(graphBottom);
        // sometimes serialEvent() can happen before setup() is done.
        // so you need to make sure the font is initialized before
        // you text():
        if (fontInitialized) {
        //text("Sensor " + i , 10, textPos);
            }

        stroke(127,86,255);
        smooth();
        strokeWeight(1.3);
        // change colors to draw the graph line:
     
        stroke(127,56,255);
        line(xpos, height-previousValue[i], xpos+1, height-ypos);
        // save the current value to be the next time's previous value:
        previousValue[i] = ypos;
      }
    }
    // if you've drawn to the edge of the window, start at the beginning again:
    if (xpos >= width) {
      saveFrame();
      xpos = 0.5;
      background(255);
    }
    else {
      xpos+=.80;
    }
  }
}

[Reply #17 on:]

because each sensor is represented in a different unit, so I can't scale them out.

Yes you can, you apply a different scaling factor for each reading before you plot them.

[Reply #18 on:]

You have to scale the values by different amounts. My guess is you would do it here somewhere

Code:

      for (int i = 0; i < incomingValues.length; i++) {

        // map the incoming values (0 to  1023) to an appropriate
        // graphing range (0 to window height/number of values):
        float ypos = map(incomingValues[i], 0, 1023, 0, height/incomingValues.length);

maybe

Code:

int scaleVals[maxNumberOfSensors ] = {1, 1, 2, 10};

      for (int i = 0; i < incomingValues.length; i++) {

        // map the incoming values (0 to  1023) to an appropriate
        // graphing range (0 to window height/number of values):
        float ypos = map(incomingValues[i], 0, 1023, 0, height/incomingValues.length * scaleVals[i]);

Although I have not looked to see what "height/incomingValues.length" is.

______
Rob

[Reply #19 on:]

After including the part you suggested, i got this error message saying:

unexpected token:  int

This is the code after adding your bit to it:

Code:

import processing.serial.*;

int maxNumberOfSensors = 4;       // Arduino has 6 analog inputs, so I chose 6
boolean fontInitialized = false;  // whether the font's been initialized
Serial myPort;                    // The serial port

float[] previousValue = new float[maxNumberOfSensors];  // array of previous values
float xpos = 0;                     // x position of the graph
PFont myFont;                     // font for writing text to the window

void setup () {
  // set up the window to whatever size you want:
  size(1000, 500);       
  // 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 or Wiring module, so I open Serial.list()[0].
  // Open whatever port is the one you're using.
  String portName = Serial.list()[0];
  myPort = new Serial(this, portName, 9600);
  myPort.clear();
  // don't generate a serialEvent() until you get a newline (\n) byte:
  myPort.bufferUntil('\n');
  // create a font with the fourth font available to the system:
  myFont = createFont("Times New Roman", 12);
  textFont(myFont);
  fontInitialized = true;
  // set inital background:
  background(255);
  // turn on antialiasing:
  smooth();
}

void draw () {
  // nothing happens in the draw loop,
 
}

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

  // if it's not empty:
  if (inString != null) {
    // trim off any whitespace:
    inString = trim(inString);

    // convert to an array of ints:
    int incomingValues[] = int(split(inString, ","));

    // print out the values
      //print("length: " + incomingValues.length + " values.\t");
      int scaleVals[maxNumberOfSensors] = {1, 1, 2, 10};
    //if (incomingValues.length <= maxNumberOfSensors && incomingValues.length > 0) {
      for (int i = 0; i < incomingValues.length; i++) {

        // map the incoming values (0 to  1023) to an appropriate
        // graphing range (0 to window height/number of values):
        //float ypos = map(incomingValues[i], 0, 1023, 0, height/incomingValues.length);
        float ypos = map(incomingValues[i], 0, 1023, 0, height/incomingValues.length * scaleVals[i]);
        // figure out the y position for this particular graph:
        float graphBottom = i * height/incomingValues.length ;
        ypos = ypos + graphBottom;

        // make a black block to erase the previous text:
        noStroke();
        fill(170);
       //rect(10, graphBottom, 50, 15);

        // print the sensor numbers to the screen:
        fill(0);
        int textPos = int(graphBottom);
        // sometimes serialEvent() can happen before setup() is done.
        // so you need to make sure the font is initialized before
        // you text():
        if (fontInitialized) {
        //text("Sensor " + i , 10, textPos);
            }

        stroke(127,86,255);
        smooth();
        strokeWeight(1.3);
        // change colors to draw the graph line:
     
        stroke(127,56,255);
        line(xpos, height-previousValue[i], xpos+1, height-ypos);
        // save the current value to be the next time's previous value:
        previousValue[i] = ypos;
      }
    }
    // if you've drawn to the edge of the window, start at the beginning again:
    if (xpos >= width) {
      saveFrame();
      xpos = 0.5;
      background(255);
    }
    else {
      xpos+=.80;
    }
  }
}

[Reply #20 on:]

Attached is an image of a screenshot showing the four unreadable graphs. Also can I change the colour for each graph? Sorry totally new to processing.

[Reply #21 on:]

I've not used processing either, but I can't see anything wrong with the code.

Which line has the error?

______
Rob

[Reply #22 on:]

Try

Code:

    // print out the values
    //print("length: " + incomingValues.length + " values.\t");
    int[] scaleVals = {1, 1, 2, 10};

In place of

Code:

    // print out the values
      //print("length: " + incomingValues.length + " values.\t");
      int scaleVals[maxNumberOfSensors] = {1, 1, 2, 10};

[Reply #23 on:]

I think this line here:

Code:

    // convert to an array of ints:
    int incomingValues[] = int(split(inString, ","));  <<<  can you have "int" on the right side??

maybe here too

Code:

        // print the sensor numbers to the screen:
        fill(0);
        int textPos = int(graphBottom);

[Reply #24 on:]

Rob the error is a long this line:

int scaleVals[maxNumberOfSensors] = {1, 1, 2, 10};

dxw00d .. I tried what you suggested yet, i'm able to display only 3 graphs and the scaling hasn't really worked.

CrossRoads: They seem to work fine, no errors at all for those two lines of code.

[Reply #25 on:]

dxw00d I think your suggestion was the closest. I think it's just the scale factors that made the difference. Another thing, if you open the screenshot I attached, you'll  realise the frequency of the bottom graph is a lot different to the rest? Any idea why?

PS: Changing the colour of the graphs, is something i'm trying to do. I can change the graphs of all but can't change each individually.

Cheers.

[Reply #26 on:]

Each number represents values from different sensor. 4 sensors are used. As you can see first 3 coloumns somehow have similar reading, where the last column doesn't. That's why I need to scale each independently.

294,138,192,558

297,139,194,555

298,139,195,559

296,138,193,556

293,138,191,558

293,139,191,559
...
...

[Reply #27 on:]

Rob the error is a long this line:

int scaleVals[maxNumberOfSensors] = {1, 1, 2, 10};

OK, I guess processing has a different syntax, is that now working with the above suggestions?

the scaling hasn't really worked.

So using

float ypos = map(incomingValues, 0, 1023, 0, height/incomingValues.length * scaleVals [ i ]);

Had no affect?

______
Rob

[Reply #28 on:]

Yes, that had no effect.

[Reply #29 on:]

What about

float ypos = map(incomingValues, 0, 1023, 0, height/incomingValues.length * 10);

If that doesn't have some effect then I don't know what's happening. You can't just multiply the Y position by 10 and not see a result unless it is 0.


______
Rob