Trying to draw a lifetime graph

Programming Questions

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

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

Replies(8)

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

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

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

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

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

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

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

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

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

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