asynchronous web controlled thermostat
1.0.0
이 프로젝트는 Random Nerd Tutorial Lab Forum에서 Yves Bourdon과의 토론에서 나왔습니다. 전체 페이지를 다시로드하거나 양식을 제출할 필요없이 ESP32를 제어하기 위해 업데이트 된 웹 인터페이스를 구현하는 방법에 대한 토론에서 나왔습니다. 다시 말해, 여기서 아이디어는 클라이언트 브라우저의 비동기 요청을 수행하여 표시 할 데이터 상태에 대해 마이크로 컨트롤러를 쿼리 한 다음 ESP32가 제공 한 데이터가 수신 되 자마자 사용자 인터페이스의 로컬 업데이트를 수행하는 것입니다.
Websockets의 사용을 포함하여이를 달성하기위한 몇 가지 기술이 있습니다. Ajax에 의존하는 전통적인 방법을 선호합니다. 그럼에도 불구하고 Yves는 Ajax 로이 기술을 구현하는 방법을 이해하고 싶었습니다. 이것이이 프로젝트의 목적입니다. 또 다른 사람은 웹 소켓을 진행하는 방법을 설명하기 위해 이어질 것입니다 ...
연결된 온도 조절 장치에 대한 Yves의 초기 요청에 답하기 위해 ESP32와 DHT11 온도 센서가있는 상당히 간단한 회로를 설정하기로 결정했습니다 (그러나 모든 센서는 작업을 수행 할 수 있습니다). 또한 네비게이터가 ESP32를 심문하여 현재 온도를 얻는 순간을 플래시로 표시하기 위해 LED를 추가했습니다. ESP32를 제어하기위한 사용자 인터페이스는 모든 최신 브라우저와 호환됩니다. 특히 스마트 폰에서 :
 |  |
웹 인터페이스를 통해 사용자는 온도 조절 장치의 온도 범위를 조정할 수 있습니다. 임계 값 중 하나가 변경 되 자마자 비동기 HTTP 요청이 ESP32로 전송되어 새로운 온도 범위를 EEPROM 메모리에 저장합니다. 이런 식으로, ESP32가 어떤 이유로 든 (예 : 정전 후) 재시작 된 경우, 온도 조절기는 마지막으로 기록 된 온도 범위로 초기화됩니다. Reboot 버튼을 사용하면 명령에서 ESP32를 다시 시작 하여이 기능을 테스트 할 수 있습니다.
현재 온도 판독 값을 촬영할 때마다 인터페이스는 페이지를 다시로드 할 필요없이 완전히 투명한 방식으로 업데이트됩니다. 또한 온도 표시는 모든 것이 정상인지 또는 허용 범위를 벗어난지를 나타 내기 위해 색상을 변경하여 상황에 자동으로 적응합니다. 센서의 읽기 오류도 발생할 수 있습니다. 디스플레이는 이것을 고려합니다.
우리가 여기서 무엇을하고 있는지 완전히 이해하려면 Random Nerd 튜토리얼에 대한 다음 튜토리얼을 살펴 보는 것이 좋습니다.
ESP32/ESP8266 온도 조절기 웹 서버 - 온도에 따른 제어 출력
Spiffs 사용에 익숙하지 않다면이 튜토리얼도 읽어 보시기 바랍니다.
Spiffs (SPI Flash 파일 시스템)를 사용한 ESP32 웹 서버
Paltformio IDE 및 Visual Studio Code 편집기와 함께 코드를 개발했습니다. 따라서 기본 프로그램은 main.cpp 라고하며 src 디렉토리에 있습니다. Arduino IDE를 사용하는 경우이 프로그램을 프로젝트의 루트로 옮기고 다음과 같이 이름을 바꿔야합니다.
mv src/main.cpp esp32-asynchronous-web-controlled-thermostat.ino
코드는 세 가지 디렉토리로 나뉩니다.
src 에는 ESP32에 컴파일하고 업로드 할 C ++ 코드가 포함되어 있습니다.data ESP32 Spiffs에 업로드 할 웹 사용자 인터페이스 소스 코드가 포함되어 있습니다.scss SCSS 형식의 CSS 스타일 시트의 소스 코드를 포함합니다.웹 사용자 인터페이스는 ESP32 플래시 메모리 파일 시스템에 5 개의 개별 파일로 저장됩니다.
index.html (인터페이스 구조)index.css (인터페이스의 그래픽 레이아웃)index.js (동적 인터페이스 관리 프로그램)D7MR.woff2 (숫자 디스플레이에 사용되는 글꼴)favicon.ico (브라우저의 작은 아이콘) 웹 인터페이스는 CSS 스타일 시트로 그래픽으로 형식화됩니다. 소스 코드는 SCSS (Sassy CSS) 형식으로 작성되었으며 sass 프로그램을 사용하여 CSS 파일을 얻습니다. 자세한 내용은 공식 Sass 웹 사이트를 참조하십시오.
일반적으로 SCSS 구문은 CSS에 매우 가깝습니다. 소스 파일을 수정하려면 sass 도구를 설치하고 다음과 같이 CSS 파일을 다시 컴파일해야합니다.
sass -t compressed --sourcemap=none --update scss:data
그러나 추가 도구를 설치하지 않으려면 CSS 파일을 직접 수정할 수도 있습니다.
여기에서 ESP32에서 실행되는 클라이언트 브라우저와 웹 서버간에 비동기 교환을 구현하기위한 두 가지 기술을 제안합니다.
XMLHttpRequest 객체를 사용하는 고전적인 방법따라서 하나 또는 다른 것을 사용할 수 있습니다.
나는 당신이 더 쉽게 이해할 수 있도록 전체 코드에 대해 신중하게 댓글을 달았습니다. 주저하지 말고 프로젝트 전용이 게시물에 답변하여 포럼에서 질문을하십시오.
나는 특히 웹 애플리케이션을 통해 ESP32와 상호 작용하고 싶을 때 우리의 삶을 훨씬 쉽게 할 수있는 환상적인 ESP32Asyncwebserver 라이브러리의 저자 인 Dev No Dev에게 감사하고 싶습니다.
또한 인터페이스의 디지털 디스플레이에 사용한 그의 DSEG7 현대 미니 일반 글꼴에 대해 Keshikan에게 감사하고 싶습니다.
