# How to draw real-time data in a specific canvas area？

**URL:** <https://discourse.processing.org/t/how-to-draw-real-time-data-in-a-specific-canvas-area/45631>\
**Category:** Electronics (Arduino, etc.)\
**Created:** [January 22, 2025, 1:11pm UTC](https://discourse.processing.org/t/how-to-draw-real-time-data-in-a-specific-canvas-area/45631 "2025-01-22T13:11:28Z")\
**Posts on this page:** 19\
**Page:** 2

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [January 23, 2025, 10:57pm UTC](https://discourse.processing.org/t/how-to-draw-real-time-data-in-a-specific-canvas-area/45631/21 "2025-01-23T22:57:29Z")

</div>

> [@cola](#):
>
> but what does it mean that the data won’t sync?

> [@glv](#):
>
> Note:  
> Data may not be synchronized in my example.

A related topic:

> [@Renderer faster than JavaFX 2D](https://discourse.processing.org/t/renderer-faster-than-javafx-2d/42648):
>
> Hi everyone! Is there any renderer that is faster than JavaFX 2D? Thanks in advance, MrImskiy

Reference (just one of may):

> **[Synchronization in Java - GeeksforGeeks](https://www.geeksforgeeks.org/synchronization-in-java/)**
>
> Synchronization in Java is essential for safely managing access to shared resources among multiple threads, preventing data inconsistency and race conditions through mechanisms like synchronized methods and blocks.

`:)`

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [January 25, 2025, 7:30pm UTC](https://discourse.processing.org/t/how-to-draw-real-time-data-in-a-specific-canvas-area/45631/22 "2025-01-25T19:30:26Z")

</div>

> [@svan](#):
>
> **Addendum:**  
> In order to get rid of a line feed added with ‘Serial.print(’\n’)’ the user will likely have to use trim(inStr), which also removes carriage returns so I can’t see any advantage to this extra line of code on the Arduino side vs. using Serial.println(data). In addition, there seems to be no penalty for leaving a line feed or carriage return with the data by skipping the trim() as shown in the posted example (which doesn’t use it). However, there are other hidden characters sometimes added to the string and trim() will remove these as well, so it’s probably a good idea to use _trim()_ as a matter of safety. I will edit the example to add trim(inStr) for this reason.

Your code is using:

> [@svan](#):
>
> ```auto
> if (data.length == 3) { // converts string array to float array
> inByte[0] = float(data[0]);
> 
> ```

The Processing _float()_ function is this in Java:

`PApplet.parseFloat("3.141927"); // Example`

Which can be found buried in here:  
_[processing4/core/src/processing/core/PApplet.java at main · processing/processing4 · GitHub](https://github.com/processing/processing4/blob/main/core/src/processing/core/PApplet.java#L8867)_

Which leads to here:  
[https://docs.oracle.com/en/java/javase/17/docs/api/java.base/java/lang/Float.html#parseFloat(java.lang.String)](https://docs.oracle.com/en/java/javase/17/docs/api/java.base/java/lang/Float.html#parseFloat(java.lang.String))

And then to here:  
[https://docs.oracle.com/en/java/javase/17/docs/api/java.base/java/lang/Float.html#valueOf(java.lang.String)](https://docs.oracle.com/en/java/javase/17/docs/api/java.base/java/lang/Float.html#valueOf(java.lang.String))

Which states:

> Leading and trailing whitespace characters in `s` are ignored

Which refers to this:  
[https://docs.oracle.com/en/java/javase/17/docs/api/java.base/java/lang/String.html#trim()](https://docs.oracle.com/en/java/javase/17/docs/api/java.base/java/lang/String.html#trim())

Which states:

> public [String](https://docs.oracle.com/en/java/javase/17/docs/api/java.base/java/lang/String.html) trim()
> 
> Returns a string whose value is this string, with all leading and trailing space removed

There is always a reason why things work… or do not work.

My use of serial communications goes beyond that of Arduino and Processing and the details are important.

`:)`

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [January 25, 2025, 8:44pm UTC](https://discourse.processing.org/t/how-to-draw-real-time-data-in-a-specific-canvas-area/45631/23 "2025-01-25T20:44:45Z")

</div>

Hello @cola,

I am interested in your final solution.

I do not need to see the code… just an understanding of what you did for a solution to your project.

`:)`

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [January 25, 2025, 9:04pm UTC](https://discourse.processing.org/t/how-to-draw-real-time-data-in-a-specific-canvas-area/45631/24 "2025-01-25T21:04:16Z")

</div>

`My use of serial communications goes beyond that of Arduino and Processing and the details are important.`

I’m curious if you use an Arduino? Most of the beginner questions revolve around Arduino and Processing, although the poster frequently omits the setup in their question.

I think you have to do whatever it takes to make it work. Sometimes it’s fairly easy and other times not. It’s more complicated than it might seem. Data ‘packets’ are not always split where we hope they are; eg, when sending a string of ‘123’ the ‘1’ might be sent at the end of one packet and the ‘23’ at the start of the next. Putting the soup back together has always been a challenge for me and markers such as line feeds and commas are necessary. When the going gets really tough I’ve had to resort to printing out every character that comes down the pike and have sometimes been surprised at the ‘garbage’ that gets sent, eg NBSP (non breaking space characters).

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [January 25, 2025, 10:36pm UTC](https://discourse.processing.org/t/how-to-draw-real-time-data-in-a-specific-canvas-area/45631/25 "2025-01-25T22:36:47Z")

</div>

> [@svan](#):
>
> I’m curious if you use an Arduino?

I own several different flavors of Arduino boards, as well as other microcontrollers and IoT devices.

I can program them in assembly (not so much these days), C or Arduino code (simplified C++).

This is one (oldie but popular) of my many projects:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/2/c/2ce63cbe02420818876ca23c33bc30fea91ca079.jpeg)

I can communicate to it with PC (USB or Bluetooth) or Android Phone (Bluetooth).  
Sometimes when I leave the room they are talking to each other… `:)`

I have managed to resolve most of the issues with serial communications between Arduino and Processing (USB and Bluetooth) because of experience and understanding what is going on under the hood.  
Sharing the Arduino _println()_ reference is just one example of something that one should know; at the very least it encourages people to look at the reference which they should be doing. I know I asked the question of how it is handled on receiving end and found an answer. And if it comes up in other related serial communications (I send stuff to terminal software, other software platforms and other devices all the time) what is being communicated is known.

Sharing is caring. The choices people make are there own.

This may be of interest:  
_[https://www.martyncurrey.com/arduino-serial-ascii-data-and-using-markers-to-separate-data/](https://www.martyncurrey.com/arduino-serial-ascii-data-and-using-markers-to-separate-data/)_

Have fun!

`:)`

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [January 25, 2025, 11:11pm UTC](https://discourse.processing.org/t/how-to-draw-real-time-data-in-a-specific-canvas-area/45631/26 "2025-01-25T23:11:38Z")

</div>

> [@glv](#):
>
> `// This could be serialEvent() and only intended to simulate incoming data.`

I have your PGraphic technique working with multiple streams of _simulated_ data. I have also used a java thread with Arduino serial to paint a graphic in an AWT frame but have no experience with Processing PGraphics connected to a thread as you are proposing. As time permits would you mind posting a demo using an Arduino to send data to your demo as alluded to above? You could use the sawtooth Arduino code that I posted or some other pattern, but I would like to get it working. It’s not obvious to me how to hook a serialEvent() to a thread.

**Simulated Data to 3 PGraphics Output:**

 ![pgrph](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/2/3/2385efd814069ca70f990286e20e4d08fb8193df.png)

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [January 26, 2025, 12:47am UTC](https://discourse.processing.org/t/how-to-draw-real-time-data-in-a-specific-canvas-area/45631/27 "2025-01-26T00:47:33Z")

</div>

Hello @svan,

I used Processing to send to Processing with a COM port redirector.

Transmit:

```auto
import processing.serial.*;
Serial txPort;

float [] num = new float[3];

void setup()
  {
  // List all the available serial ports:
  printArray(Serial.list());

  // Open the port you are using at the rate you want:
  txPort = new Serial(this, Serial.list()[2], 9600);
  //frameRate(10);
  }
  
void draw() 
  {    
  num[0] = 20*sin(frameCount%360*TAU/360);
  num[1] = 20*sin(frameCount%360*TAU/360 + TAU/3);
  num[2] = 20*sin(frameCount%360*TAU/360 + 2*TAU/3);
  txPort.write(str(num[0]));
  txPort.write(',');
  txPort.write(str(num[1]));
  txPort.write(',');
  txPort.write(str(num[2]));
  txPort.write('\n');  
  }

```

Receive:

```auto
import processing.serial.*;
Serial rxPort;

PGraphics d0, d1, d2;
FloatList data0, data1, data2;

float [] num = new float[3];

void setup()
  {
  size(400, 300);    
  d0 = createGraphics(400, 100);   
  
  data0 = new FloatList();
    
  // List all the available serial ports:
  printArray(Serial.list());

  // Open the port you are using at the rate you want:
  rxPort = new Serial(this, Serial.list()[3], 9600);
  
  rxPort.bufferUntil('\n');
  }

void draw() 
  {
  image(d0, 0, 0);
  }

int i;
  
void serialEvent(Serial myPort) 
  {
  String inString = myPort.readString();
  //println(inString);
  if (inString != null) 
    {
    inString = trim(inString);
    println(inString);
    
    String [] data = split(inString, ',');
    
    // Start adding to Lists
    println(i); 
    data0.append(float(data[0]));
    update(); 

    i = (i+1)%400; // 0 to 399 to avoid drift from floating point math
    
    if (i == 0 )
    data0.clear();
    }
  }
    
void update()
  {
  d0.beginDraw();
  if (i == 0)
    d0.background(255, 255, 0);
  d0.stroke(0);
  d0.strokeWeight(2);
  d0.point(i, data0.get(i) + d0.height/2);
  d0.endDraw();
  }  

```

I only created one _PGraphics_ in above code. You can add more!  
It no longer scrolls but clears and starts again from left to right.

This is what it would look like complete:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/1/4/140fcb6e29a092b78efce1bd162c8007655579d7.png)

Reference:

- [PGraphics / Reference / Processing.org](https://processing.org/reference/PGraphics.html)
- [Render Techniques / Processing.org](https://processing.org/tutorials/rendering)

`:)`

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [January 26, 2025, 12:58am UTC](https://discourse.processing.org/t/how-to-draw-real-time-data-in-a-specific-canvas-area/45631/28 "2025-01-26T00:58:47Z")

</div>

Thanks for the demo I will take time to study it.  
In the meantime I have this working and it still scrolls. Basically I just stuck the serialEvent() code into your requestData(). The only problem is the dots when I need lines in the PGraphic. Is it possible to draw lines?

```auto
// Modified glv demo https://discourse.processing.org/t/how-to-draw-real-time-data-in-a-specific-canvas-area/45631/27
import processing.serial.*;

PGraphics d0;
FloatList data0;

int i;
String inStr; // Data received from the serial port
Serial myPort;
int lf = 10; // ASCII linefeed
float inByte = 0;

int _wndW = 800;
int _wndH = 600;
void setup() {
  size(600, 500);
  printArray(Serial.list());
  // Enter correct number for your system
  myPort = new Serial(this, Serial.list()[1], 9600);
  myPort.bufferUntil(lf);
  strokeWeight(2);
  d0 = createGraphics(_wndW, 300);
  data0 = new FloatList();

  thread("requestData"); // start thread to generate data
}

void draw() {
  background(0);
  update();
  image(d0, 0, 0);
}

void requestData() {
  while (true) {
    delay(3);
    inStr = myPort.readStringUntil('\n');
    if (inStr != null) {
      //trim whitespace and formatting characters (like line feed, carriage return)
      inStr = trim(inStr);
      inByte = float(inStr);
      data0.append(inByte);
      println(int(inByte));
    }
    if (data0.size() > d0.width)
      data0.remove(0);
    i = (i+1)%d0.width; // 0 to 399 to avoid drift from floating point math
  }
}

void update() {
  d0.beginDraw();
  d0.background(255, 255, 0);
  d0.stroke(0);
  d0.strokeWeight(2);
  for (int i=0; i<data0.size(); i++) {
    d0.point(i, data0.get(i)+d0.height/2);
  }
  d0.endDraw();
}

```

 ![plt1](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/c/e/ce5cdfbb545ce303f356262fa8dd3c8377b4900f.png)

**Arduino code:**

```auto
byte outputValue = 0;

void setup() {
  Serial.begin(9600);
}

void loop() {
    outputValue += 8;
    Serial.println(outputValue);
 }

```

**Addendum:**  
An other issue is the dots are descending when they should be ascending and then dropping back down to zero. It looks backwards, but it is printed left to right as expected.

```auto
d0.point(i, height - 200 - data0.get(i));

```

Fixes this issue; now plots correctly, but still need lines.

**Addendum2:**  
This adds the lines, but it’s very jittery when scrolling for some reason:

```auto
  for (int i = 0; i < data0.size(); i++) {
    y1 = data0.get(i);
    d0.line(i,height - 200 - y1, i++, height - 200 - y2);
    y2 = y1;
  }

```

where y1, y2 are floats.  
\*\*

 ![lines](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/a/d/ad7630a1de71ad7b4257ece091b3d9e73e167c1d.png)  
\*\*

**Addendum3:**  
This fixes the jitters (don’t augment second x value):

```auto
    d0.line(i,height - 200 - y1, i, height - 200 - y2);

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [January 26, 2025, 1:16am UTC](https://discourse.processing.org/t/how-to-draw-real-time-data-in-a-specific-canvas-area/45631/29 "2025-01-26T01:16:30Z")

</div>

> [@svan](#):
>
> Basically I just stuck the serialEvent() code into your requestData().

The _thread()_ was only intended to simulate data in place of _serialEvent()_.  
Not everyone has an Arduino and I wanted a working example.

I had a comment in original code:

> [@glv](#):
>
> `// This could be serialEvent() and only intended to simulate incoming data.`

`:)`

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [January 26, 2025, 1:43am UTC](https://discourse.processing.org/t/how-to-draw-real-time-data-in-a-specific-canvas-area/45631/30 "2025-01-26T01:43:56Z")

</div>

> [@glv](#):
>
> I had a comment in original code:

Yes I know, I quoted it in my earlier post. That’s how I got the idea to try substituting serialEvent(), plus the fact that I recognized the _while(true)_ construct which I had used in my java demo. At any rate, I think it’s going to be a good technique if I can solve the jitters.

---

<div class="post-metadata">

**Author:** ![cola](https://avatars.discourse-cdn.com/v4/letter/c/77aa72/32.png) [@cola](https://discourse.processing.org/u/cola)\
**Post date:** [January 26, 2025, 2:09am UTC](https://discourse.processing.org/t/how-to-draw-real-time-data-in-a-specific-canvas-area/45631/31 "2025-01-26T02:09:25Z")

</div>

hello @glv,  
In fact, I am very confused about the problems you mentioned about serial port transmission. I may not have thought too much about these.

Regarding drawing, I currently refer to the protocentral\_openview method. For details, you can check the following link. My transmission protocol also complies with its regulations. For multiple devices, you can modify it according to its transmission protocol.

> **[GitHub - Protocentral/protocentral\_openview: GUI for plotting/storing data from ProtoCentral...](https://github.com/Protocentral/protocentral_openview)**
>
> GUI for plotting/storing data from ProtoCentral breakouts

I imagine that the packets of each device are output separately, but this requires considering whether the time interval between each device in transmitting the data packet is reasonable, otherwise the data transmission will not be possible due to data congestion. After using the above transmission method, I only need to add identifiers of different data sources.

In fact, I think I should start with the design of Arduino. Thank you for your enthusiastic answer, and I’m sorry for the late reply.

Best wishes！ 🤝

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [January 26, 2025, 2:09am UTC](https://discourse.processing.org/t/how-to-draw-real-time-data-in-a-specific-canvas-area/45631/32 "2025-01-26T02:09:34Z")

</div>

I’m sorry but I can’t get this to run. You have two Processing apps using the same serial port and that won’t work on my system. Unless you want to send on one serial port and receive on another serial port and I can’t figure out how to do that. Once I unplug my Arduino I only see one bluetooth port listed.

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [January 26, 2025, 2:27am UTC](https://discourse.processing.org/t/how-to-draw-real-time-data-in-a-specific-canvas-area/45631/33 "2025-01-26T02:27:18Z")

</div>

I don’t understand where you’re hung up. If you are going to use proprietary software then you’ll need to use their sensor devices. If you use the devices listed in their drop down menu it should just work; no programming necessary. Your initial post seemed to indicate that you wanted programming assistance for display of data from multiple devices.

---

<div class="post-metadata">

**Author:** ![cola](https://avatars.discourse-cdn.com/v4/letter/c/77aa72/32.png) [@cola](https://discourse.processing.org/u/cola)\
**Post date:** [January 26, 2025, 2:51am UTC](https://discourse.processing.org/t/how-to-draw-real-time-data-in-a-specific-canvas-area/45631/34 "2025-01-26T02:51:28Z")

</div>

The ECG acquisition device I used was ADS1292R, and I added a GSR acquisition device myself. I have tried it successfully in my project. But my original purpose was indeed to draw multiple devices. In the above description, I originally wrote the transmission protocol myself. My transmission protocol was based on the premise that each data packet transmission would not be blocked, but I found that this was putting the cart before the horse.

Using the above was the fastest way to solve my problem, but I still wanted to write my own transport protocol, which was the reason I posted in the first place. 😳

All in all, I’ve sort of solved this problem for me.

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [January 26, 2025, 2:57am UTC](https://discourse.processing.org/t/how-to-draw-real-time-data-in-a-specific-canvas-area/45631/35 "2025-01-26T02:57:42Z")

</div>

> [@cola](#):
>
> All in all, I’ve sort of solved this problem for me.

Sounds like you have it solved and we can move on to something else.

---

<div class="post-metadata">

**Author:** ![cola](https://avatars.discourse-cdn.com/v4/letter/c/77aa72/32.png) [@cola](https://discourse.processing.org/u/cola)\
**Post date:** [January 26, 2025, 3:05am UTC](https://discourse.processing.org/t/how-to-draw-real-time-data-in-a-specific-canvas-area/45631/36 "2025-01-26T03:05:05Z")

</div>

Thank you very much for your enthusiastic answer. I will seriously consider the issues discussed in this article in the following projects. Best wishes！ 🤝

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [January 26, 2025, 5:54am UTC](https://discourse.processing.org/t/how-to-draw-real-time-data-in-a-specific-canvas-area/45631/37 "2025-01-26T05:54:32Z")

</div>

> [@glv](#):
>
> The _thread()_ was only intended to simulate data in place of _serialEvent()_.

I misunderstood your demo. I thought you were implying that a thread had to be used to direct output to a PGraphic. I was trying to use serialEvent() inside of the thread when in fact we don’t need the thread to get a PGraphic to display output. PGraphic offscreen plotting does work with just serialEvent() as shown below.

 ![noThread](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/c/c/cc8eaad95601052b9f6a8d297ee349f906394de6.png)

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [January 26, 2025, 11:21am UTC](https://discourse.processing.org/t/how-to-draw-real-time-data-in-a-specific-canvas-area/45631/38 "2025-01-26T11:21:11Z")

</div>

> [@svan](#):
>
> I’m sorry but I can’t get this to run. You have two Processing apps using the same serial port and that won’t work on my system. Unless you want to send on one serial port and receive on another serial port and I can’t figure out how to do that.

I am using two different serial ports.

See comment:

> [@glv](#):
>
> I used Processing to send to Processing with a COM port redirector.

You can write Arduino code for the Processing Transmit code.

`:)`

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [January 26, 2025, 4:26pm UTC](https://discourse.processing.org/t/how-to-draw-real-time-data-in-a-specific-canvas-area/45631/40 "2025-01-26T16:26:52Z")

</div>

> [@cola](#):
>
> All in all, I’ve sort of solved this problem for me.

👍

Best wishes to you as well!

`:)`

[Previous page](https://discourse.processing.org/t/how-to-draw-real-time-data-in-a-specific-canvas-area/45631.md?page=1)