Horizontal scrolling

aster94

hello, i would like to add a horizontal scolling bar to this sketch since i "lost" some data at the end of the windows

i can't use the example in the reference since it uses an immage. Really i tried to use it but without good results. any idea? maybe i miss a library that could help me?

kfrajer

What code do you have so far? Adding a scroll Bar is one part of the challenge. the other part requires to link the scroll Bar to your code displaying your data.

Kf

aster94

here it is, i didn't add it in the first moment because is a little bit long, doing a resume the draw() is made by only 2 lines (+ the dotted line)

import processing.serial.*;
Serial p;

float reducer = 8000.0;
int samples;
int event;
int initialState;
boolean first = false;
boolean dataComplete = false;


boolean textCovered;
int xEdge = 60;
int yEdge = 30;
int yBottom = 370;
int yDiff;
float[] xPos = {0, 0, 0, 0, 0, 0};
int yPos=yEdge;
float[] xTime;

float[] usTime;
int[] changed;

boolean [][] state;
boolean [] change = new boolean[6];
boolean [] isLow = new boolean[6];


void setup () {
  p = new Serial(this, "com3", 9600);
  p.bufferUntil('\n');

  size(1000, 400);
  background(255);
  smooth(3);

  drawText();
}

void draw () {

  pushMatrix();
  translate(xEdge, 0);

  if (dataComplete==true) {
    for (int i=0; i<samples; i++) {
      for (int n=0; n<6; n++) {
        if (state[i][n]==true) {
          if (isLow[n]==true) {
            yDiff=yPos;
            yPos+=30;
            isLow[n]=false;
          } else {
            yDiff=yPos+30;
            isLow[n]=true;
          }
          // Text lines
          stroke(153); // grey
          textSize(8);
          textCovered=!textCovered;
          dashline(xTime[i], yPos, xTime[i], yBottom, spacing);
          text(round(usTime[i]), xTime[i], (textCovered==true) ? yBottom : yBottom+10);
          stroke(0);   // black again

          // Graph lines
          line(xPos[n], yPos, xTime[i], yPos);     // straight line
          line(xTime[i], yPos, xTime[i], yDiff);    // vertical line



          xPos[n]=xTime[i];
        }
        yPos+=60;
        yDiff=yPos;
      }
      yPos=yEdge;
    }

    dataComplete=false;
  }
  popMatrix();
}

void drawText() {

  textSize(14);
  fill(0);
  int x=10;
  int y=55;

  for (int i = 8; i<=13; i++) {
    text ("Pin "+i, x, y);
    y+=60;
  }
}

void serialEvent (Serial p) {

  String inString = p.readStringUntil('\n');
  inString = trim(inString);

  if (inString.equals("S") == true) {

    initialState=0;
    samples=0;
    event=-2;

    first = true;
  } else {

    String list [] = split(inString, ':');

    if (first == true) {

      initialState = int (list[0]);
      samples = int (list[1]);

      changed = new int[samples];
      usTime = new float[samples];
      xTime = new float[samples];
      state = new boolean[samples][6];

      first = false;
    } else {
      changed[event] = int (list[0]);
      usTime[event] = float (list[1]);
      xTime[event] = usTime[event] / reducer;
    }
  }

  event++;

  if (event == samples) {
    getData();
  }
}

void getData () {

  //check data:
  //println(inString);
  //println("pin"+changed[0]);
  //println("time"+usTime[0]);
  //println("i"+binary(initialState, 6));
  //printArray(usTime);
  //printArray(xTime);
  //println("event: "+event);
  //println("pin: "+binary(changed[0], 6));

  int b;

  // initial state
  for (int n=0; n<6; n++) {
    b= initialState & 1;
    isLow[n]= !boolean (b);
    initialState >>= 1;
    //println("islow: "+isLow[n]);
  }

  // changes
  for (int i=0; i<samples; i++) {
    //println("i:"+i);
    //println(binary(changed[i], 6));
    for (int n=0; n<6; n++) {
      b= changed[i] & 1;
      state[i][n]= boolean (b);
      changed[i] >>= 1;
      //println(state[i][n]);
    }
  }
  dataComplete = true;
}

float[] spacing = {5, 5};  //used for the dashline function, pixels
void dashline(float x0, float y0, float x1, float y1, float[] spacing) {

  float distance = dist(x0, y0, x1, y1); 
  float [ ] xSpacing = new float[spacing.length]; 
  float [ ] ySpacing = new float[spacing.length]; 
  float drawn = 0.0;  // amount of distance drawn 

  if (distance > 0) 
  { 
    int i; 
    boolean drawLine = true; // alternate between dashes and gaps 

    /** 
     Figure out x and y distances for each of the spacing values 
     I decided to trade memory for time; I'd rather allocate 
     a few dozen bytes than have to do a calculation every time 
     I draw. 
     */

    for (i = 0; i < spacing.length; i++) 
    { 
      xSpacing[i] = lerp(0, (x1 - x0), spacing[i] / distance); 
      ySpacing[i] = lerp(0, (y1 - y0), spacing[i] / distance);
    } 

    i = 0; 
    while (drawn < distance) 
    { 
      if (drawLine) 
      { 
        line(x0, y0, x0 + xSpacing[i], y0 + ySpacing[i]);
      } 
      x0 += xSpacing[i]; 
      y0 += ySpacing[i]; 
      /* Add distance "drawn" by this line or gap */
      drawn = drawn + mag(xSpacing[i], ySpacing[i]); 
      i = (i + 1) % spacing.length;  // cycle through array 
      drawLine = !drawLine;  // switch between dash and gap
    }
  }
}

void mouseWheel(MouseEvent event) {
  int wheel = event.getCount();
  wheel*=500;
  reducer-= wheel;
  println(reducer);
}

aster94

Just to say: moving this topic in the arduino section is useless since my question doesn't have nothing at all to do with arduino

koogs

i have changed it back.

but removing the need for the processing.serial.* would help this get a wider audience.

koogs

you could change xEdge using the mousewheel or arrow keys or something.

jeremydouglass

@aster -- definitely post an MCVE with no serial library dependency for more potential feedback from non-serial users.

aster94

you are definitely right. i tried to modify my sketch for you but than i realized that the solution of @koogs was good, and it worked

the problem now it s that the lines go over the left part, do you know any elegant method to avoid it?

i could always run again the fuction to draw the left part but i am sure that there is another way

i made it with the wheel of the mouse

now i would like to do it with something like this:

//simple scrolling
float handleX;
float handleY;
float handleW = 20;
float handleH = 15;
boolean isDraggable = false;
int handleFill = 150;
int windowWidth;

// rects fill
int rectCount = 500;
float[]rectX = new float[rectCount];
float[]rectY = new float[rectCount];
color[]rectColor = new color[rectCount];

float parentNodeX, parentNodeY;
void setup(){
  size(200, 200);
  windowWidth = width-22;
  handleX = width-21;
  handleY = height/2-handleH/2;
  parentNodeX = windowWidth/2;
  parentNodeY = height/2;

  for (int i=0; i<rectCount; i++){
    rectX[i] = random(-windowWidth/2, windowWidth/2-50);
    rectY[i] = random(-500, 500);
    rectColor[i] = color(random(255), random(255), random(255));
  }
}

void draw(){
  background(255);
  //window decorations
  stroke(0);
  fill(255);
  rect(0, 0, width-1, height-1);
  fill(200);
  rect(windowWidth, 0, width-2, height-2);

  // draw window content
  for (int i=0; i<rectCount; i++){
    fill(rectColor[i]);
    rect(parentNodeX+rectX[i],parentNodeY+rectY[i], 50, 50);
  }
  //handle
  fill(handleFill);
  rect(handleX, handleY, handleW, handleH);
  if (isDraggable && mouseY>handleH/2 && mouseY<height-handleH/2){
    handleY = mouseY-handleH/2;
    parentNodeY=(handleY+handleH/2)+(handleY+handleH/2-height/2)*(1000/175);
  }
}

void mousePressed(){
  if (mouseX>handleX && mouseX<handleX+handleW &&
    mouseY>handleY && mouseY<handleY+handleH){
    isDraggable = true;
    handleFill = color(100, 200, 255);
  }
}
void mouseReleased(){
  isDraggable = false;
  handleFill = 150;
}

void mouseMoved(){
  if (mouseX>handleX && mouseX<handleX+handleW &&
    mouseY>handleY && mouseY<handleY+handleH){
    cursor(HAND); 
  }
  else{ 
    cursor(ARROW); 
  }
}

found it here in forum but it works with the vertical scolling if you have something with orizontal it would be better

kfrajer

I would suggest you install the grafica library through the Processing IDE. Then go to the examples under this library and check TwoVerticalAxis. In that sample, you can drag the mouse to view more plotting area (panning the sketch). It is not a scroll bar as you want, but maybe another approach that you could implement in your code.

Kf

koogs

the problem now it s that the lines go over the left part

Draw the left part last and draw a white rectangle before drawing the text. It'll need to be within draw () rather than setup.

aster94

thanks to everyone, at the end i just used the wheel of the mouse without the scrolling bar, it works great!

if you need a logic analyzer for free (if you have any arduino or similar avr) you know where to find it:

https://hackster.io/vincenzo-gibiino/diy-logic-analyzer-f61ee5?ref=user&ref_id=90293&offset=0