NODE MCU 웹서버로 외부 HTML 볼러와서 쓰기
페이지 정보
작성자 드래곤사우르스 작성일17-01-25 17:52 조회8,217회 댓글1건관련링크
본문
외부 HTML 표시하기
안녕하세요 메카솔루션의 메이커 홍동길 입니다.
이번에는 ESP8266 node MCU를 이용해서 LED를 제어할때 그 화면 구성을 조금 더 편하게 하는 방법이 필요해서 재밌는 함수를 만들어 보았습니다.
이전예제와는 별반 차이가 없지만 이번에는 CSS 등을 이용해서 조금 꾸밀 수 있었습니다.
예전의 소스코드는 HTML 코드를 그대로 작성하는데 HTML코드가 너무 길어지게 되면 소스코드의 용량이 제한이 되고 관리가 어려워집니다.
이렇기 대문에 외부의 HTML 코드를 가져오는 방법이 필요한데 이것을 참고 해 보았습니다.
http://www.w3schools.com/howto/howto_html_include.asp
이를 이용해서 외부 HTML 을 표시할 수 있도록 하는 함수를 만들어보았습니다.
void sendHtml(String url){ String html = ""; html += "<html><script src=\"http://www.w3schools.com/lib/w3data.js\"></script>"; html += "<body><div w3-include-html=\"" + url + "\"></div>"; html += "<script>w3IncludeHTML();</script></body></html>"; server.send(200, "text/html", html); } |
저는 소스코드를 외부에 올릴때 깃허브를 이용했습니다.
https://github.com/keepworking/ESP8266-PANNEL/blob/master/index.html
그리고 ESP8266의 소스코드에서 다음과 같이 작성을 하면?
server.on("/on", [](){//ON 으로 접속시 LED를 켭니다. digitalWrite(led, HIGH); sendHtml("https://raw.githubusercontent.com/keepworking/ESP8266-PANNEL/master/index.html"); }); |
사용자 화면에서는 외부 HTML로 작성된 화면을 볼 수 있는 것입니다.
전체 소스코드 입니다.
#include <ESP8266WiFi.h> #include <WiFiClient.h> #include <ESP8266WebServer.h> #include <ESP8266mDNS.h> ESP8266WebServer server(80); int led = 14; void sendHtml(String url){ String html = ""; html += "<html><script src=\"http://www.w3schools.com/lib/w3data.js\"></script>"; html += "<body><div w3-include-html=\"" + url + "\"></div>"; html += "<script>w3IncludeHTML();</script></body></html>"; server.send(200, "text/html", html); } void setup(void){ pinMode(led, OUTPUT); digitalWrite(led, LOW); Serial.begin(115200); // 연결 완료 까지 대기 while (WiFi.status() != WL_CONNECTED) { delay(500); Serial.print("."); } Serial.println(""); Serial.print("Connected to "); Serial.println(WiFi.SSID()); Serial.print("IP address: "); Serial.println(WiFi.localIP()); if (MDNS.begin("esp8266")) { Serial.println("MDNS responder started"); } //접속별 동작 설정 server.on("/", [](){ sendHtml("https://raw.githubusercontent.com/keepworking/ESP8266-PANNEL/master/index.html"); }); server.on("/on", [](){//ON 으로 접속시 LED를 켭니다. digitalWrite(led, HIGH); sendHtml("https://raw.githubusercontent.com/keepworking/ESP8266-PANNEL/master/index.html"); }); server.on("/off", [](){//OFF 으로 접속시 LED를 끕니다. digitalWrite(led, LOW); sendHtml("https://raw.githubusercontent.com/keepworking/ESP8266-PANNEL/master/index.html"); });
//서버 사용을 시작합니다. server.begin(); Serial.println("HTTP server started"); } void loop(void){ server.handleClient();//클라이언트 접속을 관리합니다. } |
감사합니다.
담당자: yevgeny
