프로세싱을 이용한 시리얼 데이터 실시간 그래프화

두개의 데이터를 그래프화한 모습

 

 

 

시리얼 데이터를 실시간으로 그래프화 하려면 

 

1> 프로세싱을 이용한 방법

2> 매트랩을 이용한 방법

3> 랩뷰를 이용한 방법 

등 많은데, 

 

저는 프로세싱을 이용하여 데이터를 그래프화 하였습니다. 

셋 중에 제일 금방 배울 수 있다고 느꼈고, 

실제로 해보니 자료도 많아서 금방 할 수 있었습니다.

 

하지만 제가 아래 올려드린 자료는 설명이 부족합니다. 

제가 만들어놓은 양식을 그대로 쓰신다면 그냥 사용하시면 되지만, 

 

다른 양식을 원하신다면 조금 공부를 하셔야합니다.

 

구글에 "processing real time graph" 라고 검색하시면 여러 자료를 찾을 수 있습니다. 

 

아래 자료는 혹시나 저처럼 시리얼 데이터를 실시간으로 그래프화 하고 싶은 사람들에게 

조금이나마 도움이 되고자 올립니다!

 

그대로 사용하실 분은 port = new Serial(this, "COM22", 115200); 부분만 환경에 맞게 수정하셔서 사용하시면 됩니다.

 

 

1> 한 개의 데이터를 읽어와 그래프화 시키는 경우

 

시리얼 프린트 : printf("%d\n",(int)pitch); 

import processing.serial.*;
 
Serial port;  // Create object from Serial class2
 
float roll, pitch;
//Variables to draw a continuous line.
int xPos = 1;         // horizontal position of the graph 
int lastxPos=1;
int lastheight=0;
 
void setup() 
{
  size(1000, 250);
  frameRate(30);
  // Open the port that the board is connected to and use the same speed (9600 bps)
  port = new Serial(this, "COM22", 115200); // 115200bps, COM22 시리얼 개방
  port.readStringUntil('\n');
  background(0);
  smooth();
}
 
void draw() 
{
  while (port.available() > 0)
  {  
    //String str = port.readString();
    String str = port.readStringUntil('\n');
    if (str != null)
    {
      str = trim(str);
      int num = int(str);
      println(num);
 
      stroke(255,0,0);     //stroke color
      strokeWeight(2);        //stroke wider
 
      line(lastxPos, lastheight-125, xPos, height - num -125); 
      lastxPos= xPos;
      lastheight= int(height-num);
 
      // at the edge of the window, go back to the beginning:
      if (xPos >= width) {
        xPos = 0;
        lastxPos= 0;
        background(0);  //Clear the screen.
      } else {
        // increment the horizontal position:
        xPos++;
      }
    }
  }
}
 

 

2> 두 개의 데이터를 읽어와 그래프화 시키는 경우

 

시리얼 프린트 : printf("%d,%d.",(int)pitch,(int)roll); 

 

 

import processing.serial.*;
//PImage img;
 
Serial port; // 시리얼 포트
 
int roll, pitch;
int xPos = 1;  // 그래프의 수평 위치
int lastxPos=1; // 이전의 수평 위치
int lastheight=0;
 
int xPos2 = 1;    
int lastxPos2=1;
int lastheight2=0;
 
void setup() 
{
  size(1000, 300);
  //img = loadImage("imu.jpg");
  frameRate(30);
  port = new Serial(this, "COM22", 115200); // 115200bps, COM22 시리얼 개방
  port.readStringUntil('\n');
  background(255);
  //image(img,0,0);
  smooth();
}
 
void draw() 
{
  while (port.available() > 0)
  {  
    //String str = port.readString();
    String str = port.readStringUntil('.'); // '.'이 나올때까지 데이터를 str에 저장(.도 포함)
    if (str != null)
    {
      //str = trim(str);
      //int num = int(str);
      String[] list = split(str,','); // ','(컴마)를 기준으로
      pitch = int(list[0]); // 앞까지 list 0에 저장
      roll = int(list[1].replace(".","")); // 컴마 뒤를 list 1에 저장하는데, '.' 을 공백 즉 제거함.
      
      print("pitch : "+pitch);
      println(" roll : "+roll);
      
      // Graph
      stroke(255,0,0);     //stroke color
      strokeWeight(1);        //stroke wider
 
      //line(lastxPos, lastheight-125, xPos, height - pitch -125); 
      line(lastxPos, lastheight - 150, xPos, height - pitch  - 150); 
      lastxPos= xPos;
      lastheight= int(height-pitch);
 
      // at the edge of the window, go back to the beginning:
      if (xPos >= width) {
        xPos = 0;
        lastxPos= 0;
        background(0);  //Clear the screen.
      } else {
        // increment the horizontal position:
        xPos++;
      }
      
      // Graph2
      stroke(0,255,0);     //stroke color
      strokeWeight(1);        //stroke wider
 
      //line(lastxPos2, lastheight2-575, xPos2, height - roll -575);
      line(lastxPos2, lastheight2  - 150, xPos2, height - roll  - 150); 
      lastxPos2= xPos2;
      lastheight2= int(height-roll);
 
      // at the edge of the window, go back to the beginning:
      if (xPos2 >= width) {
        xPos2 = 0;
        lastxPos2= 0;
        //background(255);  //Clear the screen.
        //image(img,0,0);
       
      } else {
        // increment the horizontal position:
        xPos2++;
      }
    }
  }
}