본문 바로가기
RaspberryPi/RP2040_W6100

[RP2040_W6100] 웹서버 테스트 - Base64 인코딩 방식 이미지 출력하기

nexp 2024. 1. 1. 10:23

 

 

 

 

[RP2040_W5500] 보드를 이용하여 웹페이지 출력 테스트 예제를 참고로 W6100에서 웹서버 예제를 테스트 해 보자

 

[RP2040_W5500] Webserver 테스트

지난 포스트에서 Ethernet_Generic 라이브러리를 이용해서 이더넷 전송 속도 개선을 했고 이제 웹서버를 구현 해 보자 웹서버의 가장 기본이 되는 뼈대 코드를 작성해보자. 새로운 라이브러리로 ESP32

nexp.tistory.com

 

이번에는 이미지를 출력해 보면 좋을것 같다.

 

웹페이지에 이미지를 출력하는 방법은 여러 가지가 있지만 가장 간단하게 할 수 있는 Base64 인코딩 방식으로 이미지를 출력 해보자

 

#define USE_W5100                           false
#define USE_THIS_SS_PIN                     17

#define SerialDebug   Serial
#define DEBUG_ETHERNET_GENERIC_PORT         SerialDebug
#define DEBUG_ETHERNET_WEBSERVER_PORT       SerialDebug
#define USE_UIP_ETHERNET   false

#define USE_ETHERNET_GENERIC  true
#define USE_ETHERNET_ESP8266  false
#define USE_ETHERNET_ENC      false
#define USE_CUSTOM_ETHERNET   false

#define ETHERNET_USE_RPIPICO      true

#define USING_W6100                         true

byte mac[] =	{ 0x00, 0x08, 0xDC, 0x00, 0x00, 0x00 };


#include <SPI.h>
#include "Ethernet_Generic.h"
#include <EthernetWebServer.h>

EthernetWebServer server(80);

const int Led1Pin = 25;

const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE html>
<html>
    <meta name="viewport" content="width=device-width, initial-scale=1">
<body>
    <h1><center>LED - Control</h1><br>
    <p style="text-align: center;">
    <a href="On">
  <center>
    <div>
<img alt="led_on1.jpg" 
src="data:image/jpeg;base64,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">
    </div>
    </center>
    </a>        
</center>
</script>
</div>
</body>
</html>
)rawliteral";

void handle_root()
{
  server.send(200, "text/html", index_html);
}

void handleNotFound()
{
  String message = F("File Not Found\n\n");

  message += F("URI: ");
  message += server.uri();
  message += F("\nMethod: ");
  message += (server.method() == HTTP_GET) ? F("GET") : F("POST");
  message += F("\nArguments: ");
  message += server.args();
  message += F("\n");

  for (uint8_t i = 0; i < server.args(); i++)
  {
    message += " " + server.argName(i) + ": " + server.arg(i) + "\n";
  }

  server.send(404, F("text/plain"), message);

  digitalWrite(Led1Pin, 0);
}

void initWebServer() 
{
  //페이지 요청 처리 함수 등록
  server.on("/", handle_root);
  server.onNotFound(handleNotFound);

  server.begin();
}

void setup()
{
  pinMode(Led1Pin, OUTPUT);
  digitalWrite(Led1Pin, 1);

  // Open serial communications and wait for port to open:
  SerialDebug.begin(115200);

  while (!SerialDebug && millis() < 5000);

  SerialDebug.print("\nStarting HelloServer2 on ");
  SerialDebug.print(BOARD_NAME);
  SerialDebug.print(F(" with "));
  SerialDebug.println(ETHERNET_WEBSERVER_VERSION);

  Ethernet.init (USE_THIS_SS_PIN);

  // start the ethernet connection and the server:
  // Use Static IP
  Ethernet.begin(mac);

  SerialDebug.print(F("Connected! IP address: "));
  SerialDebug.println(Ethernet.localIP());

  initWebServer();

  SerialDebug.print(F("HTTP HelloServer2 started @ IP : "));
  SerialDebug.println(Ethernet.localIP());
}

void loop()
{
  server.handleClient();
}

 

 

컴파일후 다운로드 해 보면 이미지가 출력 되는것을 확인 할 수 있다.

 

 

이제 이미지 클릭시 보드의 LED를 제어 할수 있도록 해보자

 

우선 클릭에 따라 이미지를 쉽게 바꿀 수 있도록 웹페이지를 수정하자. 변경되어야 할 부분을 $ 으로 표기 해서 쉽게 바꿀 수 있도록 했다.

#define STR_LED_ON_IMG F("/9j/4AAQSkZJRgABAQEBLAEsAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQ...")
#define STR_LED_OFF_IMG F("/9j/4AAQSkZJRgABAQEBLAEsAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBA...")

const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE html>
<html>
    <meta name="viewport" content="width=device-width, initial-scale=1">
<body>
    <h1><center>$LED_STATUS$</h1><br>
    <p style="text-align: center;">
    <a href="$LED_URL$">
  <center>
    <div>
<img alt="led_on1.jpg" 
src="data:image/jpeg;base64,$IMAGE_LED1$">
    </div>
    </center>
    </a>        
</center>
</script>
</div>
</body>
</html>
)rawliteral";

 

 

홈페이지 접속시 호출되는 함수에서 상태에 따라서 replace 함수로 페이지 내용을 바꿀수 있도록 하자 

void handle_root()
{
  String str_new_page = index_html;

  str_new_page.replace("$LED_STATUS$", "LED - ON");
  str_new_page.replace("$LED_URL$", "On");
  
  str_new_page.replace("$IMAGE_LED1$", STR_LED_ON_IMG);

  server.send(200, "text/html", str_new_page);
}

 

 

 

이미지 클릭시 처리 하는 함수도 수정한다.

//On 버튼 페이지 처리함수
void SetLedStatusOn()
{
  Serial.println("On");
  digitalWrite(Led1Pin, 1);

  String str_new_page = index_html;

  str_new_page.replace("$LED_STATUS$", "LED - OFF");
  str_new_page.replace("$LED_URL$", "Off");
  
  str_new_page.replace("$IMAGE_LED1$", STR_LED_OFF_IMG);


  server.send(200, "text/html", str_new_page);
}

//Off 버튼 페이지 처리함수
void SetLedStatusOff()
{
    Serial.println("Off");
    digitalWrite(Led1Pin, 0);

  String str_new_page = index_html;

  str_new_page.replace("$LED_STATUS$", "LED - ON");
  str_new_page.replace("$LED_URL$", "On");
  
  str_new_page.replace("$IMAGE_LED1$", STR_LED_ON_IMG);

    server.send(200, "text/html", str_new_page);
}


void initWebServer() 
{
  //페이지 요청 처리 함수 등록
  server.on("/", handle_root);
  server.on("/On", HTTP_GET, SetLedStatusOn);
  server.on("/Off", HTTP_GET, SetLedStatusOff);

  server.onNotFound(handleNotFound);

  server.begin();
}

 

 

 

수정 프로그램을 실행하면 이미지를 출력하면서 LED On/Off를 웹페이지에서 제어 할수 있다.

 

 

 

반응형
저작자표시 비영리 변경금지

'RaspberryPi/RP2040_W6100' Related Articles

티스토리툴바