Port Serial en "Size"

Hello colleagues, I got stuck in this little program and I can not see a thread of the forum that opens the way. With this code it sent the characters “ACSii” to “scripcommunicator” but I want to send the same data from the terminal and see them on the green display. I have tried it with all the examples of Serial Port of the Processing foundation.

https://processing.org/reference/libraries/serial/index.html

I can not find the right one. How do I print data on screen and in my green display that I tell the program ?.

Thank you .
Note. Example taken from Mr. Mamaskar

import controlP5.*; //import ControlP5 library
import processing.serial.*;

Serial port;

ControlP5 cp5; //create cp5 object
PFont font;

void setup(){ 

  size(360, 500);    //window size, (width, height)
  
  printArray(Serial.list());   //prints all available serial ports
  
  port = new Serial(this, "COM5", 9600); 
  
  //lets add button to empty window
  
  cp5 = new ControlP5(this);
font = createFont("calibre light bold", 20);

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

  //cp5.addButton("columns_1_rows_2")     //position of button
  cp5.addButton("B")
    .setPosition(30, 240)  //x and y coordinates of upper left corner of button
    .setSize(60, 60)      //(width, height)
     .setFont(font);

}

void draw(){  //same as loop in arduino ide

  background(250,250,250); // background color of window (r, g, b) or (0 to 255)
  
  //lets give title to our window
  fill(25,115,235);               //text color (r, g, b)
  
  text("SERIAL PORT", 100, 140);textSize(20);  // ("text", x coordinate, y coordinate)
  
  //Display green
  fill(102,255,0);
  rect(15,15, 330,100);
  fill(255);
}

//so when you press any button on the GUI, it sends particular char over serial port

void A(){
  port.write('A');
}
void B(){
  port.write('B');
}
1 Like

not sure i got the question,
lets say you want do a serial monitor, and send
on button press some text to serial port
but also
you want ECHO
in the form that you want show in the window the text you send.
( and not wait that arduino send the same text back as AKN )

here i disabled all the port things see

//test

// https://discourse.processing.org/t/port-serial-en-size/7568
//
import controlP5.*;                        //import ControlP5 library
ControlP5 cp5;                              //create cp5 object
import processing.serial.*;
Serial port;
PFont font;
String outtxt="we send:";

void setup() { 
  size(360, 500);                           //window size, (width, height)
  font = createFont("calibre light bold", 20);
  printArray(Serial.list());                //prints all available serial ports
//test  port = new Serial(this, "COM5", 9600); 
  //                                         lets add button to empty window
  cp5 = new ControlP5(this);
  //cp5.addButton("columns_1_rows_1")        //position  of button
  cp5.addButton("A")
    .setPosition(30, 170)                    //x and y coordinates of upper left corner of button
    .setSize(60, 60)                         //(width, height)
    .setFont(font);   
  //cp5.addButton("columns_1_rows_2")        //position of button
  cp5.addButton("B")
    .setPosition(30, 240)                    //x and y coordinates of upper left corner of button
    .setSize(60, 60)                         //(width, height)
    .setFont(font);
}

void draw() {                                 //same as loop in arduino ide
  background(250, 250, 250);                  // background color of window (r, g, b) or (0 to 255)

  fill(25, 115, 235);                         //text color (r, g, b)
  text("SERIAL PORT", 100, 140);              //lets give title to our window
  //Display green
  textSize(15);                               // ("text", x coordinate, y coordinate)
  fill(102, 255, 0);
  rect(15, 15, 330, 100);
  fill(200,0,0);
  text(outtxt,20,30);
}

//so when you press any button on the GUI, it sends particular char over serial port
void A() {
//test  port.write('A');
  println("send A");                                 //_______add kll
  outtxt += "\nA";
} 
void B() {
//test  port.write('B');
  println("send B");                                 //_______add kll
  outtxt += "\nB";
}



if i am OFF tell us with other words what you need.

1 Like

Hello KLL. Thanks for your time.
What I want to do is send the acsII commands from the scripcommunicator terminal to the Sketch.
Print the data on the green screen.
a greeting

hm,

are on the same computer how should that work? ( ? LOOPBACK adapter )

  • anyhow you want after button press
    • send a “A” to comX and
    • wait for incomming response
    • and print that response in the “interminal” screen

in other words:
you want build a terminal program by processing?
so you should start with the catching of the instream ( based on bytes ? lines ? )
untested:

// https://discourse.processing.org/t/port-serial-en-size/7568
//
import controlP5.*;                         //import ControlP5 library
ControlP5 cp5;                              //create cp5 object
import processing.serial.*;
Serial port;
PFont font;
String outtxt="we send:";                   //_______add kll
String intxt="we got:";

void setup() { 
  size(360, 500);                           //window size, (width, height)
  font = createFont("calibre light bold", 20);
  setup_communication();
  setup_buttons();
}

void draw() {                                 //same as loop in arduino ide
  background(150, 200, 200);                  // background color of window (r, g, b) or (0 to 255)
  instream();
  draw_monitor();
}

void setup_communication() {
  printArray(Serial.list());                //prints all available serial ports
  port = new Serial(this, "COM5", 9600);
}

void draw_monitor() {
  fill(25, 115, 235);                         //text color (r, g, b)
  text("SERIAL PORT "+port, 100, 30);         //lets give title to our window
  //Display "SEND" green
  textSize(15);                               // ("text", x coordinate, y coordinate)
  fill(102, 255, 0);
  rect(15, 55, 330, 100);
  fill(200, 0, 0);
  text(outtxt, 20, 70);                       //_______add kll
  //Display "GOT" yellow
  textSize(15);                               // ("text", x coordinate, y coordinate)
  fill(200, 200, 0);
  rect(15, 175, 330, 100);
  fill(200, 0, 200);
  text(intxt, 20, 190);                        //_______add kll
}

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

void A() {
  port.write('A');
  println("send A");                                 //_______add kll
  outtxt += "\nA";
} 
void B() {
  port.write('B');
  println("send B");                                 //_______add kll
  outtxt += "\nB";
}

void instream() {
   if ( port.available() > 0) {          // If data is available,
      int inByte  = port.read();         // read it and store it in val
      intxt += inByte;                   // first lets see that, later convert..
  }
}

1 Like

241/5000

Hi KLL, this is what I want.
My question is
Can I receive data in acsII or only in decimal?
Can you clean the car every time you enter a new data, so that it does not protrude from the sending or receiving window?
Thanks and best regards.

1 Like

intxt += inByte;

  • to clear
intxt = inByte;        // will only show one number
  • to string
intxt = str(inByte);  // will show a character
  • to append but understand CR or NL try
    if ( inByte == 10 ) intxt += "\n";
    else intxt += str(inByte);

if you want to learn electronic
esp also serial ( USB ) interface processing with a device
i recommend to buy https://www.arduino.cc/en/main/products
starting with a UNO, it should come with a (spec.) USB cable,
and for first steps just connect it to your windows PC USB 2 port,
no extra power needed.

install arduino IDE and you will feel “HOME”
as it looks like processing IDE
and start coding there until you got it sending data

where you can go back to processing and try with your code to catch that data
and make a good show out of it.

1 Like

Hi. Can someone tell me why I do not print ip5 console the data I enter through the serial port.
The console would have to see this data.
Thank you

import controlP5.*; //import ControlP5 library
import processing.serial.*;

Serial port;

ControlP5 cp5; //create cp5 object
Textarea myTextarea;

int c = 0;

Println console;
PFont font;

void setup(){ 

  size(700, 500);    //window size, (width, height)
  
  printArray(Serial.list());   //prints all available serial ports
  
  port = new Serial(this, "COM1", 9600); 
  
  //lets add button to empty window
  
  cp5 = new ControlP5(this);
font = createFont("calibre light bold", 20);
 
  
  //cp5.addButton("Board_1")     //"Board 1" is the name of button
  cp5.addButton("A")
    .setPosition(350, 50)  //x and y coordinates of upper left corner of button
    .setSize(120, 120)      //(width, height)
    .setFont(font)
  ;   

  //cp5.addButton("Board_2")     //"Board 2" is the name of button
  cp5.addButton("B")
    .setPosition(350, 200)  //x and y coordinates of upper left corner of button
    .setSize(120, 120)      //(width, height)
     .setFont(font);

 //cp5.addButton("Board_3")     //"Board 2" is the name of button
    //.setPosition(100, 350)  //x and y coordinates of upper left corner of button
   // .setSize(120, 120)      //(width, height)
    // .setFont(font);
    
     cp5 = new ControlP5(this);
  cp5.enableShortcuts();
  frameRate(50);
  myTextarea = cp5.addTextarea("txt")
                  .setPosition(100, 100)
                  .setSize(200, 200)
                  .setFont(createFont("", 10))
                  .setLineHeight(14)
                  .setColor(color(200))
                  .setColorBackground(color(0, 100))
                  .setColorForeground(color(255, 100));
  ;

  console = cp5.addConsole(myTextarea);//
}



void draw(){  //same as loop in arduino ide

  background(128); // background color of window (r, g, b) or (0 to 255)
   noStroke();
  
  //lets give title to our window
  fill(25,115,235);               //text color (r, g, b)
  
  text("SERIAL PORT", 110, 30);textSize(20);  // ("text", x coordinate, y coordinate)
}


//so when you press any button on the GUI, it sends particular char over serial port

void A(){
  port.write('a');
}
void B(){
  port.write('b');
}
//void Board_1(){
//port.write('1');
//}

//void Board_2(){
//port.write('2');
//}

//void Board_3(){
//port.write('3');
//}
1 Like

did you check on how to use CP5 Textarea

http://www.sojamo.de/libraries/controlP5/examples/controllers/ControlP5textarea/ControlP5textarea.pde

i not see any

myTextarea.setText("test");

try like

// 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 = true;//false;//true;

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

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, 100, 30);         //lets give title to our window
}

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

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(128))
    .setColorBackground(color(255, 100))
    .setColorForeground(color(255, 100));
  ;
  outTXT.setText(outtxt);

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

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

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

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

void keyPressed() {
  if ( key == 'c' ) { 
    intxt = ""; 
    inTXT.setText(intxt);
    outtxt = "";
    outTXT.setText(outtxt);
  }
}


1 Like

Thanks Kll, I made the console to write utf_8 characters and read acsII characters. I would like a button to clean the window.
Do you know if you can delete the written list every time you enter a new data?
I want to say that the console erase the old data when entering new ones.
Greetings and thank you.

import static java.nio.charset.StandardCharsets.*;
import processing.serial.*;

Serial port;
byte bloque_datos[];
static byte TOTAL_BYTES=32;


/**
 * ControlP5 Println
 *
 *
 * a console like textarea which captures the output from the System.out stream
 *
 * by Andreas Schlegel, 2012
 * www.sojamo.de/libraries/controlp5
 *
 */

import controlP5.*;

ControlP5 cp5;//create cp5 object
PFont font;

Textarea myTextarea;

int c = 0;

Println console;

void setup() {
  
  size(360, 500);
  cp5 = new ControlP5(this);
  cp5.enableShortcuts();
  frameRate(50);
  myTextarea = cp5.addTextarea("txt")
                  .setPosition(30, 10)
                  .setSize(300, 100)
                  .setFont(createFont("", 10))
                  .setLineHeight(14)
                  .setColor(color(255))
                  .setColorBackground(color(0, 100))
                  .setColorForeground(color(245, 100));
  

  console = cp5.addConsole(myTextarea);//
 frameRate(10);
  port=new Serial(this,"com5",9600);
  bloque_datos=new byte[TOTAL_BYTES];


//lets add button to empty window
  
  cp5 = new ControlP5(this);
font = createFont("calibre light bold", 20);
 
  
  //cp5.addButton("Board_1")     //"Board 1" is the name of button
  cp5.addButton("A")
    .setPosition(100, 250)  //x and y coordinates of upper left corner of button
    .setSize(60, 60)      //(width, height)
    .setFont(font)
  ;   

  //cp5.addButton("Board_2")     //"Board 2" is the name of button
  cp5.addButton("B")
    .setPosition(200, 250)  //x and y coordinates of upper left corner of button
    .setSize(60, 60)      //(width, height)
     .setFont(font);
}

  
void draw(){
background(128);
  noStroke();

  
{
  if(port.available()>0)
  {
    bloque_datos=port.readBytes(TOTAL_BYTES);
    if(bloque_datos!=null)
    {
      print(new String(bloque_datos,UTF_8));
    }
 }
 }
}
void A(){
  port.write('a');
}
void B(){
  port.write('b');
}
1 Like

-a- there is no need to go the way via console
( pls study my example code with the 3 windows
// you only need the inTXT one )

-b- and then you anyway write to

myTextarea.setText("test");

what is the full buffer, so

-c- is it up to you if you
overwrite or append the new string
esp use also “\n” newline in it.

-d- but if you insist your way
you can do a

myTextarea.setText(""); 

first / prior writing to console. ( untested )

-e- if you need to print
max one line // max 32 char
to canvas i not understand why you changed from text()
to CP5.Textarea() class with multi line / slider support …
unless just for learning.

Hi. I am starting and I would like to find the solution to this example.
The port entry is written to the console and I want the data to be in the window
How can you write in a window “size (300, 300);”
It is true that you can trap the console with Ip5 but I would like to see an example of the forum on how to do it without that control.
It’s possible.

Example of the web:

Thanks friends

import processing.serial.*;
import static java.nio.charset.StandardCharsets.*;
 
Serial serie;
byte bloque_datos[];
static byte TOTAL_BYTES=32;
 
void setup()
{
  frameRate(10);
  serie=new Serial(this,"com6",9600);
  bloque_datos=new byte[TOTAL_BYTES];
}
 
void draw()
{
  if(serie.available()>0)
  {
    bloque_datos=serie.readBytes(TOTAL_BYTES);
    if(bloque_datos!=null)
    {
      print(new String(bloque_datos,UTF_8));
    }
  }
}

i did show you with this example

how you read single bytes and make new lines

other way would be “block read”
but with " read bytes until ??"
so you see the incoming data after a [enter] is pressed…

is one of 3 possibly “until” examples.

Going forward. Testing lp5 controls of Sojamo. myTextarea.setText ("."); // pressed push button, we clean text area.
The question is if there is not a command to clean lines every time a new data comes in.
Thanks KLL.

import static java.nio.charset.StandardCharsets.*;
import processing.serial.*;

Serial port;
byte bloque_datos[];
static byte TOTAL_BYTES=32;


/**
 * ControlP5 Println
 *
 *
 * a console like textarea which captures the output from the System.out stream
 *
 * by Andreas Schlegel, 2012
 * www.sojamo.de/libraries/controlp5
 *
 */

import controlP5.*;

ControlP5 cp5;//create cp5 object
PFont font;

Textarea myTextarea;

int c = 0;

Println console;

void setup(){
  
  size(360, 500);
  cp5 = new ControlP5(this);
  cp5.enableShortcuts();
  frameRate(50);
  myTextarea = cp5.addTextarea("txt")
                  .setPosition(30, 10)
                  .setSize(300, 100)
                  .setFont(createFont("", 30))
                  .setLineHeight(14)
                  .setColor(color(0, 255))
                  .setColorBackground(color(5, 255,136))
                  .setColorForeground(color(5, 237, 242));
  

  console = cp5.addConsole(myTextarea);//
 frameRate(10);
  port=new Serial(this,"COM7",9600);
  bloque_datos=new byte[TOTAL_BYTES];


//lets add button to empty window
  cp5 = new ControlP5(this);
font = createFont("calibre light bold", 20);
 
  
  //cp5.addButton("columns_1_rows_1")     //position  of button
  cp5.addButton("A")
    .setPosition(30, 170)  //x and y coordinates of upper left corner of button
    .setSize(60, 60)      //(width, height)
    .setFont(font)
  ;   

  //cp5.addButton("columns_1_rows_2")     //position of button
  cp5.addButton("B")
    .setPosition(30, 240)  //x and y coordinates of upper left corner of button
    .setSize(60, 60)      //(width, height)
     .setFont(font);

 //cp5.addButton("columns_1rows_3")     //"position of button
    cp5.addButton("C")
    .setPosition(30,310)  //x and y coordinates of upper left corner of button
   .setSize(60, 60)      //(width, height)
    .setFont(font);
    
    //cp5.addButton("columns_1_rows_4")     //"position of button
    cp5.addButton("D")
    .setPosition(30, 380)  //x and y coordinates of upper left corner of button
   .setSize(60, 60)      //(width, height)
    .setFont(font);

  //cp5.addButton("columns_2_rows_1")     //"position of button
    cp5.addButton("E")
    .setPosition(110, 170)  //x and y coordinates of upper left corner of button
   .setSize(60, 60)      //(width, height)
    .setFont(font);
    
    //cp5.addButton("columns_2_rows_2")     //"position of button
    cp5.addButton("F")
    .setPosition(110, 240)  //x and y coordinates of upper left corner of button
   .setSize(60, 60)      //(width, height)
    .setFont(font);
    
    //cp5.addButton("columns_2_rows_3")     //"position of button
    cp5.addButton("G")
    .setPosition(110, 310)  //x and y coordinates of upper left corner of button
   .setSize(60, 60)      //(width, height)
    .setFont(font);

 //cp5.addButton("columns_2_rows_4")     //"position of button
    cp5.addButton("H")
    .setPosition(110, 380)  //x and y coordinates of upper left corner of button
   .setSize(60, 60)      //(width, height)
    .setFont(font);

 //cp5.addButton("columns_3_rows_1")     //"position of button
    cp5.addButton("I")
    .setPosition(190, 170)  //x and y coordinates of upper left corner of button
   .setSize(60, 60)      //(width, height)
    .setFont(font);

 //cp5.addButton("columns_3_rows_2")     //"position of button
    cp5.addButton("J")
    .setPosition(190, 240)  //x and y coordinates of upper left corner of button
   .setSize(60, 60)      //(width, height)
    .setFont(font);
    
//cp5.addButton("columns_3_rows_2")     //"position of button
    cp5.addButton("K")
    .setPosition(190, 310)  //x and y coordinates of upper left corner of button
   .setSize(60, 60)      //(width, height)
    .setFont(font);

   
//cp5.addButton("columns_3_rows_2")     //"position of button
    cp5.addButton("L")
    .setPosition(190, 380)  //x and y coordinates of upper left corner of button
   .setSize(60, 60)      //(width, height)
    .setFont(font);
    
    //cp5.addButton("columns_4_rows_1")     //"position of button
    cp5.addButton("M")
    .setPosition(270, 170)  //x and y coordinates of upper left corner of button
   .setSize(60, 60)      //(width, height)
    .setFont(font);
    
    //cp5.addButton("columns_4_rows_2")     //"position of button
    cp5.addButton("N")
    .setPosition(270, 240)  //x and y coordinates of upper left corner of button
   .setSize(60, 60)      //(width, height)
    .setFont(font);

//cp5.addButton("columns_4_rows_3")     //"position of button
    cp5.addButton("O")
    .setPosition(270, 310)  //x and y coordinates of upper left corner of button
   .setSize(60, 60)      //(width, height)
    .setFont(font);
    
  //cp5.addButton("columns_4_rows_4")     //"position of button
    cp5.addButton("P")
    .setPosition(270, 380)  //x and y coordinates of upper left corner of button
   .setSize(60, 60)      //(width, height)
    .setFont(font);  
    
     //cp5.addButton("columns_4_rows_4")     //"position of button
    cp5.addButton("c")
    .setPosition(10, 120)  //x and y coordinates of upper left corner of button
   .setSize(30, 30)      //(width, height)
    .setFont(font);  
    
    
    
}

  
void draw(){
background(128);
  noStroke();

 text("clean text area", 60, 140);textSize(16);  // ("text", x coordinate, y coordinate)
 
{
  if(port.available()>0)
  {
    bloque_datos=port.readBytes(TOTAL_BYTES);
    if(bloque_datos!=null)
    {
      print(new String(bloque_datos,UTF_8));
    }
 }
 }
}

void A(){
  port.write('A');
}
void B(){
  port.write('B');
}
void C(){
  port.write('C');
}

void D(){
  port.write('D');
}

void E(){
  port.write('E');
}

void F(){
  port.write('F');
}

void G(){
  port.write('G');
}

void H(){
  port.write('H');
}



void I(){
  port.write('I');
}

void J(){
  port.write('J');
}

void K(){
  port.write('K');
}

void L(){
  port.write('L');
}

void M(){
  port.write('M');
}  
void N(){
  port.write('N');
}  
  void O(){
  port.write('O');
 
}

void P(){
  port.write('P');
}

void c(){
  myTextarea.setText(".");  // pressed push button, we clean text area
}

  
void keyPressed() {
  if(key=='r') {
    myTextarea.setText(".");  // PC keyboard "C" key, pressed, clean text area
                      
}}

my idea is first to disable above!
and to replace

 print(new String(bloque_datos,UTF_8));

with

 myTextarea.setText(new String(bloque_datos,UTF_8)); 

so the old ( text area window ) content is overwritten by the last data block.

1 Like

Every time I like more processing.
I hope other people can use this code.
thanks Kll

// by carlesdolomiti and Kll of the processing foundation
// carles dolomiti@gmail.com
import static java.nio.charset.StandardCharsets.*;
import processing.serial.*;

Serial port;
byte bloque_datos[];
static byte TOTAL_BYTES=32;


/**
 * ControlP5 Println
 *
 *
 * a console like textarea which captures the output from the System.out stream
 *
 * by Andreas Schlegel, 2012
 * www.sojamo.de/libraries/controlp5
 *
 */

import controlP5.*;

ControlP5 cp5;//create cp5 object
PFont font;

Textarea myTextarea;

int c = 0;

Println console;

void setup(){
  
  size(360, 500);
  cp5 = new ControlP5(this);
  cp5.enableShortcuts();
  frameRate(50);
  myTextarea = cp5.addTextarea("txt")
                  .setPosition(30, 10)
                  .setSize(300, 100)
                  .setFont(createFont("", 30))
                  .setLineHeight(14)
                  .setColor(color(0, 255))
                  .setColorBackground(color(5, 255,136))
                  .setColorForeground(color(5, 237, 242));
  

  console = cp5.addConsole(myTextarea);//
 frameRate(10);
  port=new Serial(this,"COM7",9600);
  bloque_datos=new byte[TOTAL_BYTES];


//lets add button to empty window
  cp5 = new ControlP5(this);
font = createFont("calibre light bold", 20);
 
  
  //cp5.addButton("columns_1_rows_1")     //position  of button
  cp5.addButton("A")
    .setPosition(30, 170)  //x and y coordinates of upper left corner of button
    .setSize(60, 60)      //(width, height)
    .setFont(font)
  ;   

  //cp5.addButton("columns_1_rows_2")     //position of button
  cp5.addButton("B")
    .setPosition(30, 240)  //x and y coordinates of upper left corner of button
    .setSize(60, 60)      //(width, height)
     .setFont(font);

 //cp5.addButton("columns_1rows_3")     //"position of button
    cp5.addButton("C")
    .setPosition(30,310)  //x and y coordinates of upper left corner of button
   .setSize(60, 60)      //(width, height)
    .setFont(font);
    
    //cp5.addButton("columns_1_rows_4")     //"position of button
    cp5.addButton("D")
    .setPosition(30, 380)  //x and y coordinates of upper left corner of button
   .setSize(60, 60)      //(width, height)
    .setFont(font);

  //cp5.addButton("columns_2_rows_1")     //"position of button
    cp5.addButton("E")
    .setPosition(110, 170)  //x and y coordinates of upper left corner of button
   .setSize(60, 60)      //(width, height)
    .setFont(font);
    
    //cp5.addButton("columns_2_rows_2")     //"position of button
    cp5.addButton("F")
    .setPosition(110, 240)  //x and y coordinates of upper left corner of button
   .setSize(60, 60)      //(width, height)
    .setFont(font);
    
    //cp5.addButton("columns_2_rows_3")     //"position of button
    cp5.addButton("G")
    .setPosition(110, 310)  //x and y coordinates of upper left corner of button
   .setSize(60, 60)      //(width, height)
    .setFont(font);

 //cp5.addButton("columns_2_rows_4")     //"position of button
    cp5.addButton("H")
    .setPosition(110, 380)  //x and y coordinates of upper left corner of button
   .setSize(60, 60)      //(width, height)
    .setFont(font);

 //cp5.addButton("columns_3_rows_1")     //"position of button
    cp5.addButton("I")
    .setPosition(190, 170)  //x and y coordinates of upper left corner of button
   .setSize(60, 60)      //(width, height)
    .setFont(font);

 //cp5.addButton("columns_3_rows_2")     //"position of button
    cp5.addButton("J")
    .setPosition(190, 240)  //x and y coordinates of upper left corner of button
   .setSize(60, 60)      //(width, height)
    .setFont(font);
    
//cp5.addButton("columns_3_rows_2")     //"position of button
    cp5.addButton("K")
    .setPosition(190, 310)  //x and y coordinates of upper left corner of button
   .setSize(60, 60)      //(width, height)
    .setFont(font);

   
//cp5.addButton("columns_3_rows_2")     //"position of button
    cp5.addButton("L")
    .setPosition(190, 380)  //x and y coordinates of upper left corner of button
   .setSize(60, 60)      //(width, height)
    .setFont(font);
    
    //cp5.addButton("columns_4_rows_1")     //"position of button
    cp5.addButton("M")
    .setPosition(270, 170)  //x and y coordinates of upper left corner of button
   .setSize(60, 60)      //(width, height)
    .setFont(font);
    
    //cp5.addButton("columns_4_rows_2")     //"position of button
    cp5.addButton("N")
    .setPosition(270, 240)  //x and y coordinates of upper left corner of button
   .setSize(60, 60)      //(width, height)
    .setFont(font);

//cp5.addButton("columns_4_rows_3")     //"position of button
    cp5.addButton("O")
    .setPosition(270, 310)  //x and y coordinates of upper left corner of button
   .setSize(60, 60)      //(width, height)
    .setFont(font);
    
  //cp5.addButton("columns_4_rows_4")     //"position of button
    cp5.addButton("P")
    .setPosition(270, 380)  //x and y coordinates of upper left corner of button
   .setSize(60, 60)      //(width, height)
    .setFont(font);  
    
    
    
    
}

  
void draw(){
background(128);
  noStroke();

 text("CONSOLA SERIAL PORT", 80, 140);textSize(16);  // ("text", x coordinate, y coordinate)
 
{
  if(port.available()>0)
  {
    bloque_datos=port.readBytes(TOTAL_BYTES);
    if(bloque_datos!=null)
    {
      myTextarea.setText(new String(bloque_datos,UTF_8));
    }
 }
 }
}

void A(){
  port.write('A');
}
void B(){
  port.write('B');
}
void C(){
  port.write('C');
}

void D(){
  port.write('D');
}

void E(){
  port.write('E');
}

void F(){
  port.write('F');
}

void G(){
  port.write('G');
}

void H(){
  port.write('H');
}



void I(){
  port.write('I');
}

void J(){
  port.write('J');
}

void K(){
  port.write('K');
}

void L(){
  port.write('L');
}

void M(){
  port.write('M');
}  
void N(){
  port.write('N');
}  
  void O(){
  port.write('O');
 
}

void P(){
  port.write('P');
}


  

2 Likes

@Dolomiti – thank you for sharing your solution!