How to make a frame/clipping zone for drawing arduino serial datas into the processing main window

jph

Hi,

Sorry i have not found answers to my questions in the forum previous submissions (nor in google ...) , may be i am not efficient enough in using the forum for the moment (a today's newbie to processing forum) ... i apologize ...

Needing to read and draw serial datas from an arduino board to my computer, i have found some different oscilloscopes implementations (arduinoscope ...) with their Processing codes (... more or less working ...). So my main and basic feeding source is : http://fr.flossmanuals.net/arduino/oscilloscope/

Trying to develop something a bit more usable I have found the ControlIP5 and G4P libraries too, and installed them in Processing ... Processing looks like being a fair environnement for my arduino projects ... Everything works fine ! I'll can go on with the GUI ...

I have found some other implementations too, using Matlab or Labview, but i prefer the diy and free ways and would like to use and contribute to Processing ...

My problem is that i can't find how to send serial datas inside a kind of "clipping zone" to separate datas-drawings from the GUI interactive zone. I have used a (trash) shortcut-method for the Y axis (subscaling Y values vertically in Processing main window), but i just don't even find how to do the same to limit the X drawings start and width inside the same window (to get a dedicated place for buttons, text drawing, tips, titles ... and other GUI elements). Would like to write something clean. It seams to be odd there is no function to do this ... (somewhere in a place i have not found yet ... for sure).

Could someone help me to find this place/library/... please ?

Greatings

TfGuy44

Draw the data first, then a rect the same color as your background behind your UI elements, then the UI elements.

If you need a non-rectangular clipping zone, look into using mask().

jph

hi TfGuy44, and thank you for your fast answer ... sorry, i think i've not well explained the problem ... i know how to put GUI elements over datas zone and how to clip Y values. My question is about how to do "the same" for X values not to fill the entire window width as for Y values vertical delimitation. Here you'll find a picture to better explain what i mean and where i am for this moment (with 250ms X width for 1024 XYdatas) :

I imagine other "trash" methods to get round the problem (displaying the screen's scope vertically and leaving interactive GUI under it for instance) : My problem is that i would like to get something like this (which is developped under labview) : source : http://pablotrigo.com/blog/?p=176

Displaying the interactive GUI to the right zone of the "datas clipping" would be more faithfull to a real oscilloscope i am used to ... and would preserve my future developments too (multichannels and datas treatments ...).

JPh.

jph

hi again ... ok, no obvious soluce, so i've opted for a fallback way to solve ... here you'll find a sreensaver i've made after conforming (? i think so) to your proposal TfGuy44. :

as you'll see (or not because of it's poor quality) i still get problems : The clipping zone flashes very fast and doesn't let time enough to see many things but the small blue tray down in the screen ... it longs a few seconds and then i get then the message : "Error, disabling serialEvent() for COM5 null". As you can see too, i get the datas values from a print i make (for debugging only) in the text processing zone ... datas look fine and it doesn't explain me anymore what is happening ... The transmission period (in mega arduino source) has been set to 10ms. i have lowered the performance to get sure the initial 1ms used for the previous picture was not the cause of my problem. Now 5V/100 Hz, 115200 bauds rate, is it to fast ?, i hope not, arduino is supposed to reach almost 1Khz sampling rate and it would be enough for my first application. I upload my processing source code too, may be it will help someone to understand what is happening and help me too by the way ...

// myARDUINOScope V00

import processing.serial.*; // serial library importation // import g4p_controls.*; // for the next steps ...

// GLOBALS

int MainX0 = 0 ;
int MainY0 = 0 ;
int MainWidth = 500 ;                // Processing main window width
int MainHeight = 700 ;               // Processing main window height


Serial myConnexion ;       // serial communication object creation
int Voltage = 0 ;            // Voltage

// datas
int SamplingWindow=256 ; // 256ms sampling ...
int x=0 ;
int y=0 ;

///////////////////////////////// void setup() { // setup BEGINNING

////
//// Processing main window drawing
////

background(0);                       // black background
size(MainWidth,MainHeight);          // processing window Size 
fill(255,255,0) ;                    // yellow Clipping zone background filling
stroke(0);                           // main window rect extra-contour color : gris moyen
strokeWeight(5);                     // main window extra-contour width
rect(0,0,MainWidth,MainHeight,15) ;  // drawing main window

// parametrage port entree donnees
String mySerialPortName = "COM5"; // gets serial interface
println("mySerialPortName : "+mySerialPortName);
println("SamplingWindow : "+SamplingWindow);

myConnexion = new Serial(this, mySerialPortName, 115200); // serial connexion creation

//noLoop() ;

} // setup END //////////////

/////////////////////////////// void draw() { // draw BEGINNING // main loop : nothing happens here (?) everything is managed in serialEvent (?)

} // draw END //////////////

/////////////////////////////////////////////////////////////////// void serialEvent(Serial myConnexion) { // serialEvent BEGINNING

// getting and drawing serialdatas

int ClipX0 = 0 ;                                             // Clipping anchor X0
int ClipY0 = 100 ;                                           // Clipping anchor Y0
int ClipW = 500 ;                                            // Clipping width
int ClipH = 400 ;                                            // Clipping height
int ClipRadius = 15 ;                                        // Clipping corner radius

// reading, processing and drawing serial datas

String mySerialReadString=myConnexion.readStringUntil('\n'); // reads datas until the end of line
if (mySerialReadString != null) { // if not empty
    mySerialReadString = trim(mySerialReadString); // blanks suppressing
    Voltage = int(mySerialReadString); // converting text to integer
}

// x values processing 
int oldx = x;
x= (millis()%(SamplingWindow)*(width)/(SamplingWindow)); // scaling x values to Clipping Zone width
if (oldx>x) {
    // restart datas reading beginning
    oldx=0;
    background(255, 255, 0); // redraws the background to erase previous datas
}

// y values processing
int oldy = y;  
y=int(map(Voltage,0,1024, ClipW,ClipH)); // scaling y values to clipping

// datas (x,y) trace managing
stroke(0,0,255);          // blue trace
strokeWeight(2);          // trace width
//smooth();                 // y smoothing

print(" oldx : "+oldx);
print(" oldy : "+oldy);
print(" x : "+x);
println(" y : "+y);

line(oldx,oldy,x,y);      // drawing x,y

// Drawing Clipping Data Zone
////
//// Contours Clipping 
stroke(150);                                                 // Clipping rect extra-contour color : gris moyen
strokeWeight(5);                                             // Clipping rect extra-contour width
fill(0,255,255) ;                                            // green-blue Clipping zone background filling

// setting Clipping data Zone dimensions
rect(ClipX0,ClipY0,ClipW,ClipH,ClipRadius) ;                 // Drawing Clipping Datas Zone
stroke(128);                                                 // Clipping rect intra-contour color : gris moyen
strokeWeight(5);                                             // Clipping rect intra-contour width

//// Drawing Clipping Horizontal Gridlines (7)
strokeWeight(1);                                             // Gridlines width
for (int iHGrid = 1 ; iHGrid < 8 ; iHGrid = iHGrid+1) {      // Gridlines number = 7
  line(ClipX0,(ClipY0+iHGrid*ClipH/8),(ClipX0+ClipW),(ClipY0+iHGrid*ClipH/8));      // Drawing Horizontal Gridlines
}
//// Drawing Vertical Gridlines (9)
strokeWeight(1);                                             // Gridlines width
for (int iVGrid = 1 ; iVGrid < 10 ; iVGrid = iVGrid+1) {     // Gridlines number = 9
  line((ClipX0+iVGrid*ClipW/10),(ClipY0),(ClipX0+iVGrid*ClipW/10),(ClipY0+ClipH));  // Drawing Vertical Gridlines
}

} // serialEvent END ///////////////////////

Sorry the source code seams to be hard to upload (? copy/paste in the post corpus) i don't understand why ... Well I think i'm not far to reach this first step, but i turn around the problem ... some help would be greatly appreciated ... JPh.

TfGuy44

Dumping this for when I have some time later... Or if someone else wants a running version of things that isn't a garbled mess to start with, so they can improve on it. Also good for people without serial devices.

//import processing.serial.*; // serial library importation
// import g4p_controls.*; // for the next steps ...

//Serial myConnexion;
int MainX0         = 0;
int MainY0         = 0;
int MainWidth      = 500;
int MainHeight     = 700;
int Voltage        = 0;
int SamplingWindow = 256;
int x              = 0;
int y              = 0;

void setup() {
  size(MainWidth, MainHeight);   
  background(0);
  fill(255, 255, 0);
  stroke(0);
  strokeWeight(5);
  rect(0, 0, MainWidth, MainHeight, 15);
  //String mySerialPortName = "COM5";
  //myConnexion = new Serial(this, mySerialPortName, 115200);
}

void draw() {

  int ClipX0     = 0;
  int ClipY0     = 100;
  int ClipW      = 500;
  int ClipH      = 400;
  int ClipRadius = 15;

//  String mySerialReadString = myConnexion.readStringUntil('\n');
//  if (mySerialReadString != null) {
//    mySerialReadString = trim(mySerialReadString);
//    Voltage = int(mySerialReadString);
//  }

  int oldx = x;
  x = (millis()%(SamplingWindow)*(width)/(SamplingWindow));
  if (oldx>x) {
    oldx=0;
    background(255, 255, 0);
  }

  int oldy = y;  
  //y=int(map(Voltage, 0, 1024, ClipW, ClipH));
  y=int(map(mouseY, 0, height, ClipW, ClipH));

  stroke(150);
  strokeWeight(5);
  fill(0, 255, 255);
  rect(ClipX0, ClipY0, ClipW, ClipH, ClipRadius);

  stroke(128);  
  strokeWeight(1);
  for (int i=0; i<8; i++) {
    line(ClipX0, (ClipY0+i*ClipH/8), (ClipX0+ClipW), (ClipY0+i*ClipH/8));
  }

  for (int iVGrid = 1; iVGrid < 10; iVGrid = iVGrid+1) {
    line((ClipX0+iVGrid*ClipW/10), (ClipY0), (ClipX0+iVGrid*ClipW/10), (ClipY0+ClipH));
  }

  stroke(0, 0, 255);
  strokeWeight(2);
  line(oldx, oldy, x, y);

}

jph

Hi TfGuy44,

thanks a lot for spending some time to rearranging my garbble mess ... as i said in my last post i had encountered problems to upload my source (i had not found any way to send a text file as an attachment). All the way there were to much "///////commentary blablas..." and may be they were disturbing the display of the text in the post ...

So, now that it has been cleaned and clarified too, i can see that the way used in my original source feeding (of deploying all the drawings into the serialEvent function) was not necessarily a good idea ... ok, i'll keep in mind.

On the other hand it is actually a great idea to use mouseY to simulate an input real-time signal. It will afford me to separate possible serial bandwidth problems from display performances, and thus to improve my learnings and developments with Processing.

JPh.