지난 포스트에서 Ethernet_Generic 라이브러리를 이용해서 이더넷 전송 속도 개선을 했고 이제 웹서버를 구현 해 보자
웹서버의 가장 기본이 되는 뼈대 코드를 작성해보자. 새로운 라이브러리로 ESP32에서 테스트 했던 기본 웹서버 코드와 거의 동일한 코드로 작성할 수 있다.
#include "config.h"
#include <SPI.h>
#include "Ethernet_Generic.h"
#include <EthernetWebServer.h>
#define ETHERNET_USE_RPIPICO true
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0x01 };
EthernetWebServer server(80);
const int Led1Pin = 25;
// HTML 페이지
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
<title>Web Server Test</title>
<style>
</style>
</head>
<body>
<center>
<div class='container'>
<h1>[RP2040_W5500] LED Control</h1>
<a href="on"><button>LED On</button></a><p>
<br>
<a href="off"><button>LED Off</button></a><p>
</div>
</center>
</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);
}
//On 버튼 페이지 처리함수
void SetLedStatusOn()
{
Serial.println("On");
digitalWrite(Led1Pin, 0);
server.send(200, "text/html", index_html);
}
//Off 버튼 페이지 처리함수
void SetLedStatusOff()
{
Serial.println("Off");
digitalWrite(Led1Pin, 1);
server.send(200, "text/html", index_html);
}
void initWebServer()
{
//페이지 요청 처리 함수 등록
server.on("/", handle_root);
server.on("/on", HTTP_GET, SetLedStatusOn);
server.on("/off", HTTP_GET, SetLedStatusOff);
server.onNotFound(handleNotFound);
server.begin();
}
void setup()
{
pinMode(Led1Pin, OUTPUT);
digitalWrite(Led1Pin, 1);
pinMode(13, OUTPUT);
digitalWrite(13, 1);
SerialDebug.begin(115200);
while (!SerialDebug && millis() < 5000);
SerialDebug.print("Starting Web Server");
SerialDebug.println(ETHERNET_WEBSERVER_VERSION);
Ethernet.init (USE_THIS_SS_PIN);
#if defined(BOARD_NAME)
ET_LOGWARN3(F("Board :"), BOARD_NAME, F(", setCsPin:"), USE_THIS_SS_PIN);
#else
ET_LOGWARN1(F("Unknown board setCsPin:"), USE_THIS_SS_PIN);
#endif
// start the ethernet connection and the server:
Ethernet.begin(mac);
SerialDebug.print(F("Connected! IP address: "));
SerialDebug.println(Ethernet.localIP());
initWebServer();
SerialDebug.print("HTTP Server started @ IP : "));
SerialDebug.println(Ethernet.localIP());
}
void loop()
{
server.handleClient();
}
CSS 스타일 코드를 수정해서 좀더 보괴 좋은 페이지로 수정하면...
<!DOCTYPE html>
<html>
<head>
<title> remote control</title>
<style>
.container {margin: 0 auto; text-align: center; margin-top: 50px; }
button {color: white; width: 100px; height: 100px;
border-radius: 20%; margin: 5px; border: none; font-size: 20px; outline: none; transition: all 0.2s;}
.red{background-color: rgb(196, 39, 39);}
.green{background-color: rgb(39, 121, 39);}
.blue {background-color: rgb(5, 87, 180);}
.off{background-color: grey;}
button:hover{cursor: pointer; opacity: 0.7;}
</style>
</head>
<body>
<div class='container'>
<h1>RGB LED Control</h1>
<button class='red' type='submit' onclick='location.href="/RledOn"'>ON</button>
<button class='off' type='submit' onmousedown='location.href="/RledOff"'>OFF</button><br>
</div>
</body>
</html>
아래와 같이 간단한 On/Off 제어를 할 수 있는 웹서버 페이지를 테스트 해 볼 수 있다.
반응형
