자바스크립트 언어를 사용하여 스마트 폰에서 시간 정보를 출력하였다. 하지만 지난 번 예제에서는 자바스크립트 언어의 그래픽 기능을 지원하는 Canvas 기능이 있었으나 실제 프로그램 결과 안드로이드 기반의 스마트 폰 웹브라우저 지원이 되지 않음을 확인하였다. 그 대안으로 HTML 수준에서 그래픽이 좀 약하긴 하나 과거의 디지털 클럭 수준의 시간 정보를 출력해주는 프로그램 사례를 제시하기로 한다.
이 자료는 아래의 독일 쪽 사이트를 참조했다.
http://www.zeitverschiebung.net/en/clock-widget
이 사이트 말고도 블로그나 웹사이트용 시간 정보를 제공해 주는 사이트들이 있다.
첫 번째 1번항에서 Seoul 지역을 지정하면 2번항의 프로그램 코드가 나타난다.
<div부터 시작되는 프로그램을 본 블로그에서 지원했던 프로그램의 <html> 다음 부분부터 삽입하도록 한다.
단 프로그램 중간에 여러번 나타나는 “와 ”를 반드시 ‘와’ 로 수정 편집하도록 한다. 아래에 수정된 프로그램을 참고하기 바란다.
보다 뚜렷한 이미지의 실용적인 시간 정보를 확인할 수 있을 것이다.
이 시간 정보 출력도 한번 아두이노 NodeMCU와의 통신으로 설정되면 설사 통신이 끓어지더라도 스마트 폰의 인터넷 기능으로 인해 계속 시간 정보가 출력된다.
Webserver_nodemcu_html_clock_04
#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.print("<html>");
client.print("<head>");
//client.print("<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>");
client.print("<div style='text-align:center;width:400px;padding:1em 0;'> <h2><a style='text-decoration:none;'");
client.print("href='http://www.zeitverschiebung.net/en/city/1835848'><span style='color:gray;'>");
client.print("Current local time in</span><br />Seoul, South Korea</a></h2> ");
client.print("<iframe src='http://www.zeitverschiebung.net/clock-widget-iframe-v2?language=en&timezone=Asia%2FSeoul'");
client.print("width='100%' height='150' frameborder='0' seamless></iframe> <small style='color:gray;'>© ");
client.print("<a href='http://www.zeitverschiebung.net/en/' style='color: gray;'>Time Difference</a></small> </div>");
client.print("</body>");
client.println("</html>");
delay(1);
Serial.println("Client disonnected");
Serial.println("");
}
'아두이노프로세싱 프로그래밍' 카테고리의 다른 글
| 아두이노 NodeMCU 웹서버 아날로그 시계 출력예제 (0) | 2017.01.30 |
|---|---|
| 아두이노 NodeMCU Udp 프로토콜 시간정보 출력예제 (0) | 2017.01.30 |
| 아두이노 NodeMCU 웹서버로부터 스마트 폰에 시간 출력예제: I Text type (0) | 2017.01.27 |
| NodeMCU 웹서버가 Random 하게 실시간 생성한 각도 데이터 로 스마트 폰에서 움직이는 게이지 그래프 작성 III: (0) | 2017.01.26 |
| NodeMCU WiFi 웹서버가 생성한 실시간가변저항 전압데이터를 스마트 폰에서 구글차트 그래프 작성 II: (0) | 2017.01.24 |