아두이노 우노 R4 - 웹 서버
이 가이드에서는 Arduino UNO R4 WiFi를 웹 서버로 작동시키는 방법을 보여드립니다. 컴퓨터나 스마트폰의 웹 브라우저를 사용하여 Arduino UNO R4 웹 서버의 웹 페이지에 접속할 수 있습니다. 이를 통해 Arduino UNO R4의 값을 보고 변경할 수 있습니다. 이 목적을 위해 Arduino UNO R4 WiFi를 프로그래밍 하기 위한 다음 단계를 배우게 됩니다:
- Arduino UNO R4 웹 서버 - 단일 페이지: 이것은 Arduino UNO R4의 센서 읽기를 웹 페이지에서 확인할 수 있도록 도와줍니다.
- Arduino UNO R4 웹 서버 - 단일 페이지: 우리는 웹 브라우저로 Arduino UNO R4를 관리할 수 있도록 할 것입니다.
- Arduino UNO R4 웹 서버 - 단일 페이지: Arduino IDE에서 HTML, CSS, JavaScript와 같은 HTML 요소를 다른 파일로 이동하는 방법을 배울 것입니다.
- Arduino UNO R4 웹 서버 - 여러 페이지: index.html, temperature.html, led.html, error_404.html, error_405.html 등을 포함한 다양한 웹 페이지를 만들 것입니다.
Hardware Preparation
| 1 | × | Arduino UNO R4 WiFi | Amazon | |
| 1 | × | USB Cable Type-C | 쿠팡 | Amazon | |
| 1 | × | (Recommended) Screw Terminal Block Shield for Arduino UNO R4 | 쿠팡 | Amazon | |
| 1 | × | (Recommended) Breadboard Shield For Arduino UNO R4 | 쿠팡 | Amazon | |
| 1 | × | (Recommended) Enclosure For Arduino UNO R4 | Amazon | |
| 1 | × | (Recommended) Power Splitter For Arduino UNO R4 | Amazon |
공개: 이 섹션에서 제공된 링크 중 일부는 제휴 링크입니다. 이 링크를 통해 구매한 경우 추가 비용없이 수수료를 받을 수 있습니다. 지원해 주셔서 감사합니다.
Arduino UNO R4를 통해 웹에서 센서 값 읽기
Arduino UNO R4 코드가 수행하는 작업:
- 웹 브라우저에서 HTTP 요청을 받는 웹 서버 구축하기.
- 웹 브라우저가 요청을 보내면 Arduino UNO R4는 다음과 같이 응답합니다:
- HTTP 헤더
- HTTP 본문: 이것은 HTML 내용과 센서 데이터를 포함합니다.
- Arduino Uno R4 WiFi/Minima를 처음 사용하는 경우, Arduino IDE에서 Arduino Uno R4 WiFi/Minima 환경 설정에 대한 튜토리얼을 참조하세요.
- USB 케이블을 사용하여 Arduino Uno R4 보드를 컴퓨터에 연결합니다.
- 컴퓨터에서 Arduino IDE를 실행합니다.
- 적절한 Arduino Uno R4 보드(예: Arduino Uno R4 WiFi)와 COM 포트를 선택하세요.
- 코드를 복사하여 Arduino IDE에서 엽니다.
- 코드에서 WiFi 세부 정보(SSID 및 비밀번호)를 자신의 것으로 교체하세요.
- Arduino IDE에서 Upload 버튼을 클릭하여 코드를 Arduino UNO R4에 업로드합니다.
- 시리얼 모니터를 엽니다.
- 시리얼 모니터에서 결과를 확인하세요.
- 표시된 IP 주소를 보고 스마트폰이나 컴퓨터의 웹 브라우저 주소창에 입력하세요.
- 그러면 직렬 모니터에서 이 정보를 볼 수 있습니다.
- 웹 브라우저에 IP 주소를 입력하면 Arduino UNO R4 보드에 대한 정보를 보여주는 간단한 웹페이지가 나타납니다. 페이지는 다음과 같이 나타납니다:
다음은 위에서 언급한 작업을 수행하는 Arduino UNO R4 코드입니다:
/*
* 이 Arduino UNO R4 코드는 newbiely.kr 에서 개발되었습니다
* 이 Arduino UNO R4 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다.
* 상세한 지침 및 연결도에 대해서는 다음을 방문하세요:
* https://newbiely.kr/tutorials/arduino-uno-r4/arduino-uno-r4-web-server
*/
#include <WiFiS3.h>
const char ssid[] = "YOUR_WIFI"; // change your network SSID (name)
const char pass[] = "YOUR_WIFI_PASSWORD"; // change your network password (use for WPA, or use as key for WEP)
int status = WL_IDLE_STATUS;
WiFiServer server(80);
float getTemperature() {
return 26.9456;
// YOUR SENSOR IMPLEMENTATION HERE
// simulate the temperature value
float temp_x100 = random(0, 10000); // a ramdom value from 0 to 10000
return temp_x100 / 100; // return the simulated temperature value from 0 to 100 in float
}
void setup() {
//Initialize serial and wait for port to open:
Serial.begin(9600);
String fv = WiFi.firmwareVersion();
if (fv < WIFI_FIRMWARE_LATEST_VERSION)
Serial.println("Please upgrade the firmware");
// attempt to connect to WiFi network:
while (status != WL_CONNECTED) {
Serial.print("Attempting to connect to SSID: ");
Serial.println(ssid);
// Connect to WPA/WPA2 network. Change this line if using open or WEP network:
status = WiFi.begin(ssid, pass);
// wait 10 seconds for connection:
delay(10000);
}
server.begin();
// you're connected now, so print out the status:
printWifiStatus();
}
void loop() {
// listen for incoming clients
WiFiClient client = server.available();
if (client) {
// read the HTTP request header line by line
while (client.connected()) {
if (client.available()) {
String HTTP_header = client.readStringUntil('\n'); // read the header line of HTTP request
if (HTTP_header.equals("\r")) // the end of HTTP request
break;
Serial.print("<< ");
Serial.println(HTTP_header); // print HTTP request to Serial Monitor
}
}
// send the HTTP response
// send the HTTP response header
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println("Connection: close"); // the connection will be closed after completion of the response
client.println(); // the separator between HTTP header and body
// send the HTTP response body
client.println("<!DOCTYPE HTML>");
client.println("<html>");
client.println("<head>");
client.println("<link rel=\"icon\" href=\"data:,\">");
client.println("</head>");
client.println("<p>");
client.print("Temperature: <span style=\"color: red;\">");
float temperature = getTemperature();
client.print(temperature, 2);
client.println("°C</span>");
client.println("</p>");
client.println("</html>");
client.flush();
// give the web browser time to receive the data
delay(10);
// close the connection:
client.stop();
}
}
void printWifiStatus() {
// print your board's IP address:
Serial.print("IP Address: ");
Serial.println(WiFi.localIP());
// print the received signal strength:
Serial.print("signal strength (RSSI):");
Serial.print(WiFi.RSSI());
Serial.println(" dBm");
}
Detailed Instructions
다음 지침을 단계별로 따르세요:
COM6
Attempting to connect to SSID: YOUR_WIFI
IP Address: 192.168.0.2
signal strength (RSSI):-39 dBm
Autoscroll
Clear output
9600 baud
Newline
COM6
Attempting to connect to SSID: YOUR_WIFI
IP Address: 192.168.0.2
signal strength (RSSI):-41 dBm
New HTTP Request
<< GET / HTTP/1.1
<< Host: 192.168.0.2
<< Connection: keep-alive
<< Cache-Control: max-age=0
<< Upgrade-Insecure-Requests: 1
<< User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)
<< Accept: text/html,application/xhtml+xml,application/xml
<< Accept-Encoding: gzip, deflate
<< Accept-Language: en-US,en;q=0.9
Autoscroll
Clear output
9600 baud
Newline
그래픽 사용자 인터페이스(UI)를 사용하여 멋진 웹 페이지를 만들려면 이 튜토리얼의 마지막 부분을 참조하세요.
웹을 통한 Arduino UNO R4 제어
Arduino UNO R4에 연결된 장치를 관리하는 것은 단순히 값을 확인하는 것보다 조금 더 복잡합니다. 이러한 복잡성은 웹 브라우저로부터 받은 명령을 해석하여 적절한 응답을 결정해야 하는 Arduino UNO R4 때문에 발생합니다. 다음은 Arduino UNO R4 코드가 이 상황을 처리하는 방법입니다:
- 웹 브라우저에서 HTTP 요청을 수신하는 웹 서버 구축.
- 브라우저로부터의 요청 처리:
- HTTP 요청 헤더 읽기.
- 필요한 제어 명령어를 알아내기 위해 HTTP 요청 헤더 검토.
- 제어 명령어에 따라 Arduino UNO R4를 사용하여 연결된 장치나 항목 제어.
- HTTP 응답 전송.
- 선택적으로, 제어 상태에 대한 세부 정보를 보여주기 위해 HTML 콘텐츠가 포함된 HTTP 응답 본문을 전송할 수도 있음 (필요한 경우).
더 나은 자세한 예를 위해 아래의 튜토리얼을 참조하세요.
아두이노 IDE에서 HTML 콘텐츠를 다른 파일로 분리하기
콘텐츠가 몇 개만 포함된 기본 웹 페이지를 만들려면 이전에 언급한 대로 Arduino UNO R4 코드에 HTML을 포함할 수 있습니다.
더 복잡하고 인상적인 웹페이지를 많은 콘텐츠와 함께 만들고 싶다면, 모든 HTML, CSS, 그리고 JavaScript 코드를 Arduino UNO R4 코드에 직접 넣는 것은 쉽지 않습니다. 이 경우, 코드를 처리하는 다른 방법을 사용할 수 있습니다.
- Arduino UNO R4 코드는 .ino라는 이름의 파일에 저장해야 합니다.
- HTML, CSS, Javascript가 포함된 HTML 코드는 .h라는 다른 파일에 저장해야 합니다. 이렇게 하면 웹 페이지 콘텐츠를 Arduino UNO R4 코드와 분리하여 관리 및 변경이 더 간단해집니다.
우리는 두 가지 주요 단계를 밟아야 합니다:
- HTML 콘텐츠 생성
- 아두이노 UNO R4 코딩
HTML 내용 준비하기
- I. 컴퓨터에 HTML 파일을 만드세요. 이 파일에는 HTML, CSS, JavaScript를 사용하여 사용자 인터페이스 디자인을 포함해야 합니다.
- I. HTML 파일에 Arduino UNO R4에서 받을 데이터를 표시할 자리 표시자를 넣으세요. 현재는 임의의 샘플 값을 사용하세요.
- I. 파일의 디자인을 확인하고 만족할 때까지 조정하세요.
- I. HTML 파일의 자리 표시자 값을 TEMPERATURE_MARKER와 같은 고유한 레이블로 교체하세요. 나중에 Arduino UNO R4 스크립트에서 String.replace("TEMPERATURE_MARKER", real_value); 명령을 사용하여 Arduino에서 실제 데이터를 표시할 것입니다.
- I. 다음으로, 이 HTML 콘텐츠를 Arduino IDE 내의 .h 파일로 전송할 것입니다.
아두이노 UNO R4 프로그래밍
- Arduino IDE를 시작하고 새 파일을 만드세요. 파일 이름을 다음과 같이 지정하세요: newbiely.com.ino.
- 아래에 제공된 코드를 가져와서 생성한 새 파일에 넣으세요.
/*
* 이 Arduino UNO R4 코드는 newbiely.kr 에서 개발되었습니다
* 이 Arduino UNO R4 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다.
* 상세한 지침 및 연결도에 대해서는 다음을 방문하세요:
* https://newbiely.kr/tutorials/arduino-uno-r4/arduino-uno-r4-web-server
*/
#include <WiFiS3.h>
#include "index.h"
const char ssid[] = "YOUR_WIFI"; // change your network SSID (name)
const char pass[] = "YOUR_WIFI_PASSWORD"; // change your network password (use for WPA, or use as key for WEP)
int status = WL_IDLE_STATUS;
WiFiServer server(80);
float getTemperature() {
// YOUR SENSOR IMPLEMENTATION HERE
// simulate the temperature value
float temp_x100 = random(0, 10000); // a ramdom value from 0 to 10000
return temp_x100 / 100; // return the simulated temperature value from 0 to 100 in float
}
void setup() {
//Initialize serial and wait for port to open:
Serial.begin(9600);
String fv = WiFi.firmwareVersion();
if (fv < WIFI_FIRMWARE_LATEST_VERSION)
Serial.println("Please upgrade the firmware");
// attempt to connect to WiFi network:
while (status != WL_CONNECTED) {
Serial.print("Attempting to connect to SSID: ");
Serial.println(ssid);
// Connect to WPA/WPA2 network. Change this line if using open or WEP network:
status = WiFi.begin(ssid, pass);
// wait 10 seconds for connection:
delay(10000);
}
server.begin();
// you're connected now, so print out the status:
printWifiStatus();
}
void loop() {
// listen for incoming clients
WiFiClient client = server.available();
if (client) {
// read the HTTP request header line by line
while (client.connected()) {
if (client.available()) {
String HTTP_header = client.readStringUntil('\n'); // read the header line of HTTP request
if (HTTP_header.equals("\r")) // the end of HTTP request
break;
Serial.print("<< ");
Serial.println(HTTP_header); // print HTTP request to Serial Monitor
}
}
// send the HTTP response
// send the HTTP response header
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println("Connection: close"); // the connection will be closed after completion of the response
client.println(); // the separator between HTTP header and body
// send the HTTP response body
float temp = getTemperature();
String html = String(HTML_CONTENT);
html.replace("TEMPERATURE_MARKER", String(temp, 2)); // replace the marker by a real value
client.println(html);
client.flush();
// give the web browser time to receive the data
delay(10);
// close the connection:
client.stop();
}
}
void printWifiStatus() {
// print your board's IP address:
Serial.print("IP Address: ");
Serial.println(WiFi.localIP());
// print the received signal strength:
Serial.print("signal strength (RSSI):");
Serial.print(WiFi.RSSI());
Serial.println(" dBm");
}
- WiFi 세부 정보를 사용하여 코드 업데이트(SSID 및 비밀번호)
- Arduino IDE에서 index.h라는 파일을 만드세요
- 시리얼 모니터 아이콘 아래의 버튼을 클릭하고 새 탭을 선택하거나 Ctrl+Shift+N을 누르세요.
- 파일 이름을 index.h로 지정하고 OK 버튼을 누르세요.
- 아래 코드를 복사하여 index.h라는 파일에 붙여넣으세요.
/*
* 이 Arduino UNO R4 코드는 newbiely.kr 에서 개발되었습니다
* 이 Arduino UNO R4 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다.
* 상세한 지침 및 연결도에 대해서는 다음을 방문하세요:
* https://newbiely.kr/tutorials/arduino-uno-r4/arduino-uno-r4-web-server
*/
const char *HTML_CONTENT = R""""(
REPLACE_YOUR_HTML_CONTENT_HERE
)"""";
- 준비한 HTML 콘텐츠를 REPLACE_YOUR_HTML_CONTENT_HERE에 삽입하세요. 줄 바꿈 문자를 사용하는 것도 괜찮습니다. 다음은 index.h 파일의 예입니다:
/*
* 이 Arduino UNO R4 코드는 newbiely.kr 에서 개발되었습니다
* 이 Arduino UNO R4 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다.
* 상세한 지침 및 연결도에 대해서는 다음을 방문하세요:
* https://newbiely.kr/tutorials/arduino-uno-r4/arduino-uno-r4-web-server
*/
const char *HTML_CONTENT = R""""(
<!DOCTYPE html>
<html>
<head>
<title>Arduino Uno R4 - Web Temperature</title>
<meta name="viewport" content="width=device-width, initial-scale=0.7, maximum-scale=0.7">
<meta charset="utf-8">
<link rel="icon" href="https://diyables.io/images/page/diyables.svg">
<style>
body { font-family: "Georgia"; text-align: center; font-size: width/2pt;}
h1 { font-weight: bold; font-size: width/2pt;}
h2 { font-weight: bold; font-size: width/2pt;}
button { font-weight: bold; font-size: width/2pt;}
</style>
<script>
var cvs_width = 200, cvs_height = 450;
function init() {
var canvas = document.getElementById("cvs");
canvas.width = cvs_width;
canvas.height = cvs_height + 50;
var ctx = canvas.getContext("2d");
ctx.translate(cvs_width/2, cvs_height - 80);
update_view(TEMPERATURE_MARKER);
}
function update_view(temp) {
var canvas = document.getElementById("cvs");
var ctx = canvas.getContext("2d");
var radius = 70;
var offset = 5;
var width = 45;
var height = 330;
ctx.clearRect(-cvs_width/2, -350, cvs_width, cvs_height);
ctx.strokeStyle="blue";
ctx.fillStyle="blue";
//5-step Degree
var x = -width/2;
ctx.lineWidth=2;
for (var i = 0; i <= 100; i+=5) {
var y = -(height - radius)*i/100 - radius - 5;
ctx.beginPath();
ctx.lineTo(x, y);
ctx.lineTo(x - 20, y);
ctx.stroke();
}
//20-step Degree
ctx.lineWidth=5;
for (var i = 0; i <= 100; i+=20) {
var y = -(height - radius)*i/100 - radius - 5;
ctx.beginPath();
ctx.lineTo(x, y);
ctx.lineTo(x - 25, y);
ctx.stroke();
ctx.font="20px Georgia";
ctx.textBaseline="middle";
ctx.textAlign="right";
ctx.fillText(i.toString(), x - 35, y);
}
// shape
ctx.lineWidth=16;
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2 * Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.rect(-width/2, -height, width, height);
ctx.stroke();
ctx.beginPath();
ctx.arc(0, -height, width/2, 0, 2 * Math.PI);
ctx.stroke();
ctx.fillStyle="#e6e6ff";
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2 * Math.PI);
ctx.fill();
ctx.beginPath();
ctx.rect(-width/2, -height, width, height);
ctx.fill();
ctx.beginPath();
ctx.arc(0, -height, width/2, 0, 2 * Math.PI);
ctx.fill();
ctx.fillStyle="#ff1a1a";
ctx.beginPath();
ctx.arc(0, 0, radius - offset, 0, 2 * Math.PI);
ctx.fill();
temp = Math.round(temp * 100) / 100;
var y = (height - radius)*temp/100.0 + radius + 5;
ctx.beginPath();
ctx.rect(-width/2 + offset, -y, width - 2*offset, y);
ctx.fill();
ctx.fillStyle="red";
ctx.font="bold 34px Georgia";
ctx.textBaseline="middle";
ctx.textAlign="center";
ctx.fillText(temp.toString() + "°C", 0, 100);
}
window.onload = init;
</script>
</head>
<body>
<h1>Arduino - Web Temperature</h1>
<canvas id="cvs"></canvas>
</body>
</html>
)"""";
- 이제 코드가 두 개의 파일에 있습니다: newbiely.com.ino 및 index.h
- Arduino IDE에서 Upload 버튼을 클릭하여 코드를 Arduino UNO R4로 전송하세요.
- 이전과 마찬가지로 웹 브라우저에서 Arduino UNO R4 보드의 웹 페이지를 엽니다. 다음과 같이 나타날 것입니다:
자세한 안내는 Arduino UNO R4 - DS18B20 온도 센서를 웹을 통해 사용하기 튜토리얼을 참조하세요.
※ NOTE THAT:
"index.h"라는 파일의 HTML을 변경하더라도 "newbiely.com.ino" 파일을 변경하지 않으면, Arduino IDE는 코드를 컴파일하고 ESP32에 업로드할 때 HTML을 업데이트하지 않습니다.
Arduino IDE가 HTML을 업데이트하도록 하려면 "newbiely.com.ino" 파일에서 무언가를 변경해야 합니다. 빈 줄이나 주석을 추가할 수 있습니다. 이렇게 하면 프로젝트가 변경되었음을 IDE에 알리며, 업로드 시 새로운 HTML을 포함하게 됩니다.
아두이노 UNO R4 웹 서버 - 다중 페이지
이 튜토리얼을 방문하세요: Arduino UNO R4 - 웹 서버 다중 페이지.