본 예제에서는 구글차트 예제 중 Gauge 차트를 NodeMCU 웹서버 프로그램을 사용하여 스마트 폰 웹에 그려보기로 한다.
다음은 게이지 차트 인터넷 주소이다.
https://developers.google.com/chart/interactive/docs/gallery/gauge
이번 예제에서는 비록 NodeMCU에 설치된 가변저항 센서가 있으나 이를 사용하지 않는다.
단지 구글 차트에서 참고할 수 있는 프로그램 중 애니메이션 성이 있는 Gauge 차트를 에제로 택하여 실시간으로 움직임이 있는 그래프를 생성하기로 한다. 실시간으로 움직일 수 있는 원리는 각 게이지 별로 Rabdom Number를 발생시켜 게이지 바늘의 위치를 정해주도록 한다. 만약에 아두이노 NodeMCU의 센서 측정 값으로 이 게이지 바늘을 움직이려면 구글 차트 사이트에서 복사해온 자바스크립트 프로그램에서 데이터 부분을 자신의 프로그램 능력을 발휘해서 수정해야 할 것이다.
이미 앞 블로그 글에서 제시했던 구글 차트를 이용한 예제들에서와 마찬가지로 HTML 코드 부분을 삽입해주면 된다.
앞 예제와 프로그램 구조가 거의 변동이 없기 때문에 변동되는 부분만의 프로그램을 제시하기로 한다. 아래의 프로그램을 아두이너 편집기에서 각 줄별로 client.print(“ 와 )”;로 싸주어야 한다. 약간의 타이핑 노력은 필요하리라.
단 주의 할 점은 구글 차트 프로그램 문장 중에 따옴표 “ 와 ”를 사용하고 있다면 client.print(“ 와 ”);에서 추가된 따옴표와 구분하지 못하여 아두이노 편집기가 컴파일 문법 에러를 발 할 것이다. 따라서 구글 차트 프로그램에서 사용된 따옴표를 하나 짜리 따옴표 ‘ 또는 ’로 반드시 수정해야 한다. 이 점 만 주의하면 아무런 문제없이 당신의 스마트 폰 인터넷 주소 창에서 스마트 폰 핫스팟 ip 주소를 타이핑 하고 엔터(이동)키를 누르면 잠시 후 원하는 게이지 그래프 모양을 관찰할 수 있을 것이다. 물론 바늘이 랜덤하게 움직일 것이다.
구글 차트 게이지 그래프 예제 자바스크립트 프로그램
<html>
<head>
<scripttype="text/javascript"src="https://www.gstatic.com/charts/loader.js"></script>
<scripttype="text/javascript">
google.charts.load('current',{'packages':['gauge']});
google.charts.setOnLoadCallback(drawChart);
function drawChart(){
var data = google.visualization.arrayToDataTable([
['Label','Value'],
['Memory',80],
['CPU',55],
['Network',68]
]);
var options ={
width:400, height:120,
redFrom:90, redTo:100,
yellowFrom:75, yellowTo:90,
minorTicks:5
};
var chart =new google.visualization.Gauge(document.getElementById('chart_div'));
//var 이하 ∼'chart_div'));까지 줄바꾸기 되어 있다면 한 줄로 합칠 것.
chart.draw(data, options);
setInterval(function(){
data.setValue(0,1,40+Math.round(60*Math.random()));
chart.draw(data, options);
},13000);
setInterval(function(){
data.setValue(1,1,40+Math.round(60*Math.random()));
chart.draw(data, options);
},5000);
setInterval(function(){
data.setValue(2,1,60+Math.round(20*Math.random()));
chart.draw(data, options);
},26000);
}
</script>
</head>
<body>
<divid="chart_div"style="width:400px;height:120px;"></div>
</body>
</html>
좀 길긴 하지만 업 로딩하면 컴파일 에러 없이 NodeMCU에서 잘 돌아가는 프로그램 전체를 아래에 예시한다.
Webserver_NodeMCU_googlechart_04
#include <ESP8266WiFi.h>
const char* ssid = "AndroidHotspot1234";//본인 스마트 폰의 핫스팟 아이디 입력
const char* password = "00000000";//본인 스마트 폰 핫스팟의 비밀 번호 입력
int ledPin = 2; //
float x=-0.1;
WiFiServer server(80);
void setup() {
Serial.begin(115200);
delay(10);
pinMode(ledPin, OUTPUT);
digitalWrite(ledPin, HIGH);
// Set WiFi to station mode and disconnect from an AP if it was connected
WiFi.mode(WIFI_STA);
WiFi.disconnect();
delay(100);
Serial.println("Setup done");
// Connect to WiFi network
Serial.println();
Serial.println();
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected");
// Start the server
server.begin();
Serial.println("Server started");
// Print the IP address
Serial.print("Use this URL to connect: ");
Serial.print("http://");
Serial.print(WiFi.localIP());
Serial.println("/");
}
void loop() {
// Check if a client has connected
WiFiClient client = server.available();
if (!client) {
return;
}
// Wait until the client sends some data
Serial.println("new client");
while(!client.available()){
delay(1);
}
// Read the first line of the request
String request = client.readStringUntil('\r');
Serial.println(request);
client.flush();
// Match the request
int value = LOW;
if (request.indexOf("/LED=ON") != -1) {
digitalWrite(ledPin, LOW);
value = HIGH;
}
// Set ledPin according to the request
// Return the response
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println(""); // do not forget this one
client.println("<!DOCTYPE HTML>");
client.println("<html>");
client.println("<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>");
// 줄바꾸기 되어 있다면 한 줄로 합칠 것.
client.println("<script type='text/javascript'>");
client.println("google.charts.load('current', {'packages':['gauge']});");
client.println("google.charts.setOnLoadCallback(drawChart);");
client.println(" function drawChart() {");
client.println("var data = google.visualization.arrayToDataTable([");
client.println("['Label', 'Value'],");
client.println("['Memory', 80],");
client.println("['CPU', 55],");
client.println("['Network', 68]");
client.println("]);");
client.println("var options = {");
client.println("width: 400, height: 120,");
client.println("redFrom: 90, redTo: 100,");
client.println("yellowFrom:75, yellowTo: 90,");
client.println("minorTicks: 5");
client.println("};");
client.println("var chart = new google.visualization.Gauge(document.getElementById('chart_div'));");
//줄바꾸기 되어 있다면 한 줄로 합칠 것.
client.println("chart.draw(data, options);");
client.println("setInterval(function() {");
client.println("data.setValue(0, 1, 40 + Math.round(60 * Math.random()));");
client.println("chart.draw(data, options);");
client.println("}, 13000);");
client.println("setInterval(function() {");
client.println("data.setValue(1, 1, 40 + Math.round(60 * Math.random()));");
client.println("chart.draw(data, options);");
client.println("}, 5000);");
client.println(" setInterval(function() {");
client.println("data.setValue(2, 1, 60 + Math.round(20 * Math.random()));");
client.println("chart.draw(data, options);");
client.println("}, 26000);");
client.println("}");
client.println("</script>");
client.println("</head>");
client.println("<body>");
client.println(" <div id='chart_div' style='width: 400px; height: 120px;'></div>");
client.println(" </body>");
client.println("</html>");
delay(1);
Serial.println("Client disonnected");
Serial.println("");
}
시리얼 창에서 와이파이가 연결되었는지 확인 후 출력된 ip주소를 스마트폰 인터넷 화면의 주소 창에 입력하도록 한다.
스마트 폰을 횡으로 하여 캡츄어한 스크린 샷이다.
Math.random()에 발생된 데이터를 사용하여 바늘 위치를 결정하게 되어 있다.
NodeMCU에 설치할 수 있는 가변저항이나 센서 값에 의해 작동 시키려면 프로그램 수정이 필요할 것이다. 이점에 관해서는 가변저항 값을 읽어 그래프를 그려주는 앞의 예제들을 참고하기 바란다.
'아두이노프로세싱 프로그래밍' 카테고리의 다른 글
| 아두이노 NodeMCU로부터 디지털 시계형 스마트폰 시간 출력 HTML 예제: II (0) | 2017.01.30 |
|---|---|
| 아두이노 NodeMCU 웹서버로부터 스마트 폰에 시간 출력예제: I Text type (0) | 2017.01.27 |
| NodeMCU WiFi 웹서버가 생성한 실시간가변저항 전압데이터를 스마트 폰에서 구글차트 그래프 작성 II: (0) | 2017.01.24 |
| 아두이노 NodeMCU WiFi 웹서버 통신 프로그램을 이용 스마트 폰에서 구글차트 응용 그래프 작성:I (0) | 2017.01.23 |
| Thingspeak에서 MQTT방식을 사용하는 NodeMCU WiFi 통신예제 아두이노 코딩 (0) | 2017.01.20 |