본문 바로가기

webserver

 (47)
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://로 시..
ESP32 비동기 AsyncWebServer - SPIFFS 사용 ESP32 웹서버 테스트시 좀더 화려한 웹페이지를 만들기 위해 HTML 코드나 CCS 파일을 수정하는 일이 많은데 이번에는 ESP32의 SPIFFS 파일 시스템에 올려서 웹서버를 구현 하는 테스트를 해 보았다. 이렇게 하면 웹페이지만 변경하기도 쉽고 좀더 효율적으로 관리 할 수 있을것 같다. 이번에도 SPIFF 기반의 웹서버가 동작하는 가장 기본이 되는 코드를 작성해 보자. #ifdef ESP32 // ESP32 libraries #include #include #else // ESP8266 libraries #include #include #endif #include #include // SSID & Password const char *ssid = " "; const char *password = "..
ESP32 비동기 AsyncWebServer ESP32에서 웹서버 구현 방법에는 여러가지가 있는데 이번에는 장점이 많은 비동기 웹서버를 이용하여 구현해 보았다. 장점이 있지만 라이브러리가 필요하다. ESPAsyncTCP, ESPAsyncWebServer (https://github.com/me-no-dev/ESPAsyncWebServer) 지난번 기본 라이브러리로 제공하는 ESP32 동기식 웹서버 예제와 같이 이번에도 가장 기본이 되는 웹서버 코드로 구현 해 보자 #ifdef ESP32 // ESP32 libraries #include #include #else // ESP8266 libraries #include #include #endif #include // SSID & Password const char *ssid = " "; const c..
ESP32 Simple Web Sever 테스트 ESP32 에서 제공하는 기본 라이브러리를 이용해 가장 간단한 웹서버 예제를 작성 해 보자 WiFi에 접속하고 페이지 요청 들어 오면 간단한 HTML 페이지를 전송하는 코드 이다. #include #include // SSID & Password const char *ssid = ""; const char *password = ""; WebServer server(80); // Object of WebServer(HTTP port, 80 is defult) void handle_root(); // HTML 페이지 #if 1 const char index_html[] PROGMEM = R"rawliteral( ESP32 Simple Web Server - 😊 )rawliteral"; #endif //페이지..
[STM32F4-RP] OV2640 카메라 테스트1 - W5300을 웹서버를 이용한 영상 전송 [STM32F4-RP] OV2640 카메라를 테스트 해보자. W5300에서 웹서버 테스트코드를 활용해서 웹에서 영상을 볼 수 있도록 해볼 예정이다. STM32 DCMI 회로도 [STM32F4-RP] 보드의 카메라 인터페이스(DCMI) 핀맵은 아래 그림과 같다. STM32CubeIDE 설정 STM32에서 카메라는 DCMI 장치에서 설정 할 수 있다. STM32CubeIDE 를 이용하여 DCMI설정을 해 준다. 인터럽트를 사용할 수 있도록 설정하고 DMA 설정도 해 준다. 카메라 모듈에는 Master 클럭을 입력해 주어야 하는데 STM32의 PA8을 MCO로 설정하여 16Mhz의 시스템 클럭이 출력 되도록 해 주었다. 카메라관련 설정은 I2C 인터페이스로 가능하고 I2C2를 활성화 하도록 했다. 설정을 완료..

티스토리툴바