아두이노 코딩-74: NodeMCU WiFi 웹서버 코드 이용 스마트 폰에서 구글차트 그래프 작성-I

종류별 챠트 그래프 작성을 도와주는 구글 챠트 사이트가 있다. 물론 그래프 작성하면 엑셀을 이용하든지 아니면 GNU 의 Graph 소프트웨어가 도움을 줄 수도 읶겠지만 오늘날의 그래프 작성은 다양성이 본질인것처럼 많은 종류의 화려한 그래프들이 우리의 시선을 끌게 된다.

컴퓨터 언어 측면에서 보면 HTML을 전체 틀로 하여 HTML에서 그래픽을 지원하는 SVG(Scalable Vector Graphics) 나 Canvas를 들수도 있다. 하지만 이에 더해 Java Script 가 가세하면 더욱 현란할 수밖에 없는 다이나믹하기도 한 그래프 작성이 가능하다.

구글의 챠트 기법을 그냥 스탠드 어론 PC에서 Notepad++ 편집기를 사용하여 쉽게 구현할 수도 있다. 즉 구글 챠트의 예제를 복사해다가 약간 손을 본 후 실행 시키면 되는 것이다. 하지만 이런 그래프 작성은 말 그대로 스탠드 어론 PC에 한정될 수밖에 없다.

뻔하고 단조로운 그래프 작성에서 벗어나 아두이노를 이용한 특히 와이파이가 가능한 NodeMCU/WeMos 보드를 이용한 좀 더 흥미로운 그래프 작성법을 알아보자. NodeMCU 보드는 와이파이가 가능하기 때문에 그래프를 일정 거리 떨어진 스마트 폰이나 패드로 송신이 가능하므로 보다 자유롭게 최종 그래프를 고객에게 보여 줄 수 있게 된다.

설명이 좀 길어졌지만 그 방법은 대단히 간단하다. 임; NodeMCU/WeMos 보드에서 ESP8266.h 라이브러리를 사용하여 HTML 언어를 사용하는 웹서버 코딩 틀을 그대로 사용하면 된다.

특히 구글 챠트에서 제공하는 Java Script를 사용하는 그래프 종류별 코딩은 사용법이 대단히 쉬우며 그 구성내용에 있어서 단순 텍스트 위주의 HTML에 비해서 마음에 드는 그래프를 쉽게 구성할 수 있는 이점이 있다. 물론 SVG 나 Canvas로도 눈길을 끌 수 있는 그래프 작성이 가능하나 상당한 코딩 노가다를 필요로 한다.

이 번 블로그에서는 구글차트 기법을 아두이노 NodeMCU 웹서버 기법과 결합하는 코딩 사례를 제시한다. 구글 차트 기법은 HTML과 Java Script가 혼합되어 있는 코드임을 감안해야 하지만 그렇다고 각자가 Java Script 전문가일 필요는 없다.

이 블로그의 코딩이 성공적이라면 다양한 구글 그래프를 아두이노 NodeMCU를 웹서버로 하여 각자의 스마트폰에 연동하여 그래프를 시각적으로 볼 수 있게 된다.

일단 웹서버 코드 예제에서 단순한 버튼 형의 인터액티브 코드를 맛보았으므로 그 사이에 구글 차트에 의한 그래프 코드를 삽입하여 비쥬얼하게 자신의 스마트 폰에서 볼 수 있도록 예제를 구성해 보도록 한다.

필요한 준비물은 필요한 준비물은 별도의 부품이 없는 아두이노 NodeMCU를 그대로 사용하면 된다.

Step 1: 다음 주소의 구글 차트 홈으로 들어가자.

https://google-developers.appspot.com/chart/
https://google-developers.appspot.com/chart/interactive/docs/gallery

Step 2: 갤러리에서 많은 종류의 정형화된 그래프 종류를 나열한 메뉴를 볼 수 있다.

그 중에서 NodeMCU 웹서버와 구글 차트를 연동시키기 적절한 예제로서 Points 즉 점을 찍는 차트를 선택하였다. 좌측의 긴 메뉴에서 Points를 클릭하도록 한다. 아래와 같이 아주 간단한 예제를 볼 수 있다. 그림 하단에 보면 OPTIONS 와 FULL HRML 버튼들이 있는데 FULL HTML 버튼을 클릭하며 이 그래의 전체 HTML+Java Script 코드를 볼 수 있다. NotePad++에 그 내용을 복사한 후 언어를 HTML로 설정하여 저장한 후 실행하면 아래의 그래프를 확인할 수 있다.

아울러 PC화면을 좀 더 스크롤하면 다음과 같은 점 그래프 예제를 쉽게 찾을 수 있다. 바로 이 코드를 NodeMCU 데모에 이용하기로 하자.

Notepad++이 설치되지 않은 사용자라면 W3schools.com 사이트의 많은 예제 프로그램이 들어 있는 박스를 HTML 편집기로 사용해도 좋다. 필자도 코딩 경력이 일천하여 초기에 Notepad++ 편집기를 몰라 W3schools.com 예제 박스를 임시 편집기로 많이 사용하였다.

위의 그림을 참고로 하여 코드 내용을 분석해 보자.

head 태그내 script 태그에 text/javascript 선언이 있으며 src=를 사용해 구글 차트 인터넷 https 주소를 설정한다.
함수 drawChart()에서 변수인 데이터 세트의 좌표를 정의한다. 아울러 하단에 폰트 사이즈 및 최대 최소값 범위를 규정하고 곡선 형태 및 그래프 처리하는 점의 크기를 설정한다. 각자 필요하다면 점의 개수 와 크기 파라메타들을 변경하면 될 것이다.

8개의 좌표 데이터를 사용함을 알 수 있다. 첫 번째가 (1,3)에서 시작하여 마지막이 (8,3)으로 끝남을 알 수 있다.
이 코드를 NodeMCU에 옮길때에 극히 주의할 점은 따옴표 사용에 주의해야 한다. 전체 HTML+Java Script 코드 각줄을 아래와 같이 client.print(“ 코드내용 ”); 처리하도록 하자.

단 주의 할 점은 구글 차트 프로그램 문장 중에 따옴표 “ 와 ”를 사용하고 있다면 client.print(“ 와 ”);에서 추가된 따옴표와 구분하지 못하여 아두이노 편집기가 컴파일 문법 에러를 주게된다. 따라서 구글 차트 프로그램에서 사용된 따옴표를 하나 짜리 따옴표 ‘ 또는 ’로 반드시 수정해야 한다. 작업 양이 많다고 판단되면 편집 탭에서 찾기 창을 열어서 찾기 및 바꾸기 작업을 하면 쉽게 한방에 처리 가능하다.

이 점 만 주의하면 아무런 문제없이 당신의 스마트 폰 인터넷 주소 창에서 스마트 폰 핫스팟 ip 주소를 타이핑하고 이동키를 누르면 잠시 후 원하는 그래프 모양을 관찰할 수 있을 것이다.

그래도 이 과정을 쉽게 확인할 수 있도록 확인된 코드를 다음 사이트에 실어 두기로 한다. 물론 HTML 태그를 많이 포함하고 있어 스팀잇에 올리기 부적합한 상태이다.

http://blog.daum.net/ejleep1/309

NodeMCU 라이브러리로부터 setup()까지 아울러 loop() 문 초반 와이파이를 불러내는 부분까지의 프로그램 골격은 동일하다. 구글 차트의 FULL HTML 프로그램을 NodeMCU에 접목하는 부분에 주의를 집중하자.

스마트폰 데이터 네트워크와 핫스팟을 켠 후 프로그램을 컴파일해서 업로딩하면 시리얼 모니터를 통해 공유기 핫스팟의 ip 주소를 볼 수 있다.

웹서버 예제에서와 마찬가지로 스마트 폰 인터넷 주소 창에 ip 주소를 입력한 후에 엔터(이동) 키를 누르면 스마트 폰 화면에서 유려하게 인터폴레이션 된 곡선을 볼 수 있다.
하단의 Data Refresh 키를 누르면 동일한 곡선이 다시 출력된다.