Modify dotted lines to continuous lines

[phdv61]

Thank you for sharing your very useful code.

Instead of having dotted lines being plotted, I prefer continuous lines.
I modifed this section of your code accordingly as follows :

// Do actual data plotting

// 1 - Is the rolling buffer full of data ?

if ( this.currPoints < this.maxPoints ) // Not yet

for ( int i = 0; i < this.numVars; i++ )
{
    this.parent.stroke( this.colors[i] );
    for ( int j = 0; j < this.currPoints-1; j++ )
    {
	this.parent.line( (float)(this.posX + (this.data[j][i][0]*xScale - xOffset)), (float)(this.posY + yOffset - data[j][i][1]*yScale),
                    (float)(this.posX + (this.data[j+1][i][0]*xScale - xOffset)), (float)(this.posY + yOffset - data[j+1][i][1]*yScale) );
    }
}	

else // 2 YES, roll-back did start continuous plotting must be done in two halves

{
for ( int i = 0; i < this.numVars; i++ )
{
this.parent.stroke( this.colors[i] );
for ( int j = this.index ; j < this.maxPoints-1; j++ )
{
this.parent.line( (float)(this.posX + (this.data[j][i][0]*xScale - xOffset)), (float)(this.posY + yOffset - data[j][i][1]*yScale),
(float)(this.posX + (this.data[j+1][i][0]*xScale - xOffset)), (float)(this.posY + yOffset - data[j+1][i][1]*yScale) );
}
}
for ( int i = 0; i < this.numVars; i++ )
{
this.parent.stroke( this.colors[i] );
for ( int j = 0; j < this.index-1; j++ )
{
this.parent.line( (float)(this.posX + (this.data[j][i][0]*xScale - xOffset)), (float)(this.posY + yOffset - data[j][i][1]*yScale),
(float)(this.posX + (this.data[j+1][i][0]*xScale - xOffset)), (float)(this.posY + yOffset - data[j+1][i][1]*yScale) );
}
}

}

[Bumbleboss]

Any updates on this?

[Andersama]

Figured I should add my two cents, I was having trouble seeing the dots because the scaling seems to make them at most a pixel. Incredibly difficult to pick out visually. I literally poked around in the listener source code just to find what was responsible for drawing and did pretty much the same thing as above. Except I wrote the loop from 1. Did not dig much into the library to figure out if there was some control on the line width, to be honest a rendered line is way more easy to pick up on screen than the dots. Unless there's some odd rendering penalty, I'd say it's well worth it.

Also, could not run the java application which is what prompted me to look at the source code, but the processing ide and associated java code worked just fine. Was not difficult to work out, copy / pasting just two files into processing was pretty easy.

May be worth it to make the edit an option between rendering lines / dots? In any case here's the file / line to edit.

arduino-plotter/listener/Graph.java

Line 183 in 6da8d1b

for ( int i = 0; i < this.numVars; i++ )

Forgot to add, at least when I had the program running it would randomly seem to reset the graph? Didn't seem like the Arduino was resetting, but that's what it seemed like, would happen at least once a few seconds after the program started, and that was it. If there's a visual cue that a reset has happened that would also be a plus in my books.

[phdv61]

From the top of my head, the data buffer is a rolling buffer, which is why the code was written in such a way to draw the data in two halves. Otherwise, you will not get a proper display of a time serie of data.

until the buffer is full, you can do what you suggest. But then on, you must draw the data taking into account the "roll effect".

[Andersama]

I noticed, if running w/ the above there's a line essentially drawn weirdly across the graph. Dirty not exactly performant solution, an if condition to draw only when the pair is ordered along the x axis, produces a blip where the rolling buffer is, way better than a line. I'm still trying to make sense of the apparent reset after the program starts, but since I've added a debugger to see that the data is being written as json objects over serial I'm somewhat considering writing my own visualization tool.

[phdv61]

As said above: Like in any rolling buffer, Drawline has to be done in two halves (datapacks) taking into account the "current" data position in the buffer. and you have to draw from 0 to current-1 (most recent data), and then from current to end_of_buffer (older data). That way, you don't get a straight line between the oldest point and the most recent one.

I also noticed that when you run the processing app, it resets the Arduino twice.
I believe Arduino resets the secnond time when the serial link is established.