이번 포스트도 이전과 마찬가지로 학생들의 한 질문에서 시작된다.
“아두이노로 그래프를 그릴 수 있나요?”
이 질문에 답은 당연히 “그렇다” 일 것이다.
예전 아두이노에선 그래프를 표현하는 기능이 존재하지 않아 프로세싱(Processing)을 사용해서 그래프와 같은 디자인 표현을 많이 했었다.
그 이후 아두이노 IDE 1.6.6 버전부터 시리얼 플로터(Serial Plotter) 기능이 추가 되었다.
이 기능은 우리가 주로 보던 시리얼 모니터에 나오는 값을 그래프로 시각화해서 확인할 수 있도록 만든 기능이다.
위의 그림이 동일한 코드를 넣었을 때 시리얼 모니터와 시리얼 플로터의 모습이다.
각각의 장단점이 있겠지만 값의 변화를 한 눈에 보고 싶을 때는 확실히 시리얼 플로터가 더 낫다.
그럼 어떻게 사용하면 될까.
사용법은 간단하다.
우리가 일반적으로 시리얼 모니터를 사용하는 방법과 거의 동일하다.
int value1 = 0;
void setup() {
Serial.begin(9600);
}
void loop() {
Serial.print("value1:");
Serial.println(value1);
if(value1 > 150){
value1 = value1 - 5;
}
else{
value1 = value1 + 5;
}
delay(200);
}코드 1은 간단하게 값을 변화시키는 코드로 value1 변수가 0부터 150까지 증가하고 그 이후엔 150과 155를 번갈아가면서 표현하게 한 코드다.
아무튼 이 코드에 나와있는 것처럼 일반적으로 시리얼 모니터를 사용하는 방법과 동일하다.
다만, 한 가지 주의할 점은 값을 표현하는 곳이다.
Serial.print("value1:");
Serial.println(value1);이 부분으로 여기서 시리얼 플로터에 값을 표현하는 부분은 Serial.println에 해당하는 부분이고 그 앞에 print에 “value1:”은 범례를 표현한 것이다.
범례 부분은 필수는 아니라 생략하고 표시해도 된다.
생략한다면 색상으로 값을 구분할 수 있다.
하지만 코드 1을 업로드해보면 아래의 시리얼 플로터처럼 범례가 별도로 표시되지 않는 것을 볼 수 있다.
이것은 1.8.19 버전에서 나타나는 것으로 이 버전에선 하나의 값을 시리얼 플로터로 표현할 때는 범례가 별도로 표현되지 않고 2개 이상일때만 표현된다.
2버전부터는 한 개의 데이터도 표시된다.
그리고 범례를 표현할 때는 주의사항이 있는데 범례의 이름에 띄어쓰기가 들어가면 범례를 잘못인식하는 상황이 발생한다.
만약 위의 코드를 조금 수정해서 범례칸을 “value 1:” 이런식으로 e와 1 사이에 띄어쓰기를 넣는다면 범례가 1만 인식해서 표현되게 된다.
이런 현상은 플로터에 여러 값을 표현할 때 서로의 값을 구분하는 방법이 띄어쓰기, 쉼표 같은 것을 통해 구분하기 때문이다.
그러니 범례를 쓸 때는 주의하자.
그리고 데이터를 보내는 것도 코드 1을 보면 데이터를 보낼 때 println을 사용해서 데이터를 전송하고 줄바꿈이 일어나게 했는데 이것처럼 시리얼 플로터에 데이터를 표현하기 위해서는 마지막에 줄바꿈이 일어나게 해야한다.
만약 Serial.print로 끝내면 시리얼 플로터에는 값이 표현되지 않는다.
Serial.println이나 Serial.print(“\n”) 과 같이 마지막에 줄바꿈이 일어날 수 있도록 표현을 해야 하는 것을 기억하자.
다음으로 넘어가서 이번에는 여러 개의 데이터를 표시하는 방법에 대해서 보자.
우리가 센서에서 값을 받다보면 하나의 데이터를 받는 경우보다 여러 값을 받는 경우가 생길 것이고 그 값들을 비교해야 하는 경우기 발생한다.
가속도 센서 같은 것을 사용할 때 그런 경우가 많은 이럴 때 시리얼 플로터를 사용하면 값을 넓게 볼 수 있다.
여러 개의 데이터를 표현하는 방법은 코드 1과 동일하게 범례를 표현하고 데이터를 전송하면 된다.
단, 앞에서 말한 것처럼 데이터를 전송하고 줄바꿈이 일어나게 해야 하는데 이 줄바꿈은 보낼 데이터를 다 보내고 가장 마지막에 넣어야 한다.
만약 데이터마다 println과 같이 줄바꿈이 일어나는 코드를 쓴다면 모든 데이터들이 합쳐져서 하나의 그래프로 표현되는 것을 보게 될 것이다.
이 부분을 주의하면서 코드 2를 보자.
int value1 = 0;
int value2 = 0;
void setup() {
Serial.begin(9600);
}
void loop() {
Serial.print("value1:");
Serial.print(value1);
Serial.print(",");
Serial.print("value2:");
Serial.println(value2);
if (value1 > 150) {
value1 = value1 - 5;
}
else {
value1 = value1 + 5;
}
if (value2 > 100) {
value2 = value2 - 3;
}
else {
value2 = value2 + 3;
}
delay(200);
}코드 2를 보면 알겠지만 두 값 사이에 “,”를 넣어서 구분했는데 굳이 ,를 넣지 않고 띄어쓰기를 넣어도 상관없다.
이렇게 2개의 데이터를 표현해보았다.
이번에는 그럼 최대 몇 개의 데이터를 시리얼 플로터에 표시할 수 있을까
결론부터 말하자면 최대 구분 가능한 색상은 8개다.
그림에서 왼쪽은 8개의 데이터고 오른쪽은 9개의 데이터인데 9번째 데이터의 색상이 파란색으로 되어 있는 것을 볼 수 있다.
이것처럼 8개보다 많이도 표시는 되지만 색상이 다시 처음으로 돌아와서 반복 표현된다는 것이다.
이런 점을 따져보면 8개까지 데이터를 표현할 수 있다 정도로 생각해도 좋을 것이다.
자, 이렇게 시리얼 플로터의 사용법에 대해 알아보았고 이번에는 조금 더 깊이 들어가보자.
아마 시리얼 플로터를 사용하는 사람들은 IDE 1.8.19 버전을 사용하는 사람들이 많을 것이다.
그 대표적인 이유 중 하나가 x축의 범위다.
그림에서 볼 수 있는 것처럼 1.8.19 버전은 x축이 500이 범위이고 2버전 이후는 50이 범위인 것을 볼 수 있따.
사실 우리가 데이터를 그래프로 보고자 할 때 보통 50개의 데이터만 보려고 하지는 않을 것이다.
좀 더 큰 틀에서 데이터를 보려고 하는 경우가 많은데 그런 경우엔 2버전의 기본 데이터 표현 수는 작다고 할 수 있다.
그럼 이 부분을 수정할 수 있냐라고 한다면 코드를 이용해서 범위를 넓히는 것은 아직 지원하지 않고 있다.
그래서 이 부분을 수정하려면 몇 가지 번거러운 작업을 해야한다.
먼저, 시리얼 플로터에 대한 코드를 조금 수정해야 한다.
(1.8.19 버전도 동일한 방법으로 수정이 가능하긴 하다.)
코드를 수정하기 위해선 시리얼 플로터의 코드가 있는 파일을 찾아야 하는데 먼저 Arduino IDE가 설치되어 있는 경로로 가보자.
경로를 잘 모르겠다면 바탕화면에 있는 바로가기의 속성을 보면 설치 위치를 볼 수 있다.
경로를 보고 설치 위치로 찾아가자.
그리고 내부에서 resources > app > lib > backend > resources > arduino-serial-plotter-webapp > static > js 폴더를 순서대로 들어가보자.
폴더로 들어오면 위의 그림에서 표시된 것과 같이 main이라고 되어 있는 js 파일을 찾을 수 있다.
자바스크립트 파일로 이 파일을 열어서 수정하면 시리얼 플로터의 범위를 수정할 수 있다.
파일은 노트패드, 자바스크립트 등 다양한 프로그램으로 열어 볼 수 있는데 간단히 메모장으로 열어도 상관없다.
파일을 열어보면 위의 그림과 같이 나타나는데 여기서 “U=Object”를 검색해서 위의 표시되어진 부분을 찾아보자.
여기서 50이라고 되어있는 부분이 우리가 본 x축의 범위다.
이 부분을 500으로 변경하고 저장하면 되는데 아마 대부분은 권한이 없어서 저장을 할 수 없다라고 나올 것이다.
이런 경우엔 바탕화면에 저장하고 원본 파일을 삭제하고 저장한 파일을 폴더에 집어 넣으면 된다.
이렇게 수정을 했다면 IDE를 껐다가 다시 켜보자.
그럼 이번에는 x축의 범위가 500으로 표현 될 것이다.
(1.8.19 버전과 달리 한 번에 0~500 범위가 표시되는 것이 아닌 처음에는 0부터 500까지 차례로 증가했다가 그 다음부턴 500개의 데이터를 계속 보여준다.)
이렇게 해서 시리얼 플로터에 사용법에 대해 알아보았다.
간단히 데이터를 시각적으로 표현할 수 있는 면에선 꽤 괜찮은 기능이지만 명확한 한계가 존재하기 때문에 애매한 포지션이다.
그래도 생각보다 자주 사용하는 편이니 알아두면 충분히 도움이 될 것이다.