如何在处理中制作滚动图？答案

【问题标题】：How to make a scrolling graph in Processing?如何在处理中制作滚动图？
【发布时间】：2021-05-03 18:55:49
【问题描述】：

我有一个连接到 Arduino Uno 的激光雷达传感器。

我正在尝试复制这段 Youtube 短视频中显示的图表：https://www.youtube.com/watch?v=lmS6h4_nmqM&t=13s&ab_channel=IanCole

我遇到了麻烦：

创建实时 x 轴
使图表随数据一起移动，而不必每次都擦干净

有人可以指导我如何修复我的代码吗？

到目前为止我的进步图片：Processing graph

处理代码：

import processing.serial.*;

Serial myPort;        // The serial port
int xPos = 1;         // horizontal position of the graph
float inByte = 0;


void setup () {
  size(800, 700);
  myPort = new Serial(this, Serial.list()[0], 115200);
  myPort.bufferUntil('\n');
  background(0);
  smooth();
  drawStuff();
}

void draw () {
  translate(5, -100);
  stroke(255, 34, 255);
  line(xPos, height, xPos, height - inByte);
  smooth();
  if (xPos >= width){
  xPos = 0;
  translate(5, -100);
  background(0);
  drawStuff();
  }else{
      xPos++;
    }
}

void drawStuff() {
  background(0);
  for (int i = 0; i <= width; i += 25) {
    fill(0, 255, 0);
    text(i/2, i-10, height-15);
    stroke(0);
    line(i, height, i, 0);
  }
  for (int j = 0; j < height; j += 100) {
    fill(0, 255, 0);
    text(85-j/(height/100), 0, j);
    stroke(255);
    line(0, j, width, j);
  }
}

void serialEvent (Serial myPort) {
  String inString = myPort.readStringUntil('\n');

  if (inString != null) {
    inString = trim(inString);
    inByte = float(inString);
    println(inByte);
    inByte = map(inByte, 0, 1023, 0, height);
  }
}

Arduino 代码：

#include "Adafruit_VL53L0X.h"

Adafruit_VL53L0X lox = Adafruit_VL53L0X();

void setup() {
  Serial.begin(115200);

  // wait until serial port opens for native USB devices
  while (! Serial) {
    delay(1);
  }
  
  Serial.println("Adafruit VL53L0X test");
  if (!lox.begin()) {
    Serial.println(F("Failed to boot VL53L0X"));
    while(1);
  }  
}


void loop() {
  VL53L0X_RangingMeasurementData_t measure;
    
  lox.rangingTest(&measure, false); // pass in 'true' to get debug data printout!

  if (measure.RangeStatus != 4) {  // phase failures have incorrect data
    Serial.println(measure.RangeMilliMeter);
  } else {
    Serial.println(" out of range ");
  }
    
  delay(100);
}

【问题讨论】：

标签： graph arduino processing

【解决方案1】：

我建议将传感器中的值存储在一个数组中。它可能看起来像这样：

float[] data = new float[50];

//... your code

void serialEvent (Serial myPort) {
  //...
  if (inString != null) {
    inString = trim(inString);
    inByte = float(inString);
    inByte = map(inByte, 0, 1023, 0, height);
    for (let i = 1; i < data.length; i++) {
      data[i-1] = data[i];
    }
    data[data.length - 1] = inByte;
  }
}

这里发生的情况是，您有一个传感器过去 50 个输出的数组，然后将它们全部移动（去掉最早的输出），然后将新输出作为数组中的最后一个值。然后，您可以根据需要在图表上显示这些值。

【讨论】：