save and load Array list

edited March 2018 in Arduino

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 }//

«1

Answers

  • 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
    
  • sorry ..... I'm a beginner in this splendid world of processing ...

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

  • 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
    
  • what do you mean by this:

    x-axis value to each mouse pressed

  • 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 ....

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

  • edited March 2018 Answer ✓

    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);
      //
    }
    
    // --------------------------------------------------
    
  • fantastic ..... I have not only figured out how to operate the save buttons with name and charge ....

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

  • ??

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

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

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

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

  • 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 ....)

  • edited March 2018 Answer ✓

    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?

  • 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 ....

  • 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) ....

  • edited March 2018 Answer ✓

    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

  • 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 ...)

  • 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;
     }
     }
    
  • edited March 2018

    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

  • 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 .....

  • edited March 2018

    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...

  • 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;
      }
    }
    
  • 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)

  • 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.

  • 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();
    }
    
  • and your question is....?

  • 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?

  • yes; in function serialEvent you read a value

    add that to the active arraylist on mousepressed

    see lines 505 to 510

  • So store value in serialEvent (while loop??)

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

  • Solved..?

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

  • 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;
      }
    

    }

  • 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...

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

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

  • not enough context

    try it

  • 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?

  • edited March 2018

    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

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

  • yes, can also do that without grafica library

  • edited March 2018

    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.

  • 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;
      }
    }
    
  • 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 .. .

  • edited March 2018

    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

  • 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

  • Sure possible

  • 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 ;-)

  • // 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
    
  • Answer ✓
    // -------------------------------------------------
    // 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 
    //
    
Sign In or Register to comment.