从串口绘制数据时如何在处理中编写文本（）？答案

【问题标题】：How to write text() in processing when plotting data from serial port?从串口绘制数据时如何在处理中编写文本（）？
【发布时间】：2019-04-23 15:03:40
【问题描述】：

最近我正在学习使用我的 arduino UNO 进行处理，我检查了 arduino graph tutorial，它就像一个魅力，但是当你绘制数据时我无法刷新一个简单的文本，例如，如果我有一个来自串行端口的实时数据源。

我想写一个带有该值的文本，但它似乎以某种方式被遮盖/覆盖，并且无法与数字一起显示。

检查下图：

绘制该数据的源代码如下：

/*
GreenLine Temperature Graph,
Modified from https://www.arduino.cc/en/Tutorial/Graph
c1b3r
*/

import processing.serial.*;    
Serial myPort;        
int xPos = 1; 
color eggshell = color(255, 253, 248);

int temperaturaActual;
float temperaturaPreviaAltura = 0 ;
String inDataArduino;
PFont font;

void setup () {
    size(600,600);
    //fullScreen();  
    frameRate(30);   
    println(Serial.list());
    myPort = new Serial(this, Serial.list()[0], 9600);
    myPort.bufferUntil('\n');
    background(0);
    font = createFont("Arial",32,true);

}


void draw () {
  int Xmaxgraph = int(width-(width/4));
  println(Xmaxgraph,width, height);
  temperaturaActual = int(inDataArduino);
  float alturaTemperatura = map(temperaturaActual, 0, 1023, 0, height);
  stroke(255,255,255);
  line(Xmaxgraph, 0, Xmaxgraph, height);
  textSize(40);
  fill(255, 0, 0);
  textFont(font,16);                 
  text("Temp°", width - 150, 40);
  text(temperaturaActual, width - 150, 90);
  fill(255,255,0);
  text("Estado", width - 150, height-100);
  stroke(0,255,0);
  line(xPos-1, height - temperaturaPreviaAltura, xPos, height- alturaTemperatura);
  temperaturaPreviaAltura = alturaTemperatura;  
  if (xPos >= Xmaxgraph) {
    xPos = 0;
    background(0);
} else {
    xPos++;
 }

}
void serialEvent (Serial myPort) {
  inDataArduino = myPort.readStringUntil('\n');
  if (inDataArduino != null) {
    inDataArduino = trim(inDataArduino);

    }
}

这是highlighted code 的语法。

为什么会发生这种行为？我可以做些什么来解决这种情况并在绘制数据时清楚地看到文本？

感谢您对此提供的帮助，谢谢， H.

【问题讨论】：

我编辑了您的帖子以包含语法突出显示，因此您可能不再需要该链接。
感谢您添加此内容

标签： plot serial-port processing

【解决方案1】：

大多数处理草图将在每次调用draw() 的顶部调用background() 函数以清除旧帧。只有当图形离开屏幕右边缘时，您才调用 background() 函数。因此，对于大多数帧，您直接在之前的帧之上进行绘制。这就是为什么您会看到自己的文本堆栈。

要解决此问题，您要么需要在每一帧调用background() 函数（这将需要重构代码以每次重绘整个图形），或者您可能只需在之前的文本上绘制一个矩形即可.

【讨论】：

我想知道我应该如何重构我的代码，但是如果我调用background() 方法，您将清理图形的线条
@c1b3r 您需要添加一个保存图形值的数据结构（例如数组或 ArrayList），然后每次都重新绘制图形。出于我们的目的，在前面的文本上绘制矩形可能会更容易。