스마트 폰에서 NodeMCU 웹서버와 연동된 아날로그로 움직이는 시계를 보기는 다소 어려움이 있었다. 지금의 스마트 혁명을 이루어 내었던 스티브잡스가 과거에 어떤 연유인지 모르겠으나 동영상을 지원하는 전문 소프트웨어 중 Adobe Flasher를 사업 상 배제했던 사연이 있었던 점을 익히 알고 있을 것이다.
지금 흔히 사용 중인 삼성 안드로이드 폰이나 갤럭시 탭 류에는 Adobe Flasher 설치가 배제됨으로 인해 상당히 많은 동영상 예제 프로그램이 작동하지 않는 경우가 허다하다.
이번 시계 바늘이 돌아가는 아날로그 시계 예제를 성공시키기 위해서는 약간 편법적이긴 하나 Adobe Flasher를 설치 허용하는 돌핀(Dolphin) 웹브라우저를 스마트 폰에 설치 권장한다.
NodeMCU 웹서버 프로그램을 작동시키는 방법은 앞서와 거의 동일하다. 이번에 삽입하는 프로그램은 다음의 인터넷 주소에서 구할 수 있다.
http://www.worldtimeserver.com/
삽입하는 부분만 간단히 설명하도록 하겠다. 이 사이트에서 아래와 같이 알바니 시계 프로그램만을 추출하여 <body>와 </body> 사이에 삽입하고 client.print(“와 ”); 처리를 한다. 물론 그 안의 내용물에서 “와”는 반드시 ‘와’로 바꿔두어야 한다.
client.print("<table border='0' cellspacing='0' cellpadding='0'><tr><td align='center'>");
client.print("<embed src='http://www.worldtimeserver.com/clocks/wtsclock001.swf?color");
client.println("=FF9900&wtsid=US-NY' width='200' height='200' wmode='transparent' ");
client.print("type='application/x-shockwave-flash' /></td></tr><tr><td align='center'><h2>Albany</h2></td></tr></table>");
프로그램 수정 후 컴파일하여 업로딩하고 시리얼 모니터 창에서 와이파이가 연결되었음을 확인한다. 그 다음에 돌핀 주소창에 가상 ip 주소를 입력한 후 엔터(이동)키를 눌러 NodeMCU 웹서버 호출 작업을 실시한다.
스마트 폰 화면에 동영상 시작 버튼이 나타나면 버튼을 누른다.
뉴욕 주 알바니 시의 움직이는 시간 정보를 볼 수 있다.
마지막으로 우리나라의 현지 시간을 보려면 상기의 삽입 프로그램 내용 중에서 미국 뉴욕(US-NY)에 해당하는 부분과 알바니(Albany) 시에 대한 부분을 국내(KR)와 서울(Seoul)로 바꾸면 된다.
아래의 프로그램은 국내 서울 기준 시간을 Nodemcu 웹서버와 연동하여 안드로이드 폰 돌핀 브라우저에서 볼 수 있는 프로그램이다.
Webserver_nodemcu_html_clock_Seoul_08
#include <ESP8266WiFi.h>
const char* ssid = "AndroidHotspot1234";// 자신의 스마트 폰 핫스팟의 ID 입력
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("<table border='0' cellspacing='0' cellpadding='0'><tr><td align='center'>");
client.println("<embed src='http://www.worldtimeserver.com/clocks/wtsclock001.swf?color");
client.println("=FF9900&wtsid=KR' width='200' height='200' wmode='transparent' ");
client.println("type='application/x-shockwave-flash' /></td></tr><tr><td align='center'><h2>Seoul</h2></td></tr></table>");
client.println("</body>");
client.println("</html>");
delay(1);
Serial.println("Client disonnected");
Serial.println("");
}
서울의 시간을 볼 수 있으며 물론 NodeMCU 웹서버가 끓겨도 스마트 폰에서 시간 정보를 받아 돌아간다.
'아두이노프로세싱 프로그래밍' 카테고리의 다른 글
| 아두이노 RF 스프링 안테나 설치 (0) | 2017.02.02 |
|---|---|
| 단일 리튬이온 폴리머 배터리에 의한 포터블 아두이노 NodeMCU 보드 전원공급 (0) | 2017.01.31 |
| 아두이노 NodeMCU Udp 프로토콜 시간정보 출력예제 (0) | 2017.01.30 |
| 아두이노 NodeMCU로부터 디지털 시계형 스마트폰 시간 출력 HTML 예제: II (0) | 2017.01.30 |
| 아두이노 NodeMCU 웹서버로부터 스마트 폰에 시간 출력예제: I Text type (0) | 2017.01.27 |