종류별 챠트 그래프 작성을 도와주는 구글 챠트 사이트가 있다. 물론 그래프 작성하면 엑셀을 이용하든지 아니면 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 키를 누르면 동일한 곡선이 다시 출력된다.