ajax (8) 썸네일형 리스트형 [W55RP20 SSM] W5500 Ethernet - 웹서버 입력 테스트 지난번 포스트에서는 W55RP20에서 웹서버 출력 관련 테스트를 했는데 이번에는 서버에서 값을 입력 받는 테스트를 해 보자 먼저 Raspberry Pi PicoW - Ajax 를 이용한 실시간 웹 전압 디스플레이(https://nexp.tistory.com/3907 ) Raspberry Pi PicoW - Ajax 를 이용한 실시간 웹 전압 디스플레이ESP32-S2 웹서버 테스트 - Ajax 를 이용한 실시간 데이터 수신 테스트 코드를 이용하여 실시간 웹 디스플레이 테스트를 해보자. 코드는 거의 동일하게 구동된다. Pi Pico 확장 테스트 보드에는 ADC를 테nexp.tistory.com를 참고 해서 웹페이지를 작성 한다 이번에는 페이지를 쉽게 변경하기 위해 웹페이지를 바이너리로 변환해서 처리 하도.. Raspberry Pi PicoW - LittleFS를 사용한 웹서버 기존에 테스트 했던 웹서버는 저장소가 없이 소스코드 내에서 웹페이지의 정보를 전송 했는데 복잡한 웹페이지나 이미지가 많이 들어가는 웹페이지는 다루기가 어렵다. 그래서 파일 시스템(LittleFS)에 웹페이지 관련 파일들을 저장 해 두고 처리하면 상당히 편리 하다. 특히 웹페이지를 자주 바꾸어서 테스트 해야 하는 테스트에서는 파일시스템 내용만 바꾸면 되기 때문에 정말 빠르고 편리하게 개발 할 수 있다. ESP32 SPIFFS 웹서버 예제를 참고 해서 Pi Pico에서 제공하는 LittleFS로 웹서버를 구현하는 코드를 작성해 보자 #include #include #include #include #define _FS LittleFS #ifndef STASSID #define STASSID "****" #de.. Raspberry Pi PicoW - Ajax 를 이용한 실시간 웹 전압 디스플레이 ESP32-S2 웹서버 테스트 - Ajax 를 이용한 실시간 데이터 수신 테스트 코드를 이용하여 실시간 웹 디스플레이 테스트를 해보자. 코드는 거의 동일하게 구동된다. Pi Pico 확장 테스트 보드에는 ADC를 테스트 할 수 있는 가변저항(VR8)이 RP2040의 A0(GP26)에 할당되어 있다. 가변저항을 돌리면 전압변화가 생기고 이 전압을 웹페이지에 출력하는 코드를 작성해 보자. #include #include #include #ifndef STASSID #define STASSID "****" #define STAPSK "****" #endif const char* ssid = STASSID; const char* password = STAPSK; WebServer server(80); // HT.. ESP32-S2 Ajax 테스트 - SPIFFS 다운로드 문제 해결 ESP32-S2 Ajax 테스트 예제를이용하여 좀더 복잡한 웹페이지를 구현 하려면 HTML 데이터를 SPIFFS 에 저장해서 테스트 하면 쉽고 빠르게 웹페이지 및 자바 스크립트를 수정 할 수 있다. 그래서 ESP32-S2에서 SPIFFS를 사용하려고 했는데 에러가 발생한다. ESP32-S2에서는 SPIFFS 를 지원하지 않난다고 한다. SPIFFS 파일 시스템 파일 생성은 되지만 ESP32-S2는 다운로드를 지원하지 않는다고 한다. 왜 이렇게 만들었지? 너무 최신 칩인가? 최신 버전 Arduino IDE도 지원하지 않는다고 한다. SPIFFS를 사용하지 않으면 상당히 불편한데... ESP DOWNLOAD TOOL(https://www.espressif.com/en/support/download/other.. ESP32-S2 웹서버 테스트 - Ajax 를 이용한 실시간 데이터 수신 웹브라우즈에서 데이터 수신 하기 위한 가장 간단한 방법은 페이지 요청시에 변경된 데이터를 전송하면 된다. #include #include // SSID & Password const char* ssid = "SSSID"; const char* password = "PASS"; WebServer server(80); // Object of WebServer(HTTP port, 80 is defult) void handle_root(); // HTML 페이지 #if 1 const char index_html[] PROGMEM = R"rawliteral( ADC Value $VAL )rawliteral"; #endif //페이지 요청이 들어 오면 처리 하는 함수 void handle_root() { Strin.. ESP32 웹서버 - 실시간 ADC 데이터 그래프 출력 지금까지 테스트 한 웹서버 예제는 출력 관련 예제 였는데 이번에는 웹페이지 측에서 입력을 받을 수 있는 테스트를 해보자 기존에 실시간 웹서버를 구현 하기 위해 AJAX를 사용 했지만 비동기 방식 웹서버를 이용하면 이벤트 방식으로 쉽게 구현이 가능하다. 우선 웹서버 초기화 시에 사용할 이벤트를 등록 한다. AsyncEventSource events("/events"); void InitWebServer() { server.addHandler(&events); server.on("/", onRootRequest); server.serveStatic("/", SPIFFS, "/"); server.begin(); } 웹페이지에 데이터를 보내기 위해 ESP32 보드에서는 event.send 함수를 사용하면 쉽게 .. [adStar EVM] AJAX를 이용한 실시간 업데이트 웹서버 - 가속도 센서 그래프출력 [adStar EVM] AJAX를 이용한 실시간 업데이트 웹서버 - 가속도 센서 그래프출력 임베디드 웹서버의 센서 모니터링을 위한 기술로 실기간 업데이트 가능한 JAVA(AJAX) 기술을 이용하면 쉽게 구현 가능하다. 참고 : Mini WebServer real time page update(실시간 웹페이지 업데이트) [adStar EVM] 보드를 이용하여 실시간 업데이트 가능한 임베디드 웹서버를 구현 해보았다. 웹페이지에서 JAVA코드를 디버깅하기는 쉽지 않기 때문에 자주 수정해야 한다. 웹페이지는 SD Card를 통해 업데이트 되어 복사만 하면 되므로 손쉽게 디버깅 할 수 있다. adStar 실시간 업데이트 웹서버 테스트 동영상 실시간성 테스를 위해 3축 가속도 센서 데이터를 모니터링 하는 예제를 테.. Mini WebServer real time page update(실시간 웹페이지 업데이트) Mini WebServer real time page update(실시간 웹페이지 업데이트) 소형 웹서버에서 모니터링을 위한 여러 방법이 있다. 가장 간단한 HTML테그를 이용하여 웹브라우저에서 1초에 한번씩 웹서버로 접근하여 데이를 가져와 페이지를 업데이트 하는 방법이 있다. 하지만 이 방법을 이용하면 최소 시간이 1초이고 페이지 내용이 많으면 많을수록 느려지고 실시간 업데이트 확인이 어렵다. ActiveX, ASP등을 이용할 수도 있지만 등치도 있고 여러 제약 사항이 많다. 설치 없이 간단히 사용할 수 있는 방법으로 javascript를 이용하는 방법이 있는데, 요즘 동적 웹페이지를 위해 AJAX을 많이 사용한다고 한다. 원리를 먼저 MCU측에서보면 전송할 데이터를 XML파일로 업데이트 해두었다가 웹.. 이전 1 다음
