Embedded System/유틸리티

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

전두선 2019. 8. 16. 14:55

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

 

 

 

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

 

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

2> 매트랩을 이용한 방법

3> 랩뷰를 이용한 방법 

등 많은데, 

 

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

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

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

 

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

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

 

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

 

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

 

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

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

 

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

 

 

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

 

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
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(1000250);
  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++;
      }
    }
  }
}
 
cs

 

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

 

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

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
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(1000300);
  //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++;
      }
    }
  }
}
cs