Loading...
Logo
Processing Forum
Programming Questions
rubeix
rubeix

Trying to draw a lifetime graph

in Programming Questions  •  1 year ago  
Hello peolple,

I´m just trying to get a life time plot 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

Copy code
  2. float dataMin, dataMax;
  3. float plotX1, plotY1;
  4. float plotX2, plotY2;
  5. float labelX, labelY;


  8. 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};
  9. int timeInterval = 1;
  10. int timeMin = 0;
  11. int timeMax = 24;
  12. int volumeInterval = 10;
  13. int volumeIntervalMinor = 5;

  15. float lineX = 120;

  17. PFont plotFont;

  19. void setup ()
  20. {
  21.   size(1000,500);
  22.   plotX1 = 120; 
  23.   plotX2 = width - 80;
  24.   labelX = 50;
  25.   plotY1 = 60;
  26.   plotY2 = height - 70;
  27.   labelY = height - 25;
  28.   dataMin = 0;
  29.   dataMax = ceil (50/volumeInterval)*volumeInterval;
  30.   plotFont = createFont("SansSerif", 20);
  31.   textFont(plotFont);
  32.   
  33.   smooth();
  34. }
  35.   
  36. void draw ()
  37. {
  38.   background(224);
  39.     
  40.   // Show the plot area as a white box  
  41.   fill(255);
  42.   rectMode(CORNERS);
  43.   noStroke();
  44.   rect(plotX1, plotY1, plotX2, plotY2);  
  45.   stroke(2);
  46.   smooth();
  47.   
  48.   drawTitle();
  49.   drawAxisLabels();
  50.   drawYearLabels();
  51.   drawVolumeLabels();
  52.   drawDataLine();

  54. }

  56. void drawTitle() {
  57.   fill(0);
  58.   textSize(20);
  59.   textAlign(LEFT);
  60.   String title = "Temperature";
  61.   text(title, plotX1, plotY1 - 10);
  62. }
  63.   
  64. void drawYearLabels() 
  65. {
  66.   fill(0);
  67.   textSize(10);
  68.   textAlign(CENTER);
  69.   
  70.   // Use thin, gray lines to draw the grid
  71.   stroke(224);
  72.   strokeWeight(1);
  73.   
  74.   for (int row = 0; row < 25; row++) {
  75.     if (time[row] % timeInterval == 0) {
  76.       float x = map(time[row], timeMin, timeMax, plotX1, plotX2);
  77.       text(time[row], x, plotY2 + textAscent() + 10);
  78.       line(x, plotY1, x, plotY2);
  79.     }
  80.   }
  81. }

  83.   void drawAxisLabels() 
  84. {
  85.   fill(0);
  86.   textSize(13);
  87.   textLeading(15);
  88.   
  89.   textAlign(CENTER, CENTER);
  90.   text("Graus Celsius\n (ºC)", labelX, (plotY1+plotY2)/2);
  91.   textAlign(CENTER);
  92.   text("Time (h)", (plotX1+plotX2)/2, labelY);
  93. } 

  95. void drawVolumeLabels() {
  96.   fill(0);
  97.   textSize(10);
  98.   textAlign(RIGHT);
  99.   
  100.   stroke(128);
  101.   strokeWeight(1);

  103.   for (float v = dataMin; v <= dataMax; v += volumeIntervalMinor) {
  104.     if (v % volumeIntervalMinor == 0) {     // If a tick mark
  105.       float y = map(v, dataMin, dataMax, plotY2, plotY1);  
  106.       if (v % volumeInterval == 0) {        // If a major tick mark
  107.         float textOffset = textAscent()/2;  // Center vertically
  108.         if (v == dataMin) {
  109.           textOffset = 0;                   // Align by the bottom
  110.         } else if (v == dataMax) {
  111.           textOffset = textAscent();        // Align by the top
  112.         }
  113.         text(floor(v), plotX1 - 10, y + textOffset);
  114.         line(plotX1 - 4, y, plotX1, y);     // Draw major tick
  115.       } else {
  116.         //line(plotX1 - 2, y, plotX1, y);     // Draw minor tick
  117.       }
  118.     }
  119.   }
  120. }

  122. void mousePressed() 
  123. {
  124.   println("Coordinates: " + mouseX +"," + mouseY);
  125. }


  128. void drawDataLine() {  
  129.   stroke(#5679C1);
  130.   strokeWeight(5);
  131.   noFill();
  132.   
  133.   if(pmouseY>60 && pmouseY<(height-70))
  134.   {
  135.   line (lineX,mouseY,lineX,pmouseY); 
  136.   lineX ++;
  137.   delay(20);
  138.   }
  139.   
  140.   if (lineX>width-80)
  141.   {
  142.     lineX=120;
  143.     background (255);
  144.    }
  145. }

Replies(8)

novellof
novellof

Re: Trying to draw a lifetime graph

1 year ago
wow sorry i can't help you but that is a really impressive graph!!!

good luck... i guess my only help will be bumping your thread up for you :)
PhiLho
PhiLho

Re: Trying to draw a lifetime graph

1 year ago
One problem, among others, is that you redraw the whole graph on each frame. That's OK, but your sketch has no memory of the previous data, so it can only draw the instant value.
You have to store all the coordinates, eg. making a PVector for each value, and storing them in an array list. Then after drawing the plot area, iterate on the values in the array list and draw lines between the coordinates.
rubeix
rubeix

Re: Re: Trying to draw a lifetime graph

1 year ago
Hi PhiLho,

I think you are right, but I'm not sure if I know how to do that...
I replaced the  void drawDataLine() function above by the following one, but the whole code doesn´t work anymore..
Can you help me please?

Is it something like this what you told me to do?

Thank you very much for your help
Copy code
  1. float [] coordinateX;
    float [] coordinateY; 

    void drawDataLine() 
    { 
      for (int lineX= 0; lineX<=1000; lineX++)
      {
        coordinateX [lineX] = lineX;
      }
      for (int a= 0; a <=1000; a++)
      {
        coordinateY [a] = pmouseY;
      }

      stroke(#5679C1);
      strokeWeight(5);
      noFill();
      
      for (int b = 0; b<1000; b++)
      {
        if(pmouseY>60 && pmouseY<(height-70))
        {
          line (0,mouseY,coordinateX [b],coordinateY [b]); 
          delay(20);
        }
      }
    }
PhiLho
PhiLho

Re: Trying to draw a lifetime graph

1 year ago
Not really... See the Technical FAQ for explanations why it is a bad idea to use delay() and to do lot of loops in draw()...
And I was thinking about ArrayList. There are lot of examples of using it, search the forum with ArrayList, PVector, perhaps drawing. I will come back this evening to help more if needed.
rubeix
rubeix

Re: Re: Trying to draw a lifetime graph

1 year ago
I will have a look at that, I didn't work yet with ArrayList but I will try to manage..after I tell you something.
The strange thing is that I had already draw a graph based on the following links and it was not necessary to save the previous data to get the whole line ( http://arduino.cc/en/Tutorial/Graph, http://robotpig.net/UAVs-blogs/arduino-and-processing-_1772). And I don´t understand why it doesn´t work in this case I´m trying now..

Thanks again for help
rubeix
rubeix

Re: Trying to draw a lifetime graph

1 year ago
Hello,

I already fixed the problem...I was setting background in the void draw()  function and the background was hiding the curve.
Also,everything you draw 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

 
Copy code
  2. float dataMin, dataMax;
  3. float plotX1, plotY1;
  4. float plotX2, plotY2;
  5. float labelX, labelY;

  7. //Set the time data
  8. 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};
  9. int timeInterval = 1;
  10. int timeMin = 0;
  11. int timeMax = 24;
  12. int volumeInterval = 2;
  13. int volumeIntervalMinor = 2;

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

  17. PFont plotFont;

  19. void setup ()
  20. {
  21.   size(1000,600);
  22.   background(224);
  23.   plotX1 = 120; 
  24.   plotX2 = width - 80;
  25.   labelX = 50;
  26.   plotY1 = 60;
  27.   plotY2 = height - 70;
  28.   labelY = height - 25;
  29.   dataMin = 0;
  30.   dataMax = ceil (50/volumeInterval)*volumeInterval;
  31.   plotFont = createFont("SansSerif", 20);
  32.   textFont(plotFont);
  33.   
  34.   smooth();
  35. }
  36.   
  37. void draw ()
  38. {
  39.   // Show the plot area as a white box  
  40.   //fill(255);
  41.   rectMode(CORNERS);
  42.   stroke(#5679C1);
  43.   strokeWeight(1);
  44.   rect(plotX1, plotY1, plotX2, plotY2);  
  45.   stroke(2);
  46.   smooth();
  47.   fill(224);
  48.   noStroke();
  49.   rect(0,0,width,plotY1);
  50.   rect(0,0,plotX1,height);
  51.   rect(0,height,width,plotY2);
  52.   rect(plotX2,0,width,height);

  54.   drawAxisLabels();
  55.   drawYearLabels();
  56.   drawVolumeLabels();
  57.   drawTitle();
  58.   drawDataLine();
  59.   smooth();

  61. }

  63. void drawTitle() {
  64.   fill(0,0,255);
  65.   textSize(20);
  66.   textAlign(LEFT);
  67.   String title = "Temperature";
  68.   text(title, plotX1, plotY1 - 10);
  69. }
  70.   
  71. void drawYearLabels() 
  72. {
  73.   fill(0,0,255);
  74.   textSize(10);
  75.   textAlign(CENTER);
  76.   
  77.   // Use thin, blue lines to draw the grid
  78.   for (int row = 0; row < 25; row++) {
  79.     if (time[row] % timeInterval == 0) {
  80.       float x = map(time[row], timeMin, timeMax, plotX1, plotX2);
  81.       text(time[row], x, plotY2 + textAscent() + 10);
  82.       stroke(#5679C1);
  83.       strokeWeight(0.00001);
  84.       line(x, plotY1, x, plotY2);
  85.       line(plotX1,plotY2,plotX2,plotY2);
  86.       line(plotX2,plotY1,plotX2,plotY2);
  87.       stroke(0);
  88.       strokeWeight(1);
  89.       line(x, plotY2+4, x, plotY2);
  90.     }
  91.   }
  92. }

  94.   void drawAxisLabels() 
  95. {
  96.   fill(0,0,255);
  97.   textSize(13);
  98.   textLeading(15);
  99.   
  100.   textAlign(CENTER, CENTER);
  101.   text("Graus Celsius\n (ºC)", labelX, (plotY1+plotY2)/2);
  102.   textAlign(CENTER);
  103.   text("Time (h)", (plotX1+plotX2)/2, labelY);
  104. } 

  106. void drawVolumeLabels() {
  107.   fill(0,0,255);
  108.   textSize(10);
  109.   textAlign(RIGHT);
  110.   
  111.   stroke(0);
  112.   strokeWeight(1);

  114.   for (float v = dataMin; v <= dataMax; v += volumeIntervalMinor) {
  115.     if (v % volumeIntervalMinor == 0) {     // If a tick mark
  116.       float y = map(v, dataMin, dataMax, plotY2, plotY1);  
  117.       if (v % volumeInterval == 0) {        // If a major tick mark
  118.         float textOffset = textAscent()/2;  // Center vertically
  119.         if (v == dataMin) {
  120.           textOffset = 0;                   // Align by the bottom
  121.         } else if (v == dataMax) {
  122.           textOffset = textAscent();        // Align by the top
  123.         }
  124.         text(floor(v), plotX1 - 10, y + textOffset);
  125.         line(plotX1 - 4, y, plotX1, y);     // Draw major tick
  126.         line(plotX1-2, y+9, plotX1, y+9);  //line to draw midle lines
  127.       } else {
  128.         //line(plotX1 - 2, y, plotX1, y);     // Draw minor tick
  129.       }
  130.     }
  131.   }
  132. }

  134. void mousePressed() 
  135. {
  136.   println("Coordinates: " + mouseX +"," + mouseY);
  137. }


  140. void drawDataLine() {  
  141.   stroke(#5679C1);
  142.   strokeWeight(5);
  143.   noFill();
  144.   
  145.   if(pmouseY>60 && pmouseY<(height-70))
  146.   {
  147.   line (lineX,mouseY,lineX,pmouseY); 
  148.   lineX ++;
  149.   delay(20);
  150.   }
  151.   
  152.   if (lineX>width-80)
  153.   {
  154.     lineX=120;
  155.     background (255);
  156.    }
  157. }


rubeix
rubeix

Re: Trying to draw a lifetime graph

1 year ago
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
rkhxaral
rkhxaral

Re: Trying to draw a lifetime graph

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

Statistics

  • 8 Replies
  • 856  Views
  • 0 Followers

Tags

No tags available for this topic.

Actions

Related Posts