// https://discourse.processing.org/t/port-serial-en-size/7568
// v01 2 cp5 button and 2 text()
// v02 instead text() 3 cp5 textarea ( in, out, console )
// http://www.sojamo.de/libraries/controlP5/examples/controllers/ControlP5textarea/ControlP5textarea.pde
// https://github.com/sojamo/controlp5/blob/master/examples/extra/ControlP5console/ControlP5console.pde


import controlP5.*;                         //import ControlP5 library
ControlP5 cp5;                              //create cp5 object
Textarea inTXT, outTXT, sysTXT;
Println console;

import processing.serial.*;
Serial port;
String portName="";
boolean serOn = false;//true;
int dbrate = 9600;

PFont font;
String outtxt="we send:";
String intxt="we got:";

void setup() { 
  size(800, 500);                           //window size, (width, height)
  font = createFont("calibre light bold", 20);
  setup_communication();
  setup_buttons();
  println("key [c] clear");                  // now shown at sysTXT area
}

void draw() {                                 //same as loop in arduino ide
  background(150, 200, 200);                  // background color of window (r, g, b) or (0 to 255)
  instream();
  fill(25, 115, 235);                         //text color (r, g, b)
  text("SERIAL PORT "+portName+" at "+dbrate, 100, 30);     //lets give title to our window
}

void setup_communication() {
  printArray(Serial.list());                //prints all available serial ports
   if (serOn) portName = Serial.list()[0];              // change the [1] acc the list you got printed
  println("try connect to "+portName);
  if (serOn) port = new Serial(this, portName, dbrate);
}

void setup_buttons() {
  //so when you press any button on the GUI, it sends particular char over serial port
  cp5 = new ControlP5(this);

  cp5.addButton("A")
    .setPosition(30, height-70)              //x and y coordinates of upper left corner of button
    .setSize(60, 60)                         //(width, height)
    .setFont(font);   

  cp5.addButton("B")
    .setPosition(130, height-70)             //x and y coordinates of upper left corner of button
    .setSize(60, 60)                         //(width, height)
    .setFont(font);

  int tposX=20, tposY=40, tw=width-40, th=100;
  
  outTXT = cp5.addTextarea("outtxt")
    .setPosition(tposX, tposY)
    .setSize(tw, th)
    .setFont(createFont("arial", 12))
    .setLineHeight(14)
    .setColor(color(60))                      // text color darker
    .setColorBackground(color(255, 100))
    .setColorForeground(color(255, 100));
  ;
  outTXT.setText(outtxt);

  tposY += th+10;                              // move down
  th = 200;  
  inTXT = cp5.addTextarea("intxt")
    .setPosition(tposX, tposY)
    .setSize(tw, th)
    .setFont(createFont("arial", 12))
    .setLineHeight(14)
    .setColor(color(60))
    .setColorBackground(color(200, 200, 0, 100))
    .setColorForeground(color(255, 100));
  ;
  inTXT.setText(intxt);

  tposY += th+10;                              // move down
  th = 60; 
  sysTXT = cp5.addTextarea("systxt")
    .setPosition(tposX, tposY)
    .setSize(tw, th)
    .setFont(createFont("arial", 12))
    .setLineHeight(14)
    .setColor(color(60))
    .setColorBackground(color(200, 0, 0, 100))
    .setColorForeground(color(255, 100));
  ;
  console = cp5.addConsole(sysTXT);
}

void A() {
  if (serOn) port.write('A');
  println("send: A");
  outtxt += "\nA";
  outTXT.setText(outtxt);
} 
void B() {
  if (serOn) port.write('B');
  println("send: B"); 
  outtxt += "\nB";
  outTXT.setText(outtxt);
}

void instream() {
  if ( serOn && port.available() > 0) {          // If data is available,
    int inByte  = port.read();                   // read it and add it to intxt ( as lines )
    if ( inByte == 10 ) intxt += "\n";
    else intxt += str(inByte);
    inTXT.setText(intxt);
  }
}

void keyPressed() {
  if ( key == 'c' ) {                            // clear
    intxt = ""; 
    inTXT.setText(intxt);
    outtxt = "";
    outTXT.setText(outtxt);
    println("cleared in/out textareas");
  }
}