ControlP5 Button function seems to ignore Text command at the beginning

Processing Electronics (Arduino, etc.)
1

Hi guys, new to this forum and to Processing. Trying to learn but i can see it will be a steep curve, even if I can do some little arduino coding :frowning:

I am having a few problems with my code, and one of them is that it seems that the controlP5 button function seems to ignore the “text” code (text(“Restoring EEPROM”, 77, 200); ) at the beginning of the “Start” button’s function. It does print the text at the end of the function.
if I remove the last text but leave the delay in place, it will print the first text only after it did the complete for loop. This does not make any sense to me.
Here is the complete code I am trying.
Thank you in advance for your help.

import controlP5.*;
ControlP5 cp5;
//PFont font;
import processing.serial.*; //import the Serial library
Serial myPort;

String EepromData[];
String val;
boolean Restoring = false;

void setup() {
  size(250, 250); // Create Window
  DrawMainScreen();

  myPort = new Serial(this, Serial.list()[1], 115200);
  // notes = loadStrings("data/EEprom.txt");
  EepromData = loadStrings("data/notes.txt");

  val = "EEPROM_Nano";
  println(val);
}

void draw() {
}

void Start() {

  if (EepromData[0].equals(val) == true) { // Compare two Strings

    fill(255, 255, 255); // text color (r, g, b)
    text("Restoring EEPROM", 77, 200);

    for (int i = 1; i < EepromData.length; i++) {

      println(EepromData[i]);

      myPort.write(EepromData[i]);
      myPort.write('\n');
      delay(5); //this will be the tempo?
    }
  }
  else {
    println("EEprom Not Valid");
  }
  delay(1000);
  DrawMainScreen();
  text("Finished", 77, 200);
}

void DrawMainScreen() {
  background(0, 120, 255); // Background Color (r, g, b) or (0 to 255)

  fill(255, 255, 255); // text color (r, g, b)
  text("RESTORE EEPROM", 77, 30); // ("text", x coordinate, y coordinate)
  PFont font;
  font = createFont("arial", 20);

  // Add Button
  cp5 = new ControlP5(this);

  cp5.addButton("Start") // "Start" is the name of the Button
    .setPosition(85, 80) // x and y coordinates of upper left corner of Button
    .setSize(80, 80)     // (Width, Height)
    //.setFont(font);
    ;
}
2

Hi @jhsa,

Welcome to the forum! :wink:

The first thing I see in your code is that you don’t use the draw() function but you rather call DrawMainScreen() in the setup() function.

This is precisely what the draw() function is supposed to do: it’s called roughly 60 times per second and it’s usually the main drawing loop of your program where you call all your drawing functions.

In addition to that, you are never calling your Start() function so the text() function is never called.

More importantly you should put (or call) all the code that needs to be called only once at the beginning in the setup() function and all the drawing part in the draw() function.

3

Hi @josephh,
Thank you very much for your answer.
I used the DrawMainScreen() in the setup() function because I need to redraw the whole screen at times when I want to write text over another text. At least is something I would do on Arduino.

If the background items are being always drawn I cannot write text to it without being immediately cleared.

The Start() button is called with the button press. The for loop inside the “Start” function runs, and the text after the for loop is also displayed… Actually the first text is displayed together with the last text after the for loop finishes. And this is what I cannot understand. The first text should be printed before the for loop, but it is ignored and it is only printed after the for loop is finished. This doesn’t make sense to me as the code seems not to be doing what is being told.
Thanks again.

4

I have just noticed something. When I press the button, it will stay pressed until the “for” loop is finished. This is strange?

5

Hi @jhsa, I think I have read somewhere that all the graphical functions (rect/line/text/…) write to a buffer, and this buffer is displayed at the end of the draw execution. Does that explain what you are seeing?

I usually call the equivalent of your DrawMainScreen() from the draw function, but conditional on a boolean, called DoRedraw, set when required by something else.

1 Like
6

Hi @RichardDL, thanks for your help. Yes that could explain what I was seeing. I did solve the problem. Will post the code I have. Probably it has loads of mistakes as i am not familiar with Processing yet.

7

Ok guys, here is my current code. It is working more or less the way I wanted it too. I am sure you will see mistakes and improvements :slight_smile: This is an eeprom manager for a DIY Guitar effects switcher that myself and a friend develop for free so that poor musicians like us don’t have to spend hundreds of $ on overpriced commercial products. :slight_smile: And we also have fun doing this of course.

Thank you for your comments and help.

import controlP5.*;
ControlP5 cp5;
DropdownList d1;
DropdownList d2;
PFont font, font1, font2;
import processing.serial.*; //import the Serial library
Serial myPort;
PrintWriter output;

String EepromData[];
String val;
String End;
String portName;
String SaveData;
int b = 0;
int ItemNr = 22;
int StartTimer = 0;
int serialListIndex;
int EEpromSize_iL7 = 4096;
int EEpromSize_iL8 = 16384;
boolean Restoring = false;
boolean WriteFinished = false;
boolean InvalidEeprom = false;
boolean EditType = false;
boolean EditCom = false;
boolean DataCheck = false;
boolean SerialCheck = true;
boolean DumpActive = false;
boolean RestoreCheck = false;

void setup() {
  clear();
  size(250, 250); // Create Window
  cp5 = new ControlP5(this);
  font = createFont("Arial Bold", 20);
  font1 = createFont("Arial Bold", 10);
  font2 = createFont("Arial Bold", 13);

  // frameRate(60);

  End = "END";

  // Add Button
  cp5.addButton("Restore") // "Start" is the name of the Button
    .setPosition(86, 115) // x and y coordinates of upper left corner of Button
    .setSize(80, 20)     // (Width, Height)
    .setFont(font1)
    .setColorBackground(color(216, 216, 216))
    .setColorForeground(color(232, 232, 232))
    .setColorActive(color(186, 188, 188))
    .setColorLabel(color(0, 0, 0))
    ;

  cp5.addButton("Dump") // "Start" is the name of the Button
    .setPosition(86, 155) // x and y coordinates of upper left corner of Button
    .setSize(80, 20)     // (Width, Height)
    .setFont(font1)
    .setColorBackground(color(216, 216, 216))
    .setColorForeground(color(232, 232, 232))
    .setColorActive(color(186, 188, 188))
    .setColorLabel(color(0, 0, 0))
    ;

  d1 = cp5.addDropdownList("myList-d1")
    .setPosition(178, 76)
    .setSize(53, 16)
    .setBarHeight(16)
    .setHeight(120)
    .setItemHeight(16)

    .setFont(font1)
    .setColorBackground(color(216, 216, 216))
    .setColorForeground(color(232, 232, 232))
    .setColorActive(color(186, 188, 188))
    .setColorLabel(color(0, 0, 0))
    .setColorValueLabel(color(0, 0, 0))
    .setColorCaptionLabel(color(0, 0, 0))
    .setOpen(false);
  ;

  d1.getCaptionLabel().set("COM1"); //set PORT before anything is selected

  portName = Serial.list()[0]; //0 as default
  myPort = new Serial(this, portName, 115200);
  myPort.bufferUntil('\n');

  // create a DropdownList,
  d2 = cp5.addDropdownList("myList-d2")
    .setPosition(178, 50)
    .setSize(53, 16)
    .setOpen(false);

  ;

  customize(d2); // customize the first list

}

void customize(DropdownList d2) {
  // a convenience function to customize a DropdownList
  d2.setColorBackground(color(216, 216, 216));
  d2.setItemHeight(16);
  d2.setBarHeight(16);
  d2.setHeight(64);
  d2.setFont(font1);
  d2.setColorForeground(color(232, 232, 232));
  d2.setColorActive(color(186, 188, 188));
  d2.setColorLabel(color(0, 0, 0));
  d2.setColorValueLabel(color(0, 0, 0));
  d2.setColorCaptionLabel(color(0, 0, 0));
  d2.getCaptionLabel().set("- - - - - -");
}

void draw() {

  background(0, 120, 255); // Background Color (r, g, b) or (0 to 255)
  textFont(font);
  fill(255, 255, 255); // text color (r, g, b)
  text("MANAGE EEPROM", 34, 28); // ("text", x coordinate, y coordinate)

  textFont(font2);
  text("Select iLoopino Version", 18, 62); // ("text", x coordinate, y coordinate)

  text("Select Serial COM Port", 18, 88); // ("text", x coordinate, y coordinate)

  if (WriteFinished) {
    textFont(font);
    text("Finished", 83, 210);
    if (StartTimer + 5000 < millis()) {

      WriteFinished = false;
    }
  }

  if (InvalidEeprom) {
    textFont(font);
    text("Invalid EEprom Data", 28, 210);
    if (StartTimer + 2000 < millis()) {

      InvalidEeprom = false;
    }
  }

  if ((!SerialCheck) && (DumpActive) && (SaveData != null)) {
    textFont(font);
    text("Dumping EEprom", 40, 210);
  }


  if (d1.isMouseOver()) {
    EditCom = true;
    d1.clear(); //Delete all the items
    for (int i=0; i<Serial.list().length; i++) {
      d1.addItem(Serial.list()[i], i); //add the items in the list
    }
  } else {
    EditCom = false;
  }

  if (d2.isMouseOver()) {
    EditType = true;
    d2.clear(); //Delete all the items
    d2.addItem("iL 7.x", 0);
    d2.addItem("iL 8.x", 1);
    EditType = true;

  } else {
    EditType = false;
  }

  if (RestoreCheck) {

    if ((ItemNr < 2) && (!DumpActive)) {
      if ((EepromData[0].equals(val) == true) && (DataCheck)) { // Compare two Strings

        for (int i = 1; i < EepromData.length; i++) {

       //   println(EepromData[i]);

          myPort.write(EepromData[i]);
          myPort.write('\n');
          delay(2); //this will be the tempo?
        }
        WriteFinished();

      } else {


        StartTimer = millis();
        InvalidEeprom = true;
      }
      DataCheck = false;
      RestoreCheck = false;
    }
  }
}

void serialEvent(Serial myP) {
  if (DumpActive) {
    SaveData = myP.readString();

    SaveData = SaveData.trim();
    if ("END".equals(SaveData)) {
      SerialCheck = true;
    }

    if (!SerialCheck) {
      output.println(SaveData);
    }
 //   println(SaveData); //read until new input

    SaveData = "";


    if (SerialCheck) {

      output.flush(); // Write the remaining data
      output.close(); // Finish the file
      myPort.clear(); //delete the port

      SerialCheck = false;
      DumpActive = false;
      WriteFinished();
    }
  }
}

void controlEvent(ControlEvent theEvent) { //when something in the list is selected
  if (EditCom) {
    myPort.clear(); //delete the port
    myPort.stop(); //stop the port
    if (theEvent.isController()) {
      portName = Serial.list()[int(theEvent.getController().getValue())]; //port name is set to the selected port in the dropDownMeny
      myPort = new Serial(this, portName, 115200); //Create a new connection
      myPort.bufferUntil('\n');
      delay(200);
    }
  }
  if (EditType) {
    ItemNr = int(theEvent.getController().getValue());

    if (ItemNr == 0) {
      EepromData = loadStrings("data/EEprom_iL7.il7");
      val = "EEprom_iL7";
      if (EepromData.length == EEpromSize_iL7 + 1) {
        DataCheck = true;
      }
    } else if (ItemNr == 1) {
      EepromData = loadStrings("data/EEprom_iL8.il8");
      val = "EEPROM_iL8";
      if (EepromData.length == EEpromSize_iL8 + 1) {
        DataCheck = true;
      }
    }
  }
}

void Dump() {

  if (ItemNr == 0) {
    output = createWriter("EEprom_iL7.il7");
  } else if (ItemNr == 1) {
    output = createWriter("EEprom_iL8.il8");
  }
  DumpActive = true;
  SerialCheck = false;
}

void Restore() {
  textFont(font);
  text("Restoring EEprom", 36, 210);
  RestoreCheck = true;
 
}
void WriteFinished() {
  StartTimer = millis();
  WriteFinished = true;
}
1 Like