Smart home system에 사용할 controller로 ESP32를 정하고 준비중입니다.
오늘은 ESP32에 Web Server를 올려보기로 했습니다.
예전에 ESP8266으로 할때는 속도가 많이 늦고 라이브러리가 안정화가 안되어 동작중 System이 Halt 되버리곤 했었는데 지금은 많이 안정된 것 같습니다.
이번에는 ESP32로 진행하고 있는데 아직 큰 문제는 없는 것 같아 다행으로 생각하고 있습니다.
프로그램을 진행하다보면 여러가지 설정이나 조작을 할 일이 생길것 같고 따로 UI를 꾸미기도 그렇습니다.
네이티브 앱으로 하려면 최소 3가지를 해야 합니다.
일단 PC용을 만들어야 하고 모바일용으로는 안드로이드용, 아이폰용 각각 만들어 주어야 합니다.
상호 호환도 안되고 개발툴도 다르기 때문입니다.
하지만 Web app(브라우저에서 프로그램을 돌리는 장식)을 사용하면 한가지만 개발해도 됩니다.
이쁘게 한다면 PC용과 모바일용만 구분해주면 됩니다.
이제는 거의 모든 브라우저에서 HTML5를 지원하므로 화려한 GUI도 충분히 가능합니다.
하지만 Web app도 문제가 있습니다. 바로 Web Server가 반드시 있어야 한다는 것이지요.
하지만 이제 이것도 문제가 없습니다.
ESP32 자체에 Web Server를 올려버리면 되기 때문입니다.
ESP32에 Web Server를 올리고 브라우저로 접속해서 사용한다면 훨씬 간편하기 때문입니다.
또한 OTA(Over The Air)도 지원하므로 F/W update도 웹으로 접속해서 처리 하면 될 것 같습니다.
며칠 시험해보니 웹서버는 잘 도는 것 같아 큰 문제가 없었고 이번에 중점적으로 시험할 것은 SPIFF에 Web용 파일들을 올려놓고 사용하는 것 입니다.
각종 Html파일이나 관련 파일들을 프로그램내에 삽입하지 않고 SPIFFS에서 파일로 관리 하려는 것이 첫번째 이유 입니다.
*SPIFFS(SPI Fat File System)
ESP32 내부에 있는 SPI로 인터페이스 하는 Serial flash memory에 file system을 올려놓은 것
PC로 보면 HDD나 SSD역할을 함
그리고 사용할지 약간의 고민중입니다만 jQuery와 jQueryMobile을 사용하려면 해당 라이브러리가 필요합니다.
일반적인 경우는 CDN(Contents Delivery Network)에 올려진 것을 사용합니다.
CDN은 구글이나 개발업체등 클라우드 서버에 올려놓고 거기 것을 불러 쓰는 방식을 말합니다.
하지만 이 상황은 단말기(스마트폰, PC, 타블렛)가 반드시 인터넷에 연결되어 있어야 합니다.
그렇지 못할 경우는 Local 네트웍에 별도의 Web Server를 돌려야 하구요.
이도 저도 안될 경우는 ??
결국 그래서 ESP32의 SPIFFS에 직접 라이브러리를 저장하고 받아오게 하려는 이유 입니다.
기본적으로 디바이스가 인터넷에 물려 있을 경우는 CDN쪽에서 받아오게 할려고 합니다.
Local Network에 물려 있을 경우 별도의 Home Web server가 있을때는 그곳에서 받고
마지막 최후로 직접 1:1로 연결된 경우에는 직접 주는 방식을 택하려고 합니다.
(이유는 속도 때문입니다.)
오늘은 이 최후의 마지막 상황이 되는 직접 연결될 경우의 환경에서 사용하는 방법입니다.
(만약 집에 인터넷이 안되어 CDN에서 받을수가 없을 때도)
일단 jQuery를 사용하려면 3개의 파일이 필요합니다.
jquery-xxxx.min.js : jQuery Library
jquery.mobile-xxxx.min.js : jQuery Mobile Library
jquery.mobile-xxxx.min.css : jQuery Mobile CSS File
그리고 없어도 진행은 되지만 내부에서 Error로 처리 되기 때문에 /image/ajax-loader.gif 파일도 넣어주면 좋습니다.
이렇게 하면 대충 서비스 해야할 파일 크기가 500K 정도 됩니다.
제가 잠깐 외도한 2~3년 사이에 사이즈가 엄청 커져 버렸습니다. ㅠ,ㅠ;
500KB 정도 되는 놈을 브라우저가 요청하면 ESP32가 주어야 합니다.
그래서 전송속도 때문에 약간 굼뜨게 동작하게 될수 있습니다.
비대해져버린 이놈을 싸야 하나 고민은 되지만 일단 진행해 보기로 했습니다.
SPIFSS에 위 파일들을 넣고 ESP32 내장 FLASH에 SPIFFS를 만들어 주었습니다.
index.html은 위와 같이 대충 만들어 주었습니다.
크롬 개발자도구로 확인을 해보았습니다.
DOMContentLoaded: 1.99 s
Load: 2.31 s
전송시간 1.99sec
전체 Load 시간 2.31 sec 입니다.
생각보다 아주 좋은 성적인 것 같습니다.
약간 굼뜨긴 하지만 엄청 짜증나지는 않을 것 같습니다.
일반적인 사용환경이 아니라 인터넷, 로컬 네트웍이 없을때나 초기 설정시에만 사용할 것 이기 때문에 약간 늦은 것은 크게 문제가 안될 것 같습니다.
그리고 HTML5에 추가된 Manifest cache기능을 이용하면 한번 받아놓으면 내부 케시된 것을 사용하기 때문에 더더욱 문제가 없을 것 같습니다. ^^..
(고맙게도 HTML5에서는 Manifest기능이 추가되었습니다. 이것은 로컬로 케시할 리스트를 만들어 놓으면 리스트가 변경되지않는한 한번 받아 놓으면 다음부터는 받지않고 저장된 케시에 있는것을 사용하게 됩니다. 그래서 늦더라도 한번만 받으면 다음부터는 받지 않기 때문에 문제가 없어지게 됩니다.)
{ PS1: 크롬에서 manifest기능이 작동하지 않고 있습니다.
MS 에지에서는 동작을 하는데 이상하네요.}
{PS2: 크롬에서는 http 에서는 이 기능을 무시해버리는 것 같습니다.
[Deprecation] Application Cache is restricted to secure contexts. Please consider migrating your application to HTTPS, and eventually shifting over to Service Workers. See https://goo.gl/rStTGz for more details.
[사용 중단] 응용 프로그램 캐시는 컨텍스트를 보호하기 위해 제한됩니다. 애플리케이션을 HTTPS로 마이그레이션하고 궁극적으로 서비스 워커로 전환하는 것을 고려하십시오. 자세한 내용은 https://goo.gl/rStTGz를 참조하십시오.
}
모바일 화면이라 PC크롬에서 보면 위와 같이 보이게 됩니다.
jQuery는 좀 무겁고 사용하지 않아도 될것 같지만 jQurty Mobile은 GUI꾸미기에 편해서 좋을 것 같습니다.
지금 속도로 봐서 둘다 사용해도 크게 문제가 없을 것 같습니다.
이외에도 게이지나 기타 GUI용 라이브러리도 이런방식으로 사용하면 될 것 같습니다.
Ajax 와 JSON을 사용하면 Page reflash도 없어서 크게 부하 걸릴일도 없을 것 같습니다.
요즘 유행한다는 AngularJS 같은 것을 사용해도 되구요.
어떤거라도 이런 컨셉으로 사용하면 될 것 같습니다.
이런 게이지 라이브러리도 올려 놓고 사용할 수 있습니다.
HTML5 에서는 Canvas가 도입되어서 이런 화려한 GUI를 꾸밀 수 있습니다.
이전 HTML4에서는 이미지만 올릴수 있었고 그래픽은 처리하지 못했습니다.
허지만 HTML5에서는 Canvas객체가 생겨서 모든 그래픽을 처리할수 있습니다.
Native app이 아니라 Web app 만으로도 이젠 제법 쓸만한 GUI를 꾸밀수 있게 되었습니다.
ESP32에서의 SPIFFS 를 이용한 Web Server는 나름 꽤 쓸만할 것 같습니다.
간단하게 Dial guage 라이브러리를 올리고 화면에 표시만 해보았습니다.
Library 인 guage.min.js는 사이즈가 31KB 정도 됩니다.
이정도 사이즈는 전혀 문제가 없을 것 같습니다.
추가한 다이얼게이지라이브러리로 구현한 페이지는 위와 같이 표현이 됩니다.
이제 쓸만한 GUI용 라이브러리 찾아서 사용하면 훨씬 간편해질 것 같습니다.
그것도 외부 서버 필요 없이 ESP32에 직접 Web Server 올리고 파일들은 SPIFFS에 올려 놓으면 되니 전혀 문제 없구요.
혹시나 속도에 문제가 있으면 WROVER Model을 사용하고 PSRAM에 Raw이미지로 올려놓고 서비스 하면 조금은 더 빨라질수 있을 것 같습니다. ^^..
간단한 것은 HTML5 의 Canvas 를 사용해서 직접 Javascript로 라이브러리 만들어 써도 될 것 같습니다.
UART Pin remap
ESP32 를 처음 분석하면서 가장 불만(몰라서 오해)인 부분은 UART 였습니다.
3개의 UART가 있는데 기본 UART0는 디버깅과 다운용으로 써야 하고 UART1은 내장 SPI Flash와 겹쳐서 사용하지 못하고 UART2의 경우는 WROVER 모듈일 경우 PSRAM을 사용하면 같은핀을 사용하므로 또 사용이 불가능 합니다.
개인적으로 외부 디바이스와 인터페이스에 UART를 RS-485로 만들어 사용하기를 즐겨하는데 이건 문제가 아닐수 없었습니다.
정보를 좀 찾아보니 다행히 Remap해서 사용할 수가 있더군요. ^^..
3개 포트 모두 사용이 가능할 것 같습니다.
이제 가장 골치아팠건 SPIFFS Webserver의 퍼포먼스 실험을 해보았고 결과가 아주 긍정적으로 나왔으므로 다음 작업을 진행하면 될 것 같습니다.
사진연습
요즌 사진연습도 틈틈이 조금씩 하고 있습니다.
유튜브 보면서 하고 있는데 영 실력이 늘지 않습니다.
완전 메뉴얼로 해서 촛점까지 수동으로 맞추면서 삽질중입니다.
노출연습하기 위해서 아침과 저녁, 밤에 수동모드로 찍어보고 있습니다.
CCD 노이즈가 많이 안들어가는 설정을 잡아가고 있습니다.
야간 촬영은 생각보다 쉽지 않더군요 ^.^
접사모드에서 심도조절, 아웃포커싱, 가장 중요한 셔터 누를때 흔들리지 않기 등등을 연습중입니다.
뻘짓좀 해보았습니다.
셔터속도 3초 입니다. ^^..
ESP32 가 생각보다 성능이 좋고 관련 Library들도 많이 진도가 나가있고 안정화도 많이 된 것 같습니다.
많은 자료와 유튜브 동영상들을 올려주신 지구촌 여러 엔지니어분들께 다시한번 감사 드립니다.
Mqtt, WebSocket, HTTPS등도 다 구현이 되어 있네요.
2~3년 동안 목공에 CNC에 3D 프린터 한다고 외도를 했었는데 그간 많은 분들이 많이 진도를 나가주셨네요.
그냥 받아먹으려니 많이 쑥스럽습니다.
다시 원궤도로 돌아오면서 외도한 기간동안 어떤 일이 일어났을까 많이 걱정하였는데 너무 다행입니다.
다음에는 OTA좀 살펴 보아야 겠습니다.
OTA (Over The Air)의 약자로 무선으로 F/W를 업데이트 하는 방법 입니다.
ESP32는 Wi-Fi를 지원 하므로 전용프로그램 혹은 웹상에서 F/W 업데이트를 할 수 있습니다.
이제 ESP32를 사용할 경우에는 다 만들어 케이스에 넣고 조립한 후에 F/W업데이트가 필요할 경우 이를 위해 복잡하게 케이스 풀고 선을 연결할 필요가 없습니다.
OTA로 간편하게 무선으로 업데이트를 하면 되기 때문입니다.
이런 기능들이 너무도 편해 진 것 같습니다.
ESP32는 Dual Core 인데 지금은 하나밖에 사용하지 않고 있습니다.
Arduino 기본 Appl은 Core 1번을 쓰도록 되어 있습니다.
Core 0번도 같이 쓸수 있도록 정리 좀 해 보아야 겠습니다.
통신이나 백그라운드로 돌아가는 것들을 이쪽으로 몰아 넣으면 좋을 것 같습니다.
SPIFFS 파티션 문제 때문에 2일이나 삽질을 했습니다.
기본은 4M Byte 인데 이번에 16M Byte 모듈들을 샀는데 Dev Kit은 기본인 4M Byte 짜리 였습니다.
16M Byte 인줄 알고 2일이나 계속 파티션 테이블 가지고 삽질을 했네요.
4M 짜리에 16M 영역으로 파티션 잡으니 당근 리부팅 되버렸겠지요.
16M 짜리는 해당모듈로 커스텀 보드 만든후 실험해야 겠습니다.
오늘은 일찍 들어가서 이틀이나 멍청하게 삽질한 저에게 휴식을 주어야 겠습니다.
'IT관련 > ESP32' 카테고리의 다른 글
| [ESP32] LCD Nixie module #2 (0) | 2019.11.18 |
|---|---|
| [ESP32] I2C OLED 한글출력 (0) | 2019.11.14 |
| [ESP32] LCD Nixie module #1 (0) | 2019.11.13 |
| [ESP32] JPG Image 출력 시험 (0) | 2019.11.13 |
| [ESP32] LCD 드라이버 선택(TFT_eSPI) (0) | 2019.11.09 |
댓글