Stray lines, strokes and points in Processing software

SKChakra

I am writing an interface for an arduino project in Processing. The problem I have encountered is that the application works normally for sometime and then produces stray lines in the window.

I have attached a picture as to how it looks. I am updating the values using serialEvent() and not draw(). Also I have used GUI toolkit of the G4P library. Not able to understand what is causing the stray lines.

MenteCode

Not able to understand what is causing the stray lines.

Well, neither do I, to be honest. I don't know how you wrote your code. :|

If you could either place your code in a comment, or give a link to download, that would be your next step to having anyone here helping you. ;)

SKChakra

Sure, but the code is a little long, owing to my bad programming skills...I'll attach the code anyways.

    import g4p_controls.*;
    import processing.serial.*;

    //CONSTANTS:

    public final int gridX = 500;
    public final int gridY = 500;
    public final int gridZ = 500;
    public final int scale = 10;
    public final int x_offset = 300;
    public final int y_offset = 300;

    //VARIABLES:

    public String data = "";
    public String dat_x = "";
    public String dat_y = "";
    public String dat_z = "";
    public String exportPath = "C:/";
    public String statusMessage = "";
    public String port_no = "";
    public String portOK = "";
    public int index_1 = 0;
    public int index_2 = 0;
    public int key_serial = 0;
    public int connect_status = 0;
    public int final_status = 0;
    public float datf_x;
    public float datf_y;
    public float datf_z;

    //OBJECTS:

    Serial serPort;
    PrintWriter outFile;



    public void setup() {

      background(130, 130, 130);
      frameRate(100);
      size(1000, 600, JAVA2D, P2D);


      translate(0, 0);
      fill(255);
      noStroke();
      rect(40, 40, gridX + 20, gridY + 20);
      strokeWeight(3);
      stroke(0);
      rect(40, 40, gridX + 20, gridY + 20);
      init2DGrid();


      outFile = createWriter(exportPath + "outputtest1.txt");
      translate(0, 0);
      createGUI();

    }

    public void draw() {



    }


    //FUNCTIONS:

    public void drawXaxis() {

      stroke(0);
      strokeWeight(3);
      line(-gridX/2 + x_offset, 0 + y_offset, gridX/2 + x_offset, 0 + y_offset);
    }


    public void drawYaxis() {

      stroke(0);
      strokeWeight(3);
      line(0 + x_offset, -gridY/2 + y_offset, 0 + x_offset, gridY/2 + y_offset);
    }

    public void createGrid() {

      for (int i=-gridX/2; i<=gridX/2; i+=scale)
      {
        stroke(35, 35, 35);
        strokeWeight(0.5);
        line(i + x_offset, -gridY/2 + y_offset, i + x_offset, gridY/2 + y_offset);
      }

      for (int j=-gridX/2; j<=gridX/2; j+=scale)
      {
        stroke(35, 35, 35);
        strokeWeight(0.5);
        line(-gridX/2 + x_offset, j + y_offset, gridX/2 + x_offset, j + y_offset);
      }
    }

    public void init2DGrid() {

      drawXaxis();
      drawYaxis();
      createGrid();
    }

    public void serialEvent(Serial p) {

      //received data is of the form "x*y#z;" string
      translate(0, 0);
      data = p.readStringUntil(';');
      data = data.substring(0, data.length() - 1);
      index_1 = data.indexOf("*");
      index_2 = data.indexOf("#");
      dat_x = data.substring(0, index_1);
      dat_y = data.substring(index_1+1, index_2);
      dat_z = data.substring(index_2+1, data.length());

      datf_x = float(dat_x);
      datf_y = float(dat_y);
      datf_z = float(dat_z);

      outFile.print(datf_x);
      outFile.print("*");
      outFile.print(datf_y);
      outFile.print("#");
      outFile.print(datf_z);
      outFile.println(";");



      //translate(300,300);

      fill(255, 0, 0);



      if (datf_x<=250)
        if (datf_x>=-250)
          if (datf_y<=250)
            if (datf_y>=-250) {
              fill(255, 0, 0);
              noStroke();
              ellipse(datf_x + x_offset, -datf_y + y_offset, 2, 2);
              noFill();
            }


      textarea_Monitor.appendText(" X:   "+ datf_x + "    Y:   " + datf_y + "\n");
    }



    public void connectSerial() {

      //for user based port selection
      try {
        serPort = new Serial(this, port_no, 9600);
        key_serial = 1;
        final_status = 1;
        portOK = port_no;
        statusMessage = "Device connected...";textfield_Status.setText(statusMessage);
        serPort.stop();
      }
      catch(RuntimeException e) {
        e.printStackTrace();
        key_serial = 0;
        final_status = 0;
        statusMessage = "Error Connecting Device...";textfield_Status.setText(statusMessage);
        setup();
      }
    }

And this is a file with generated code, generated by GUI toolkit (G4P) with initializations and declarations:

public void button_Connect_click(GButton source, GEvent event) { //_CODE_:button_Connect:401738:
  port_no = SerPort_textfield.getText();
  println(port_no);
  if (final_status == 0) {
    connectSerial();
    serPort = new Serial(this, portOK, 9600);
    serPort.bufferUntil(';');
  } 
  else {
    serPort.stop();
    final_status = 0;
    connectSerial();
    serPort = new Serial(this, portOK, 9600);
    serPort.bufferUntil(';');
  }
  if (final_status == 1) { 
    statusMessage = "Device connected...";
    textfield_Status.setText(statusMessage);
  }
  else {
    statusMessage = "Error Connecting Device...";
    textfield_Status.setText(statusMessage);
  }
  println("Connect button event " + System.currentTimeMillis()%10000000 );
} //_CODE_:button_Connect:401738:

public void SerPort_textfield_event(GTextField source, GEvent event) { //_CODE_:SerPort_textfield:392307:

  println("SerPort_textfield event " + System.currentTimeMillis()%10000000 );
} //_CODE_:SerPort_textfield:392307:

public void Status_change(GTextField source, GEvent event) { //_CODE_:textfield_Status:532785:

  translate(0, 0);
  println("textfield_Status - GTextField event occured " + System.currentTimeMillis()%10000000 );
} //_CODE_:textfield_Status:532785:

public void textarea_Monitor_change(GTextArea source, GEvent event) { //_CODE_:textarea_Monitor:273001:

  translate(0, 0);
  println("textarea_Monitor - GTextArea event occured " + System.currentTimeMillis()%10000000 );
} //_CODE_:textarea_Monitor:273001:

public void textfield_PlotPath_change(GTextField source, GEvent event) { //_CODE_:textfield_PlotPath:311981:

  println("textfield_PlotPath - GTextField event occured " + System.currentTimeMillis()%10000000 );
} //_CODE_:textfield_PlotPath:311981:

public void buttonExport_change(GButton source, GEvent event) { //_CODE_:button_Export:847219:


  println("button_Export - GButton event occured " + System.currentTimeMillis()%10000000 );

    outFile.flush();
    outFile.close();


  textarea_Monitor.appendText("\n ****************************** \n Plot Export Successful!!!\n\nExport path : \n\n" + exportPath + "\n\n ****************************** \n\n");

} //_CODE_:button_Export:847219:

public void button_exit_change(GButton source, GEvent event) { //_CODE_:button_exit:855149:
  translate(0, 0);
  println("button_exit - GButton event occured " + System.currentTimeMillis()%10000000 );
  exit();
} //_CODE_:button_exit:855149:

public void textfield_gridScale_change(GTextField source, GEvent event) { //_CODE_:textfield_gridScale:818628:
  println("textfield_gridScale - GTextField event occured " + System.currentTimeMillis()%10000000 );
} //_CODE_:textfield_gridScale:818628:

public void button_Update_change(GButton source, GEvent event) { //_CODE_:button_Update:897154:



  exportPath = textfield_PlotPath.getText();
  textfield_PlotPath.setText(exportPath);
  SerPort_textfield.setText(portOK);
  textfield_Status.setText(statusMessage);
  setup();

println("button_Update - GButton event occured " + System.currentTimeMillis()%10000000 );
} //_CODE_:button_Update:897154:



// Create all the GUI controls. 
// autogenerated do not edit
public void createGUI() {
  G4P.messagesEnabled(false);
  G4P.setGlobalColorScheme(GCScheme.RED_SCHEME);
  G4P.setCursor(ARROW);
  if (frame != null)
    frame.setTitle("Sketch Window");
  button_Connect = new GButton(this, 890, 20, 80, 30);
  button_Connect.setText("Connect");
  button_Connect.setTextBold();
  button_Connect.setLocalColorScheme(GCScheme.BLUE_SCHEME);
  button_Connect.addEventHandler(this, "button_Connect_click");
  SerPort_textfield = new GTextField(this, 792, 24, 80, 20, G4P.SCROLLBARS_NONE);
  SerPort_textfield.setDefaultText("COM");
  SerPort_textfield.setLocalColorScheme(GCScheme.BLUE_SCHEME);
  SerPort_textfield.setOpaque(false);
  SerPort_textfield.addEventHandler(this, "SerPort_textfield_event");
  label_SerPort = new GLabel(this, 708, 24, 80, 20);
  label_SerPort.setTextAlign(GAlign.RIGHT, GAlign.MIDDLE);
  label_SerPort.setText("PORT : ");
  label_SerPort.setTextBold();
  label_SerPort.setOpaque(false);
  label_PlotHeading = new GLabel(this, 708, 108, 120, 20);
  label_PlotHeading.setText("Plotted Points (2D) : ");
  label_PlotHeading.setTextBold();
  label_PlotHeading.setOpaque(false);
  label_Status = new GLabel(this, 708, 60, 80, 20);
  label_Status.setTextAlign(GAlign.RIGHT, GAlign.MIDDLE);
  label_Status.setText("STATUS :  ");
  label_Status.setTextBold();
  label_Status.setOpaque(false);
  textfield_Status = new GTextField(this, 792, 60, 160, 20, G4P.SCROLLBARS_NONE);
  textfield_Status.setDefaultText("Device not connected...");
  textfield_Status.setOpaque(true);
  textfield_Status.addEventHandler(this, "Status_change");
  textarea_Monitor = new GTextArea(this, 708, 138, 264, 240, G4P.SCROLLBARS_BOTH | G4P.SCROLLBARS_AUTOHIDE);
  textarea_Monitor.setDefaultText("No points to be plotted...");
  textarea_Monitor.setLocalColorScheme(GCScheme.BLUE_SCHEME);
  textarea_Monitor.setOpaque(true);
  textarea_Monitor.addEventHandler(this, "textarea_Monitor_change");
  label_export_path = new GLabel(this, 708, 390, 80, 20);
  label_export_path.setText("Export Path : ");
  label_export_path.setTextBold();
  label_export_path.setOpaque(false);
  textfield_PlotPath = new GTextField(this, 708, 420, 264, 35, G4P.SCROLLBARS_HORIZONTAL_ONLY | G4P.SCROLLBARS_AUTOHIDE);
  textfield_PlotPath.setDefaultText("C:/");
  textfield_PlotPath.setOpaque(true);
  textfield_PlotPath.addEventHandler(this, "textfield_PlotPath_change");
  button_Export = new GButton(this, 750, 480, 80, 30);
  button_Export.setText("Export");
  button_Export.setTextBold();
  button_Export.setLocalColorScheme(GCScheme.BLUE_SCHEME);
  button_Export.addEventHandler(this, "buttonExport_change");
  button_exit = new GButton(this, 850, 480, 80, 30);
  button_exit.setText("Exit");
  button_exit.setTextBold();
  button_exit.setLocalColorScheme(GCScheme.BLUE_SCHEME);
  button_exit.addEventHandler(this, "button_exit_change");
  label_Main = new GLabel(this, 0, 6, 174, 30);
  label_Main.setText("Ultrasound 2D Plotter v1.0");
  label_Main.setTextBold();
  label_Main.setOpaque(false);
  label_scale = new GLabel(this, 576, 150, 80, 20);
  label_scale.setText("Grid Scale : ");
  label_scale.setTextBold();
  label_scale.setOpaque(false);
  textfield_gridScale = new GTextField(this, 576, 180, 108, 20, G4P.SCROLLBARS_NONE);
  textfield_gridScale.setDefaultText("Eg:10");
  textfield_gridScale.setOpaque(true);
  textfield_gridScale.addEventHandler(this, "textfield_gridScale_change");
  button_Update = new GButton(this, 880, 390, 90, 20);
  button_Update.setText("Update Path");
  button_Update.setTextBold();
  button_Update.addEventHandler(this, "button_Update_change");
  label_Xaxis = new GLabel(this, 530, 290, 80, 20);
  label_Xaxis.setText(": X ");
  label_Xaxis.setTextBold();
  label_Xaxis.setOpaque(false);
  label_Yaxis = new GLabel(this, 260, 20, 80, 20);
  label_Yaxis.setText("Y :");
  label_Yaxis.setTextBold();
  label_Yaxis.setOpaque(false);
}

// Variable declarations 
// autogenerated do not edit
GButton button_Connect; 
GTextField SerPort_textfield; 
GLabel label_SerPort; 
GLabel label_PlotHeading; 
GLabel label_Status; 
GTextField textfield_Status; 
GTextArea textarea_Monitor; 
GLabel label_export_path; 
GTextField textfield_PlotPath; 
GButton button_Export; 
GButton button_exit; 
GLabel label_Main; 
GLabel label_scale; 
GTextField textfield_gridScale; 
GButton button_Update; 
GLabel label_Xaxis; 
GLabel label_Yaxis; 

MenteCode

Also, please realize that my comment is not an answer.

Pretty straightforward. If it doesn't answer the question, don't mark it as answered. It will only act as a detour for people that aren't helping you, thinking the question was answered.

As for the actual answer, I'll put that in a separate comment, once I get the code fixed.

MenteCode

I'll be asking some question along the way as well.

The difference between your sketch and mine is that yours has values in the "Plotted Points" textbox, and mine doesn't. What do you generally do after you launch the sketch? What has to happen before I can get to the point you're at?

jas0501

Sometimes as a debugging aid changing the stroke and fill to other settings, section by section, can help narrow down when/where the problem is occurring. If the extra line occurs when the fill is yellow you at least have an idea where to concentrate.

Pretty primitive approach, but then so in sprinkling println() though the code. Both effective alternatives to staring at code with the error in ones blindspot.

jas0501

Also the line looks to be two lines, or a really skinny ellipse, originating/ending off screen, which may be a clue. Click offscreen while app still has focus. Maybe ignore mouse events off grid/canvas.

SKChakra

@MenteCode, Actually, when a serial (USB) device is connected, once the device starts sending data and the sketch starts receiving the data through serialEvent(), this begins to happen, sometimes almost immediately and sometimes after a long time...Can't actually specify what triggers the event. I am using an Arduino Uno to generate the data, with matching Baud rates.

What is also perplexing is that I downloaded a similar code from some other project,

http://www.grook.net/how-to-make-radar-using-arduino-uno

from that link, specifically, look for processing-code with the link...That sketch too spit out the same result...A few stray lines here and there...

GoToLoop

Seems like you need to sanitize coordinates. Check whether they're all confined within the grid!

SKChakra

@GoToLoop, yeah, i've done that...

if (datf_x<=250)
    if (datf_x>=-250)
      if (datf_y<=250)
        if (datf_y>=-250) {
          fill(255, 0, 0);
          noStroke();
          ellipse(datf_x + x_offset, -datf_y + y_offset, 2, 2);
          noFill();
        }

GoToLoop

Hmm... Did it work? What about the offset variables? :-/

jas0501

Tough problem. Only grid lines and the range checked ellipse in the code. So the only other drawn components are the g4p_controls. Maybe a binary search of the components will kind the culprit. Eliminate 1/2 the components and see if the problem persists. Try the eliminated 1/2. Or just eliminate them one at a time.

It could be a combination of component interactions, though the scroll bar seems to be the only user interaction component, and the only animated component. So I'd pick that as the best possibility.

It might no even be the g4p. Then it is a real mystery.

SKChakra

@GoToLoop : I am not sure if that worked...btw, the offset variables are to offset the plot coordinates by an amount equal to the position of the origin of the grid. I didn't use translate because that would mess up the coordinates of the GUI components too...

@jas0501 : Will try that out...But in the link that I gave in one of the above comments, the processing code that he gives doesn't have a GUI and still encounters the same problem...Now I am inclined to think that something is messed up in my comp...So, i'll try it out on another computer and let you know how it goes...

EDIT: No luck, same result on other systems too...This is driving me crazy...:P

SKChakra

Problem Solved!!!...I just did this;

void draw()
{
     updatePixels();
     ellipse(datf_x + x_offset, datf_y + y_offset, 5, 5);
     loadPixels();
}

Anyway, thanks people for all the help!...Good Day!