Arduino 보드에서 생성된 값을 Serial 통신을 사용하여 서버로 보내기

1. 개요

Arduino Uno 보드에서 랜덤으로 생성한 3개의 값을 시리얼 통신으로 JSON Parsing하여 서버에 보내고,

서버에서는 받은 값으로 UI를 구성하여 보여주는 프로젝트를 진행하려고 한다.

개발 환경: Arduino IDE, Node-RED
개발 보드: Arduino Uno

 

<참고 자료>

보드 정보: Arduino Uno

https://www.devicemart.co.kr/goods/view?no=34404

Arduino Uno (R3)

 

2. 진행 과정

1번. Arduino IDE로 보드에서 랜덤한 3개의 값을 Serial 통신(JSON 형식)으로 보내는 코드 작성

2번. Node-RED로 Serial 통신으로 입력 받은 값을 UI에 표시하는 서버 만들기

 

3. Arduino IDE로 보드에서 랜덤한 3개의 값을 Serial 통신(JSON 형식)으로 보내는 코드 작성

1) 개발 환경 설정

① Arduino IDE 다운로드

아래의 링크에서 Arduino IDE를 다운로드한다(여기서는 2.3.2 버전을 사용하였다.)

https://www.arduino.cc/en/software

Software

 

② 보드 및 포트 설정

Arduino Uno 보드를 컴퓨터에 연결한 뒤 아래 그림1에 표시된 부분을 눌러서 Select other board and port를 누른다.

그림1

 

아래 그림2처럼 Arduino Uno 보드를 검색하여 보드와 연결된 포트를 선택하고 OK를 누른다.

그림2

 

③ 보드 정상 작동 확인

아래 그림3처럼 상단 File 탭에서 Examples -> 01.Basics -> Blink를 선택한다.

그림3

 

아래 그림4에 표시된 부분을 눌러서 Blink 예제를 보드에 Upload한다.

그림4

 

정상적으로 Upload가 되면 아래 그림5에 표시된 부분(LED)이 깜빡이는 것을 확인할 수 있다.

그림5

 

2) 코드 작성

void setup() {
  // put your setup code here, to run once:
  Serial.begin(9600);

}

void loop() {
  // put your main code here, to run repeatedly:
  // 0 ~ 1023 사이 랜덤한 숫자를 sensor1,2,3에 저장한다.
  int sensor1 = random(0, 1023);  
  int sensor2 = random(0, 1023);
  int sensor3 = random(0, 1023);

  // JSON 형식으로 시리얼 통신을 사용하여 보낸다.
  // JSON 형식 예
  // "{"sensor1":"value1","sensor2":"value2","sensor3":"value3"}"
  Serial.println("{\"sensor1\" : \""+String(sensor1)+"\" , \"sensor2\" : \""+String(sensor2)+"\" , \"sensor3\" : \""+String(sensor3)+"\"}");
  delay(1000);
}

위의 코드를 작성한 뒤 Upload 버튼(상단 오른쪽 화살표)을 눌러서 보드에 Upload 한다.

 

4. Node-RED로 Serial 통신으로 입력 받은 값을 UI에 표시하는 서버 만들기

1) 개발 환경 설정

아래의 링크를 참고하여 Node-RED 개발 환경을 설정한다.

https://powerdeng.tistory.com/235

Node-RED와 개발 환경 설정

 

2) 노드 설치

① 아래 그림6에 표시된 것처럼 오른쪽 상단 메뉴에서 팔렛트 관리를 누른다.

그림6

 

② 아래 그림7, 8처럼 설치 가능한 노드 탭에서 node-red-dashboard, node-red-node-serialport를 검색하여 설치 버튼을 누른다.

그림7

그림8

 

3) 노드 구성 및 설정

① serial in 노드 추가

그림9

그림9처럼 왼쪽 네트워크 탭에서 serial in 노드를 끌어다 플로우 1에 놓는다.

 

② Arduino Uno 보드 포트 확인

그림10

그림10처럼 Arduino IDE 상단 Tools탭에서 PC에 연결된 포드를 확인한다(여기서는 COM59에 연결됨)

 

③ Serial 노드 설정

그림11

그림9에서 플로우1에 끌어다 놓은 노드를 더블클릭하면 그림11처럼 창이 뜨는데 표시한 연필모양을 누른다.

 

그림12

그림12에서 표시된 검색 버튼을 눌러서 연결된 포트로 변경하고 Baud Rate은 9600으로 설정한다.

※ Baud Rate은 위에 아두이노 코드 작성시 Serial.begin(9600)에서 9600이 Baud Rate을 의미하기 때문에 동일하게 맞춰주기 위해서 9600으로 설정했다.

마지막으로 오른쪽 상단에 추가 버튼을 누른 뒤 완료 버튼을 눌러 마무리한다.

 

④ Json 노드 추가

그림13

그림13처럼 왼쪽 parser 탭에서 json 노드를 끌어다 플로우1에 추가한다.

 

⑤ Text 노드 추가

그림14

그림14처럼 왼쪽 dashboard 탭에서 text 노드 3개를 끌어다 플로우1에 추가 후 더블클릭한다.

 

그림15

그림15처럼 Label은 센서1로, Value format은 msg.payload.sensor1로 변경하고 완료 버튼을 누른다.

나머지 text 노드들도 똑같이 변경한다.

 

⑥ Gauge 노드 추가

그림16

그림16처럼 왼쪽 dashboard 탭에서 gauge 노드 3개를 끌어다 플로우1에 추가 후 더블클릭한다.

 

그림17

그림17처럼 Label은 gauge1로, Value format은 msg.payload.sensor1로, Range는 0~1023으로 변경한다.

나머지 gauge 노드들도 똑같이 변경한다.

※ Range를 0~1023으로 변경하는 이유는 아두이노 코드( int sensor1 = random(0, 1023); )에서 각 랜덤 값의 범위를 0~1023으로 지정했기 때문이다.

 

⑦ Layout 지정

그림18

그림18처럼 오른쪽 상단 메뉴를 클릭하여 창->Dashboard를 선택한다.

 

그림19

그림19처럼 Tab1->Group1에서 각 label를 끌어다 원하는 순서대로 변경할 수 있다.

 

⑧ 배포 및 UI 확인

그림20

지금까지 노드들을 선으로 연결한 뒤 오른쪽 상단에 배포하기 버튼을 누른다.

 

그림21

그림21처럼 웹 브라우저를 열고 Node-RED 개발환경 설정에서 입력했던 주소 뒤에 ui를 붙여서 입력한다.

http://127.0.0.1:1880/ui

 

그림22

그림22처럼 지금까지 구성한 서버의 UI가 표시되는 것을 확인한다.

 

---

<참고 자료>

https://www.youtube.com/watch?v=-TDpOvdt2eE