# Port Serial en "Size"

**URL:** <https://discourse.processing.org/t/port-serial-en-size/7568>\
**Category:** Electronics (Arduino, etc.)\
**Created:** [January 16, 2019, 7:21pm UTC](https://discourse.processing.org/t/port-serial-en-size/7568 "2019-01-16T19:21:46Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dolomiti](https://avatars.discourse-cdn.com/v4/letter/d/13edae/32.png) [@Dolomiti](https://discourse.processing.org/u/Dolomiti)\
**Post date:** [January 16, 2019, 7:21pm UTC](https://discourse.processing.org/t/port-serial-en-size/7568/1 "2019-01-16T19:21:46Z")

</div>

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](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

```auto
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');
}

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [January 17, 2019, 2:26am UTC](https://discourse.processing.org/t/port-serial-en-size/7568/2 "2019-01-17T02:26:50Z")

</div>

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

```auto
// 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";
}

```

 ![2019-01-17_09-25-31_snap](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/106b4f2fdfbcbe2a707cc44e9968236e952765fb.png)  
if i am OFF tell us with other words what you need.

---

<div class="post-metadata">

**Author:** ![Dolomiti](https://avatars.discourse-cdn.com/v4/letter/d/13edae/32.png) [@Dolomiti](https://discourse.processing.org/u/Dolomiti)\
**Post date:** [January 17, 2019, 1:01pm UTC](https://discourse.processing.org/t/port-serial-en-size/7568/3 "2019-01-17T13:01:18Z")

</div>

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

 ![PORT%20SERIAL](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/8bd0787fa6a871f59687da4ff1ef8f24086e99d5.png)

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [January 17, 2019, 1:31pm UTC](https://discourse.processing.org/t/port-serial-en-size/7568/4 "2019-01-17T13:31:11Z")

</div>

hm,

- if we talk about a serial communication we talk usually about 2 devices and a USB cable between them?

- if the processing sketch and the scriptcommunicator terminal program  
[https://sourceforge.net/projects/scriptcommunicator/](https://sourceforge.net/projects/scriptcommunicator/)

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:

```auto
// 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..
  }
}

```

---

<div class="post-metadata">

**Author:** ![Dolomiti](https://avatars.discourse-cdn.com/v4/letter/d/13edae/32.png) [@Dolomiti](https://discourse.processing.org/u/Dolomiti)\
**Post date:** [January 17, 2019, 7:24pm UTC](https://discourse.processing.org/t/port-serial-en-size/7568/5 "2019-01-17T19:24:31Z")

</div>

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.

 ![port_serial-1](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/7eb0117d48a5e38bc0e9ce3a635759368232a98b.png)

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [January 18, 2019, 12:53am UTC](https://discourse.processing.org/t/port-serial-en-size/7568/6 "2019-01-18T00:53:58Z")

</div>

`intxt += inByte;`

- to clear

```auto
intxt = inByte; // will only show one number

```

- to string

```auto
intxt = str(inByte); // will show a character

```

- to append but understand CR or NL try

```auto
    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](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.

---

<div class="post-metadata">

**Author:** ![Dolomiti](https://avatars.discourse-cdn.com/v4/letter/d/13edae/32.png) [@Dolomiti](https://discourse.processing.org/u/Dolomiti)\
**Post date:** [January 19, 2019, 10:26pm UTC](https://discourse.processing.org/t/port-serial-en-size/7568/7 "2019-01-19T22:26:06Z")

</div>

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

 ![Captura%20de%20pantalla%20(1)](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/0ca45ef5d120b5b55a7efed29d855673847dde96.jpeg)

```auto
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');
//}

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [January 20, 2019, 2:06am UTC](https://discourse.processing.org/t/port-serial-en-size/7568/8 "2019-01-20T02:06:48Z")

</div>

did you check on how to use CP5 Textarea

[http://www.sojamo.de/libraries/controlP5/examples/controllers/ControlP5textarea/ControlP5textarea.pde](http://www.sojamo.de/libraries/controlP5/examples/controllers/ControlP5textarea/ControlP5textarea.pde)

i not see any

```auto
myTextarea.setText("test");

```

try like

```auto
// 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);
  }
}

```

 ![2019-01-20_10-30-15_snap](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/0a46ebf21c5bf21b67f3a0f8a44e7cb60dbf8b41.png)

---

<div class="post-metadata">

**Author:** ![Dolomiti](https://avatars.discourse-cdn.com/v4/letter/d/13edae/32.png) [@Dolomiti](https://discourse.processing.org/u/Dolomiti)\
**Post date:** [January 20, 2019, 12:47pm UTC](https://discourse.processing.org/t/port-serial-en-size/7568/9 "2019-01-20T12:47:22Z")

</div>

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.

 ![Captura%20de%20pantalla%20(5)](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/07d54da89772a7b993cc8e188917f108970db3c3.jpeg)

```auto
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');
}

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [January 20, 2019, 12:58pm UTC](https://discourse.processing.org/t/port-serial-en-size/7568/10 "2019-01-20T12:58:43Z")

</div>

-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

```auto
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

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

---

<div class="post-metadata">

**Author:** ![Dolomiti](https://avatars.discourse-cdn.com/v4/letter/d/13edae/32.png) [@Dolomiti](https://discourse.processing.org/u/Dolomiti)\
**Post date:** [January 26, 2019, 7:19pm UTC](https://discourse.processing.org/t/port-serial-en-size/7568/11 "2019-01-26T19:19:10Z")

</div>

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:

> **[Comunicaciones serie entre MCU y PC con Processing](https://polaridad.es/processing-serie-comunicaciones-uart/)**
>
> Utilizando Processing es muy sencillo comunicar un sistema basado en un MCU y un PC, utilizando una conexión serie UART y la librería Serial.

Thanks friends

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

```

 ![consola](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/eaf94bc80dd210c7dff634a9188b1ffa926f067e.jpeg)

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [January 27, 2019, 1:58am UTC](https://discourse.processing.org/t/port-serial-en-size/7568/12 "2019-01-27T01:58:57Z")

</div>

i did show you with this example

> [@Port Serial en "Size"](https://discourse.processing.org/t/port-serial-en-size/7568/8):
>
> did you check on how to use CP5 Textarea [http://www.sojamo.de/libraries/controlP5/examples/controllers/ControlP5textarea/ControlP5textarea.pde](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/blo…

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…

> **[readBytesUntil() / Libraries](https://processing.org/reference/libraries/serial/Serial_readBytesUntil_.html)**
>
> Reads from the port into a buffer of bytes up to and including a particular character. If the character isn't in the buffer, null is returned. The version with without the byteBuffer par…

is one of 3 possibly “until” examples.

---

<div class="post-metadata">

**Author:** ![Dolomiti](https://avatars.discourse-cdn.com/v4/letter/d/13edae/32.png) [@Dolomiti](https://discourse.processing.org/u/Dolomiti)\
**Post date:** [January 27, 2019, 3:42pm UTC](https://discourse.processing.org/t/port-serial-en-size/7568/13 "2019-01-27T15:42:45Z")

</div>

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.

```auto
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
                      
}}

```

 ![Captura%20de%20pantalla%20(4)](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/b054325bc19487c535014cdb68e4261a5ed08298.png)

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [January 27, 2019, 8:12pm UTC](https://discourse.processing.org/t/port-serial-en-size/7568/14 "2019-01-27T20:12:13Z")

</div>

> [@Dolomiti](#):
>
> Println console;

my idea is first to disable above!  
and to replace

```auto
 print(new String(bloque_datos,UTF_8));

```

with

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

```

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

---

<div class="post-metadata">

**Author:** ![Dolomiti](https://avatars.discourse-cdn.com/v4/letter/d/13edae/32.png) [@Dolomiti](https://discourse.processing.org/u/Dolomiti)\
**Post date:** [January 29, 2019, 1:11pm UTC](https://discourse.processing.org/t/port-serial-en-size/7568/15 "2019-01-29T13:11:36Z")

</div>

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

```auto
// 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');
}

  

```

 ![Captura%20de%20pantalla%20(8)](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/17dbee291c8e9c51e606d1e5f2f9c6aa53cc5a7d.png)

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [January 29, 2019, 5:49pm UTC](https://discourse.processing.org/t/port-serial-en-size/7568/16 "2019-01-29T17:49:04Z")

</div>

@Dolomiti – thank you for sharing your solution!