Go Down

Topic: Problem with a Real Time Graph in Processing (Read 1 time) previous topic - next topic

xaral

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: [Select]
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);
       }
    }

PaulS

Code: [Select]
      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?

Rubeix

#2
May 10, 2012, 11:15 pm Last Edit: May 11, 2012, 01:42 am by Rubeix Reason: 1
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

PaulS

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??

Rubeix

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.. :)

Thanks a lot for your help

Code: [Select]

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


Rubeix

#5
May 13, 2012, 11:44 pm Last Edit: May 14, 2012, 12:10 am by Rubeix Reason: 1
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

xaral

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

Steen

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 :)

xaral

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

Go Up