아두이노 웹 디지털 핀 예제 디지털 핀 제어 인터페이스 튜토리얼
WebDigitalPins 예제는 Arduino의 모든 디지털 핀을 제어하고 실시간으로 모니터링할 수 있는 웹 기반 인터페이스를 제공합니다. Arduino Uno R4 WiFi 및 DIYables STEM V4 IoT용으로 설계된 교육 플랫폼으로, 향상된 GPIO 기능, 확장된 핀 구성 및 디지털 전자공학 학습을 위한 내장 교육 기능을 갖추고 있습니다. 핀을 켜고 끄고, 상태를 실시간으로 모니터링하며, 직관적인 웹 인터페이스를 통해 일괄 작업도 수행할 수 있습니다.
개별 핀 제어: 각 디지털 핀(0-13)을 개별적으로 제어
실시간 상태: 시각적 지표로 핀 상태를 모니터링
일괄 작업: 모든 핀을 한 번에 제어(모두 켜기, 모두 끄기, 모두 토글)
핀 구성: 웹 인터페이스를 통해 입력 또는 출력으로 핀 설정
시각적 피드백: 핀 상태를 표시하는 색상 코드 버튼(초록=켜짐, 빨강=꺼짐)
반응형 디자인: 데스크탑, 태블릿, 모바일 기기에서 작동
WebSocket 통신: 페이지 새로 고침 없이 즉시 업데이트
| 1 | × | 아두이노 우노 R4 와이파이 | 쿠팡 | 아마존 | |
| 1 | × | (또는) DIYables STEM V4 IoT | 쿠팡 | 아마존 | |
| 1 | × | USB 케이블 타입-A to 타입-C (USB-A PC용) | 쿠팡 | 아마존 | |
| 1 | × | USB 케이블 타입-C to 타입-C (USB-C PC용) | 아마존 | |
| 1 | × | (추천) 아두이노 우노 R4용 스크루 터미널 블록 쉴드 | 쿠팡 | 아마존 | |
| 1 | × | (추천) 아두이노 우노 R4용 브레드보드 쉴드 | 쿠팡 | 아마존 | |
| 1 | × | (추천) 아두이노 우노 R4용 케이스 | 쿠팡 | 아마존 | |
| 1 | × | (추천) 아두이노 우노 R4용 전원 분배기 | 쿠팡 | 아마존 | |
| 1 | × | (추천) 아두이노 우노용 프로토타이핑 베이스 플레이트 & 브레드보드 키트 | 아마존 | |
공개: 이 포스팅 에 제공된 일부 링크는 아마존 제휴 링크입니다. 이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
다음 지시를 단계별로 따라가세요:
이것이 Arduino Uno R4 WiFi/DIYables STEM V4 IoT를 처음 사용하는 경우, Arduino IDE에서 Arduino Uno R4 WiFi/DIYables STEM V4 IoT의 환경 설정에 대한 튜토리얼을 참조하십시오
아두이노 우노 R4 - 소프트웨어 설치.
USB 케이블을 사용하여 컴퓨터에 Arduino Uno R4/DIYables STEM V4 IoT 보드를 연결합니다.
컴퓨터에서 Arduino IDE를 실행합니다.
적절한 Arduino Uno R4 보드(예: Arduino Uno R4 WiFi)와 COM 포트를 선택합니다.
Arduino IDE의 왼쪽 바에 있는 Libraries 아이콘으로 이동합니다.
"DIYables WebApps"를 검색한 후, DIYables에서 제공하는 DIYables WebApps 라이브러리를 찾습니다.
라이브러리를 설치하려면 Install 버튼을 클릭합니다.


#include <DIYablesWebApps.h>
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
UnoR4ServerFactory serverFactory;
DIYablesWebAppServer webAppsServer(serverFactory, 80, 81);
DIYablesHomePage homePage;
DIYablesWebDigitalPinsPage webDigitalPinsPage;
int pinStates[16] = { 0 };
void setup() {
Serial.begin(9600);
delay(1000);
Serial.println("DIYables WebApp - Web Digital Pins Example");
webAppsServer.addApp(&homePage);
webAppsServer.addApp(&webDigitalPinsPage);
webAppsServer.setNotFoundPage(DIYablesNotFoundPage());
webDigitalPinsPage.enablePin(0, WEB_PIN_OUTPUT);
webDigitalPinsPage.enablePin(1, WEB_PIN_OUTPUT);
webDigitalPinsPage.enablePin(2, WEB_PIN_OUTPUT);
webDigitalPinsPage.enablePin(3, WEB_PIN_OUTPUT);
webDigitalPinsPage.enablePin(4, WEB_PIN_OUTPUT);
webDigitalPinsPage.enablePin(13, WEB_PIN_OUTPUT);
webDigitalPinsPage.enablePin(8, WEB_PIN_INPUT);
webDigitalPinsPage.enablePin(9, WEB_PIN_INPUT);
int outputPins[] = { 0, 1, 2, 3, 4, 13 };
for (int i = 0; i < 6; i++) {
int pin = outputPins[i];
pinMode(pin, OUTPUT);
digitalWrite(pin, LOW);
pinStates[pin] = LOW;
}
int inputPins[] = { 8, 9 };
for (int i = 0; i < 2; i++) {
int pin = inputPins[i];
pinMode(pin, INPUT);
pinStates[pin] = digitalRead(pin);
}
if (!webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD)) {
while (1) {
Serial.println("Failed to start WebApp server!");
delay(1000);
}
}
webDigitalPinsPage.onPinRead([](int pin) {
return pinStates[pin];
});
webDigitalPinsPage.onPinWrite([](int pin, int state) {
digitalWrite(pin, state);
pinStates[pin] = state;
});
webDigitalPinsPage.onPinModeChange([](int pin, int mode) {
if (mode == WEB_PIN_OUTPUT) {
pinMode(pin, OUTPUT);
digitalWrite(pin, LOW);
pinStates[pin] = LOW;
} else if (mode == WEB_PIN_INPUT) {
pinMode(pin, INPUT);
pinStates[pin] = digitalRead(pin);
}
});
}
void loop() {
webAppsServer.loop();
static unsigned long lastInputCheck = 0;
if (millis() - lastInputCheck > 100) {
lastInputCheck = millis();
int inputPins[] = { 8, 9 };
for (int i = 0; i < 2; i++) {
int pin = inputPins[i];
int currentState = digitalRead(pin);
if (currentState != pinStates[pin]) {
pinStates[pin] = currentState;
webDigitalPinsPage.updatePinState(pin, currentState);
}
}
}
delay(10);
}
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
WebSocket client connected from: 192.168.0.5
New WebSocket connection established
WebSocket message received: SLIDER:GET_VALUES
WebSocket client connected from: 192.168.0.5
New WebSocket connection established
WebSocket message received: SLIDER:64,128
DIYables WebApp - Web Digital Pins Example
INFO: Added app /
INFO: Added app /web-digital-pins
DEBUG: Enabling pin 0 with mode OUTPUT
DEBUG: Enabling pin 1 with mode OUTPUT
DEBUG: Enabling pin 2 with mode OUTPUT
DEBUG: Enabling pin 3 with mode OUTPUT
DEBUG: Enabling pin 4 with mode OUTPUT
DEBUG: Enabling pin 13 with mode OUTPUT
DEBUG: Enabling pin 8 with mode INPUT
DEBUG: Enabling pin 9 with mode INPUT
DIYables WebApp Library
Platform: Arduino Uno R4 WiFi
Network connected!
IP address: 192.168.0.2
HTTP server started on port 80
Configuring WebSocket server callbacks...
WebSocket server started on port 81
WebSocket URL: ws://192.168.0.2:81
WebSocket server started on port 81
==========================================
DIYables WebApp Ready!
==========================================
📱 Web Interface: http://192.168.0.2
🔗 WebSocket: ws://192.168.0.2:81
📋 Available Applications:
🏠 Home Page: http://192.168.0.2/
📟 Digital Pins: http://192.168.0.2/web-digital-pins
==========================================
예제는 창의적인 프로젝트의 필요에 맞게 핀을 구성하는 다양한 방법을 보여줍니다:
예제는 핀을 구성하는 다양한 방법을 보여줍니다:
webDigitalPinsPage.enablePin(2, WEB_PIN_OUTPUT);
webDigitalPinsPage.enablePin(3, WEB_PIN_OUTPUT);
webDigitalPinsPage.enablePin(4, WEB_PIN_INPUT);
webDigitalPinsPage.enableOutputPins(2, 13);
webDigitalPinsPage.enableAllPins();
Arduino 보드를 선택하세요: 도구 → 보드 → Arduino UNO R4 WiFi
올바른 포트를 선택하세요: 도구 → 포트 → [귀하의 Arduino 포트]
업로드 버튼을 클릭하세요
열기 도구 → 직렬 모니터
전송 속도를 9600으로 설정
아두이노가 와이파이에 연결될 때까지 기다리기
표시된 IP 주소를 확인하기 (예: 192.168.1.100)
웹 브라우저를 열고 다음으로 이동하세요:
http://[ARDUINO_IP_ADDRESS]/digital-pins
예시: http://192.168.1.100/digital-pins
웹 인터페이스는 구성된 모든 핀을 다음과 같이 표시합니다:
핀 번호: 0-13 범위의 아두이노 핀을 표시합니다.
현재 상태: ON(녹색) 또는 OFF(빨간색) 표시합니다.
제어 버튼: 핀 상태를 토글하려면 클릭합니다.
핀 유형: 입력 또는 출력으로 구성되었는지 표시합니다.
핀 켜기: OFF로 표시될 때 핀 버튼을 클릭합니다
핀 끄기: ON으로 표시될 때 핀 버튼을 클릭합니다
모니터 상태: 핀 버튼은 현재 상태를 자동으로 표시하도록 업데이트됩니다
여러 핀을 한 번에 제어하려면 일괄 제어 버튼을 사용하십시오:
핀 상태는 WebSocket을 통해 자동으로 업데이트됩니다
코드에서 이루어진 변경 사항이 웹 인터페이스에 반영됩니다
여러 사용자가 동일한 Arduino를 동시에 모니터링할 수 있습니다
Arduino Pin → LED (with resistor) → Ground
Pin 2 → LED Anode → 220Ω Resistor → Ground
Pin 3 → LED Anode → 220Ω Resistor → Ground
Arduino Pin → Relay Input
Pin 4 → Relay IN1
Pin 5 → Relay IN2
Arduino Pin → Motor Driver Input
Pin 6 → Motor Driver IN1
Pin 7 → Motor Driver IN2
Pin 9 → Motor Driver ENA (PWM)
Switch → Arduino Pin (with pull-up resistor)
Switch → Pin 8 → 10kΩ resistor → 5V
→ GND
Sensor Signal → Arduino Pin
PIR Sensor → Pin 10
Ultrasonic → Pin 11 (Echo)
핀의 상태가 변경될 때 모니터링:
void setup() {
webDigitalPinsPage.onPinChange([](int pin, bool state) {
Serial.print("Pin ");
Serial.print(pin);
Serial.print(" changed to: ");
Serial.println(state ? "HIGH" : "LOW");
if (pin == 13 && state == HIGH) {
Serial.println("Built-in LED turned ON!");
}
});
}
시작 시 특정 핀을 원하는 상태로 설정:
void setup() {
webDigitalPinsPage.setPinState(2, HIGH);
webDigitalPinsPage.setPinState(3, LOW);
pinMode(4, INPUT_PULLUP);
pinMode(5, OUTPUT);
}
메인 루프에서 입력 핀을 모니터링하세요:
void loop() {
static unsigned long lastRead = 0;
if (millis() - lastRead > 1000) {
for (int pin = 0; pin <= 13; pin++) {
if (webDigitalPinsPage.isPinEnabled(pin) &&
webDigitalPinsPage.getPinMode(pin) == WEB_PIN_INPUT) {
bool currentState = digitalRead(pin);
webDigitalPinsPage.updatePinState(pin, currentState);
}
}
lastRead = millis();
}
}
관련 기능을 위한 핀을 논리적으로 그룹화하십시오:
const int LED_PINS[] = {2, 3, 4, 5};
const int RELAY_PINS[] = {6, 7, 8, 9};
void controlLEDGroup(bool state) {
for (int pin : LED_PINS) {
webDigitalPinsPage.setPinState(pin, state);
}
}
void controlRelayGroup(bool state) {
for (int pin : RELAY_PINS) {
webDigitalPinsPage.setPinState(pin, state);
}
}
조명 패턴 또는 시퀀스 만들기:
void runLightPattern() {
static unsigned long lastChange = 0;
static int currentPin = 2;
if (millis() - lastChange > 500) {
for (int pin = 2; pin <= 13; pin++) {
webDigitalPinsPage.setPinState(pin, LOW);
}
webDigitalPinsPage.setPinState(currentPin, HIGH);
currentPin++;
if (currentPin > 13) currentPin = 2;
lastChange = millis();
}
}
고급 기능을 위해 아날로그 제어와 결합:
void setup() {
webDigitalPinsPage.enablePin(9, WEB_PIN_OUTPUT);
webDigitalPinsPage.enablePin(10, WEB_PIN_OUTPUT);
analogWrite(9, 128);
analogWrite(10, 255);
}
핀 0 및 1 (TX/RX)
핀 13 (내장 LED)
테스트용으로 안전하게 사용할 수 있습니다
내장 LED가 시각적 피드백을 제공합니다
초기 테스트에 적합합니다
2-12번 핀
일반 디지털 입출력에 안전합니다
대부분의 애플리케이션에 권장됩니다
특별한 고려사항이 없습니다
핀당 최대 전류: 40mA
전압 레벨: 3.3V 로직
PIN이 응답하지 않음
코드에서 핀이 활성화되어 있는지 확인합니다
하드웨어 연결을 확인합니다
쇼트가 있는지 확인합니다
핀 모드(입력/출력)를 확인합니다
웹 인터페이스가 업데이트되지 않음
웹소켓 연결 상태 확인
브라우저 페이지 새로고침
네트워크 연결 확인
시리얼 모니터에서 오류 확인
3. 일괄 작업이 작동하지 않음
핀들이 출력으로 구성되었는지 확인하십시오
하드웨어 제한 사항을 확인하십시오
전원 공급 용량을 확인하십시오
과전류 상태를 모니터링하십시오
4. 입력 핀들이 잘못된 상태를 표시합니다
적절한 풀업/풀다운 저항 확인
입력 신호 레벨 확인
전자기 간섭 여부 확인
핀 구성 확인
디버그 출력 활성화:
void debugPinStates() {
Serial.println("=== Pin States ===");
for (int pin = 0; pin <= 13; pin++) {
if (webDigitalPinsPage.isPinEnabled(pin)) {
Serial.print("Pin ");
Serial.print(pin);
Serial.print(": ");
Serial.print(digitalRead(pin) ? "HIGH" : "LOW");
Serial.print(" (");
Serial.print(webDigitalPinsPage.getPinMode(pin) == WEB_PIN_OUTPUT ? "OUTPUT" : "INPUT");
Serial.println(")");
}
}
Serial.println("==================");
}
제어실 조명
창문 블라인드 작동
난방/냉방 시스템 제어
보안 시스템 연동
관개 시스템 제어
재배용 조명 관리
온도 제어
습도 제어
공구 전원 제어
조명 관리
환기 시스템
안전 인터록
논리 게이트 시연
신호등 시뮬레이션
경보 시스템 프로젝트
원격 제어 실험
void setup() {
webDigitalPinsPage.enablePin(2, WEB_PIN_OUTPUT);
webDigitalPinsPage.enablePin(3, WEB_PIN_INPUT);
pinMode(3, INPUT);
}
void loop() {
if (digitalRead(3) == HIGH) {
webDigitalPinsPage.setPinState(2, HIGH);
delay(5000);
webDigitalPinsPage.setPinState(2, LOW);
}
}
void loop() {
float temperature = getTemperature();
if (temperature > 25.0) {
webDigitalPinsPage.setPinState(4, HIGH);
} else {
webDigitalPinsPage.setPinState(4, LOW);
}
}
WebDigitalPins 예제를 숙달한 후에는 시도해 보세요:
WebSlider - PWM 및 아날로그 제어를 위한
WebJoystick - 방향 제어를 위한
WebMonitor - 디버깅 및 모니터링을 위한
MultipleWebApps - 모든 기능을 하나로 결합