Horizontal scrolling

edited November 2016 in Library Questions

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?


  • 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.


  • edited November 2016

    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);
      size(1000, 400);
    void draw () {
      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) {
              } else {
              // Text lines
              stroke(153); // grey
              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
    void drawText() {
      int x=10;
      int y=55;
      for (int i = 8; i<=13; i++) {
        text ("Pin "+i, x, y);
    void serialEvent (Serial p) {
      String inString = p.readStringUntil('\n');
      inString = trim(inString);
      if (inString.equals("S") == true) {
        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;
      if (event == samples) {
    void getData () {
      //check data:
      //println("i"+binary(initialState, 6));
      //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(binary(changed[i], 6));
        for (int n=0; n<6; n++) {
          b= changed[i] & 1;
          state[i][n]= boolean (b);
          changed[i] >>= 1;
      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();
      reducer-= wheel;
  • 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

  • edited November 2016

    i have changed it back.

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

  • Answer ✓

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

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

  • edited November 2016

    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(){
      //window decorations
      rect(0, 0, width-1, height-1);
      rect(windowWidth, 0, width-2, height-2);
      // draw window content
      for (int i=0; i<rectCount; i++){
        rect(parentNodeX+rectX[i],parentNodeY+rectY[i], 50, 50);
      rect(handleX, handleY, handleW, handleH);
      if (isDraggable && mouseY>handleH/2 && mouseY<height-handleH/2){
        handleY = mouseY-handleH/2;
    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){

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

  • Answer ✓

    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.


  • edited November 2016 Answer ✓

    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.

  • edited November 2016

    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:


Sign In or Register to comment.