webserver (43) 썸네일형 리스트형 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.. [STM32G4 SM] Arduino W5500 웹서버 테스트 STM32G4 SM EVM 보드와 W5500을 이용하여 Ethernet 동작 테스트를 해 보자 SM-Type EVM 확장 테스트 보드중 W5500을 테스트 할수 있는 여러 보드가 있는데 이번에는 FT2232H-EXP 보드를 이용하였다. W5500 EVM 보드를 연결할 수 있는 핀맵 회로는 아래와 같다. W5500 CS핀은 A열 13번핀 PB12에 연결되어 있다. WebServer구현을 위해 EthernetWebServer 라이브러리(https://github.com/khoih-prog/EthernetWebServer)를 사용하였다. W5500 기본 동작 코드 byte mac[] = {0x00, 0x08, 0xDC, 0x00, 0x00, 0x00}; #include #include "Ethernet_Gen.. [STM32-64 Ardu] STM32F732 W5500 웹서버 테스트 - 웹서버 기본 뼈대 코드 만들기 STM32F732와 W5500을 이용하여 가장 간단한 웹서버를 만들어 보자. 우선 WebServer구현을 위해 라이브러리를 다운 받는다. https://github.com/khoih-prog/EthernetWebServer 앞으로 사용할 가장 기본이 되는 Webserver 관련 뼈대 코드를 작성해 보자 byte mac[] = {0x00, 0x08, 0xDC, 0x00, 0x00, 0x00}; #include #include "Ethernet_Generic.h" #include #define W5500_CS_PIN PB0 #define LED1_PIN PB2 #define Led1On() digitalWrite(LED1_PIN, 1) #define Led1Off() digitalWrite(LED1_PIN,.. ESP32 SD Card Web Server 테스트 ESP32에서 웹서버 소스(HTML 파일) 를 저장하는 방식은 아래와 같이 3가지 정도 있을 수 있겠다. 플래시 메모리(코드 영역)에 직접 저장 하는 방식 SPIFFS에 저장하는 방식 SD Card에 저장하는 방식 이전 테스트에서 두가지 방식은 테스트 해보았고 SD Card에 저장해서 웹서버를 구현 하는 방법을 테스트 해 보자. ESP32는 내장 NOR 플래시메모리에 SPIFFS를 올려서 파일 시스템을 구현 할수 있지만 가장 큰 단점은 서브 이렉토리를 지원하지 않는다. SD Card를 이용하면 파일시스템의 대부분 기능을 활용 할수 있기 때문에 편리한점이 많다. ESP32 SD Card 테스트 예제를 이용해서 SD Card에서 웹페이지를 불러와 웹서버를 구현 할수 있다. #include #include #.. ESP32 실시간 웹서버 - MPU9250 IMU 그래프 출력 테스트 ESP32 실시간 웹서버 테스트 코드를 이용하여 MPU9250 의 Roll, Pitch, Yaw 그래프를 출력 하는 테스트를 진행해 보았다. 우선 MPU9250의 데이터를 이용해 이벤트를 만드는 부분은 mpu_9250_set.h 파일에 작성하고 추후 센서가 변경되면 헤더 파일만 바꿀 수 있는 구조로 했다. #include #include #include MPU9250 mpu; void setup_Sensor(){ Wire.begin(); delay(2000); if (!mpu.setup(0x68)) { while (1) { Serial.println("MPU connection failed."); delay(5000); } } Serial.println("MPU success"); } void Proce.. ESP32 웹서버 - 실시간 ADC 데이터 그래프 출력 지금까지 테스트 한 웹서버 예제는 출력 관련 예제 였는데 이번에는 웹페이지 측에서 입력을 받을 수 있는 테스트를 해보자 기존에 실시간 웹서버를 구현 하기 위해 AJAX를 사용 했지만 비동기 방식 웹서버를 이용하면 이벤트 방식으로 쉽게 구현이 가능하다. 우선 웹서버 초기화 시에 사용할 이벤트를 등록 한다. AsyncEventSource events("/events"); void InitWebServer() { server.addHandler(&events); server.on("/", onRootRequest); server.serveStatic("/", SPIFFS, "/"); server.begin(); } 웹페이지에 데이터를 보내기 위해 ESP32 보드에서는 event.send 함수를 사용하면 쉽게 .. ESP32 WebSocket 서버 테스트 기존에 테스트 했던 웹서버는 하나의 장치에 여러 클라이언트가 연결되어 있을경우 서버의 상태 변화가 발생하면 동기가 맞지 않는 현상이 있다. 이러한 문제에 대한 해결책으로 웹소켓을 사용하면 된다. 일반 웹서버에서는 HTTP 요청에서 실행되며 업데이트된 데이터를 가져오려면 웹 페이지를 완전히 새로 고쳐야 하는 단점이 있다. 이러한 단점을 극복하기 위해 나온것이 웹소켓 이다. 웹소켓(WebSocket)의 가장큰 특징은 전이중(서버와 클리이언트가 동시에 데이터를 보내고 받을수 있음) 프로토콜이다. 예를 들면 서버에 연결된 릴레이의 상태를 변경 시켰을때 모든 클라이언트(PC 웹페이지, 핸드폰 페이지, 원격지의 페이지)가 동일하게 상태를 변경시켜야 하는 예를 테스트 해볼 수 있다. 일반 웹서버는 http://로 시.. 이전 1 2 3 4 5 6 다음
