프로세싱-시리얼 플로터 (Serial Plotter)를 통한 아두이노 그래프 그리기

이번시간에는 요청이 많이 들어왔던 문제를 해결하고자 합니다.

사람들이 아두이노를 쓰는 이유에는 여러가지가 있겠지만,

주된 이유중에 하나는 

DAQ (Data Acquisition)

즉 신호 수집을 위해서 사용하는 목적으로 사용합니다.

각종 센서에서 나온 디지털신호나, 아날로그 신호들을 아두이노로 받아와서

PC에서 후처리를 하여 결과를 보는 것이죠~

이러한 구성을 하기위해 가장 필요한 것이 바로

플롯팅 (Plotting)입니다.

실시간으로 들어오는 정보들을 확인하면서 어떤 신호가 들어오는지,

어떤 식으로 데이터를 처리해야 할지를

아두이노 내부에서 처리하는 것이 아니라

PC를 통해 처리하는 것이지요.

이러한 구성을 위해서는 PC와 아두이노간의 

시리얼 통신 (Serial Communication)

을 통해 정보를 주고받아야 합니다.

#1. 아두이노 코딩

우선 아두이노에서 컴퓨터로 어떤 데이터를 전송할지,

어떻게 전송할지를 설정합니다.

여기서는 아날로그 신호의 데이터를

Serial.println(data);

를 통해 매 데이터를 던져줍니다.

1. /*

     AnalogReadSerial

     Reads an analog input on pin 0, prints the result to the serial monitor.

     Graphical representation is available using serial plotter (Tools > Serial Plotter menu)

     Attach the center pin of a potentiometer to pin A0, and the outside pins to +5V and ground.

   
   

     This example code is in the public domain.

   */

   
   

   // the setup routine runs once when you press reset:

   void setup() {

     // initialize serial communication at 9600 bits per second:

     Serial.begin(9600);

   }

   
   

   // the loop routine runs over and over again forever:

   void loop() {

     // read the input on analog pin 0:

     int sensorValue = analogRead(A0);

     // print out the value you read:

     Serial.println(sensorValue);

     delay(1);        // delay in between reads for stability

   }

위 코드는 아래 예제코드와 동일합니다~

자 그럼 여기서 어떤 신호가 나오는지 보려면 어떻게 해야할까요?

아두이노가 업데이트 되면서 시리얼 플로터 라는 기능을 제공하게 되었습니다~

도구 메뉴에서 툴 -> 시리얼 플로터 를 클릭하시고 

보드레이트(Baud rate, 통신속도) 를 코딩과 동일하게 설정하시면

위와 같이 실시간으로 데이터를 볼 수 있게 된답니다.

하지만 아무래도 제공되는 툴이다 보니 자유롭게 변형하거나,

데이터를 처리하기가 자유롭지 않죠,,

그래서 이번엔 프로세싱을 이용해서 그래프를 그려보겠습니다.

#2 프로세싱 코딩

프로세싱은 생소하신 분들이 많을텐데, 주로 아두이노와 같이 사용하는 툴이랍니다.

UI가 아두이노와 상당히 유사하게 되어있어 맘이 좀 편하기도(?) 할거에요~

프로세싱을 실행하시고 아래 코드를 넣어주세요~!

import processing.serial.*;

Serial myPort;        // The serial port

int xPos = 1;         // horizontal position of the graph

float inByte = 0;

float pre_data = 0;

void setup () {

  // set the window size:

  size(400, 300);

  // List all the available serial ports

  // if using Processing 2.1 or later, use Serial.printArray()

  println(Serial.list());

  // I know that the second port in the serial list on my PC

  // is always my  Arduino, so I open Serial.list()[1].

  // (if first, type Serial.list()[0]).

  // Open whatever port is the one you're using.

  myPort = new Serial(this, Serial.list()[1], 9600);

  // don't generate a serialEvent() unless you get a newline character:

  myPort.bufferUntil('\n');

  // set inital background:

  background(0);

}

void draw () {

  // draw the line:

  stroke(127, 34, 255);

  line(xPos, height-pre_data, xPos, height - inByte);

  // at the edge of the screen, go back to the beginning:

  if (xPos >= width) {

    xPos = 0;

    background(0);

  } else {

    // increment the horizontal position:

    xPos++;

  }

  pre_data = inByte;

}

void serialEvent (Serial myPort) {

  // get the ASCII string:

  String inString = myPort.readStringUntil('\n');

  if (inString != null) {

    // trim off any whitespace:

    inString = trim(inString);

    // convert to an int and map to the screen height:

    inByte = float(inString);

    println(inByte);

    inByte = map(inByte, 0, 1023, 0, height);

  }

}

자 코드를 복붙한다음에 아래 순서에 따라 조금 바꿔줍시다.

1. 먼저 코드를 실행한 뒤, 아래 콘솔창에 뜨는 포트넘버를 기억해둡니다.

아두이노에서 포트넘버를 알 수 있으시죠?

2. 포트넘버가 안나오거나 이상한 문자가 나온다면 2번 박스에서

보드레이트를 9600이 아닌, 아두이노에서 코딩한 숫자와 동일하게 입력해줍니다.

3. 지금 제 경우에는 COM3이 두번째 포트이므로 1을 입력합니다.

만일 COM1이 아두이노 포트라면 0 을 입력해야겠지요? 

그렇게 제대로 입력하고나면 왼쪽과 같이 그래프가 그려지게 됩니다.

그 후에 받아진 데이터를 어떻게 처리할지는 위 코드를 기반으로 해서

작업하시면 됩니다~!

궁금한점이 있으시다면 언제든 댓글 달아주세요~^^