프로젝트

NODE MCU 웹서버로 외부 HTML 볼러와서 쓰기

페이지 정보

작성자 드래곤사우르스 작성일17-01-25 17:52 조회4,502회 댓글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

  • 페이스북으로 보내기
  • 트위터로 보내기
  • 구글플러스로 보내기

댓글목록

화이화이또님의 댓글

화이화이또 작성일

비밀글 댓글내용 확인


모바일 버전으로 보기