Drawing inside Serial event handler

liudr

Hi,

I've been away from processing for a long time. Coming back to do a quick o-scope project that involves plotting numbers coming from serial port. I'm using serial event handler according to an ancient post on arduino's website. The code seems to work in Processing 2, but not in processing 3 or old 1.x. In 3, the data are coming in and the line functions are called but there seems to be a lack of actual drawing so the screen is blank. What am I doing wrong?

Here is the code. Code tag seems to not work on my computer.

import processing.serial.*;

Serial myPort;        // The serial port
int xPos = 1;         // horizontal position of the graph

float oldinByte=0;
float oldinFloat=0;
float inFloat=0;
float trigger_threshold=0.5;
String trigger_mode="POS EDGE";

void setup () 
{
  // set the window size:
  size(320, 240);
  //println("Height is"+height);

  // List all the available serial ports
  // if using Processing 2.1 or later, use Serial.printArray()
  println(Serial.list());

  // I know that the first port in the serial list on my mac
  // is always my  Arduino, so I open Serial.list()[0].
  // Open whatever port is the one you're using.
  myPort = new Serial(this, Serial.list()[1], 250000);

  // don't generate a serialEvent() unless you get a newline character:
  myPort.bufferUntil('\n');

  // set inital background:
  background(0);
}

void draw () 
{
}

void mouseClicked()
{
  if (trigger_mode=="POS EDGE") trigger_mode="AUTO";
  else trigger_mode="POS EDGE";
}

void serialEvent (Serial myPort) 
{
  // get the ASCII string:
  String inString = myPort.readStringUntil('\n');
  if (inString != null) {
    // trim off any whitespace:
    inString = trim(inString);
    // convert to an int and map to the screen height:
    oldinFloat=inFloat;
    inFloat = float(inString);
    float inByte = map(inFloat, -10, 10, 0, height);
    //println(inByte);
    // draw the line:

    //Trigger
    if (trigger_mode=="POS EDGE")
    { 
      if (xPos==0)
      {
        if(!((oldinFloat<trigger_threshold)&&(inFloat>trigger_threshold)&&(inFloat>oldinFloat))) return;
      }
    }
    stroke(0,0,0);
    line(xPos,0,xPos,height);
    line(xPos+1,0,xPos+1,height);
    stroke(0,255,0);
    if (xPos==0) 
    {
      line(xPos, height-inByte, xPos, height-inByte);
    }
    else line(xPos, height-inByte, xPos-2, height-oldinByte);
    oldinByte=inByte;

    // at the edge of the screen, go back to the beginning:
    if (xPos >= width) {
      text(trigger_mode,width-70,height-10);
      xPos = 0;
      //background(0);
    } else {
      // increment the horizontal position:
      xPos+=2;
    }
  }
}

GoToLoop

http://forum.Processing.org/two/discussion/8045/how-to-format-code-and-text
http://forum.Processing.org/two/discussion/12550/line-not-drawing-anything

liudr

That was quick. Thanks. It's weird that I had to first paste my code and then select the code and press C button to embed code. All other forums I've been on have the exact opposite order: press code button, copy and paste inside the code tags.

So I guess there was something different between Processing 2 and 3 that made it possible to draw in the serial event thread. I'll stick with Processing 2 and the "bad" coding until I get enough time to write a proper buffer to draw in draw().

I've not used java for years. Are there any ways to store static local variables like you would in C?

static int my_var;

GoToLoop

• Definition of static in C got nothing to do w/ Java's.
• Actually, C static variables are known as "closures" in JS.
• In Java, closure local variables do exist.
• But they're so restrictive to the point of almost no use.
• Just declare a "global" field variable instead. :-@

liudr

Thanks. That's what I've been doing for the past, globals. It's not safe. Combining code, using same globals for different purposes etc. I bet in a java culture that emphasizes OOP over traditional functions, I'll just have to define a class and instantiate it to get the same effect of static local variable in a procedural language. I tried to learn closures but didn't find online source to make enough sense. Doing globals for now. Glad to know it is still considered a "solution" so I won't be embarrassed to still do it.

GoToLoop

• Actually "global" variables don't exist in Java and neither in Processing's "Java Mode"!
• A Processing's "sketch", w/ all its ".pde" tab files, is merely 1 class in 1 ".java" file.
• Those "global" variables are field declarations of the "sketch"'s only top class.

GoToLoop

I tried to learn closures but didn't find online source to make enough sense.

C:

#include <stdio.h>

void closureFunction() {
  static int myClosure = 0;
  myClosure += 10;
  printf("%d\n", myClosure);
}

int main() {
  closureFunction(), closureFunction(), closureFunction();
  return 0;
}

JS:

var myClosure = 0;
function closureFunction() {
  myClosure += 10;
  console.log(myClosure);
}

closureFunction(), closureFunction(), closureFunction();

GoToLoop

The absolute exotic craziness I've come up using Java/Processing: 8-}

void setup() {
  PVector v = closureFunction();
  println(v, v, v);
  exit();
}

PVector closureFunction() {
  final int[] myClosure = { 0 };

  return new PVector() {
    @ Override public String toString() {
      myClosure[0] += 10;
      println(myClosure[0]);
      return super.toString();
    }
  };
}

liudr

Yep, that's all coming back to me now. Thanks again!

GoToLoop

In order to run the JS closure example, hit F12 in the browser, click "Console" tab and paste it there.

For C's, go to http://www.TutorialsPoint.com/compile_c_online.php
Paste the C sample there, click @ "Compile" tab and then "Execute" tab.

Both codes should output 10, 20, 30. ~O)

ericjforman

In P3 drawing does not work any more inside serialEvent(). A bug has been filed. Here is my fix in the meantime - just draw inside draw():

https://github.com/ericjforman/Graph_p3

Also, if you want to graph multiple inputs: https://github.com/ericjforman/GraphMultiple_p3

GoToLoop

In P3 drawing does not work any more inside serialEvent().

That's a very limited diagnose. It's rather no drawing outside the "Animation" Thread.

A bug has been filed.

Actually it has always been "wrong" to modify sketch's canvas from another Thread.
It's just that Processing 3 is more "fragile" than its predecessors. ;))

Tipikosh

Hi, i couldnt solve the same problem i am having. Anyone got a hint? i want to draw a line using my x and y coordinates from my touchpad, i want to draw a continuous line that starts the moment i put my finger on the touchpad, and ends when i get my finger of the pad. here is my code, thx!!

` import processing.serial.*;

float x,y;

int touch;

void setup()

{

//size(800,800);

fullScreen();

Serial arduino = new Serial(this, "COM3", 9600);

arduino.bufferUntil('\n');

}

void draw()

{

        background(0);

        ellipse(x,y,10,10);

}

void serialEvent(Serial p)

{

String rawString = p.readString();

rawString = rawString.trim();

try

    {

    String[] values = split(rawString,",");

    int serialX = int(values[0]);

    int serialY = int(values[1]);    

    //int touch = int(values[2]);

    x = map(serialX,0,640,0,width);

    y = map(serialY,0,480,0,height);



    line(x,y,???,???);



    }

    catch(Exception e)

        {

          println("Error parsing string from Serial:");

          e.printStackTrace();

        }

}

`