Pages: [1]   Go Down
Author Topic: Problem with a Real Time Graph in Processing  (Read 1316 times)
0 Members and 1 Guest are viewing this topic.
Offline Offline
Newbie
*
Karma: 0
Posts: 40
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

Hello peolple,

I´m just trying to get a real time graph from temperature values, for that I built a sketch on processing based. To simulate the temperature values I used the position of the mouse.

The problem is that I just get a point running on time, not a line like I want. I think the mistake is on drawDataLine() function (last function).

Somebody can help me with this??

Thanks in advance

   
Code:
float dataMin, dataMax;
    float plotX1, plotY1;
    float plotX2, plotY2;
    float labelX, labelY;


    int [] time = {0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24};
    int timeInterval = 1;
    int timeMin = 0;
    int timeMax = 24;
    int volumeInterval = 10;
    int volumeIntervalMinor = 5;

    float lineX = 120;

    PFont plotFont;

    void setup ()
    {
      size(1000,500);
      plotX1 = 120;
      plotX2 = width - 80;
      labelX = 50;
      plotY1 = 60;
      plotY2 = height - 70;
      labelY = height - 25;
      dataMin = 0;
      dataMax = ceil (50/volumeInterval)*volumeInterval;
      plotFont = createFont("SansSerif", 20);
      textFont(plotFont);
     
      smooth();
    }
     
    void draw ()
    {
      background(224);
       
      // Show the plot area as a white box 
      fill(255);
      rectMode(CORNERS);
      noStroke();
      rect(plotX1, plotY1, plotX2, plotY2); 
      stroke(2);
      smooth();
     
      drawTitle();
      drawAxisLabels();
      drawYearLabels();
      drawVolumeLabels();
      drawDataLine();

    }

    void drawTitle() {
      fill(0);
      textSize(20);
      textAlign(LEFT);
      String title = "Temperature";
      text(title, plotX1, plotY1 - 10);
    }
     
    void drawYearLabels()
    {
      fill(0);
      textSize(10);
      textAlign(CENTER);
     
      // Use thin, gray lines to draw the grid
      stroke(224);
      strokeWeight(1);
     
      for (int row = 0; row < 25; row++) {
        if (time[row] % timeInterval == 0) {
          float x = map(time[row], timeMin, timeMax, plotX1, plotX2);
          text(time[row], x, plotY2 + textAscent() + 10);
          line(x, plotY1, x, plotY2);
        }
      }
    }

      void drawAxisLabels()
    {
      fill(0);
      textSize(13);
      textLeading(15);
     
      textAlign(CENTER, CENTER);
      text("Graus Celsius\n (ºC)", labelX, (plotY1+plotY2)/2);
      textAlign(CENTER);
      text("Time (h)", (plotX1+plotX2)/2, labelY);
    }

    void drawVolumeLabels() {
      fill(0);
      textSize(10);
      textAlign(RIGHT);
     
      stroke(128);
      strokeWeight(1);

      for (float v = dataMin; v <= dataMax; v += volumeIntervalMinor) {
        if (v % volumeIntervalMinor == 0) {     // If a tick mark
          float y = map(v, dataMin, dataMax, plotY2, plotY1); 
          if (v % volumeInterval == 0) {        // If a major tick mark
            float textOffset = textAscent()/2;  // Center vertically
            if (v == dataMin) {
              textOffset = 0;                   // Align by the bottom
            } else if (v == dataMax) {
              textOffset = textAscent();        // Align by the top
            }
            text(floor(v), plotX1 - 10, y + textOffset);
            line(plotX1 - 4, y, plotX1, y);     // Draw major tick
          } else {
            //line(plotX1 - 2, y, plotX1, y);     // Draw minor tick
          }
        }
      }
    }

    void mousePressed()
    {
      println("Coordinates: " + mouseX +"," + mouseY);
    }


    void drawDataLine() { 
      stroke(#5679C1);
      strokeWeight(5);
      noFill();
     
      if(pmouseY>60 && pmouseY<(height-70))
      {
      line (lineX,mouseY,lineX,pmouseY);
      lineX ++;
      delay(20);
      }
     
      if (lineX>width-80)
      {
        lineX=120;
        background (255);
       }
    }
Logged

Seattle, WA USA
Offline Offline
Brattain Member
*****
Karma: 547
Posts: 45982
Seattle, WA USA
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

Code:
      line (lineX,mouseY,lineX,pmouseY);
This draws a mighty short line.

Presumably, you want to draw a line from some previous point to the current mouse position. Yes? No?

Is so, what previous point?
Logged

Offline Offline
Newbie
*
Karma: 0
Posts: 17
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

Hello,

I´m doing the same work with Xaral..
Yes we want to draw a line from the previous points of mouse position (like temperature values along the time), but we are just getting the current point.
Do you know how to get the whole line??

Thanks for help
« Last Edit: May 10, 2012, 06:42:21 pm by Rubeix » Logged

Seattle, WA USA
Offline Offline
Brattain Member
*****
Karma: 547
Posts: 45982
Seattle, WA USA
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

Quote
Do you know how to get the whole line??
Yes.. It''s easy,, really..

When you draw a line,, record the end point of the line in a pair of variables ((lastX and lastY,, maybe)).. When you draw the next line,, draw it from lastX,, lastY to currX,, currY ((where currX,, currY is the end of the next segment))..

Did the double punctuation help??
Logged

Offline Offline
Newbie
*
Karma: 0
Posts: 17
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

Hello,

I already fixed the problem...I was setting background in the void draw()  function and the background was hiding the curve.
Also,everything drawn with some fill() in the  void draw () function hides the curve, that´s why I have the grid lines at the same colour as the curve.
Here is the new code if you want to see..
I think it works well now!With some McGyver tricks but it works.. smiley

Thanks a lot for your help

Code:
float dataMin, dataMax;
float plotX1, plotY1;
float plotX2, plotY2;
float labelX, labelY;

//Set the time data
int [] time = {0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24};
int timeInterval = 1;
int timeMin = 0;
int timeMax = 24;
int volumeInterval = 2;
int volumeIntervalMinor = 2;

float lineX = 120;//To start next to the Y axis

PFont plotFont;

void setup ()
{
  size(1000,600);
  background(224);
  plotX1 = 120;
  plotX2 = width - 80;
  labelX = 50;
  plotY1 = 60;
  plotY2 = height - 70;
  labelY = height - 25;
  dataMin = 0;
  dataMax = ceil (50/volumeInterval)*volumeInterval;
  plotFont = createFont("SansSerif", 20);
  textFont(plotFont);
 
  smooth();
}
 
void draw ()
{
  // Show the plot area as a white box 
  //fill(255);
  rectMode(CORNERS);
  stroke(#5679C1);
  strokeWeight(1);
  rect(plotX1, plotY1, plotX2, plotY2); 
  stroke(2);
  smooth();
  fill(224);
  noStroke();
  rect(0,0,width,plotY1);
  rect(0,0,plotX1,height);
  rect(0,height,width,plotY2);
  rect(plotX2,0,width,height);

  drawAxisLabels();
  drawYearLabels();
  drawVolumeLabels();
  drawTitle();
  drawDataLine();
  smooth();

}

void drawTitle() {
  fill(0,0,255);
  textSize(20);
  textAlign(LEFT);
  String title = "Temperature";
  text(title, plotX1, plotY1 - 10);
}
 
void drawYearLabels()
{
  fill(0,0,255);
  textSize(10);
  textAlign(CENTER);
 
  // Use thin, blue lines to draw the grid
  for (int row = 0; row < 25; row++) {
    if (time[row] % timeInterval == 0) {
      float x = map(time[row], timeMin, timeMax, plotX1, plotX2);
      text(time[row], x, plotY2 + textAscent() + 10);
      stroke(#5679C1);
      strokeWeight(0.00001);
      line(x, plotY1, x, plotY2);
      line(plotX1,plotY2,plotX2,plotY2);
      line(plotX2,plotY1,plotX2,plotY2);
      stroke(0);
      strokeWeight(1);
      line(x, plotY2+4, x, plotY2);
    }
  }
}

  void drawAxisLabels()
{
  fill(0,0,255);
  textSize(13);
  textLeading(15);
 
  textAlign(CENTER, CENTER);
  text("Graus Celsius\n (ºC)", labelX, (plotY1+plotY2)/2);
  textAlign(CENTER);
  text("Time (h)", (plotX1+plotX2)/2, labelY);
}

void drawVolumeLabels() {
  fill(0,0,255);
  textSize(10);
  textAlign(RIGHT);
 
  stroke(0);
  strokeWeight(1);

  for (float v = dataMin; v <= dataMax; v += volumeIntervalMinor) {
    if (v % volumeIntervalMinor == 0) {     // If a tick mark
      float y = map(v, dataMin, dataMax, plotY2, plotY1); 
      if (v % volumeInterval == 0) {        // If a major tick mark
        float textOffset = textAscent()/2;  // Center vertically
        if (v == dataMin) {
          textOffset = 0;                   // Align by the bottom
        } else if (v == dataMax) {
          textOffset = textAscent();        // Align by the top
        }
        text(floor(v), plotX1 - 10, y + textOffset);
        line(plotX1 - 4, y, plotX1, y);     // Draw major tick
        line(plotX1-2, y+9, plotX1, y+9);  //line to draw midle lines
      } else {
        //line(plotX1 - 2, y, plotX1, y);     // Draw minor tick
      }
    }
  }
}

void mousePressed()
{
  println("Coordinates: " + mouseX +"," + mouseY);
}


void drawDataLine() { 
  stroke(#5679C1);
  strokeWeight(5);
  noFill();
 
  if(pmouseY>60 && pmouseY<(height-70))
  {
  line (lineX,mouseY,lineX,pmouseY);
  lineX ++;
  delay(20);
  }
 
  if (lineX>width-80)
  {
    lineX=120;
    background (255);
   }
}

Logged

Offline Offline
Newbie
*
Karma: 0
Posts: 17
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

Hello people,

Now that I have it working a just need a little more help...
This sketch (http://www.openprocessing.org/sketch/61287) makes a realtime graph of the mouse position when it's inside the window, it opens 3 windows that do exactly the same. It is a sketch to make a realtime graph of 3 different sensors..
However I would like to put them together on the same window and switch the view with tabs like it  does in this example:  http://www.openprocessing.org/sketch/49248 (similar to interpolate example).

The problem is that i don´t understand how can I modify the code to adapt to my case.

Somebody can help me with this?

Thanks in advance
« Last Edit: May 13, 2012, 05:10:55 pm by Rubeix » Logged

Offline Offline
Newbie
*
Karma: 0
Posts: 40
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

SOmebody here that already had used Processing as an interface, with this tabs/buttons that Ruben mentioned above??
Logged

Belgium
Offline Offline
Full Member
***
Karma: 0
Posts: 187
View Profile
WWW
 Bigger Bigger  Smaller Smaller  Reset Reset

ControlP5 is the GUI i use for Processing. It's easy and simple to use, and it has a lot of examples that come with it.
As graphing functions you could use Gwoptics, a nice graphing lib that even supports 3D graphing smiley
Logged


Offline Offline
Newbie
*
Karma: 0
Posts: 40
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

At this moment I'm using the software kst...
Let's see what my group decide between this option and processing.

Thanks for your suggestion
Logged

Pages: [1]   Go Up
Jump to: