save and load Array list

brugola

Sorry for the trivial question, I'm a novice girl ... I would like to save as a name and be able to load an array list to compile a graph (y-axis data from the array list and x-axis value to each mouse pressed) exists a way? Thanks so much

ArrayList points = new ArrayList(); void setup() { size(900, 800); for (int i = 0; i < 13; i++) { points.add(new PVector(i, 20 + 10noise(i0.1))); }//for background(190); }// void draw() { background(190); // show data int y=50; for (PVector pv : points) { // show data text(pv.x, 100, y); text(pv.y, 200, y); y+=20; //next line // middle line line( 190, 30, 190, 440); }//for }//

Chrisir

Your code a little better formatted:

ArrayList<PVector> points = new ArrayList();

void setup() { 
  size(900, 800);

  for (int i = 0; i < 13; i++) { 
    points.add(new PVector(i, 20 + 10*noise(i*0.1)));
  }//for 

  background(190);
}//func 

void draw() { 
  background(190); 

  // show data 
  int y=50; 
  for (PVector pv : points) {

    // show data
    text(pv.x, 100, y); 
    text(pv.y, 200, y);

    y+=20; //next line
  }//for

  // middle line 
  line( 190, 30, 190, 440);
  //
}//func

brugola

sorry ..... I'm a beginner in this splendid world of processing ...

I'm trying to learn but I'm finding it difficult ........

Chrisir

in this version, the graph is shown in red as line graph

ArrayList<PVector> points = new ArrayList();

void setup() { 
  size(900, 800);

  for (int i = 0; i < 13; i++) { 
    points.add(new PVector(i, 20 + 10*noise(i*0.1)));
  }//for 

  background(190);
}//func 

void draw() { 
  background(190); 

  // show data
  PVector prev = new PVector(-1, -1); 
  int y=50; 
  for (PVector pv : points) {

    fill(255);

    // show data
    text(pv.x, 100, y); 
    text(pv.y, 200, y);

    fill(255, 2, 2); 
    stroke(255, 2, 2);
    if (prev.x!=-1) 
      line(10 + pv.x*30, pv.y*10, prev.x, prev.y);
    noStroke();
    ellipse (10 + pv.x*30, pv.y*10, 4, 4);
    prev = new PVector(10 + pv.x*30, pv.y*10); 

    y+=20; //next line
  }//for

  // middle line 
  line( 190, 30, 190, 440);
  //
}//func

Chrisir

what do you mean by this:

x-axis value to each mouse pressed

brugola

thank you for your interest.... my intention is to be able to represent a table of values ​​and to represent it with line graph (axis y values ​​received from arduino and axis x = 0 with each pressed mause advance one), save them with name and be able to recall, represent and compare them with another table and chart ....

brugola

I find it a very complicated sketch, it would calm me to understand how to save with name and load the table -.....

Chrisir

I don't know about Arduino but here you can

• New (3 buttons lower right corner)
• Save: A date time stamp is suggested, but you can enter a name.
• Load: dialog
• Delete points with Backspace (keyboard)
• Add points with mouse

At the beginning and when pressing New some points are added, this is not necessary. Search necessary in the code to change this.

A typical stored data file looks like this (comma separated float values)

0.0,27.690079
1.0,27.670195
2.0,27.499521
3.0,27.464329
4.0,27.39308
5.0,27.199102
6.0,26.98093
7.0,26.941555
8.0,26.824514
9.0,26.906185
10.0,26.86552
11.0,26.424377
12.0,26.095716

Chrisir ;-)

//  
// from https : // forum.processing.org/two/discussion/comment/112902/#Comment_112902

// editor path and file extension
final String pathFolder="";
final String fileExtension = ".txt";

// graph content 
ArrayList<PVector> points = new ArrayList();

// states of the program:
// unique numbers for constants: 
final int normal = 0;
final int save   = 1;
final int load   = 2;
///current state (must be one of them) 
int state=normal;

// Paths 
String savePath=""; 
String loadPath=""; 

// ------------------------------------------------
// Core functions of processing 

void setup() {
  size(900, 900);

  // not necessary
  for (int i = 0; i < 3; i++) { 
    points.add(new PVector(i, 20 + 10*noise(i*0.1)));
  }//for
}//func 

void draw() {

  switch (state) {

  case normal:
    drawForStateNormal() ;
    break; 

  case save:
    // wait for Save Dialog 
    waitForSaveDialog();
    break; 

  case load:
    // wait for Load Dialog 
    waitForLoadDialog();
    break;

  default:
    //Error 
    println("Fail");
    exit();
    break; 
    //
  }//switch
}//func

// ------------------------------------------------

void drawForStateNormal() {

  background(0);

  textSize(14);
  showData();

  // title 
  fill(255, 2, 2);
  text("My little Graph program\n\nUse buttons below\n"
    +"Use Backspace to delete last data point", 
    width-123, 20, 100, 422);

  // ----------------------
  // buttons
  showButtons();
  //
} //draw

// --------------------------------------------------
// functions to show buttons

void showButtons() {
  //
  textSize(11);
  fill(128);
  if ( overSave() ) {
    fill(196);
  }
  rect(width-40, height-20, 40, 20);
  fill(255); 
  text("Save", 
    width-40+7, height-9+5);

  // ---
  fill(128);
  if ( overLoad() ) {
    fill(196);
  }
  rect(width-40, height-50, 40, 20);
  fill(255); 
  text("Load", 
    width-40+7, height-50+9+5);

  // ---
  fill(128);
  if ( overNew() ) {
    fill(196);
  }
  rect(width-40, height-80, 40, 20);
  fill(255); 
  text("New", 
    width-40+7, height-80+9+5);
}

//----------------------------------------------------------------------------
// functions to register if mouse is over buttons 

boolean overSave() {
  return( mouseX > width-40 && 
    mouseY > height-20 );
}

boolean overLoad() {
  return( mouseX > width-40 && 
    mouseY > height-50  && 
    mouseY < height-50+25 );
}

boolean overNew() {
  return( mouseX > width-40 && 
    mouseY > height-80  && 
    mouseY < height-80+25 );
}

// ---------------------------------------------------------------------------
// Inputs 

void keyPressed() {

  if (state!=normal)
    return;

  // for the editor: 
  if ( keyCode == DELETE || keyCode == BACKSPACE ) {
    //
    if (points.size()>0)
      points.remove(points.size()-1);
  } else {
    if ( key != CODED ) {
      //
    }
  }
}

void mousePressed() {

  if (state!=normal)
    return;

  // for the buttons 
  if ( overSave() ) {
    initSave();
  }
  //---
  else if ( overLoad() ) {
    initLoad();
  }
  //---
  else if ( overNew() ) {
    points.clear(); 
    // not necessary:
    for (int i = 0; i < 13; i++) { 
      points.add(new PVector(i, 20 + 10*noise(i*0.1)));
    }//for
  }
  //---
  else {
    points.add(new PVector(points.size(), mouseY/10));
  }
}//func

// -------------------------------------------------
// Save and load 

void initSave() {
  // init save process 
  // reset
  savePath="";
  // make date time stamp (the expression nf(n,2) means leading zero: 2 becomes 02)
  String dateTimeStamp = year() 
    + nf(month(), 2) 
    + nf(day(), 2) 
    + "-" 
    + nf(hour(), 2)
    + nf(minute(), 2)
    + nf(second(), 2);
  // prepare fileDescription which occurs in the dialogue
  File fileDescription = new File( sketchPath()
    + "//"
    + pathFolder 
    + "//" 
    + dateTimeStamp
    + fileExtension);
  // open the dialog  
  selectOutput("Select a file to write to", "fileSelectedSave", fileDescription);
  // set state to wait
  state=save;
}

void initLoad() {
  // init load process 
  // reset
  loadPath="";
  // prepare fileDescription which occurs in the dialogue
  File fileDescription = new File( sketchPath()+"//"+pathFolder+"//"+"*" + fileExtension );
  // open the dialog
  selectInput("Select a file to load", "fileSelectedLoad", fileDescription);
  // set state to wait
  state=load;
}

void fileSelectedSave(File selection) {
  // the 'callback' function
  if (selection == null) {
    // println("Window was closed or the user hit cancel.");
    // go back 
    state=normal;
  } else {
    // println("User selected " + selection.getAbsolutePath());
    savePath=selection.getAbsolutePath();
  }
}

void fileSelectedLoad(File selection) {
  // the 'callback' function
  if (selection == null) {
    // println("Window was closed or the user hit cancel.");
    // go back 
    state=normal;
  } else {
    // println("User selected " + selection.getAbsolutePath());
    loadPath=selection.getAbsolutePath();
  }
}

void waitForSaveDialog() { 
  if (!savePath.equals("")) {
    // waiting is over
    saveIt();
    // go back 
    state=normal;
  }
}

void waitForLoadDialog() { 
  if (!loadPath.equals("")) {
    // waiting is over
    loadIt();
    // go back 
    state=normal;
  }
}

void saveIt() {
  // save

  // make array (to save it)
  String[] strs = new String[points.size()];
  int i=0;
  for (PVector pv : points) {
    strs[i]=str(pv.x)+","+str(pv.y);
    i++;
  }//for

  // check if file extension (fileExtension, e.g. .txt) is there 
  int len = savePath.length(); 
  if (len<4 || !savePath.substring( len-4 ).equals(fileExtension)) {
    // file Extension is not present, we have to add it
    savePath += fileExtension; // add the file Extension
  } 

  // save 
  println("Saved: " + savePath);
  saveStrings( savePath, strs );
}//func

void loadIt() {
  // load
  points.clear(); 
  String[] strs = loadStrings( loadPath );
  for (String s : strs) {
    String[] thisLine=split(s, ","); 
    points.add(new PVector(float(thisLine[0]), float(thisLine[1])));
  }//for
}

// -------------------------------------------------
// Misc

void showData() {
  //
  // show data
  PVector prev = new PVector(-1, -1); 
  int y=50; 
  for (PVector pv : points) {

    fill(255);

    // show data
    text(pv.x, 100, y); 
    text(pv.y, 200, y);

    fill(255, 2, 2); 
    stroke(255, 2, 2);
    if (prev.x!=-1) {
      line(10 + pv.x*30, pv.y*10, 
        prev.x, prev.y);
    }
    noStroke();
    ellipse (10 + pv.x*30, pv.y*10, 4, 4);
    prev = new PVector(10 + pv.x*30, pv.y*10); 

    y+=20; //next line
  }//for

  // middle line 
  line( 190, 30, 190, 440);
  //
}

// --------------------------------------------------

brugola

fantastic ..... I have not only figured out how to operate the save buttons with name and charge ....

brugola

I would like to save them on a file that can be loaded when I need it .....

Chrisir

??

When you make a graph with the mouse you can save it.

You can enter any name in the dialogue by typing the name

Chrisir

When you click the Load button you can load the file again

brugola

but the only key I see reproduce and new .... others I do not see ....

brugola

I would not want the mouse to create a value for me, but with each pressed only the progress of the table in the value x (0 to 1 to 2 to 3 ....)

Chrisir

there are 3 buttons

what is the height of your display?

are you on a small laptop?

do you see the lower area of the canvas?

brugola

ok thanks for your help .... I resized the sketch to fit my screen ....... now I study your example and I try to write the sketch and transcribe it all on a graph through the graphic library .... thanks again ....

brugola

Thanks so much! your example has taught me a lot. Much more than what they teach here in Italy at school. But I can not understand how to use the function load and new how to recall the new points on the chart without deleting those already represented on the chart and make a table appear side by side (without deleting the one just completed) ....

Chrisir

You are welcome.

First, when we hit new, the old list gets deleted and some values are just entered. You might want to change this in the lines 174 to 178

Similarly when loading the list gets deleted in line 293

When you delete this line the loaded points are added to the list (instead of clearing the list first).

That’s a first step but no real comparison of two data set (do you want two or even more than 2?)

Two tables

To achieve this you would have to work with a 2nd ArrayList (line 9) and change the display x position of the 2nd table (and graph color).

Also for loading and saving you either have 2x3 buttons so both tables have their own 3 buttons (new,load,save) or you have 3 buttons and kick out one table when loading the next. If 2 tables are there, copy table 2 into table 1 and load the new table into table 2. so the new table does not replace the previous table (2) but the one before (1).

This requires a little bit of thinking and work. I am on a journey and writing on my phone, so I can’t do anything for you.

Chrisir

brugola

Thank you. Interesting, challenging ..... you're right, what I'd like to accomplish are actually two ArrayList with the relative color (different) of the line represented on the chart and listed next to the first Array List without replacing it (only the valory of the y axis because the values ​​of the x axis would start again from 0 ...)

brugola

what do you think about it? I still do not understand how to draw the graph (y axis values ​​read via Arduino and x axis scales from 0 to 13 where each mouse pressed advances by 1) and relative table. And the part that I think very complicated to achieve, recall a previously saved Array List and be able to superimpose it on the chart (line of another color) and add it to the table just created .........

import processing.serial.*; 
import controlP5.*;   
import grafica.*;

Serial myPort;    // The serial port: 
ControlP5 controlP5;   // controlP5 object
Knob myKnob1,myKnob2,myKnob3,myKnob4;

ArrayList<PVector> points = new ArrayList();
String inString;  // Input string from serial port: 
int lf = 10;      // ASCII linefeed 
float deg, val;

final String pathFolder="";//CARTELLA DI PERCORSO
final String fileExtension = ".txt";//estensione file
// unique numbers for constants: 
final int normal = 0;
final int save   = 1;
final int load   = 2;
///current state (must be one of them) 
/// stato attuale (deve essere uno di loro)
int state=normal;

// Paths 
String savePath=""; 
String loadPath=""; 
 void setup() {
  size(1350, 750);

  // not necessary
  for (int i = 0; i < 3; i++) { 
    points.add(new PVector(i, 20 + 10*noise(i*0.1)));
  }//for



  //ControlP5
  PFont  f= createFont ("Georgia", 25);
  {
  controlP5 = new ControlP5(this);   //ControlP5

  myKnob1 = controlP5.addKnob(" Massa ARIA")
             //.setRange(0,1024)
               .setRange(0,5)
               .setValue(0)
               .setPosition(width-370,height-185)//posizione 605
               .setTickMarkLength(10)
               .setColorForeground(color(#FF0004))//colore cursore
               .setColorBackground(color(255))//colore sfondo
               .setColorValueLabel(color(0))//colore numeri//label etichetta
               .setColorActive(color(#6AFA05))
               .setDragDirection(Knob.VERTICAL)
            //  . setColorCaptionLabel(0) //colore scritta(capition)
               .lock()
               .setSize(150,150)//dimensioni
             // .setScrollSensitivity(120)
               . setDecimalPrecision(2) //numero dopo la virgola
               ;
              myKnob1 .getCaptionLabel()
               . setFont(f);
              myKnob1.getValueLabel()
               .setFont(f)
               ;




                  ;
  myKnob2 = controlP5.addKnob("P. Cil")

               .setRange(0,500)
               .setValue(0)
               .setPosition(width-370,height-380)
                .setColorForeground(color(#FF0004))//colore cursore
               .setColorBackground(color(255))//colore sfondo
               .setColorValueLabel(color(0))//colore numeri//label etichetta
               .setColorActive(color(#6AFA05))
               .setDragDirection(Knob.VERTICAL)
              // . setColorCaptionLabel(0) //colore scritta(capition)
               .lock()
               .setSize(150,150)//dimensioni
             // .setScrollSensitivity(120)
                .  setDecimalPrecision(2) //numero dopo la virgola
                .setTickMarkLength(10) 
               ;
               myKnob2 .getCaptionLabel()
                . setFont(f);
               myKnob2.getValueLabel()
                .setFont(f)
               ;

  myKnob3 = controlP5.addKnob("P. Atm ")
               //.setRange(0,1023)
               .setRange(0,500)
               .setValue(1)
               .setPosition(width-180,height-380)
                .setColorForeground(color(#FF0004))//colore cursore
               .setColorBackground(color(255))//colore sfondo
               .setColorValueLabel(color(0))//colore numeri//label etichetta
               .setColorActive(color(#6AFA05))
               .setDragDirection(Knob.VERTICAL)
            //   . setColorCaptionLabel(0) //colore scritta(capition)
              .lock()
              .setSize(150,150)//dimensioni
              .setDecimalPrecision(2) //numero dopo la virgola
               .setTickMarkLength(10)
               ;
              myKnob3 .getCaptionLabel()
               . setFont(f);
              myKnob3.getValueLabel()
             .setFont(f)

               ;

                myKnob4 = controlP5.addKnob("temp")
               //.setRange(0,1023)
               .setRange(0,500)
               .setValue(1)
               .setPosition(width-180,height-185)
                .setColorForeground(color(#FF0004))//colore cursore
               .setColorBackground(color(255))//colore sfondo
               .setColorValueLabel(color(0))//colore numeri//label etichetta
               .setColorActive(color(#6AFA05))
               .setDragDirection(Knob.VERTICAL)
            //   . setColorCaptionLabel(0) //colore scritta(capition)
              .lock()
              .setSize(150,150)//dimensioni
              .setDecimalPrecision(2) //numero dopo la virgola
               .setTickMarkLength(10)
               ;
              myKnob4 .getCaptionLabel()
               . setFont(f);
              myKnob4.getValueLabel()
             .setFont(f)
              ;
            }
  }







//  myPort = new Serial(this, "com3", 9600);
//  myPort.bufferUntil(lf);
// }
 void draw() {


  switch (state) {

  case normal:
    drawForStateNormal() ;
    break; 

  case save:
    // wait for Save Dialog 
    waitForSaveDialog();
    break; 

  case load:
    // wait for Load Dialog 
    waitForLoadDialog();
    break;

  default:
    //Error 
    println("Fail");
    exit();
    break; 
    //
  }//switch
}//func

// ------------------------------------------------

void drawForStateNormal() {

  background(245);
  {
    strokeWeight(2);   
    stroke(#FF0B03);
    fill(0);
    rect(width-380,height-490,360,90,20);// retangolo diff. press.
    fill(255);
   textSize(28); 
   text("Diff.Press.",width-270,height-405);     //diff.press
   textSize(40);
   text(( myKnob2.getValue()- myKnob3.getValue()),width-270,height-445);     //diff.press
  }
  {
  fill(0);
  strokeWeight(2);   
  stroke(#FF0B03);

  rect(width-380,height-390,360,190,20);// retangolo press
  rect(width-380,height-195,360,190,20);// rettangolo massa Temp
   }
  textSize(14);
  showData();

  // title 
  fill(255, 2, 2);
  text("My little Graph program\n\nUse buttons below\n"    //testo e posizione testo
    +"Use Backspace to delete last data point", 
    width-223, 20, 100, 422);

  // ----------------------
  // buttons
  showButtons();
  //
} //draw

// --------------------------------------------------
// functions to show buttons funzione per mostrare i bottoni

void showButtons() {
  //
   strokeWeight(2);   
  stroke(0);
  textSize(15);
  fill(0);
  if ( overSave() ) {
    fill(#FF0303);
  }


  rect(width-50, height-740, 40, 20,5);// modificato posizione bottone "salve"
  fill(255); 
  text("Salve", 
    width-50+2,height-740+9+6);
  // ---
  fill(0);
  if ( overLoad() ) {
    fill(#49C3FA);
  }


    rect(width-50, height-710, 40, 20,5);// modificato posizione" load"
  fill(255); 
  text("Load", 
    width-50+2, height-710+9+6);

  // ---
  fill(0);
  if ( overNew() ) {
    fill(#1FFF03);
  }


   rect(width-50, height-680, 40, 20,5);// modificato posizione "new"
  fill(255); 
  text("New", 
    width-50+4, height-680+9+6);
}

//----------------------------------------------------------------------------
// functions to register if mouse is over buttons funzione da registrare se il mouse è sui pulsanti

boolean overSave() {            // modificato
  return( mouseX > width-50 && 
          mouseY > height-740  && 
          mouseY < height-740+25) ;
}

    boolean overLoad() {                 //modificato
  return( mouseX > width-50 && 
          mouseY > height-710  && 
          mouseY < height-710+25 );
}

boolean overNew() {                         //modificato
  return( mouseX > width -50 && 
          mouseY > height-680  && 
          mouseY < height-680+25 );
}

// ---------------------------------------------------------------------------
// Inputs 

void keyPressed() {

  if (state!=normal)
    return;

  // for the editor: 
  if ( keyCode == DELETE || keyCode == BACKSPACE ) {
    //
    if (points.size()>0)
      points.remove(points.size()-1);
  } else {
    if ( key != CODED ) {
      //
    }
  }
}

void mousePressed() {

  if (state!=normal)
    return;

  // for the buttons 
  if ( overSave() ) {
    initSave();
  }
  //---
  else if ( overLoad() ) {
    initLoad();
  }
  //---
  else if ( overNew() ) {
    points.clear();            //cancellare punti con new
   //  not necessary:
    for (int i = 0; i < 13; i++) { 
      points.add(new PVector(i, 20 + 10*noise(i*0.1)));
    }//for
  }
  //---
  else {
   // points.add(new PVector(points.size(), mouseY/10));
    points.add(new PVector(points.size(), myKnob1.getValue()));
  }
}//func

// -------------------------------------------------
// Save and load 

void initSave() {
  // init save process 
  // reset
  savePath="";
  // make date time stamp (the expression nf(n,2) means leading zero: 2 becomes 02)
  String dateTimeStamp = year() 
    + nf(month(), 2) 
    + nf(day(), 2) 
    + "-"
    + nf(hour(), 2)
    + nf(minute(), 2)
    + nf(second(), 2);
  // prepare fileDescription which occurs in the dialogue
  // prepara la descrizione del file che avviene nel dialogo
  File fileDescription = new File( sketchPath()
    + "//"
    + pathFolder 
    + "//"
    + dateTimeStamp
    + fileExtension);
  // open the dialog  
  selectOutput("Select a file to write to", "fileSelectedSave", fileDescription);
  // set state to wait
  state=save;
}

void initLoad() {
  // init load process 
  // reset
  loadPath="";
  // prepare fileDescription which occurs in the dialogue
  File fileDescription = new File( sketchPath()+"//"+pathFolder+"//"+"*" + fileExtension );
  // open the dialog
  selectInput("Select a file to load", "fileSelectedLoad", fileDescription);
  // set state to wait
  state=load;
}

void fileSelectedSave(File selection) {
  // the 'callback' function
  if (selection == null) {
    // println("Window was closed or the user hit cancel.");
    // go back 

// println ("La finestra è stata chiusa o l'utente ha premuto annulla.");
    // torna indietro

    state=normal;
  } else {
    // println("User selected " + selection.getAbsolutePath());
    savePath=selection.getAbsolutePath();
  }
}

void fileSelectedLoad(File selection) {
  // the 'callback' function
  if (selection == null) {
    // println("Window was closed or the user hit cancel.");
    // go back 
    state=normal;
  } else {
    // println("User selected " + selection.getAbsolutePath());
    loadPath=selection.getAbsolutePath();
  }
}

void waitForSaveDialog() { 
  if (!savePath.equals("")) {
    // waiting is over
    saveIt();
    // go back 
    state=normal;
  }
}

void waitForLoadDialog() { 
  if (!loadPath.equals("")) {
    // waiting is over
    loadIt();
    // go back 
    state=normal;
  }
}

void saveIt() {
  // save

  // make array (to save it)
  String[] strs = new String[points.size()];
  int i=0;
  for (PVector pv : points) {
    strs[i]=str(pv.x)+","+str(pv.y);
    i++;
  }//for

  // check if file extension (fileExtension, e.g. .txt) is there 
  int len = savePath.length(); 
  if (len<4 || !savePath.substring( len-4 ).equals(fileExtension)) {
    // file Extension is not present, we have to add it
    savePath += fileExtension; // add the file Extension
  } 

  // save 
  println("Saved: " + savePath);
  saveStrings( savePath, strs );
}//func

void loadIt() {
  // load
//  points.clear(); 
  String[] strs = loadStrings( loadPath );
  for (String s : strs) {
    String[] thisLine=split(s, ","); 
    points.add(new PVector(float(thisLine[0]), float(thisLine[1])));
  }//for
}

// -------------------------------------------------
void showData() {
  //
  // show data
  PVector prev = new PVector(-1, -1); 
  int y=50; 
  for (PVector pv : points) {

    fill(0);

    // show data
    text(pv.x, 100, y); 
    text(pv.y, 200, y);

    fill(0, 2, 2); 
    stroke(255, 2, 2);
    if (prev.x!=-1) {
      line(10 + pv.x*30, pv.y*10, 
        prev.x, prev.y);
    }
    noStroke();
    ellipse (10 + pv.x*30, pv.y*10, 4, 4);
    prev = new PVector(10 + pv.x*30, pv.y*10); 

    y+=20; //next line
  }//for

  // middle line 
  line( 190, 30, 190, 440);
  //
}

 void serialEvent(Serial p) { 
 inString = p.readString(); 
 char primo=inString.charAt(0);  // primo carattere
 String cifra=inString.substring(1);  // da secondo carattere in poi
 float val=parseFloat(cifra);          // valore da 0-255 o 0-1023, non sò cosa spedisce arduino


 print("val=");    println(val);

 //   inString = trim(inString);

  //    // converte in int e mappa all'altezza dello schermo: 


 switch(primo) { 
   case ('A'): myKnob1.setValue(val);
     break;
   case ('B'): myKnob2.setValue(val);
     break;
   case ('C'): myKnob3.setValue(val);
     break;
      case ('D'): myKnob3.setValue(val);
     break;
 }
 }

Chrisir

When the y value comes from arduino and x by mousePressed do you mean by a mouse click anywhere on the screen the x is just increased by 1 or is the x where you click the mouse?

Also are the y values averaged from your last mouse click onwards...?

Two ArrayLists

To the double load of ArrayList; i told you how to do it.

When you duplicate line 9 and change the name you got 2 different arrayLists

Now you have an indicator that tells you what ArrayList is the active one (eg activeArrayListIsLeft==true) and then on loading fill the data only in the active ArrayList

Duplicate the lines for displaying the ArrayList too

brugola

Thank you for your lessons .... You want a mouse click anywhere on the screen the x is increased by 1 ..... I have to study better and more the sketch .... thanks again Chrisir .....

Chrisir

looks great!

Cool controls, Sir.

remarks:

the button reads Salve, should be Save (or is it Italian?)

I display a red help text "Use buttons below" - not correct anymore, because new/load/save are on top now

when mouse is clicked on controls it should not set a new point on the graph...

Chrisir

new version with 2 tables and graphs.

• Delete key and Backspace key are now referring to the different tables separately

• Use key 1 and 2 to set the active table

• New, Load and Save are referring to the active table.

• Hit x to hide / show help text

Chrisir ;-)

import processing.serial.*; 
import controlP5.*;   
import grafica.*;

Serial myPort;    // The serial port: 
ControlP5 controlP5;   // controlP5 object
Knob myKnob1, myKnob2, myKnob3, myKnob4;

ArrayList<PVector> points1 = new ArrayList(); // left one 
ArrayList<PVector> points2 = new ArrayList(); // right one

boolean activeArrayListIsLeft = true; 

boolean showHelpText1 = true; 

String inString;  // Input string from serial port: 
int lf = 10;      // ASCII linefeed 
float deg, val;

final String pathFolder="";//CARTELLA DI PERCORSO
final String fileExtension = ".txt";//estensione file
// unique numbers for constants: 
final int normal = 0;
final int save   = 1;
final int load   = 2;
///current state (must be one of them) 
/// stato attuale (deve essere uno di loro)
int state=normal;

// Paths 
String savePath=""; 
String loadPath=""; 
void setup() {
  size(1350, 750);

  // not necessary
  for (int i = 0; i < 3; i++) { 
    points1.add(new PVector(i, 20 + 10*noise(i*0.1)));
  }//for

  // not necessary 
  for (int i = 0; i < 13; i++) { 
    points2.add(new PVector(i, 20 + 10*noise(i*0.1)));
  }//for

  //ControlP5
  PFont  f= createFont ("Georgia", 25);
  {
    controlP5 = new ControlP5(this);   //ControlP5

    myKnob1 = controlP5.addKnob(" Massa ARIA")
      //.setRange(0,1024)
      .setRange(0, 5)
      .setValue(0)
      .setPosition(width-370, height-185)//posizione 605
      .setTickMarkLength(10)
      .setColorForeground(color(#FF0004))//colore cursore
      .setColorBackground(color(255))//colore sfondo
      .setColorValueLabel(color(0))//colore numeri//label etichetta
      .setColorActive(color(#6AFA05))
      .setDragDirection(Knob.VERTICAL)
      //  . setColorCaptionLabel(0) //colore scritta(capition)
      .lock()
      .setSize(150, 150)//dimensioni
      // .setScrollSensitivity(120)
      . setDecimalPrecision(2) //numero dopo la virgola
      ;
    myKnob1 .getCaptionLabel()
      . setFont(f);
    myKnob1.getValueLabel()
      .setFont(f)
      ;
    ;

    myKnob2 = controlP5.addKnob("P. Cil")
      .setRange(0, 500)
      .setValue(0)
      .setPosition(width-370, height-380)
      .setColorForeground(color(#FF0004))//colore cursore
      .setColorBackground(color(255))//colore sfondo
      .setColorValueLabel(color(0))//colore numeri//label etichetta
      .setColorActive(color(#6AFA05))
      .setDragDirection(Knob.VERTICAL)
      // . setColorCaptionLabel(0) //colore scritta(capition)
      .lock()
      .setSize(150, 150)//dimensioni
      // .setScrollSensitivity(120)
      .  setDecimalPrecision(2) //numero dopo la virgola
      .setTickMarkLength(10) 
      ;
    myKnob2 .getCaptionLabel()
      . setFont(f);
    myKnob2.getValueLabel()
      .setFont(f)
      ;

    myKnob3 = controlP5.addKnob("P. Atm ")
      //.setRange(0,1023)
      .setRange(0, 500)
      .setValue(1)
      .setPosition(width-180, height-380)
      .setColorForeground(color(#FF0004))//colore cursore
      .setColorBackground(color(255))//colore sfondo
      .setColorValueLabel(color(0))//colore numeri//label etichetta
      .setColorActive(color(#6AFA05))
      .setDragDirection(Knob.VERTICAL)
      //   . setColorCaptionLabel(0) //colore scritta(capition)
      .lock()
      .setSize(150, 150)//dimensioni
      .setDecimalPrecision(2) //numero dopo la virgola
      .setTickMarkLength(10)
      ;
    myKnob3 .getCaptionLabel()
      . setFont(f);
    myKnob3.getValueLabel()
      .setFont(f)
      ;

    myKnob4 = controlP5.addKnob("temp")
      //.setRange(0,1023)
      .setRange(0, 500)
      .setValue(1)
      .setPosition(width-180, height-185)
      .setColorForeground(color(#FF0004))//colore cursore
      .setColorBackground(color(255))//colore sfondo
      .setColorValueLabel(color(0))//colore numeri//label etichetta
      .setColorActive(color(#6AFA05))
      .setDragDirection(Knob.VERTICAL)
      //   . setColorCaptionLabel(0) //colore scritta(capition)
      .lock()
      .setSize(150, 150)//dimensioni
      .setDecimalPrecision(2) //numero dopo la virgola
      .setTickMarkLength(10)
      ;
    myKnob4 .getCaptionLabel()
      . setFont(f);
    myKnob4.getValueLabel()
      .setFont(f)
      ;
  }
}
//  myPort = new Serial(this, "com3", 9600);  // ?????
//  myPort.bufferUntil(lf);
// }

void draw() {

  switch (state) {

  case normal:
    drawForStateNormal() ;
    break; 

  case save:
    // wait for Save Dialog 
    waitForSaveDialog();
    break; 

  case load:
    // wait for Load Dialog 
    waitForLoadDialog();
    break;

  default:
    //Error 
    println("Fail");
    exit();
    break; 
    //
  }//switch
}//func

// ------------------------------------------------

void drawForStateNormal() {

  background(245);
  {
    strokeWeight(2);   
    stroke(#FF0B03);
    fill(0);
    rect(width-380, height-490, 360, 90, 20);// retangolo diff. press.
    fill(255);
    textSize(28); 
    text("Diff.Press.", width-270, height-405);     //diff.press
    textSize(40);
    text(( myKnob2.getValue()- myKnob3.getValue()), width-270, height-445);     //diff.press
  }
  {
    fill(0);
    strokeWeight(2);   
    stroke(#FF0B03);

    rect(width-380, height-390, 360, 190, 20);// retangolo press
    rect(width-380, height-195, 360, 190, 20);// rettangolo massa Temp
  }
  textSize(14);
  showData1();
  showData2();

  // title 
  fill(255, 2, 2);
  text("My little Graph program\n\nUse buttons on the right and below;\n"    //testo e posizione testo
    +"use Backspace OR delete key to delete last data point of each list.", 
    width-223, 10, 100, 422);

  // help
  if (showHelpText1) {
    fill(255, 2, 2);
    text("Use 1 and 2 to set the active table which is marked by the horizontal line on top.\n\n"
      +"New, Load and Save are referring to the active table.\n\nHit x to hide / show this text.", 
      420, 10, 100, 422);
  }

  // ----------------------
  // buttons
  showButtons();
  //
} //draw

// --------------------------------------------------
// functions to show buttons funzione per mostrare i bottoni

void showButtons() {
  //
  strokeWeight(2);   
  stroke(0);
  textSize(15);
  fill(0);
  if ( overSave() ) {
    fill(#FF0303);
  }

  rect(width-50, height-740, 40, 20, 5);// modificato posizione bottone "salve"
  fill(255); 
  text("Save", 
    width-50+2, height-740+9+6);
  // ---
  fill(0);
  if ( overLoad() ) {
    fill(#49C3FA);
  }

  rect(width-50, height-710, 40, 20, 5);// modificato posizione" load"
  fill(255); 
  text("Load", 
    width-50+2, height-710+9+6);

  // ---
  fill(0);
  if ( overNew() ) {
    fill(#1FFF03);
  }

  rect(width-50, height-680, 40, 20, 5);// modificato posizione "new"
  fill(255); 
  text("New", 
    width-50+4, height-680+9+6);
}

//----------------------------------------------------------------------------
// functions to register if mouse is over buttons funzione da registrare se il mouse è sui pulsanti

boolean overSave() {            // modificato
  return mouseX > width-50 && 
    mouseY > height-740  && 
    mouseY < height-740+25 ;
}

boolean overLoad() {                 //modificato
  return mouseX > width-50 && 
    mouseY > height-710  && 
    mouseY < height-710+25 ;
}

boolean overNew() {                         //modificato
  return mouseX > width -50 && 
    mouseY > height-680  && 
    mouseY < height-680+25 ;
}

// ---------------------------------------------------------------------------
// Inputs 

void keyPressed() {

  if (state!=normal)
    return;

  //  
  if (  keyCode == BACKSPACE ) {
    //
    if (points1.size()>0)
      points1.remove(points1.size()-1);
  } 
  // ----
  if ( keyCode == DELETE ) {
    //
    if (points2.size()>0)
      points2.remove(points2.size()-1);
  } 

  // ------

  else {
    if ( key != CODED ) {
      //
      switch(key) {

      case '1':
        activeArrayListIsLeft = true; 
        break;

      case '2':
        activeArrayListIsLeft = false; 
        break;

      case 'x':
        showHelpText1 = !showHelpText1; 
        break;
      }//switch
      //
    }//if
  }//else
}// func 

void mousePressed() {

  if (state!=normal)
    return;

  // for the buttons 
  if ( overSave() ) {
    initSave();
  }
  //---
  else if ( overLoad() ) {
    initLoad();
  }
  //---
  else if ( overNew() ) {
    //
    if ( activeArrayListIsLeft ) {
      points1.clear();            //cancellare punti con new
      //  not necessary:
      for (int i = 0; i < 13; i++) { 
        // points1.add(new PVector(i, 20 + 10*noise(i*0.1)));
      }//for
    } else {
      points2.clear();            //cancellare punti con new
      //  not necessary:
      for (int i = 0; i < 13; i++) { 
        // points2.add(new PVector(i, 20 + 10*noise(i*0.1)));
      }//for
    }
    //
  }
  //---
  else {
    // points.add(new PVector(points.size(), mouseY/10));
    if ( activeArrayListIsLeft ) {
      points1.add(new PVector(points1.size(), myKnob1.getValue()));
    } else {
      points2.add(new PVector(points2.size(), myKnob1.getValue()));
    }
  }
}//func

// -------------------------------------------------
// Save and load 

void initSave() {
  // init save process 
  // reset
  savePath="";
  // make date time stamp (the expression nf(n,2) means leading zero: 2 becomes 02)
  String dateTimeStamp = year() 
    + nf(month(), 2) 
    + nf(day(), 2) 
    + "-"
    + nf(hour(), 2)
    + nf(minute(), 2)
    + nf(second(), 2);
  // prepare fileDescription which occurs in the dialogue
  // prepara la descrizione del file che avviene nel dialogo
  File fileDescription = new File( sketchPath()
    + "//"
    + pathFolder 
    + "//"
    + dateTimeStamp
    + fileExtension);
  // open the dialog  
  selectOutput("Select a file to write to", "fileSelectedSave", fileDescription);
  // set state to wait
  state=save;
}

void initLoad() {
  // init load process 
  // reset
  loadPath="";
  // prepare fileDescription which occurs in the dialogue
  File fileDescription = new File( sketchPath()+"//"+pathFolder+"//"+"*" + fileExtension );
  // open the dialog
  selectInput("Select a file to load", "fileSelectedLoad", fileDescription);
  // set state to wait
  state=load;
}

void fileSelectedSave(File selection) {
  // the 'callback' function
  if (selection == null) {
    // println("Window was closed or the user hit cancel.");


    // println ("La finestra è stata chiusa o l'utente ha premuto annulla.");
    // torna indietro

    state=normal;    // go back
  } else {
    // println("User selected " + selection.getAbsolutePath());
    savePath=selection.getAbsolutePath();
  }
}

void fileSelectedLoad(File selection) {
  // the 'callback' function
  if (selection == null) {
    // println("Window was closed or the user hit cancel.");

    // go back 
    state=normal;
  } else {
    // println("User selected " + selection.getAbsolutePath());
    loadPath=selection.getAbsolutePath();
  }
}

void waitForSaveDialog() { 
  if (!savePath.equals("")) {
    // waiting is over
    saveIt();
    // go back 
    state=normal;
  }
}

void waitForLoadDialog() { 
  if (!loadPath.equals("")) {
    // waiting is over
    loadIt();
    // go back 
    state=normal;
  }
}

void saveIt() {
  // save

  // make array (to save it)

  String[] strs; 

  if (activeArrayListIsLeft) {
    strs = new String[points1.size()];
    int i=0;
    for (PVector pv : points1) {
      strs[i]=str(pv.x)+","+str(pv.y);
      i++;
    }//for
  }// 
  else {
    strs = new String[points2.size()];
    int i=0;
    for (PVector pv : points2) {
      strs[i]=str(pv.x)+","+str(pv.y);
      i++;
    }//for
  }//else 

  // check if file extension (fileExtension, e.g. .txt) is there 
  int len = savePath.length(); 
  if (len<4 || !savePath.substring( len-4 ).equals(fileExtension)) {
    // file Extension is not present, we have to add it
    savePath += fileExtension; // add the file Extension
  } 

  // save 
  println("Saved: " + savePath);
  saveStrings( savePath, strs );
}//func

void loadIt() {
  // load
  if (activeArrayListIsLeft) {
    points1.clear();
  } else 
  {
    points2.clear();
  }
  String[] strs = loadStrings( loadPath );
  for (String s : strs) {
    String[] thisLine=split(s, ",");

    if (activeArrayListIsLeft) {
      points1.add(new PVector(float(thisLine[0]), float(thisLine[1])));
    } else 
    {
      points2.add(new PVector(float(thisLine[0]), float(thisLine[1])));
    }//else 
    //
  }//for
}

// -------------------------------------------------

void showData1() {
  //
  // show data LEFT 
  PVector prev = new PVector(-1, -1); 
  int y=50; 

  if (activeArrayListIsLeft) {
    stroke(255, 2, 2); // RED
    line (10, 10, 198, 10);
  }

  for (PVector pv : points1) {

    fill(255, 2, 2); // RED 

    // show data
    text(pv.x, 30, y); 
    text(pv.y, 110, y);

    fill(0, 2, 2); 
    stroke(255, 2, 2); // RED 
    if (prev.x!=-1) {
      line(10 + pv.x*30, pv.y*10, 
        prev.x, prev.y);
    }
    noStroke();
    ellipse (10 + pv.x*30, pv.y*10, 4, 4);
    prev = new PVector(10 + pv.x*30, pv.y*10); 

    y+=20; //next line
  }//for

  // middle line 
  stroke(255, 2, 2); // RED 
  line( 100, 30, 100, height);

  // double middle lines!!!   ???
  stroke(0); // BLACK 
  int x1=200;
  line( x1-2, 30, x1-2, height);
  line( x1+2, 30, x1+2, height);
  //
}

void showData2() {
  //
  // show data RIGHT 

  if (!activeArrayListIsLeft) {
    // activeArrayListIsLeft is FALSE, right side is active
    stroke(2, 255, 2); // GREEN
    line (200, 10, 
      350, 10);
  }

  PVector prev = new PVector(-1, -1); 
  int y=50; 
  for (PVector pv : points2) {

    fill(0, 255, 2); // GREEN 

    // show data
    text(pv.x, 210, y); 
    text(pv.y, 290, y);

    fill(0, 2, 2); 
    stroke(0, 255, 2); // GREEN 
    if (prev.x!=-1) {
      line(10 + pv.x*30, pv.y*10, 
        prev.x, prev.y);
    }
    noStroke();
    ellipse (10 + pv.x*30, pv.y*10, 4, 4);
    prev = new PVector(10 + pv.x*30, pv.y*10); 

    y+=20; //next line
  }//for

  // middle line 
  stroke(0, 255, 2); // GREEN 
  line( 288, 30, 288, height);
  //
}

// ---------------------------------------------------------------

void serialEvent(Serial p) { 
  inString = p.readString(); 
  char primo=inString.charAt(0);  // primo carattere
  String cifra=inString.substring(1);  // da secondo carattere in poi
  float val=parseFloat(cifra);          // valore da 0-255 o 0-1023, non sò cosa spedisce arduino


  print("val=");    
  println(val);

  //   inString = trim(inString);

  //    // converte in int e mappa all'altezza dello schermo: 


  switch(primo) { 
    case ('A'): 
    myKnob1.setValue(val);
    break;
    case ('B'): 
    myKnob2.setValue(val);
    break;
    case ('C'): 
    myKnob3.setValue(val);
    break;
    case ('D'): 
    myKnob3.setValue(val);
    break;
  }
}

brugola

Thanks Chrisir I have to congratulate you and if you ever pass from Italy I offer a beer ..... I'm learning so much from you ..... I fail to understand how to make and map the values ​​in a graph x and y (giving the due proptions in y values ​​read by arduino and x numbers from o to 13)

Chrisir

how to make and map the values ​​in a graph x and y (giving the due proptions in y values ​​read by arduino and x numbers from o to 13)

Hm.

Not sure what you mean.

I don't know about your values.

Use println() to find out how many values you get and which size they are (between 0 and 1000 or between 300 and 400? huge difference).

You could make a timer and read in values every 1/3 second automatically and even take the average of the values.

You could start this when you click the mouse ONCE then it runs automatically 13 times every 1/3 second or so (look at millis() in reference and google timer for it).

• Now, when your values are between 0 and 0.5 they are very small. Use map() to enlarge them. See reference.

• Now, in math y = 0 value is at the bottom (or in the middle) of a coordinate system. In processing it's at the top. Bad. So maybe you want resultY = 300 - yFromArduino; - with that you would flip it upside down.

brugola

I did not explain well ... the graph that I mean and as an example that I enclose, the value of the y axis are read by arduino and in the x axis the value is given by the mouse pressed which increases the value of 1 each time

import grafica.*;

void setup() {
  size(500, 350);
  background(150);

  // Prepare the points for the plot
  int nPoints = 100;
  GPointsArray points = new GPointsArray(nPoints);

  for (int i = 0; i < nPoints; i++) {
    points.add(i, 10*noise(0.1*i));
  }

  // Create a new plot and set its position on the screen
  GPlot plot = new GPlot(this);
  plot.setPos(25, 25);
  // or all in one go
  // GPlot plot = new GPlot(this, 25, 25);

  // Set the plot title and the axis labels
  plot.setTitleText("A very simple example");
  plot.getXAxis().setAxisLabelText("x axis");
  plot.getYAxis().setAxisLabelText("y axis");

  // Add the points
  plot.setPoints(points);

  // Draw it!
  plot.defaultDraw();
}

Chrisir

and your question is....?

brugola

Sorry if I'm not precise ... my question is: is it possible to represent the line (y = values ​​from Arduino and x = mouse pressed increases by one) in the chart I posted?

Chrisir

yes; in function serialEvent you read a value

add that to the active arraylist on mousepressed

see lines 505 to 510

Chrisir

So store value in serialEvent (while loop??)

And then move it with ...add into the ArrayList

Chrisir

Solved..?

brugola

thanks for the interest, I'm still studying the sketch but I have not yet managed to draw the chart ....

brugola

This is what I have in mind, but I have not succeeded yet .... Point1 and Point2 I would like to draw in the GPlot chart .... import processing.serial.*; import controlP5.*;
import grafica.*;

Serial myPort;    // The serial port: 
ControlP5 controlP5;   // controlP5 object
Knob myKnob1, myKnob2, myKnob3, myKnob4;

ArrayList<PVector> points1 = new ArrayList(); // left one 
ArrayList<PVector> points2 = new ArrayList(); // right one

boolean activeArrayListIsLeft = true; 

boolean showHelpText1 = true; 

String inString;  // Input string from serial port: 
int lf = 10;      // ASCII linefeed 
float deg, val;

final String pathFolder="";//CARTELLA DI PERCORSO
final String fileExtension = ".txt";//estensione file
// unique numbers for constants: 
final int normal = 0;
final int save   = 1;
final int load   = 2;
///current state (must be one of them) 

int state=normal;

// Paths 
String savePath=""; 
String loadPath=""; 

GPlot plot;
int xPos=0;
void setup() {
  size(1350, 750);

  // not necessary
  for (int i = 0; i < 3; i++) { 
    points1.add(new PVector(i, 20 + 10*noise(i*0.1)));
  }//for

  // not necessary 
  for (int i = 0; i < 13; i++) { 
    points2.add(new PVector(i, 20 + 10*noise(i*0.1)));
  }//for

  //ControlP5
  PFont  f= createFont ("Georgia", 25);
  {
    controlP5 = new ControlP5(this);   //ControlP5

    myKnob1 = controlP5.addKnob(" Massa ARIA")
      //.setRange(0,1024)
      .setRange(0, 5)
      .setValue(0)
      .setPosition(width-370, height-185)//posizione 605
      .setTickMarkLength(10)
      .setColorForeground(color(#FF0004))//colore cursore
      .setColorBackground(color(255))//colore sfondo
      .setColorValueLabel(color(0))//colore numeri//label etichetta
      .setColorActive(color(#6AFA05))
      .setDragDirection(Knob.VERTICAL)
      //  . setColorCaptionLabel(0) //colore scritta(capition)
      .lock()
      .setSize(150, 150)//dimensioni
      // .setScrollSensitivity(120)
      . setDecimalPrecision(2) //numero dopo la virgola
      ;
    myKnob1 .getCaptionLabel()
      . setFont(f);
    myKnob1.getValueLabel()
      .setFont(f)
      ;
    ;

    myKnob2 = controlP5.addKnob("P. Cil")
      .setRange(0, 500)
      .setValue(0)
      .setPosition(width-370, height-380)
      .setColorForeground(color(#FF0004))//colore cursore
      .setColorBackground(color(255))//colore sfondo
      .setColorValueLabel(color(0))//colore numeri//label etichetta
      .setColorActive(color(#6AFA05))
      .setDragDirection(Knob.VERTICAL)
      // . setColorCaptionLabel(0) //colore scritta(capition)
      .lock()
      .setSize(150, 150)//dimensioni
      // .setScrollSensitivity(120)
      .  setDecimalPrecision(2) //numero dopo la virgola
      .setTickMarkLength(10) 
      ;
    myKnob2 .getCaptionLabel()
      . setFont(f);
    myKnob2.getValueLabel()
      .setFont(f)
      ;

    myKnob3 = controlP5.addKnob("P. Atm ")
      //.setRange(0,1023)
      .setRange(0, 500)
      .setValue(1)
      .setPosition(width-180, height-380)
      .setColorForeground(color(#FF0004))//colore cursore
      .setColorBackground(color(255))//colore sfondo
      .setColorValueLabel(color(0))//colore numeri//label etichetta
      .setColorActive(color(#6AFA05))
      .setDragDirection(Knob.VERTICAL)
      //   . setColorCaptionLabel(0) //colore scritta(capition)
      .lock()
      .setSize(150, 150)//dimensioni
      .setDecimalPrecision(2) //numero dopo la virgola
      .setTickMarkLength(10)
      ;
    myKnob3 .getCaptionLabel()
      . setFont(f);
    myKnob3.getValueLabel()
      .setFont(f)
      ;

    myKnob4 = controlP5.addKnob("temp")
      //.setRange(0,1023)
      .setRange(0, 500)
      .setValue(1)
      .setPosition(width-180, height-185)
      .setColorForeground(color(#FF0004))//colore cursore
      .setColorBackground(color(255))//colore sfondo
      .setColorValueLabel(color(0))//colore numeri//label etichetta
      .setColorActive(color(#6AFA05))
      .setDragDirection(Knob.VERTICAL)
      //   . setColorCaptionLabel(0) //colore scritta(capition)
      .lock()
      .setSize(150, 150)//dimensioni
      .setDecimalPrecision(2) //numero dopo la virgola
      .setTickMarkLength(10)
      ;
    myKnob4 .getCaptionLabel()
      . setFont(f);
    myKnob4.getValueLabel()
      .setFont(f)
      ;
  }
}
//  myPort = new Serial(this, "com3", 9600);  // ?????
//  myPort.bufferUntil(lf);
// }
{
   // Create the first plot  Crea il primo grafico
 plot = new GPlot(this);
  plot.setPos(200,200);//posizione
  plot.setMar(0, 100, 0,100);
  plot.setDim(1000, 480);//dimensione
  plot.setAxesOffset(4);
  plot.setTicksLength(4);



  int myKnob1 =0;
  GPointsArray points = new GPointsArray(myKnob1);

  for (int i = 0; i < 13; i++) {
   //points.add(i, 20 + 10*noise(i*0.1));
    if(xPos==13){
    }
    {

  // Set the points, the title and the axis labels 
  plot.setPoints(points);
  plot.getYAxis().setAxisLabelText("y(?)");
  plot.getXAxis().setAxisLabelText("x (?)");
    }
  }
}


void draw() {

  // Draw the first plot
  //Disegna la prima trama 
  plot.beginDraw();
  plot.drawBox();
  plot.drawXAxis();
  plot.drawYAxis();
  plot.drawTitle();
 //plot1.drawPoints();//pallinorosso sul valore
  plot.drawGridLines(GPlot.BOTH);
  plot.drawLines();
  plot.endDraw();
}
{

  switch (state) {

  case normal:
    drawForStateNormal() ;
    break; 

  case save:
    // wait for Save Dialog 
    waitForSaveDialog();
    break; 

  case load:
    // wait for Load Dialog 
    waitForLoadDialog();
    break;

  default:
    //Error 
    println("Fail");
    exit();
    break; 
    //
  }//switch
}//func

void drawForStateNormal() {

  background(245);
  {
    strokeWeight(2);   
    stroke(#FF0B03);
    fill(0);
    rect(width-380, height-490, 360, 90, 20);// retangolo diff. press.
    fill(255);
    textSize(28); 
    text("Diff.Press.", width-270, height-405);     //diff.press
    textSize(40);
    text(( myKnob2.getValue()- myKnob3.getValue()), width-270, height-445);     //diff.press
  }
  {
    fill(0);
    strokeWeight(2);   
    stroke(#FF0B03);

    rect(width-380, height-390, 360, 190, 20);// retangolo press
    rect(width-380, height-195, 360, 190, 20);// rettangolo massa Temp
  }
  textSize(14);
  showData1();
  showData2();

  // title 
  fill(255, 2, 2);
  text("My little Graph program\n\nUse buttons on the right and below;\n"    //testo e posizione testo
    +"use Backspace OR delete key to delete last data point of each list.", 
    width-223, 10, 100, 422);

  // help
  if (showHelpText1) {
    fill(255, 2, 2);
    text("Use 1 and 2 to set the active table which is marked by the horizontal line on top.\n\n"
      +"New, Load and Save are referring to the active table.\n\nHit x to hide / show this text.", 
      420, 10, 100, 422);

  }

  // buttons
  showButtons();
  //
} //draw

// functions to show buttons funzione per mostrare i bottoni

void showButtons() {
  //
  strokeWeight(2);   
  stroke(0);
  textSize(15);
  fill(0);
  if ( overSave() ) {
    fill(#FF0303);
  }

  rect(width-50, height-740, 40, 20, 5);// modificato posizione bottone "salve"
  fill(255); 
  text("Save", 
    width-50+2, height-740+9+6);
  // ---
  fill(0);
  if ( overLoad() ) {
    fill(#49C3FA);
  }

  rect(width-50, height-710, 40, 20, 5);// modificato posizione" load"
  fill(255); 
  text("Load", 
    width-50+2, height-710+9+6);

  // ---
  fill(0);
  if ( overNew() ) {
    fill(#1FFF03);
  }

  rect(width-50, height-680, 40, 20, 5);// modificato posizione "new"
  fill(255); 
  text("New", 
    width-50+4, height-680+9+6);
}

// functions to register if mouse is over buttons funzione da registrare se il mouse è sui pulsanti

boolean overSave() {            // modificato
  return mouseX > width-50 && 
    mouseY > height-740  && 
    mouseY < height-740+25 ;
}

boolean overLoad() {                 //modificato
  return mouseX > width-50 && 
    mouseY > height-710  && 
    mouseY < height-710+25 ;
}

boolean overNew() {                         //modificato
  return mouseX > width -50 && 
    mouseY > height-680  && 
    mouseY < height-680+25 ;
}

// Inputs 

void keyPressed() {

  if (state!=normal)
    return;

  //  
  if (  keyCode == BACKSPACE ) {          //da controllare non funziona
    //
    if (points1.size()>0)
      points1.remove(points1.size()-1);
  } 
  // ----
  if ( keyCode == DELETE ) {
    //
    if (points2.size()>0)
      points2.remove(points2.size()-1);
  } 

  // ------

  else {
    if ( key != CODED ) {
      //
      switch(key) {

      case '1':
        activeArrayListIsLeft = true; 
        break;

      case '2':
        activeArrayListIsLeft = false; 
        break;

      case 'x':
        showHelpText1 = !showHelpText1; 
        break;
      }//switch
      //
    }//if
  }//else
}// func 

void mousePressed() {

  if (state!=normal)
    return;

  // for the buttons 
  if ( overSave() ) {
    initSave();
  }
  //---
  else if ( overLoad() ) {
    initLoad();
  }
  //---
  else if ( overNew() ) {
    //
    if ( activeArrayListIsLeft ) {
      points1.clear();            //cancellare punti con new
      //  not necessary:
      for (int i = 0; i < 13; i++) { 
        // points1.add(new PVector(i, 20 + 10*noise(i*0.1)));
      }//for
    } else {
      points2.clear();            //cancellare punti con new
      //  not necessary:
      for (int i = 0; i < 13; i++) { 
        // points2.add(new PVector(i, 20 + 10*noise(i*0.1)));
      }//for
    }
    //
  }
  //---
  else {
    // points.add(new PVector(points.size(), mouseY/10));
    if ( activeArrayListIsLeft ) {
      points1.add(new PVector(points1.size(), myKnob1.getValue()));
    } else {
      points2.add(new PVector(points2.size(), myKnob1.getValue()));
    }
  }
}//func

// -------------------------------------------------
// Save and load 

void initSave() {
  // init save process 
  // reset
  savePath="";
  // make date time stamp (the expression nf(n,2) means leading zero: 2 becomes 02)
 2 diventa 02)
  String dateTimeStamp = year() 
    + nf(month(), 2) 
    + nf(day(), 2) 
    + "-"
    + nf(hour(), 2)
    + nf(minute(), 2)
    + nf(second(), 2);
  File fileDescription = new File( sketchPath()
    + "//"
    + pathFolder 
    + "//"
    + dateTimeStamp
    + fileExtension);
  // open the dialog  
  selectOutput("Select a file to write to", "fileSelectedSave", fileDescription);
  // set state to wait
  state=save;

   GPoint lastPoint = plot.getPointsRef().getLastPoint();

  if (lastPoint == null) {

       plot.addPoint(xPos, +myKnob1.getValue(), "(" + str(xPos) + " , " + str(myKnob1.getValue()) + ")");

  } 
  else if (!lastPoint.isValid() || sq(lastPoint.getX() - xPos) + sq(lastPoint.getY() + myKnob1.getValue()) > 2500) {
    //plot1.addPoint(xPos, -val, "(" + (xPos) + " , " + (-val) + ")");


  }

  // Reset the points if the user pressed the space bar
  if (keyPressed && key == ' ') {
    plot.setPoints(new GPointsArray());
  }
}

void initLoad() {
  // init load process 
  // reset
  loadPath="";
  File fileDescription = new File( sketchPath()+"//"+pathFolder+"//"+"*" + fileExtension );
  // open the dialog
  selectInput("Select a file to load", "fileSelectedLoad", fileDescription);
  // set state to wait

  state=load;
}

void fileSelectedSave(File selection) {
  // the 'callback' function
  if (selection == null) {
    // println("Window was closed or the user hit cancel.");

    state=normal;    // go back
  } else {
    // println("User selected " + selection.getAbsolutePath());
    savePath=selection.getAbsolutePath();
  }
}

void fileSelectedLoad(File selection) {
  // the 'callback' function
  if (selection == null) {
    // println("Window was closed or the user hit cancel.");

    // go back 
    state=normal;
  } else {
    // println("User selected " + selection.getAbsolutePath());
    loadPath=selection.getAbsolutePath();
  }
}

void waitForSaveDialog() { 
  if (!savePath.equals("")) {
    // waiting is over
    saveIt();
    // go back 
    state=normal;
  }
}

void waitForLoadDialog() { 
  if (!loadPath.equals("")) {
    // waiting is over
    loadIt();
    // go back 
    state=normal;
  }
}

void saveIt() {
  // save

  // make array (to save it)

  String[] strs; 

  if (activeArrayListIsLeft) {
    strs = new String[points1.size()];
    int i=0;
    for (PVector pv : points1) {
      strs[i]=str(pv.x)+","+str(pv.y);
      i++;
    }//for
  }// 
  else {
    strs = new String[points2.size()];
    int i=0;
    for (PVector pv : points2) {
      strs[i]=str(pv.x)+","+str(pv.y);
      i++;
    }//for
  }//else 

  // check if file extension (fileExtension, e.g. .txt) is there 
  int len = savePath.length(); 
  if (len<4 || !savePath.substring( len-4 ).equals(fileExtension)) {
    // file Extension is not present, we have to add it
    savePath += fileExtension; // add the file Extension
  } 

  // save 
  println("Saved: " + savePath);
  saveStrings( savePath, strs );
}//func

void loadIt() {
  // load
  if (activeArrayListIsLeft) {
    points1.clear();
  } else
  {
    points2.clear();
  }
  String[] strs = loadStrings( loadPath );
  for (String s : strs) {
    String[] thisLine=split(s, ",");

    if (activeArrayListIsLeft) {
      points1.add(new PVector(float(thisLine[0]), float(thisLine[1])));
    } else
    {
      points2.add(new PVector(float(thisLine[0]), float(thisLine[1])));
    }//else 
    //
  }//for
}

void showData1() {
  //
  // show data LEFT 
  PVector prev = new PVector(-1, -1); 
  int y=50; 

  if (activeArrayListIsLeft) {
    stroke(255, 2, 2); // RED
    line (10, 10, 198, 10);
  }

  for (PVector pv : points1) {

    fill(255, 2, 2); // RED 

    // show data
    text(pv.x, 30, y); 
    text(pv.y, 110, y);

    fill(0, 2, 2); 
    stroke(255, 2, 2); // RED 
    if (prev.x!=-1) {
      line(10 + pv.x*30, pv.y*10, 
        prev.x, prev.y);
    }
    noStroke();
    ellipse (10 + pv.x*30, pv.y*10, 4, 4);
    prev = new PVector(10 + pv.x*30, pv.y*10); 

    y+=20; //next line
  }//for

  // middle line 
  stroke(255, 2, 2); // RED 
  line( 100, 30, 100, height);

  // double middle lines!!!   ???
  stroke(0); // BLACK 
  int x1=200;
  line( x1-2, 30, x1-2, height);
  line( x1+2, 30, x1+2, height);
  //
 }

  void showData2() {
  //
  // show data RIGHT 

  if (!activeArrayListIsLeft) {
    // activeArrayListIsLeft is FALSE, right side is active

   // activeArrayListIsLeft è FALSE, il lato destro è attivo
    stroke(2, 255, 2); // GREEN
    line (200, 10, 
      350, 10);
  }

  PVector prev = new PVector(-1, -1); 
  int y=50; 
  for (PVector pv : points2) {

    fill(0, 255, 2); // GREEN 

    // show data
    text(pv.x, 210, y); 
    text(pv.y, 290, y);

    fill(0, 2, 2); 
    stroke(0, 255, 2); // GREEN 
    if (prev.x!=-1) {
      line(10 + pv.x*30, pv.y*10, 
        prev.x, prev.y);
    }
    noStroke();
    ellipse (10 + pv.x*30, pv.y*10, 4, 4);
    prev = new PVector(10 + pv.x*30, pv.y*10); 

    y+=20; //next line
  }//for

  // middle line 
  stroke(0, 255, 2); // GREEN 
  line( 288, 30, 288, height);
  //
 }


 void serialEvent(Serial p) { 
  inString = p.readString(); 
  char primo=inString.charAt(0);  // primo carattere
  String cifra=inString.substring(1);  // da secondo carattere in poi
  float val=parseFloat(cifra);          // valore da 0-255 o 0-1023, non sò cosa 
  print("val=");    
  println(val);
  switch(primo) { 
    case ('A'): 
    myKnob1.setValue(val);
    break;
    case ('B'): 
    myKnob2.setValue(val);
    break;
    case ('C'): 
    myKnob3.setValue(val);
    break;
    case ('D'): 
    myKnob3.setValue(val);
    break;
  }

}

Chrisir

ermina is very advanced with this library

see

https://forum.processing.org/two/discussion/26003/how-can-i-numerate-x-axis-in-a-graph#latest

and her other discussions...

brugola

thank you .... check and study ....

brugola

advice: Is it better to use the map () function to construct and draw lines in a graph?

Chrisir

not enough context

try it

brugola

Sorry but I can not understand, if you want the line that is played (576 of the sketch) can you play in another position on the screen and change the scale?

Chrisir

Yes you can.

Do you want to use the library grafica?

Then see the link to erminas discussion please.

Of course you need two objects GPlot and set the position and size (setDim()!!!) separately

Then you need to for loop over points and copy them into GPlot

You can use map() here but GPlot is doing a lot of adjustments for you I think

Chrisir

brugola

You could even without using the grafica library? I would like the simple sketch and in a second time use the grafica library....

Chrisir

yes, can also do that without grafica library

Chrisir

For example these lines

stroke(255, 2, 2); // RED 
if (prev.x!=-1) {
  line(10 + pv.x*30, pv.y*10, 
    prev.x, prev.y);
}
noStroke();

y values are already scaled with * 10

you can use map() as well:

float yvalue = map( pv.y, 0, 40, 0, height);

and then use yvalue in line(10 + pv.x*30, yvalue, .......);

and also where prev.x and prev.y are set

Use in map the values that are needed. 0..40 is the range of the incoming data, 0 to height is the resulting range. When you receive values between 0 and 20 replace 40 with 20.

Chrisir

here

very small graphs

import processing.serial.*; 
import controlP5.*;   
import grafica.*;

Serial myPort;    // The serial port: 
ControlP5 controlP5;   // controlP5 object
Knob myKnob1, myKnob2, myKnob3, myKnob4;

ArrayList<PVector> points1 = new ArrayList(); // left one 
ArrayList<PVector> points2 = new ArrayList(); // right one

boolean activeArrayListIsLeft = true; 

boolean showHelpText1 = true; 

String inString;  // Input string from serial port: 
int lf = 10;      // ASCII linefeed 
float deg, val;

final String pathFolder="";//CARTELLA DI PERCORSO
final String fileExtension = ".txt";//estensione file
// unique numbers for constants: 
final int normal = 0;
final int save   = 1;
final int load   = 2;
///current state (must be one of them) 
/// stato attuale (deve essere uno di loro)
int state=normal;

// Paths 
String savePath=""; 
String loadPath=""; 
void setup() {
  size(1350, 750);

  // not necessary
  for (int i = 0; i < 3; i++) { 
    points1.add(new PVector(i, 20 + 10*noise(i*0.1)));
  }//for

  // not necessary 
  for (int i = 0; i < 13; i++) { 
    points2.add(new PVector(i, 20 + 10*noise(i*0.1)));
  }//for

  //ControlP5
  PFont  f= createFont ("Georgia", 25);
  {
    controlP5 = new ControlP5(this);   //ControlP5

    myKnob1 = controlP5.addKnob(" Massa ARIA")
      //.setRange(0,1024)
      .setRange(0, 5)
      .setValue(0)
      .setPosition(width-370, height-185)//posizione 605
      .setTickMarkLength(10)
      .setColorForeground(color(#FF0004))//colore cursore
      .setColorBackground(color(255))//colore sfondo
      .setColorValueLabel(color(0))//colore numeri//label etichetta
      .setColorActive(color(#6AFA05))
      .setDragDirection(Knob.VERTICAL)
      //  . setColorCaptionLabel(0) //colore scritta(capition)
      .lock()
      .setSize(150, 150)//dimensioni
      // .setScrollSensitivity(120)
      . setDecimalPrecision(2) //numero dopo la virgola
      ;
    myKnob1 .getCaptionLabel()
      . setFont(f);
    myKnob1.getValueLabel()
      .setFont(f)
      ;
    ;

    myKnob2 = controlP5.addKnob("P. Cil")
      .setRange(0, 500)
      .setValue(0)
      .setPosition(width-370, height-380)
      .setColorForeground(color(#FF0004))//colore cursore
      .setColorBackground(color(255))//colore sfondo
      .setColorValueLabel(color(0))//colore numeri//label etichetta
      .setColorActive(color(#6AFA05))
      .setDragDirection(Knob.VERTICAL)
      // . setColorCaptionLabel(0) //colore scritta(capition)
      .lock()
      .setSize(150, 150)//dimensioni
      // .setScrollSensitivity(120)
      .  setDecimalPrecision(2) //numero dopo la virgola
      .setTickMarkLength(10) 
      ;
    myKnob2 .getCaptionLabel()
      . setFont(f);
    myKnob2.getValueLabel()
      .setFont(f)
      ;

    myKnob3 = controlP5.addKnob("P. Atm ")
      //.setRange(0,1023)
      .setRange(0, 500)
      .setValue(1)
      .setPosition(width-180, height-380)
      .setColorForeground(color(#FF0004))//colore cursore
      .setColorBackground(color(255))//colore sfondo
      .setColorValueLabel(color(0))//colore numeri//label etichetta
      .setColorActive(color(#6AFA05))
      .setDragDirection(Knob.VERTICAL)
      //   . setColorCaptionLabel(0) //colore scritta(capition)
      .lock()
      .setSize(150, 150)//dimensioni
      .setDecimalPrecision(2) //numero dopo la virgola
      .setTickMarkLength(10)
      ;
    myKnob3 .getCaptionLabel()
      . setFont(f);
    myKnob3.getValueLabel()
      .setFont(f)
      ;

    myKnob4 = controlP5.addKnob("temp")
      //.setRange(0,1023)
      .setRange(0, 500)
      .setValue(1)
      .setPosition(width-180, height-185)
      .setColorForeground(color(#FF0004))//colore cursore
      .setColorBackground(color(255))//colore sfondo
      .setColorValueLabel(color(0))//colore numeri//label etichetta
      .setColorActive(color(#6AFA05))
      .setDragDirection(Knob.VERTICAL)
      //   . setColorCaptionLabel(0) //colore scritta(capition)
      .lock()
      .setSize(150, 150)//dimensioni
      .setDecimalPrecision(2) //numero dopo la virgola
      .setTickMarkLength(10)
      ;
    myKnob4 .getCaptionLabel()
      . setFont(f);
    myKnob4.getValueLabel()
      .setFont(f)
      ;
  }
}
//  myPort = new Serial(this, "com3", 9600);  // ?????
//  myPort.bufferUntil(lf);
// }

void draw() {

  switch (state) {

  case normal:
    drawForStateNormal() ;
    break; 

  case save:
    // wait for Save Dialog 
    waitForSaveDialog();
    break; 

  case load:
    // wait for Load Dialog 
    waitForLoadDialog();
    break;

  default:
    //Error 
    println("Fail");
    exit();
    break; 
    //
  }//switch
}//func

// ------------------------------------------------

void drawForStateNormal() {

  background(245);
  {
    strokeWeight(2);   
    stroke(#FF0B03);
    fill(0);
    rect(width-380, height-490, 360, 90, 20);// retangolo diff. press.
    fill(255);
    textSize(28); 
    text("Diff.Press.", width-270, height-405);     //diff.press
    textSize(40);
    text(( myKnob2.getValue()- myKnob3.getValue()), width-270, height-445);     //diff.press
  }
  {
    fill(0);
    strokeWeight(2);   
    stroke(#FF0B03);

    rect(width-380, height-390, 360, 190, 20);// retangolo press
    rect(width-380, height-195, 360, 190, 20);// rettangolo massa Temp
  }
  textSize(14);
  showData1();
  showData2();

  // title 
  fill(255, 2, 2);
  text("My little Graph program\n\nUse buttons on the right and below;\n"    //testo e posizione testo
    +"use Backspace OR delete key to delete last data point of each list.", 
    width-223, 10, 100, 422);

  // help
  if (showHelpText1) {
    fill(255, 2, 2);
    text("Use 1 and 2 to set the active table which is marked by the horizontal line on top.\n\n"
      +"New, Load and Save are referring to the active table.\n\nHit x to hide / show this text.", 
      420, 10, 100, 422);
  }

  // ----------------------
  // buttons
  showButtons();
  //
} //draw

// --------------------------------------------------
// functions to show buttons funzione per mostrare i bottoni

void showButtons() {
  //
  strokeWeight(2);   
  stroke(0);
  textSize(15);
  fill(0);
  if ( overSave() ) {
    fill(#FF0303);
  }

  rect(width-50, height-740, 40, 20, 5);// modificato posizione bottone "salve"
  fill(255); 
  text("Save", 
    width-50+2, height-740+9+6);
  // ---
  fill(0);
  if ( overLoad() ) {
    fill(#49C3FA);
  }

  rect(width-50, height-710, 40, 20, 5);// modificato posizione" load"
  fill(255); 
  text("Load", 
    width-50+2, height-710+9+6);

  // ---
  fill(0);
  if ( overNew() ) {
    fill(#1FFF03);
  }

  rect(width-50, height-680, 40, 20, 5);// modificato posizione "new"
  fill(255); 
  text("New", 
    width-50+4, height-680+9+6);
}

//----------------------------------------------------------------------------
// functions to register if mouse is over buttons funzione da registrare se il mouse è sui pulsanti

boolean overSave() {            // modificato
  return mouseX > width-50 && 
    mouseY > height-740  && 
    mouseY < height-740+25 ;
}

boolean overLoad() {                 //modificato
  return mouseX > width-50 && 
    mouseY > height-710  && 
    mouseY < height-710+25 ;
}

boolean overNew() {                         //modificato
  return mouseX > width -50 && 
    mouseY > height-680  && 
    mouseY < height-680+25 ;
}

// ---------------------------------------------------------------------------
// Inputs 

void keyPressed() {

  if (state!=normal)
    return;

  //  
  if (  keyCode == BACKSPACE ) {
    //
    if (points1.size()>0)
      points1.remove(points1.size()-1);
  } 
  // ----
  if ( keyCode == DELETE ) {
    //
    if (points2.size()>0)
      points2.remove(points2.size()-1);
  } 

  // ------

  else {
    if ( key != CODED ) {
      //
      switch(key) {

      case '1':
        activeArrayListIsLeft = true; 
        break;

      case '2':
        activeArrayListIsLeft = false; 
        break;

      case 'x':
        showHelpText1 = !showHelpText1; 
        break;
      }//switch
      //
    }//if
  }//else
}// func 

void mousePressed() {

  if (state!=normal)
    return;

  // for the buttons 
  if ( overSave() ) {
    initSave();
  }
  //---
  else if ( overLoad() ) {
    initLoad();
  }
  //---
  else if ( overNew() ) {
    //
    if ( activeArrayListIsLeft ) {
      points1.clear();            //cancellare punti con new
      //  not necessary:
      for (int i = 0; i < 13; i++) { 
        // points1.add(new PVector(i, 20 + 10*noise(i*0.1)));
      }//for
    } else {
      points2.clear();            //cancellare punti con new
      //  not necessary:
      for (int i = 0; i < 13; i++) { 
        // points2.add(new PVector(i, 20 + 10*noise(i*0.1)));
      }//for
    }
    //
  }
  //---
  else {
    // points.add(new PVector(points.size(), mouseY/10));
    if ( activeArrayListIsLeft ) {
      // points1.add(new PVector(points1.size(), myKnob1.getValue()));
      points1.add(new PVector(points1.size(), mouseY));
    } else {

      //points2.add(new PVector(points2.size(), myKnob1.getValue()));
      points2.add(new PVector(points2.size(), mouseY));
    }
  }
}//func

// -------------------------------------------------
// Save and load 

void initSave() {
  // init save process 
  // reset
  savePath="";
  // make date time stamp (the expression nf(n,2) means leading zero: 2 becomes 02)
  String dateTimeStamp = year() 
    + nf(month(), 2) 
    + nf(day(), 2) 
    + "-"
    + nf(hour(), 2)
    + nf(minute(), 2)
    + nf(second(), 2);
  // prepare fileDescription which occurs in the dialogue
  // prepara la descrizione del file che avviene nel dialogo
  File fileDescription = new File( sketchPath()
    + "//"
    + pathFolder 
    + "//"
    + dateTimeStamp
    + fileExtension);
  // open the dialog  
  selectOutput("Select a file to write to", "fileSelectedSave", fileDescription);
  // set state to wait
  state=save;
}

void initLoad() {
  // init load process 
  // reset
  loadPath="";
  // prepare fileDescription which occurs in the dialogue
  File fileDescription = new File( sketchPath()+"//"+pathFolder+"//"+"*" + fileExtension );
  // open the dialog
  selectInput("Select a file to load", "fileSelectedLoad", fileDescription);
  // set state to wait
  state=load;
}

void fileSelectedSave(File selection) {
  // the 'callback' function
  if (selection == null) {
    // println("Window was closed or the user hit cancel.");


    // println ("La finestra è stata chiusa o l'utente ha premuto annulla.");
    // torna indietro

    state=normal;    // go back
  } else {
    // println("User selected " + selection.getAbsolutePath());
    savePath=selection.getAbsolutePath();
  }
}

void fileSelectedLoad(File selection) {
  // the 'callback' function
  if (selection == null) {
    // println("Window was closed or the user hit cancel.");

    // go back 
    state=normal;
  } else {
    // println("User selected " + selection.getAbsolutePath());
    loadPath=selection.getAbsolutePath();
  }
}

void waitForSaveDialog() { 
  if (!savePath.equals("")) {
    // waiting is over
    saveIt();
    // go back 
    state=normal;
  }
}

void waitForLoadDialog() { 
  if (!loadPath.equals("")) {
    // waiting is over
    loadIt();
    // go back 
    state=normal;
  }
}

void saveIt() {
  // save

  // make array (to save it)

  String[] strs; 

  if (activeArrayListIsLeft) {
    strs = new String[points1.size()];
    int i=0;
    for (PVector pv : points1) {
      strs[i]=str(pv.x)+","+str(pv.y);
      i++;
    }//for
  }// 
  else {
    strs = new String[points2.size()];
    int i=0;
    for (PVector pv : points2) {
      strs[i]=str(pv.x)+","+str(pv.y);
      i++;
    }//for
  }//else 

  // check if file extension (fileExtension, e.g. .txt) is there 
  int len = savePath.length(); 
  if (len<4 || !savePath.substring( len-4 ).equals(fileExtension)) {
    // file Extension is not present, we have to add it
    savePath += fileExtension; // add the file Extension
  } 

  // save 
  println("Saved: " + savePath);
  saveStrings( savePath, strs );
}//func

void loadIt() {
  // load
  if (activeArrayListIsLeft) {
    points1.clear();
  } else 
  {
    points2.clear();
  }
  String[] strs = loadStrings( loadPath );
  for (String s : strs) {
    String[] thisLine=split(s, ",");

    if (activeArrayListIsLeft) {
      points1.add(new PVector(float(thisLine[0]), float(thisLine[1])));
    } else 
    {
      points2.add(new PVector(float(thisLine[0]), float(thisLine[1])));
    }//else 
    //
  }//for
}

// -------------------------------------------------

void showData1() {
  //
  // show data LEFT 
  PVector prev = new PVector(-1, -1); 
  int y=50; 

  if (activeArrayListIsLeft) {
    stroke(255, 2, 2); // RED
    line (10, 10, 198, 10);
  }

  for (PVector pv : points1) {

    fill(255, 2, 2); // RED 

    // show data
    text(pv.x, 30, y); 
    text(pv.y, 110, y);

    fill(0, 2, 2); 
    stroke(255, 2, 2); // RED 
    float yvalue = map( pv.y, 0, height, 300, 355);
    if (prev.x!=-1) {
      line(10 + pv.x*3, yvalue, 
        prev.x, prev.y);
    }
    noStroke();
    // ellipse (10 + pv.x*3, yvalue, 4, 4);
    prev = new PVector(10 + pv.x*3, yvalue); 

    y+=20; //next line
  }//for

  // middle line 
  stroke(255, 2, 2); // RED 
  line( 100, 30, 100, height);

  // double middle lines!!!   ???
  stroke(0); // BLACK 
  int x1=200;
  line( x1-2, 30, x1-2, height);
  line( x1+2, 30, x1+2, height);
  //
}

void showData2() {
  //
  // show data RIGHT 

  if (!activeArrayListIsLeft) {
    // activeArrayListIsLeft is FALSE, right side is active
    stroke(2, 255, 2); // GREEN
    line (200, 10, 
      350, 10);
  }

  PVector prev = new PVector(-1, -1); 
  int y=50; 
  for (PVector pv : points2) {

    fill(0, 255, 2); // GREEN 

    // show data
    text(pv.x, 210, y); 
    text(pv.y, 290, y);

    fill(0, 2, 2); 
    stroke(0, 255, 2); // GREEN 
    float yvalue = map( pv.y, 0, height, 300, 355);
    if (prev.x!=-1) {
      line(10 + pv.x*3, yvalue, 
        prev.x, prev.y);
    }
    noStroke();
    //   ellipse (10 + pv.x*3, yvalue, 4, 4);
    prev = new PVector(10 + pv.x*3, yvalue); 

    y+=20; //next line
  }//for

  // middle line 
  stroke(0, 255, 2); // GREEN 
  line( 288, 30, 288, height);
  //
}

// ---------------------------------------------------------------

void serialEvent(Serial p) { 
  inString = p.readString(); 
  char primo=inString.charAt(0);  // primo carattere
  String cifra=inString.substring(1);  // da secondo carattere in poi
  float val=parseFloat(cifra);          // valore da 0-255 o 0-1023, non sò cosa spedisce arduino


  print("val=");    
  println(val);

  //   inString = trim(inString);

  //    // converte in int e mappa all'altezza dello schermo: 


  switch(primo) { 
    case ('A'): 
    myKnob1.setValue(val);
    break;
    case ('B'): 
    myKnob2.setValue(val);
    break;
    case ('C'): 
    myKnob3.setValue(val);
    break;
    case ('D'): 
    myKnob3.setValue(val);
    break;
  }
}

brugola

Thanks for your patience in teaching me ... Now I'm implementing the graph, but now I was wondering if it was possible to create and manage at least 4 Array List ... I managed to show 3 to the monitor but not to manage them .. .

Chrisir

Sure possible, although always easier not to change such plans in the first place.

Change this line to int : boolean activeArrayListIsLeft = true;

So it tells which graph is active currently

brugola

italianoThank you, honestly, what I would like to achieve and 4 Array List with its title and graphic representation where the first can be edited in real time and the other three derived from saved files

Chrisir

Sure possible

Chrisir

Lots of changes here :

• 4 columns now

• you can click mouse above each column to activate it (or use 0,1,2,3)

• Backspace works on active list

• separate Help Screen with new button "Help"

• toggle display of Help box with "x"

• toggle display of entire table with data and texts with "m" or Escape

Chrisir ;-)

Chrisir

// https : // forum.processing.org/two/discussion/26719/save-and-load-array-list#latest

import processing.serial.*; 
import controlP5.*;   
import grafica.*;

Serial myPort;      // The serial port: 
ControlP5 controlP5;   // controlP5 object
Knob myKnob1, myKnob2, myKnob3, myKnob4;  // knobs 

// buttons along columns
int[] arrayOfXValuesFrom = { 13, 220, 390, 570 };  
int[] arrayOfXValuesTo = { 193, 340, 550, 710 };

ArrayList<PVector> points1 = new ArrayList(); // 1st 
ArrayList<PVector> points2 = new ArrayList(); // 2nd
ArrayList<PVector> points3 = new ArrayList(); // 3rd 
ArrayList<PVector> points4 = new ArrayList(); // 4th

int activeArrayListHasNumber = 0;   // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 

boolean showHelpText1 = false; 
boolean showText = true; 

String inString;  // Input string from serial port: 
int lf = 10;      // ASCII linefeed 
float deg, val;

final String pathFolder="";//CARTELLA DI PERCORSO
final String fileExtension = ".txt";//estensione file

// unique numbers for constants: 
final int normal = 0;
final int save   = 1;
final int load   = 2;
final int help   = 3;
/// current state (must be one of them) 
/// stato attuale (deve essere uno di loro)
int state=normal;

// Paths 
String savePath=""; 
String loadPath=""; 

// --------------------------------------------------------------------------

void setup() {
  size(1350, 750);

  // not necessary
  for (int i = 0; i < 3; i++) { 
    points1.add(new PVector(i, 20 + 10*noise(i*0.1)));
  }//for

  // not necessary 
  for (int i = 0; i < 13; i++) { 
    points2.add(new PVector(i, 30 + 10*noise(i*0.1)));
  }//for

  // not necessary 
  for (int i = 0; i < 5; i++) { 
    points3.add(new PVector(i, 40 + 10*noise(i*0.1)));
  }//for

  // not necessary 
  for (int i = 0; i < 7; i++) { 
    points4.add(new PVector(i, 50 + 10*noise(i*0.1)));
  }//for

  //ControlP5
  PFont  f= createFont ("Georgia", 25);
  {
    controlP5 = new ControlP5(this);   //ControlP5

    myKnob1 = controlP5.addKnob(" Massa ARIA")
      //.setRange(0,1024)
      .setRange(0, 5)
      .setValue(0)
      .setPosition(width-370, height-185)//posizione 605
      .setTickMarkLength(10)
      .setColorForeground(color(#FF0004))//colore cursore
      .setColorBackground(color(255))//colore sfondo
      .setColorValueLabel(color(0))//colore numeri//label etichetta
      .setColorActive(color(#6AFA05))
      .setDragDirection(Knob.VERTICAL)
      //  . setColorCaptionLabel(0) //colore scritta(capition)
      .lock()
      .setSize(150, 150)//dimensioni
      // .setScrollSensitivity(120)
      . setDecimalPrecision(2) //numero dopo la virgola
      ;
    myKnob1 .getCaptionLabel()
      . setFont(f);
    myKnob1.getValueLabel()
      .setFont(f)
      ;
    ;

    myKnob2 = controlP5.addKnob("P. Cil")
      .setRange(0, 500)
      .setValue(0)
      .setPosition(width-370, height-380)
      .setColorForeground(color(#FF0004))//colore cursore
      .setColorBackground(color(255))//colore sfondo
      .setColorValueLabel(color(0))//colore numeri//label etichetta
      .setColorActive(color(#6AFA05))
      .setDragDirection(Knob.VERTICAL)
      // . setColorCaptionLabel(0) //colore scritta(capition)
      .lock()
      .setSize(150, 150)//dimensioni
      // .setScrollSensitivity(120)
      .  setDecimalPrecision(2) //numero dopo la virgola
      .setTickMarkLength(10) 
      ;
    myKnob2 .getCaptionLabel()
      . setFont(f);
    myKnob2.getValueLabel()
      .setFont(f)
      ;

    myKnob3 = controlP5.addKnob("P. Atm ")
      //.setRange(0,1023)
      .setRange(0, 500)
      .setValue(1)
      .setPosition(width-180, height-380)
      .setColorForeground(color(#FF0004))//colore cursore
      .setColorBackground(color(255))//colore sfondo
      .setColorValueLabel(color(0))//colore numeri//label etichetta
      .setColorActive(color(#6AFA05))
      .setDragDirection(Knob.VERTICAL)
      //   . setColorCaptionLabel(0) //colore scritta(capition)
      .lock()
      .setSize(150, 150)//dimensioni
      .setDecimalPrecision(2) //numero dopo la virgola
      .setTickMarkLength(10)
      ;
    myKnob3 .getCaptionLabel()
      . setFont(f);
    myKnob3.getValueLabel()
      .setFont(f)
      ;

    myKnob4 = controlP5.addKnob("temp")
      //.setRange(0,1023)
      .setRange(0, 500)
      .setValue(1)
      .setPosition(width-180, height-185)
      .setColorForeground(color(#FF0004))//colore cursore
      .setColorBackground(color(255))//colore sfondo
      .setColorValueLabel(color(0))//colore numeri//label etichetta
      .setColorActive(color(#6AFA05))
      .setDragDirection(Knob.VERTICAL)
      //   . setColorCaptionLabel(0) //colore scritta(capition)
      .lock()
      .setSize(150, 150)//dimensioni
      .setDecimalPrecision(2) //numero dopo la virgola
      .setTickMarkLength(10)
      ;
    myKnob4 .getCaptionLabel()
      . setFont(f);
    myKnob4.getValueLabel()
      .setFont(f)
      ;
  }
}
//  myPort = new Serial(this, "com3", 9600);  // ?????
//  myPort.bufferUntil(lf);
// }

void draw() {

  switch (state) {

  case normal:
    drawForStateNormal() ;
    break; 

  case save:
    // wait for Save Dialog 
    waitForSaveDialog();
    break; 

  case load:
    // wait for Load Dialog 
    waitForLoadDialog();
    break;

  case help:
    // help
    drawForStateHelp() ;
    break; 

  default:
    //Error 
    println("Fail 192; unknown state: "
      +state);
    exit();
    break; 
    //
  } //switch
  //
}//func

// ------------------------------------------------

void drawForStateNormal() {

  background(245);
  {
    strokeWeight(2);   
    stroke(#FF0B03);
    fill(0);
    rect(width-380, height-490, 360, 90, 20);// retangolo diff. press.
    fill(255);
    textSize(28); 
    text("Diff.Press.", width-270, height-405);     //diff.press
    textSize(40);
    text(( myKnob2.getValue()- myKnob3.getValue()), width-270, height-445);     //diff.press
  }
  {
    fill(0);
    strokeWeight(2);   
    stroke(#FF0B03);

    rect(width-380, height-390, 360, 190, 20);// retangolo press
    rect(width-380, height-195, 360, 190, 20);// rettangolo massa Temp
  }
  textSize(14);
  showData1();
  showData2();
  showData3();
  showData4();

  // title 
  fill(255, 2, 2);
  textAlign(CENTER);
  text("My little Graph program", 
    width-223, 19, 100, 422);
  //reset 
  textAlign(LEFT);

  //// help
  if (showHelpText1) {
    float widthOfBox = 210; 
    fill(240, 544, 2); // yellow 
    stroke(0);         // black 
    rect(420, 27, widthOfBox, 322);
    fill(255, 2, 2);
    text("Use mouse above columns (or 0..3) to set the active table which is marked by the horizontal line on top.\n\n"
      +"New, Load and Save are referring to the active table (and Backspace).\nm to hide / show text data.\n\nHit x to hide / show this text.", 
      425, 30, widthOfBox-10, 522);
  }

  // ----------------------
  // buttons
  showButtons();

  // gray lines above columns 
  for (int i=0; i < arrayOfXValuesFrom.length; i++) {
    if (activeArrayListHasNumber!=i) {
      stroke(111); //
      strokeWeight(2.8); 
      line (arrayOfXValuesFrom [i], 10, 
        arrayOfXValuesTo[i], 10);
      strokeWeight(0.8); 
      line (arrayOfXValuesFrom [i]+10, 14, 
        arrayOfXValuesTo[i]-10, 14);
      line (arrayOfXValuesFrom [i]+10, 10-4, 
        arrayOfXValuesTo[i]-10, 10-4);
    }
  }//for 

  // reset
  strokeWeight(1.0); 
  //
} //draw

void drawForStateHelp() {

  // Help

  background(245);
  myKnob1.setVisible(false);
  myKnob2.setVisible(false);
  myKnob3.setVisible(false);
  myKnob4.setVisible(false); 
  fill(255, 2, 2);
  text("My little Graph program\n\nUse buttons on the right and below;\n"    //testo e posizione testo
    +"use Backspace to delete last data point of each list.\n\n" 
    +"Use 1 and 2 to set the active table which is marked by the horizontal line on top.\n"
    +"New, Load and Save are referring to the active table (and also Backspace).\n\n"
    +"You can click now above each column to activate it.\n"
    +"You can press m to hide/show data text and x to show / hide quick help."
    +"\n\nHit any key to return to main program.", 
    113, 122, width-200, 422);
}

// --------------------------------------------------
// functions to show buttons funzione per mostrare i bottoni

void showButtons() {
  //
  strokeWeight(2);   
  stroke(0);
  textSize(15);

  fill(0);
  if ( overSave() ) {
    fill(#FF0303);
  }

  rect(width-50, height-740, 40, 20, 5);// modificato posizione bottone "salve"
  fill(255); 
  text("Save", 
    width-50+2, height-740+9+6);

  // ---

  fill(0);
  if ( overLoad() ) {
    fill(#49C3FA);
  }

  rect(width-50, height-710, 40, 20, 5);// modificato posizione" load"
  fill(255); 
  text("Load", 
    width-50+2, height-710+9+6);

  // ---

  fill(0);
  if ( overNew() ) {
    fill(#1FFF03);
  }

  rect(width-50, height-680, 40, 20, 5);// modificato posizione "new"
  fill(255); 
  text("New", 
    width-50+4, height-680+9+6);

  // ---

  fill(0);
  if ( overHelp() ) {
    fill(#1AAF03);
  }
  rect(width-50, height-650, 40, 20, 5);// modificato posizione "help"
  fill(255); 
  text("Help", 
    width-50+4, height-650+9+6);
}

//----------------------------------------------------------------------------
// functions to register if mouse is over buttons funzione da registrare se il mouse è sui pulsanti

boolean overSave() {            // modificato
  return mouseX > width-50 && 
    mouseY > height-740  && 
    mouseY < height-740+25 ;
}

boolean overLoad() {                 //modificato
  return mouseX > width-50 && 
    mouseY > height-710  && 
    mouseY < height-710+25 ;
}

boolean overNew() {                         //modificato
  return mouseX > width -50 && 
    mouseY > height-680  && 
    mouseY < height-680+25 ;
}

boolean overHelp() {                         //modificato
  return mouseX > width -50 && 
    mouseY > height-650  && 
    mouseY < height-650+25 ;
}

// ---------------------------------------------------------------------------
// Inputs 

void keyPressed() {

  if (state==help) {
    goBackToMainState();
    return;
  }

  if (state!=normal)
    return;

  //  
  if (  keyCode == BACKSPACE ) {
    //
    backspaceOnActiveList();
    //
  } 
  // ----
  else if ( keyCode == DELETE ) {
    //
    // ignore 
    //
  } else if  ( keyCode == ESC ) {
    //
    // If yellow help box is ON  
    if (showHelpText1) {
      showHelpText1 = false; // yellow help box off
    } else {
      // else toggle
      showText = !showText; // data text / tables
    }//else 
    // kill Esc so we stay in the program 
    key=0;
    //
  } 

  // ------

  else {
    if ( key != CODED ) {
      //
      switch(key) {

      case '0':
        activeArrayListHasNumber = 0; 
        break;

      case '1':
        activeArrayListHasNumber = 1; 
        break;

      case '2':
        activeArrayListHasNumber = 2; 
        break;

      case '3':
        activeArrayListHasNumber = 3; 
        break;

      case 'x':
        showHelpText1 = !showHelpText1; // yellow help box 
        break;

      case 'm':
        showText = !showText; // data text / tables 
        break;
        //
      }//switch
      //
    }//if
  }//else
}// func 

void mousePressed() {

  if (state==help) {
    goBackToMainState();
    return;
  }

  if (state!=normal)
    return;

  // for the buttons 
  if ( overSave() ) {
    initSave();
  }
  //---
  else if ( overLoad() ) {
    initLoad();
  } else if ( overHelp() ) {
    state=help;
  }
  //---
  else if ( overNew() ) {
    //
    if ( activeArrayListHasNumber==0 ) {
      points1.clear();            //cancellare punti con new
    } else if ( activeArrayListHasNumber==1 ) {
      points2.clear();            //cancellare punti con new
    } else if ( activeArrayListHasNumber==2 ) {
      points3.clear();            //cancellare punti con new
    } else if ( activeArrayListHasNumber==3 ) {
      points4.clear();            //cancellare punti con new
    }// else if
    //
  }
  //---

  boolean done = false; 

  if (mouseY<25) {
    for (int i=0; i < arrayOfXValuesFrom.length; i++) {
      if (mouseX>arrayOfXValuesFrom[i] && 
        mouseX<arrayOfXValuesTo[i]) { 
        //
        activeArrayListHasNumber=i;
        done = true; 
        break;
      }//if
    }//for
  }//if

  if (!done) {
    // points.add(new PVector(points.size(), mouseY/10));
    if ( activeArrayListHasNumber == 0 ) {
      // points1.add(new PVector(points1.size(), myKnob1.getValue()));
      points1.add(new PVector(points1.size(), mouseY));
    } else if ( activeArrayListHasNumber == 1 ) {
      //points2.add(new PVector(points2.size(), myKnob1.getValue()));
      points2.add(new PVector(points2.size(), mouseY));
    } else if ( activeArrayListHasNumber == 2 ) {
      //points2.add(new PVector(points2.size(), myKnob1.getValue()));
      points3.add(new PVector(points3.size(), mouseY));
    } else if ( activeArrayListHasNumber == 3 ) {
      //points2.add(new PVector(points2.size(), myKnob1.getValue()));
      points4.add(new PVector(points4.size(), mouseY));
    }
  }
}//func

Chrisir

// -------------------------------------------------
// Save and load 

void initSave() {
  // init save process 
  // reset
  savePath=""; 
  // make date time stamp (the expression nf(n,2) means leading zero: 2 becomes 02)
  String dateTimeStamp = year() 
    + nf(month(), 2) 
    + nf(day(), 2) 
    + "-"
    + nf(hour(), 2)
    + nf(minute(), 2)
    + nf(second(), 2); 
  // prepare fileDescription which occurs in the dialogue
  // prepara la descrizione del file che avviene nel dialogo
  File fileDescription = new File( sketchPath()
    + "//"
    + pathFolder 
    + "//"
    + dateTimeStamp
    + fileExtension); 
  // open the dialog  
  selectOutput("Select a file to write to", "fileSelectedSave", fileDescription); 
  // set state to wait
  state=save;
}

void initLoad() {
  // init load process 
  // reset
  loadPath=""; 
  // prepare fileDescription which occurs in the dialogue
  File fileDescription = new File( sketchPath()+"//"+pathFolder+"//"+"*" + fileExtension ); 
  // open the dialog
  selectInput("Select a file to load", "fileSelectedLoad", fileDescription); 
  // set state to wait
  state=load;
}

void fileSelectedSave(File selection) {
  // the 'callback' function
  if (selection == null) {
    // println("Window was closed or the user hit cancel.");


    // println ("La finestra è stata chiusa o l'utente ha premuto annulla.");
    // torna indietro

    state=normal; // go back
  } else {
    // println("User selected " + selection.getAbsolutePath());
    savePath=selection.getAbsolutePath();
  }
}

void fileSelectedLoad(File selection) {
  // the 'callback' function
  if (selection == null) {
    // println("Window was closed or the user hit cancel.");

    // go back 
    state=normal;
  } else {
    // println("User selected " + selection.getAbsolutePath());
    loadPath=selection.getAbsolutePath();
  }
}

void waitForSaveDialog() { 
  if (!savePath.equals("")) {
    // waiting is over
    saveIt(); 
    // go back 
    state=normal;
  }
}

void waitForLoadDialog() { 
  if (!loadPath.equals("")) {
    // waiting is over
    loadIt(); 
    // go back 
    state=normal;
  }
}

void saveIt() {
  // save

  // make array (to save it)

  String[] strs; 
  strs = new String[0]; 

  if (activeArrayListHasNumber==0) {
    strs = new String[points1.size()]; 
    int i=0; 
    for (PVector pv : points1) {
      strs[i]=str(pv.x)+","+str(pv.y); 
      i++;
    }//for
  }// 
  else if (activeArrayListHasNumber==1) {
    strs = new String[points2.size()]; 
    int i=0; 
    for (PVector pv : points2) {
      strs[i]=str(pv.x)+","+str(pv.y); 
      i++;
    }//for
  }//else
  else if (activeArrayListHasNumber==2) {
    strs = new String[points3.size()]; 
    int i=0; 
    for (PVector pv : points3) {
      strs[i]=str(pv.x)+","+str(pv.y); 
      i++;
    }//for
  }//else
  else if (activeArrayListHasNumber==3) {
    strs = new String[points4.size()]; 
    int i=0; 
    for (PVector pv : points4) {
      strs[i]=str(pv.x)+","+str(pv.y); 
      i++;
    }//for
  }//else

  // check if file extension (fileExtension, e.g. .txt) is there 
  int len = savePath.length(); 
  if (len<4 || !savePath.substring( len-4 ).equals(fileExtension)) {
    // file Extension is not present, we have to add it
    savePath += fileExtension; // add the file Extension
  } 

  // save 
  println("Saved: " + savePath); 
  saveStrings( savePath, strs );
}//func

void loadIt() {
  // load
  if (activeArrayListHasNumber==0) {
    points1.clear();
  } else if (activeArrayListHasNumber==1)
  {
    points2.clear();
  } else if (activeArrayListHasNumber==2)
  {
    points3.clear();
  } else if (activeArrayListHasNumber==3)
  {
    points4.clear();
  }

  String[] strs = loadStrings( loadPath ); 
  for (String s : strs) {
    String[] thisLine=split(s, ","); 

    if (activeArrayListHasNumber==0) {
      points1.add(new PVector(float(thisLine[0]), float(thisLine[1])));
    } else if (activeArrayListHasNumber==1)
    {
      points2.add(new PVector(float(thisLine[0]), float(thisLine[1])));
    }//else
    else if (activeArrayListHasNumber==2)
    {
      points3.add(new PVector(float(thisLine[0]), float(thisLine[1])));
    }//else
    else if (activeArrayListHasNumber==3)
    {
      points4.add(new PVector(float(thisLine[0]), float(thisLine[1])));
    }//else
    //
  }//for
}

// -------------------------------------------------

void showData1() {
  //
  // show data 1

  PVector prev = new PVector(-1, -1); 
  int y=50; 

  if (activeArrayListHasNumber==0) {
    stroke(255, 2, 2); // RED
    line (10, 10, 198, 10);
  }

  for (PVector pv : points1) {

    if (showText) {
      fill(255, 2, 2); // RED 
      // show data
      text(pv.x, 30, y); 
      text(pv.y, 110, y);
    }

    fill(0, 2, 2); 
    stroke(255, 2, 2); // RED 
    float yvalue = map( pv.y, 0, height, 300, 355); 
    if (prev.x!=-1) {
      line(10 + pv.x*3, yvalue, 
        prev.x, prev.y);
    }
    noStroke(); 
    // ellipse (10 + pv.x*3, yvalue, 4, 4);
    prev = new PVector(10 + pv.x*3, yvalue); 


    y+=20; //next line
  }//for

  if (showText) {
    // middle line 
    stroke(255, 2, 2); // RED 
    line( 100, 30, 100, height);

    // double middle lines!!!   
    stroke(0); // BLACK 
    int x1=200; 
    line( x1-2, 30, x1-2, height); 
    line( x1+2, 30, x1+2, height);
  }
  //
}

void showData2() {
  //
  // show data 2 

  if (activeArrayListHasNumber==1) {
    // activeArrayListHasNumber is FALSE, right side is active
    stroke(2, 255, 2); // GREEN
    line (200, 10, 
      350, 10);
  }

  PVector prev = new PVector(-1, -1); 
  int y=50; 
  for (PVector pv : points2) {

    if (showText) {
      fill(0, 255, 2); // GREEN 
      // show data
      text(pv.x, 210, y); 
      text(pv.y, 210+80, y);
    }

    fill(0, 2, 2); 
    stroke(0, 255, 2); // GREEN 
    float yvalue = map( pv.y, 0, height, 300, 355); 
    if (prev.x!=-1) {
      line(10 + pv.x*3, yvalue, 
        prev.x, prev.y);
    }
    noStroke(); 
    //   ellipse (10 + pv.x*3, yvalue, 4, 4);
    prev = new PVector(10 + pv.x*3, yvalue); 

    y+=20; //next line
  }//for

  if (showText) {
    // middle line 
    stroke(0, 255, 2); // GREEN 
    line( 288, 30, 288, height);

    // double middle lines!!!   
    stroke(0); // BLACK 
    int x1=210+80+80; 
    line( x1-2, 30, x1-2, height); 
    line( x1+2, 30, x1+2, height);
  }
  //
}

void showData3() {
  //
  // show data 3

  color col3 = color(0, 2, 255); // BLUE 

  if (activeArrayListHasNumber==2) {
    // activeArrayListHasNumber is FALSE, right side is active
    stroke(col3); // 
    line (400, 10, 
      550, 10);
  }

  PVector prev = new PVector(-1, -1); 
  int y=50; 
  for (PVector pv : points3) {

    fill(col3); // Blue 

    if (showText) {
      // show data
      text(pv.x, 210+180, y); 
      text(pv.y, 210+180+80, y);
    }

    fill(0, 2, 2); 
    stroke(col3); // blue 
    float yvalue = map( pv.y, 0, height, 300, 355); 
    if (prev.x!=-1) {
      line(10 + pv.x*3, yvalue, 
        prev.x, prev.y);
    }
    noStroke(); 
    //   ellipse (10 + pv.x*3, yvalue, 4, 4);
    prev = new PVector(10 + pv.x*3, yvalue); 

    y+=20; //next line
  }//for

  if (showText) {
    // middle line 
    stroke(col3); // blue 
    line( 467, 30, 467, height);

    // double middle lines!!!   
    stroke(0); // BLACK 
    int x1=210+180+80+80; 
    line( x1-2, 30, x1-2, height); 
    line( x1+2, 30, x1+2, height);
  }
  //
}

void showData4() {
  //
  // show data 4 

  color col4 = color(155, 255, 112); 

  if (activeArrayListHasNumber==3) {
    // activeArrayListHasNumber is FALSE, right side is active
    stroke(col4); // 
    line (570, 10, 
      710, 10);
  }

  PVector prev = new PVector(-1, -1); 
  int y=50; 
  for (PVector pv : points4) {

    fill(col4); //  

    if (showText) {
      // show data
      text(pv.x, 210+180+180, y); 
      text(pv.y, 210+180+180+80, y);
    }

    fill(0, 2, 2); 
    stroke(col4); //  
    float yvalue = map( pv.y, 0, height, 300, 355); 
    if (prev.x!=-1) {
      line(10 + pv.x*3, yvalue, 
        prev.x, prev.y);
    }
    noStroke(); 
    //   ellipse (10 + pv.x*3, yvalue, 4, 4);
    prev = new PVector(10 + pv.x*3, yvalue); 

    y+=20; //next line
  }//for

  if (showText) {
    // middle line 
    stroke(col4); //  
    line( 210+180+180+80-4, 30, 210+180+180+80-4, height);
  }
  //
}

// ---------------------------------------------------------------

void serialEvent(Serial p) { 
  inString = p.readString(); 
  char primo=inString.charAt(0); // primo carattere
  String cifra=inString.substring(1); // da secondo carattere in poi
  float val=parseFloat(cifra); // valore da 0-255 o 0-1023, non sò cosa spedisce arduino


  print("val="); 
  println(val); 

  //   inString = trim(inString);

  //    // converte in int e mappa all'altezza dello schermo: 


  switch(primo) { 
    case ('A') : 
    myKnob1.setValue(val); 
    break; 
    case ('B') : 
    myKnob2.setValue(val); 
    break; 
    case ('C') : 
    myKnob3.setValue(val); 
    break; 
    case ('D') : 
    myKnob3.setValue(val); 
    break;
  }
}

void goBackToMainState() {

  // from help screen back to main screen

  // buttons ON 
  myKnob1.setVisible(true); 
  myKnob2.setVisible(true); 
  myKnob3.setVisible(true); 
  myKnob4.setVisible(true); 

  //go back to main screen 
  state=normal;

  // kill Esc so we stay in the program 
  key=0;
}

void  backspaceOnActiveList() {

  // for the key BACKSPACE 

  switch (activeArrayListHasNumber) {

  case 0:
    if (points1.size()>0)
      points1.remove(points1.size()-1);
    break; 

  case 1:
    if (points2.size()>0)
      points2.remove(points2.size()-1);
    break;

  case 2:
    if (points3.size()>0)
      points3.remove(points3.size()-1);
    break;

  case 3:
    if (points4.size()>0)
      points4.remove(points4.size()-1);
    break;
  }//switch
  //
}//func 
//