구글 차트에 의한 실시간 그래픽에 있어서 문제점은 아두이노 NodeMCU에서 WiFi를 통해 실시간으로 스마트 폰에 측정 데이터를 전송할 경우 분명히 스마트 폰이 실시간으로 데이터를 획득함에 틀림이 없으나 일단 모든 데이터를 다 전송 받은 후 한번 화면이 꿈뻑거리면서 최종적으로 그래프를 보여 주었다. 실시간 데이터 전송 및 수신이 이루어짐에 불구하고 시간에 따라 변동되는 데이터를 애니메이션 하듯이 보여 주지 못했다.
이번에는 HTML SVG의 그래픽 기능을 사용하여 이러한 점을 개선해 보도록 한다.
사진의 가시적인 실측 데이터는 상기 NodeMCU 에 부착된 가변 저항을 여유 있게 돌리면서 원하는 형태로 만들어 본 결과이다. 실제 센서를 부착하여 데이터를 입력한다면 보다 현실적인 그래프를 얻을 수 있을 것이다.
데이터 생성 조건은 사진에서처럼 아날로그 채널 A0 핀에 연결되어 발생되는 0∼1023 사이의 전압 데이터를 5로 나누면 0∼200 사이의 값으로 스케일링이 가능하다.
int val = analogRead(A0)/5;
HTML SVG의 그래프 작성을 위한 스크린 평면은 대략 폭이 300 높이를 200으로 설정한다.
<svg height='210' width='300'>
이 평면에서 원점이 좌하귀(사각형의 왼쪽 아래)가 아닌 좌상귀(사각형의 왼쪽 아래) 임을 명심하자 스케일된 전압 값 그대로 그래프를 그리게 되면 거꾸로 된 결과를 얻게 된다.
int y1 = 200-val;
따라서 전압 값에 음의 부호를 취하고 거의 스크린 높이에 해당하는 200을 더하면 정상적인 그래프를 볼 수 있게 된다.
시간 축은 for loop 문에서 i 값을 0 에서 300 사이로 취한다. 1씩 증가 시킬 경우 시간이 몇초에 해당하는지는 프로그램에서 프로그래머가 몇 가지 명령문을 사용하여 측정해 볼 필요가 있다.
아래에 제시되는 프로그램은 좌표 축 및 눈금을 생략한 채 단지 실시간 데이터 그래핑이 가능한지 여부를 확인하기 위한 목적의 간단한 프로그램임을 명심하자.
WiFi 연결을 위한 프로그램 부분은 거의 변동이 없다. 아울러 아두이노 NodeMCU 웹서버 프로그램을 실행시켜 스마트 폰에서 리퀘스트를 받아 처리하기 위한 request.indecOf() 부분이나 loop()의 하단에 Data Refresh 부분도 이전의 웹서버 프로그램의 구조를 그대로 답습하고 있다.
수정된 부분을 구체적으로 지적하자면 <!DOCTYPE HTML>")에서 </html> 사이에 HTML SVG의 태그들 <svg>와 </svg>가 사용되고 있음을 확인할 수 있을 것이다.
이번에 제시된 프로그램은 그 구조가 극히 간단하지만 각종 센서로부터 실시간 측정을 수행하는 아두이노 NodeMCU 시스템을 제작함에 있어서 가장 긴요한 수단으로서 출발점이 될 수 있을 것이다.
Webserver_nodemcu_html_svg_realtime_chart_02
#include <ESP8266WiFi.h>
const char* ssid = "AndroidHotspot1994";
const char* password = "00000000";
int ledPin = 2; //
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 previously 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(" <body>");
client.println("<svg height='210' width='300'>");
int val = analogRead(A0)/5;
int y1 = 200-val;
for(int i=1;i<300;i++){
// 아나로그입력 생성(0-1023):1023=3.3V
int x1 = (i-1);
int x2 = i;
int val = analogRead(A0)/5;
int y2 = 200-val;
client.println("<line x1='");
client.println(x1);
client.println("' y1='");
client.println(y1);
client.println("' x2='");
client.println(x2);
client.println("' y2='");
client.println(y2);
client.println("'");
client.println("' style='stroke:rgb(255,0,0);stroke-width:2' />");
client.println("Sorry, your browser does not support inline SVG.");
y1 = y2;
}
client.println("</svg>");
client.println(" </body>");
client.println("<br><br>");
client.println("<a href=\"/on\"\"><button>Data Refresh </button></a><br />");
client.println("</html>");
delay(1);
Serial.println("Client disonnected");
Serial.println("");
}//프로그램 끝
'아두이노프로세싱 프로그래밍' 카테고리의 다른 글
| HTML SVG 그래픽 언어로 프로그램한 Arduino NodeMCU Scope에 의해 아날로그 파형 및디지털 듀티 신호 real time 측정 (0) | 2017.02.15 |
|---|---|
| Blink LED 코드를 이용한 Arduino NodeMCU Scope용 디지털 듀티 신호 생성 (0) | 2017.02.15 |
| 아두이노 NodeMCU 웹서버가 그려주는 HTML+SVG 아날로그 시계 출력예제 I (0) | 2017.02.12 |
| 대기압 측정센서 BMP180에 의한 NodeMCU보드의 I2C 센서 인터페이스 D1(GPIO5), D2(GPIO4) 검증 (0) | 2017.02.11 |
| TinyGPS 라이브리를 사용한 GPS 위도 경도 데이터 모니터링 (0) | 2017.02.10 |