Add a horizontal scroll bar for real time data plot

Processing Electronics (Arduino, etc.)
1

I am plotting a real-time data plot, I need to scroll across the only x-axis to visualize previous data points from the current data. Furthermore, I need to restore back to the current position after scrolling.
I have used the panning effect but it doesn’t give me a solution. Can anyone help me with this ??

2

t would help to see your code

Or a mcve with random data

Do you store the data in an Arraylist?

Then basically store the start point sp of the section you want to show and alter it with scrolling. There is a scrolling example

In fact you could have 2 modes: in live mode we see the data coming in and be displayed (no scrolling or just slow automatically scrolling ) and in scroll mode we look at a section sp and don’t see incoming data (which is still stored in the background)

1 Like
4

To be honest better make a mcve that is runnable without Arduino

1 Like
5

if the question and forum category would have been more clear?

grafica plot show last X values of a longer array
how to scroll back?

you could use my Mouse Wheel Plus Plus idea for a ( invisible ) slider

key [s] and turn mouse wheel.
even your default auto jump back to end is implemented on release key [s]

// https://discourse.processing.org/t/add-a-horizontal-scroll-bar-for-real-time-data-plot/14385/3
// start from
// PDE / File / Examples / Contributed Libraries / grafica / DefaultPlot


int many = 200;       // data amount
int nPoints = 50;     // limited plot length
Float[] data = new Float[many];

import grafica.*;
GPointsArray points;
GPlot plot;

void setup_plot() {
  // Prepare the points for the plot
  points = new GPointsArray(nPoints);
  for (int i = 0; i < nPoints; i++)   points.add(i, data[i] );   // kll    //points.add(i, 10*noise(0.1*i));
  plot = new GPlot(this);         // Create a new plot and set its position on the screen
  plot.setPos(25, 25);
  plot.setTitleText("show "+nPoints+" of "+many+" measurements");
  plot.getXAxis().setAxisLabelText("x axis");
  plot.getYAxis().setAxisLabelText("y axis");
  plot.setYLim(0,300);  
}

void setup() {
  size(500, 350);
  background(150);
  for ( int i = 0 ; i < many; i++ ) data[i] = i + random(10);
  setup_plot();
  println("MWPP: use key [s] and mousewheel");
}

void draw() {
  background(200,200,0);
  points = new GPointsArray(nPoints);
  for (int i = 0; i < nPoints; i++)   points.add(i, data[pstart+i] );
  plot.setPoints(points);      // Add the points
  plot.setTitleText("show "+nPoints+" of "+many+" measurements, start "+pstart+" end "+(pstart+nPoints));
  plot.defaultDraw();          // Draw it!
}

// Mouse Wheel Plus Plus
int pstart = 0;

void mouseWheel(MouseEvent event) {
  float e = event.getCount(); //println(e);
  if ( keyPressed && key == 's' ) { 
    pstart += e ;
    pstart = constrain(pstart,0,many-nPoints);
    println(" key s: new pstart "+pstart);
  }
}

void keyReleased() {
   if ( key == 's' ) pstart=many-nPoints; 
}
1 Like