[아두이노#599] ESP32를 웹서버로 작동할때 필요한 HTML을 Live Server 확장모듈로 편하게 작성하기!(녹칸다의 아두이노 시즌2)
프로그래밍/VS코드에서 아두이노하기 2024. 4. 30. 22:45
https://youtube.com/live/-1ED5lnj408
[아두이노#599] ESP32를 웹서버로 작동할때 필요한 HTML을 Live Server 확장모듈로 편하게 작성하기!(녹칸다의 아두이노 시즌2)
녹칸다의 아두이노(arduino) 시리즈이다!
이번편은 VS-Code에서 ESP32를 웹서버로 작동할때 어떻게 하면 좀 편하게 할 수 있을지 개발환경을 구성해보도록 한다!
(참고자료1)
const char my_text[] PROGMEM = R"=====(
)=====";
(참고자료2)
1.녹칸다가 기본으로 가져온 HTTP방식의 웹서버는 ESP8266에서 동작하던 코드이기 때문에 ESP32로 바꾸려면 아래 2가지를 고려해야한다!
-ESP8266WiFi.h를 WiFi.h로 수정한다
-빌트인LED는 ESP32에 없기때문에 별도의 LED를 15번핀에 연결해서 활용한다!
2.기본 예제의 작동방식은 웹서버에 접속하면 누를수 있는 링크가 2개 있고 첫번째링크를 누르면 ESP32의 LED가 켜지고 두번째를 누르면 꺼지는 예제이다!
3.VS-CODE의 확장모듈중에 live server를 설치하면 지금 작업중인 html을 실시간으로 미리보기 할 수 있다!
4.왠만한 iot관련 라이브러리는 esp32에 다 포함되어있지만 websocket같은 경우는 라이브러리를 별도로 설치해야한다!
5.웹소켓 기본예제의 경우 녹칸다의 아두이노 588편코드를 활용하고 컨베이어밸트를 제어하는 예제였다!
(vs-code에서 html을 작성하면 얻을 수 있는 이득)
1.메모장같은 편집툴에서 html을 작성하고 웹브라우저로 확인할수 있지만 그 경우 자동완성 기능이 없다!(vs-code는 자동완성 가능함)
2.실시간으로 작업중인 현황이 미리보기가 가능하므로 편리하다!
3.VS-CODE라는 하나의 프로그램에서 html작성, 미리보기, 아두이노 업로드까지 다 가능하니 편리하다!
(참고자료3)
//아두이노에서 다루는 문자열의 주요 규칙
//1.캐릭터 배열에 문자열을 대입할 수 있다!
char mytext1[] = "안녕하세요 녹칸다입니다!";
//2.캐릭터 포인터에 문자열을 대입할 수 있다!
char * mytext2 = "안녕하세요 녹칸다입니다!";
//3.String클래스에 문자열을 대입할 수 있다!
String mytext3 = "안녕하세요 녹칸다입니다!";
//4.아두이노의 String은 멀티라인을 지원한다!
String mytext4 = "\
<html>\
<head>\
</head>\
<body>\
<input type =text>\
</body>\
<html>\
";
//5.String안에는 쌍따움표와 역슬래시가 절대로 들어갈 수 없다!
String mytext5 = "녹칸다 가라사대 \"아두이노는 정말 재미있습니다!\"";
String mytext6 = "오늘의 환율은 $1가 \\1500원이 되었다!";
//6.이러한 규칙을 때문에 html을 문자열로 작성하는데 대단히 어려움이 있다!
//이 방식으로 작성을 하게 되면 내부에 있는 문자열을 수정할 수 없다
const char mytext7[] PROGMEM = R"=NOCKANDA=(
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<table border="1" width="300">
<tr><td colspan="2"><h1>녹칸다의 이력서</h1></td></tr>
<tr>
<td>이름</td>
<td><input type=text></td>
</tr>
<tr>
<td>나이</td>
<td><input type=text></td>
</tr>
<tr>
<td>성별</td>
<td>
남<input type="radio" name="gender" value="male" checked>
여<input type="radio" name="gender" value="female">
</td>
</tr>
<tr>
<td>취미</td>
<td>
코딩<input type="checkbox" name="hobby" value="coding">
등산<input type="checkbox" name="hobby" value="climing">
낚시<input type="checkbox" name="hobby" value="fishing">
</td>
</tr>
<tr><td colspan="2"><input type="button" value="회원가입"></td></tr>
</table>
</body>
</html>
)=NOCKANDA=";
(예제목차)
1.ESP32를 HTTP웹서버로 작동시켰을때 기본적으로 문자열을 다루는 규칙에 대해서 보여주시오!
2.간단한 이력서 양식을 html로 만들고 ESP32에 넣어서 실제로 잘 나오는지 확인하시오!
3.ESP32를 웹소켓서버로 작동시킬때 예제2번에서 만들었던 이력서 양식을 작성완료하면 ESP32의 시리얼모니터에 그 결과가 출력되도록 하시오!
4.ESP32의 15번핀에 LED가 1개 연결되어있을때 웹소켓을 이용해서 LED를 ON/OFF하고 현재 작동상태를 실시간으로 확인할 수 있도록 하시오!
5.ESP32의 15번핀에 LED를 빼고 온습도센서(DHT-11)를 연결해서 측정한 온도와 습도값을 웹브라우저에 출력하시오!(라이브러리필요함)
-서버가 클라이언트쪽으로 온습도값을 JSON양식으로 전송할것!
