I can not erase the old line

Hi friends …I am new to processing…I write a code (combine examples) which create a graph speed- time from two sensors(later i will add acelleration-time also to the same graph) .The code run with only two problems:1) when end the screen with dataline ,the new line is cooexist with the old and this confuse the children(iam physics teacer), 2) i dont know how to save data to excell file -when i end the processing widow. THANKS… THE CODE:

import processing.serial.*;
Serial myPort;
PFont fnt;
int xPos;
int oldXpos=30;
int oldxtint;
int dx=30;

int xPos2;
int oldXpos2=30;
int oldxtint2;
int dx2=30;

void setup()
{
  
 size(1260,660);
 init_graph();
 xPos=dx;
 xPos2=dx2;
   fnt = createFont("Arial", 16, true);
 myPort=new Serial(this,"COM28",9600);
}
void draw()

{
  
  int ixt=0,n=0;
  int ixt2=0,n2=0;
 //println("aaaa");
  String inString=myPort.readStringUntil('\n');
  if(inString!=null){
  String oldinString=""; 
  if (inString!=oldinString)
  {
    fill(255);
    rect(244,236,100,40);
    fill(0);
    stroke(0,0,0);
     text(inString,250,250);
     oldinString=inString;
  } 
 
 
  String[] motors=splitTokens(inString,",");
  print(inString);
  String[] num=splitTokens(motors[0],".");
   n=Integer.parseInt(num[0]);
   ixt=(n*6); //maybe * up
   println(n);
   stroke(0,0,0);
  line(oldXpos,640-2*oldxtint,xPos,640-2*ixt);
  
  oldXpos=xPos;
  oldxtint=ixt;
  if (xPos >= width-dx)
  { xPos = dx;
    oldXpos=0;  
  }
  else { xPos+=10; }
  
  
  String[] num2=splitTokens(motors[1],".");
   n2=Integer.parseInt(num2[0]);
   ixt2=(n2*6); //maybe * up
   println(n2);
   stroke(250,0,0);
   line(oldXpos2,640-2*oldxtint2,xPos2,640-2*ixt2);
    oldXpos2=xPos2;
    oldxtint2=ixt2;
  if (xPos2 >= width-dx2)
  { xPos2 = dx2;
    oldXpos2=0;  
  }
  else { xPos2+=10; }

  }


}
void init_graph()
{
 background(255,255,255);
//  fill (255);
 stroke(0,0,0);
 line(30,640,1470,640);
 
  
 line(30,640,30,10);
 //textFont(fnt, 14);
   
  textSize(12);
  fill(50);
   
    text ("0", 30, 640);
    text ("5", 30, 580);
    text ("10", 30, 520);
    text ("15", 30, 460);
    text ("20", 30, 400);
    text ("25", 30, 340);
    text ("30", 30, 280);
    text ("35", 30, 220);
    text ("40", 30, 160);
    text ("45", 30, 100);
    text ("50", 30, 40);
    
   
    text ("0",30,650);
    text ("3",60,650);
    text ("6",90,650);
    text ("9",120,650);
    text ("12",150,650);
    text ("15",180,650);
    text ("18",210,650);
    text ("21",240,650);
    text ("24",270,650);
    text ("27",300,650);
    text ("30",330,650);
    text ("33",360,650);
    text ("36",390,650);
    text ("39",420,650);
    text ("42",450,650);
    text ("45",480,650);
    text ("48",510,650);
    text ("51",540,650);
    text ("54",570,650);
    text ("57",600,650);
    text ("60",630,650);
    text ("63",660,650);
    text ("66",690,650);
    text ("69",720,650);
    text ("72",750,650);
    text ("75",780,650);
    text ("78",810,650);
    text ("81",840,650);
    text ("84",870,650);
    text ("87",900,650);
    text ("90",930,650);
    text ("93",960,650);
    text ("96",990,650);
    text ("99",1020,650);
    text ("102",1050,650);
    text ("108",1110,650);
    text ("114",1170,650);
    text ("120",1230,650);
    text ("122",1250,650);
    text ("|",30,640);
    text ("|",60,640);
    text ("|",90,640);
    text ("|",120,640);
    text ("|",150,640);
    text ("|",180,640);
    text ("|",210,640);
    text ("|",240,640);
    text ("|",270,640);
    text ("|",300,640);
    text ("|",330,640);
    text ("|",360,640);
    text ("|",390,640);
    text ("|",420,640);
    text ("|",450,640);
    text ("|",480,640);
    text ("|",510,640);
    text ("|",540,640);
    text ("|",570,640);
    text ("|",600,640);
    text ("|",630,640);
    text ("|",660,640);
    text ("|",690,640);
    text ("|",720,640);
    text ("|",750,640);
    text ("|",780,640);
    text ("|",810,640);
    text ("|",840,640);
    text ("|",870,640);
    text ("|",900,640);
    text ("|",930,640);
    text ("|",960,640);
    text ("|",990,640);
    text ("|",1020,640);
    text ("|",1050,640);
    text ("|",1110,640);
    text ("|",1170,640);
    text ("|",1230,640);
    text ("|",1250,640);
    
 textSize(16);
 fill(50);
 text(" [Y]-SPEED (M/MIN) ",21,30);
 text(" [X]-TIME (SEC) ",1080,630);
 
}
1 Like

hi, nice ?arduino? project,


when you post code here please use the

</> code tag

to paste it into
for a example how that looks like, here a rewrite of one of your modules:

void init_graph() {
  background(255, 255, 255);
  stroke(0);
  line(30, 640, 1470, 640);
  line(30, 640, 30, 10);
  textSize(12);
  fill(50);
  for ( int i=0; i<11; i++ ) { 
    text( ( i*5), 30, 640-60*i );
  }
  for ( int i=0; i<42; i++ ) { 
    text( ( i*3), 30+30*i, 650 ); 
    text ("|", 30+30*i, 640);
  }
  textSize(16);
  text(" [Y]-SPEED (M/MIN) ", 21, 30);
  text(" [X]-TIME (SEC) ", 1080, 630);
}


you setup your screen
( background() and draw axis )
in setup()
and not use background() in draw.
( like in ?painting? mode )

if you need to cleanup after some time ( ?second line? )
can call

init_graph();

again.


your data are ?
local variables from inString split

  • split for “,” to array
  • split again for “.” what is very unusual separator ( as it is used in float 1.23 )

can you please provide a sample how that string looks like
( or even post the arduino code )?

now what you can do is to create a global array
and save that “n” and “n2” integer values into it.

IntList the_n_s,the_n2_s;

void setup_array() {        // called from setup
  the_n_s = new IntList();  // the_n_s.append(n);   // add new record
  the_n2_s = new IntList(); // the_n2_s.append(n2); // add new record
}

-a- later on keypress can export it to file

if ( key == 'p' ) save_CSV();

-b- it also allows you to change your whole program structure to

void draw() {
  init_graph();  // what does the background()
  draw_array();
}

what is the usual processing drawing structure,
to redraw all ( 60 times per sec ).

1 Like

Oh yes!!! THANKS ,i try only your void init graph and my processing screen looks match better…the other things i am trying to understand…i am not a good programmer student but i will try…so i post the part of 1)arduino code that measure speed from two motors- Photo Interrupter Sensor: speed measuring module - (car small robot =via bluetooth the robot transmit data, hc05 from arduino robot to my pc, i control it with ir controller )

pls delete that photos, not readable.

again for code you should use the

</> code format symbol in the editor

and then paste your code between the two ``` lines

anyhow for my question, how does the line arduino sends, look like
just copy a view lines from the processing console ( as you print that lines there )

now for the new concept,
you understand the idea with the array
( save the data incoming from arduino to records )
there are many ways, the IntList https://processing.org/reference/IntList.html ,is only one.

the part off the sketch that i think you ask me about- i can publish the whole one if its needed (its big)-
the arduino code

// Include the TimerOne Library from Paul Stoffregen
#include "TimerOne.h"
 
// Constants for Interrupt Pins
// Change values if not using Arduino Uno
 
const byte MOTOR1 = 2;  // Motor 1 Interrupt Pin - INT 0
const byte MOTOR2 = 3;  // Motor 2 Interrupt Pin - INT 1
 
// Integers for pulse counters
unsigned int counter1 = 0;
unsigned int counter2 = 0;
 
// Float for number of slots in encoder disk
float diskslots = 20;  // Change to match value of encoder disk
 
// Interrupt Service Routines
 
// Motor 1 pulse count ISR
void ISR_count1()  
{
  counter1++;  // increment Motor 1 counter value
}
 
// Motor 2 pulse count ISR
void ISR_count2()  
{
  counter2++;  // increment Motor 2 counter value
}
 
// TimerOne ISR
void ISR_timerone()
{
  Timer1.detachInterrupt();  // Stop the timer
  //Serial.print("Motor Speed 1: ");
  float rotation1 = (counter1 / diskslots) * 60.00;  // calculate RPM for Motor 1
  //Serial.print(rotation1);  
  //Serial.print(" RPM - ");
  counter1 = 0;  //  reset counter to zero
  //Serial.print("Motor Speed 2: ");
  float rotation2 = (counter2 / diskslots) * 60.00;  // calculate RPM for Motor 2
  //Serial.print(rotation2);  
  //erial.println(" RPM");
  counter2 = 0;  //  reset counter to zero
  Timer1.attachInterrupt( ISR_timerone );  // Enable the timer
  float speed1 =  rotation1 * 0.2076;   //ταχύτητα του 1ου τροχού, speed 1 WHEEL 
  float speed2 =  rotation2 * 0.2076;   //ταχύτητα του 2ου τροχού, speed 2 WHEEL
  Serial.print(speed1);
  Serial.println("  m/minA");
  Serial.print(speed2);
  Serial.println("  m/minB");
  
}
 
void setup()
{
  Serial.begin(9600);
  
  Timer1.initialize(1000000); // ΑΝΑ 1 ΔΕΥΤΕΡΟΛΕΠΤΟ ,set timer for 1sec
  attachInterrupt(digitalPinToInterrupt (MOTOR1), ISR_count1, RISING);  // Increase counter 1 when speed sensor pin goes High
  attachInterrupt(digitalPinToInterrupt (MOTOR2), ISR_count2, RISING);  // Increase counter 2 when speed sensor pin goes High
  Timer1.attachInterrupt( ISR_timerone ); // Enable the timer
}
 
void loop()
{
  // Nothing in the loop!
  // You can place code here
}

also the processing pde according to your guidness-works fine-but for now i cant manage to save it ,and i am wondering how to add to the same graph two line of accelaration-time x-axisand y-axis for sawing live the results of changing speed

import processing.serial.*;
Serial myPort;
PFont fnt;
int xPos;
int oldXpos=30;
int oldxtint;
int dx=30;

int xPos2;
int oldXpos2=30;
int oldxtint2;
int dx2=30;

void setup()
{
  
 size(1260,660);
 init_graph();
 xPos=dx;
 xPos2=dx2;
   fnt = createFont("Arial", 16, true);
 myPort=new Serial(this,"COM28",9600);
}
void draw()

{
  
  int ixt=0,n=0;
  int ixt2=0,n2=0;
 //println("aaaa");
  String inString=myPort.readStringUntil('\n');
  if(inString!=null){
  String oldinString=""; 
  if (inString!=oldinString)
  {
    fill(255);
    rect(244,236,100,40);
    fill(0);
    stroke(0,0,0);
     text(inString,250,250);
     oldinString=inString;
  } 
 
 
  String[] motors=splitTokens(inString,",");
  print(inString);
  String[] num=splitTokens(motors[0],".");
   n=Integer.parseInt(num[0]);
   ixt=(n*6); //maybe * up
   println(n);
   stroke(0,0,0);
   smooth();
  line(oldXpos,640-2*oldxtint,xPos,640-2*ixt);
  
  oldXpos=xPos;
  oldxtint=ixt;
  if (xPos >= width-dx)
  { xPos = dx;
    oldXpos=0;  
  }
  else { xPos+=10; }
  
  
  String[] num2=splitTokens(motors[1],".");
   n2=Integer.parseInt(num2[0]);
   ixt2=(n2*6); //maybe * up
   println(n2);
   stroke(250,0,0);
   smooth();
   line(oldXpos2,640-2*oldxtint2,xPos2,640-2*ixt2);
    oldXpos2=xPos2;
    oldxtint2=ixt2;
  if (xPos2 >= width-dx2)
  { xPos2 = dx2;
    oldXpos2=0;  
  }
  else { xPos2+=10; }
}
}

void mousePressed() {
 init_graph();
}



void init_graph() {
  background(255, 255, 255);
  stroke(0);
  line(30, 640, 1470, 640);
  line(30, 640, 30, 10);
  textSize(12);
  fill(50);
  for ( int i=0; i<11; i++ ) { 
    text( ( i*5), 30, 640-60*i );
  }
  for ( int i=0; i<42; i++ ) { 
    text( ( i*3), 30+30*i, 650 ); 
    text ("|", 30+30*i, 640);
  }
  textSize(16);
  text(" [Y]-SPEED (M/MIN) ", 21, 30);
  text(" [X]-TIME (SEC) ", 1080, 630);
}   
  
1 Like

i asked actually for the print of what the arduino sends, from the code i guess
there come 2 lines

123.45  m/minA
67.890  m/minB

up to you but i would use
what i call CSV line

Serial.print(counter1);
Serial.print(',');
Serial.print(counter2);
Serial.println();

might show

1234,5678

and the [m/min] engineering unit conversion
float mperminf = 60.0*0.2076/20.0 = 0.6228;
can do later in processing too.


save what to what? a picture of the canvas? as pdf, image ???


i told you already that the idea could be to store the measurements to array ? type list?
same for additional calculated results like “acceleration”

but also i now see your program flow and would suggest to

and in ( every ) draw

  • init_graph()
  • draw each graph from arraylist
1 Like