아두이노 우노 R4 WiFi가 웹을 통해 LED를 제어합니다

이 튜토리얼에서는 PC나 스마트폰의 브라우저를 사용하여 웹 인터페이스를 통해 LED를 제어하는 방법을 배우게 됩니다. 이를 위해 아두이노 우노 R4 WiFi를 사용하게 됩니다. 구체적으로, 아두이노 우노 R4 WiFi는 웹 서버로 작동하도록 프로그래밍됩니다. 아두이노 우노 R4 WiFi의 IP 주소가 192.168.0.2라고 가정합시다. 작동 방식에 대한 세부 사항은 다음과 같습니다:

아두이노 우노 R4 LED web browser

이 튜토리얼은 당신이 다음을 달성하기 위해 쉽고 창의적으로 맞춤 설정할 수 있는 기본 사항을 제공합니다:

준비물

1×아두이노 우노 R4 와이파이 쿠팡 | 아마존
1×(또는) DIYables STEM V4 IoT 쿠팡 | 아마존
1×USB 케이블 타입-A to 타입-C (USB-A PC용) 쿠팡 | 아마존
1×USB 케이블 타입-C to 타입-C (USB-C PC용) 아마존
1×LED 쿠팡 | 아마존
1×LED Module 아마존
1×220Ω Resistor 아마존
1×브레드보드 쿠팡 | 아마존
1×점퍼케이블 쿠팡 | 아마존
1×(추천) 아두이노 우노 R4용 스크루 터미널 블록 쉴드 쿠팡 | 아마존
1×(추천) Sensors/Servo Expansion Shield for Arduino UNO R4 쿠팡 | 아마존
1×(추천) 아두이노 우노 R4용 브레드보드 쉴드 쿠팡 | 아마존
1×(추천) 아두이노 우노 R4용 케이스 쿠팡 | 아마존
1×(추천) 아두이노 우노 R4용 전원 분배기 쿠팡 | 아마존
1×(추천) 아두이노 우노용 프로토타이핑 베이스 플레이트 & 브레드보드 키트 아마존
공개: 이 포스팅 에 제공된 일부 링크는 아마존 제휴 링크입니다. 이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
Arduino Uno R4 WiFi Compatible Boards

LED와 Arduino Uno R4에 대하여

LED와 Arduino Uno R4(핀배열, 작동 방법, 프로그래밍 방법 등)에 대해 잘 모른다면, 다음 튜토리얼을 통해 배워보세요:

선연결

아두이노 우노 R4 와이파이 LED 연결 배선도

이 이미지는 Fritzing을 사용하여 만들어졌습니다. 이미지를 확대하려면 클릭하세요.

아두이노 코드

/* * 이 아두이노 코드는 newbiely.kr 에서 개발되었습니다 * 이 아두이노 코드는 어떠한 제한 없이 공개 사용을 위해 제공됩니다. * 상세한 지침 및 연결도에 대해서는 다음을 방문하세요: * https://newbiely.kr/tutorials/arduino/arduino-uno-r4-wifi-controls-led-via-web */ #include <WiFiS3.h> const int LED_PIN = 9; // Arduino 핀이 LED의 핀에 연결됨 const char ssid[] = "YOUR_WIFI"; // 네트워크 SSID(이름)를 변경하세요 const char pass[] = "YOUR_WIFI_PASSWORD"; // 네트워크 비밀번호 변경하세요 (WPA용이거나 WEP 키로 사용) int status = WL_IDLE_STATUS; WiFiServer server(80); void setup() { //직렬을 초기화하고 포트가 열릴 때까지 기다립니다: Serial.begin(9600); pinMode(LED_PIN, OUTPUT); // 아두이노 핀을 출력 모드로 설정 String fv = WiFi.firmwareVersion(); if (fv < WIFI_FIRMWARE_LATEST_VERSION) { Serial.println("Please upgrade the firmware"); } // WiFi 네트워크에 연결을 시도합니다: while (status != WL_CONNECTED) { Serial.print("Attempting to connect to SSID: "); Serial.println(ssid); // WPA/WPA2 네트워크에 연결. 오픈 또는 WEP 네트워크를 사용하는 경우 이 줄을 변경하세요: status = WiFi.begin(ssid, pass); // 연결을 위해 10초 동안 기다립니다: delay(10000); } server.begin(); // 이제 연결되었으므로 상태를 출력합니다: printWifiStatus(); } void loop() { // 들어오는 클라이언트를 청취합니다 WiFiClient client = server.available(); if (client) { // HTTP 요청 헤더의 첫 번째 줄을 읽습니다 String HTTP_req = ""; while (client.connected()) { if (client.available()) { Serial.println("New HTTP Request"); HTTP_req = client.readStringUntil('\n'); // HTTP 요청의 첫 번째 줄을 읽습니다 Serial.print("<< "); Serial.println(HTTP_req); // HTTP 요청을 직렬 모니터에 출력합니다 break; } } // HTTP 요청 헤더의 나머지 줄을 읽습니다 while (client.connected()) { if (client.available()) { String HTTP_header = client.readStringUntil('\n'); // HTTP 요청의 헤더 줄을 읽습니다 if (HTTP_header.equals("\r")) // HTTP 요청의 끝 break; Serial.print("<< "); Serial.println(HTTP_header); // HTTP 요청을 직렬 모니터에 출력합니다 } } if (HTTP_req.indexOf("GET") == 0) { // 요청 메서드가 GET인지 확인 // 예상 헤더는 다음 중 하나입니다: // - GET led1/on // - GET led1/off if (HTTP_req.indexOf("led1/on") > -1) { // 경로를 확인합니다 digitalWrite(LED_PIN, HIGH); // LED를 켭니다 Serial.println("Turned LED on"); } else if (HTTP_req.indexOf("led1/off") > -1) { // 경로를 확인합니다 digitalWrite(LED_PIN, LOW); // LED를 끕니다 Serial.println("Turned LED off"); } else { Serial.println("No command"); } } // HTTP 응답을 보냅니다 // HTTP 응답 헤더를 보냅니다 client.println("HTTP/1.1 200 OK"); client.println("Content-Type: text/html"); client.println("Connection: close"); // 응답 완료 후 연결이 닫힙니다 client.println(); // HTTP 헤더와 본문 사이의 구분자 // HTTP 응답 본문을 보냅니다 client.println("<!DOCTYPE HTML>"); client.println("<html>"); client.println("<head>"); client.println("<link rel=\"icon\" href=\"data:,\">"); client.println("</head>"); client.println("<a href=\"/led1/on\">LED ON</a>"); client.println("<br><br>"); client.println("<a href=\"/led1/off\">LED OFF</a>"); client.println("</html>"); client.flush(); // 웹 브라우저가 데이터를 받는 데 시간을 줍니다 delay(10); // 연결을 닫습니다: client.stop(); } } void printWifiStatus() { // 보드의 IP 주소를 출력합니다: Serial.print("IP Address: "); Serial.println(WiFi.localIP()); // 수신 신호 강도를 출력합니다: Serial.print("signal strength (RSSI):"); Serial.print(WiFi.RSSI()); Serial.println(" dBm"); }

사용 방법

  • 이것이 Arduino Uno R4를 처음 사용하는 경우, 아두이노 우노 R4를 시작하는 방법을 참조하세요.
  • 위의 코드를 복사하고 Arduino IDE로 열기
  • 코드 내의 와이파이 정보(SSID와 비밀번호)를 귀하의 것으로 변경하세요
  • Arduino IDE에서 Upload 버튼을 클릭하여 코드를 Arduino에 업로드하세요
  • 시리얼 모니터를 엽니다
  • 시리얼 모니터에서 결과를 확인하세요.
Newbiely | Arduino IDE 2.3.8
──
File
Edit
Sketch
Tools
Help
Arduino Uno
Newbiely.ino
···
8 Serial.println("Hello World!");
Output
Serial Monitor
Message (Enter to send message to 'Arduino Uno' on 'COM15')
New Line
9600 baud
Attempting to connect to SSID: YOUR_WIFI IP Address: 192.168.0.2 signal strength (RSSI):-39 dBm
Ln 11, Col 1
Arduino Uno on COM15
2
  • IP 주소를 볼 수 있습니다. 예를 들어: 192.168.0.2. 이것은 아두이노 웹 서버의 IP 주소입니다.
  • 웹 브라우저를 열고 아래 세 가지 형식 중 하나를 주소 창에 입력하세요:
192.168.0.2
192.168.0.2/led1/on
192.168.0.2/led1/off
  • IP 주소가 변경될 수 있으니 유의하시기 바랍니다. 시리얼 모니터에서 현재 값을 확인하십시오.
  • 시리얼 모니터에서 아래 출력도 확인하실 수 있습니다.
Newbiely | Arduino IDE 2.3.8
──
File
Edit
Sketch
Tools
Help
Arduino Uno
Newbiely.ino
···
8 Serial.println("Hello World!");
Output
Serial Monitor
Message (Enter to send message to 'Arduino Uno' on 'COM15')
New Line
9600 baud
Connecting to YOUR_WIFI_SSID connected! IP address: 192.168.0.254 Starting web server on IP: 192.168.0.254 === Web Server Ready! === Visit: http://192.168.0.254 Method: GET Requested path: /led1/on Client disconnected
Ln 11, Col 1
Arduino Uno on COM15
2
  • LED 상태 확인
  • 아래와 같이 웹 브라우저에서 아두이노 보드의 웹 페이지를 볼 수 있습니다
아두이노 우노 R4 LED web browser

웹 인터페이스를 통해 LED 켜기/끄기를 제어할 수 있습니다.

위의 코드를 다음을 달성하기 위해 쉽고 혁신적으로 사용자 정의할 수 있습니다:

  • 웹을 통해 여러 LED 제어하기
  • 웹 사용자 인터페이스(UI) 재설계하기

웹 페이지의 모습을 인상적인 그래픽 사용자 인터페이스(UI)로 향상시키고자 한다면, 영감과 지침을 얻기 위해 아두이노 - 웹 서버 튜토리얼을 참고할 수 있습니다.