아두이노 NodeMCU서버가 비록 쥐새끼만한 서버이긴 하지만 그래도 서버이기 때문에 반드시 시간 출력이 가능해야 할 것이다. 크든 적든 서버에 별도의 건전지로 작동하는 실시간 시계를 부착하기 보다는 표준 타임서버로부터 시간 정보를 당겨다 쓰는 것이 바람직하다.
시간 정보를 당겨다 쓰는 방법으로서 UDP(User Datagram Protocol) 방법과 보다 간편한 자바스크립트 명령어를 쓰는 방법이 있다.
이번 예제에서는 훨씬 간단한 후자의 방법을 시도해 보기로 한다. 일단 자바스크립트 명령어에 연도 날짜 요일 시간을 불러 오는 명령을 활용하여 시간을 출력해 보기로 한다.
와이파이 접속하는 부분은 앞 예제들과 대동소이하며 HTML 부분에 시간 출력 프로그램을 삽입하기로 하자.
출력 방식에 두 가지가 있다. 단순히 시간 출력만 원한다면 // 처리한 부분 즉 /h + ‘:’....
을 살리고 그 다음 줄의 “today” 가 포함된 줄을 kill하도록 한다.
아울러 12시간을 넘어가는 경우 12시간을 빼고 싶으면 today.getHours()-12 로 바꾸도록 한다.
아울러 아날로그 시계처럼 시계판과 바늘을 갖추기 위해서는 상당히 긴 분량의 자바스크립트 프로그램을 삽입하여 씨름해야 할 것이다. NodeMCU 서버의 실용적인 측면에서 단순히 시간 정보만 출력할 수 있으면 센서 값 측정 목적에 충분하리라 본다.
시간 정보 출력과 관련하여 수정이 필요한 부분 참고하기 바란다.
client.println("function startTime() {");
client.println("var today = new Date();");
client.println("var h = today.getHours();");
// 12시간 만큼 빼고 싶으면 client.println("var h = today.getHours()-12;");
client.println("var m = today.getMinutes();");
client.println("var s = today.getSeconds();");
client.println("m = checkTime(m);");
client.println("s = checkTime(s);");
client.println("document.getElementById('txt').innerHTML =");
//client.println("/h + ':' + m + ':' + s;"); 시간출력만 월할 경우
client.println("today;");
다른 예제와 마찬가지로 다음의 프로그램을 아두이노 편집기에서 컴파일하여 업 로딩하고 시리얼 모니터 창에서 출력되는 가상 ip를 안드로이드 스마트 폰 인터넷 주소창에 입력 후 엔터(이동)키를 누르면 된다. 별도의 refresh 없이도 시간이 초 단위로 변동됨을 확인해 볼 수 있다.
한편 아두이노 NodeMCU와 통신이 끓어진 이후에도 시간이 계속 업데이트 됨을 관찰할 수 있다. 그 이유는 삽입한 자바스크립트 프로그램이 시간 정보를 스마트 폰으로부터 글어오기 때문일 것이다. 즉 아두이노 NodeMCU와 스마트 폰이 통신을 시작할 때에는 스마트 폰의 웹브라우저의 요청(request)에 의해 아두이노 NodeMCU가 client.print(“...”); 명령에 의해 시간 정보를 불러 오는 자바스크립트 프로그램을 스마트 폰에 넘겨주는 것이 사실이지만 그 이 후 스마트 폰 웹브라우저에 설치된 자바 스크립트 프로그램은 스마트 폰으로부터 시간정보를 계속 가져오게 되는 것이다. 참고하기 바란다.
다음번에는 UDP 기법으로 타임서버에서 시간정보를 받아오는 예제를 제시할 계획이다.
Webserver_nodemcu_html_clock_03
#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 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("<head>");
client.println("<script>");
client.println("function startTime() {");
client.println("var today = new Date();");
client.println("var h = today.getHours();");
client.println("var m = today.getMinutes();");
client.println("var s = today.getSeconds();");
client.println("m = checkTime(m);");
client.println("s = checkTime(s);");
client.println("document.getElementById('txt').innerHTML =");
client.println("today;");
client.println("var t = setTimeout(startTime, 500);");
client.println("}");
client.println("function checkTime(i) {");
client.println("if (i < 10) {i = '0' + i};"); // add zero in front of numbers < 10
client.println("return i;");
client.println("}");
client.println("</script>");
client.println("</head>");
client.println("<body onload='startTime()'>");
client.println("<div id='txt'></div>");
client.println("</body>");
client.println("</html>");
delay(1);
Serial.println("Client disonnected");
Serial.println("");
}
'아두이노프로세싱 프로그래밍' 카테고리의 다른 글
| 아두이노 NodeMCU Udp 프로토콜 시간정보 출력예제 (0) | 2017.01.30 |
|---|---|
| 아두이노 NodeMCU로부터 디지털 시계형 스마트폰 시간 출력 HTML 예제: II (0) | 2017.01.30 |
| NodeMCU 웹서버가 Random 하게 실시간 생성한 각도 데이터 로 스마트 폰에서 움직이는 게이지 그래프 작성 III: (0) | 2017.01.26 |
| NodeMCU WiFi 웹서버가 생성한 실시간가변저항 전압데이터를 스마트 폰에서 구글차트 그래프 작성 II: (0) | 2017.01.24 |
| 아두이노 NodeMCU WiFi 웹서버 통신 프로그램을 이용 스마트 폰에서 구글차트 응용 그래프 작성:I (0) | 2017.01.23 |