아두이노 WebSlider 예제 듀얼 슬라이더 제어 인터페이스 튜토리얼
개요
WebSlider 예제는 웹 브라우저를 통해 접근 가능한 두 개의 독립적인 슬라이더 컨트롤을 제공합니다. Arduino Uno R4 WiFi 및 DIYables STEM V4 IoT용으로 설계된 교육 플랫폼으로, 향상된 아날로그 기능, 정밀 제어 기능 및 PWM과 아날로그 전자 공학 학습을 위한 내장 교육 모듈을 갖추고 있습니다. 각 슬라이더는 0에서 255까지의 값을 제공하므로 PWM 제어, 밝기 조절, 모터 속도 제어 및 아날로그와 유사한 제어 값이 필요한 모든 애플리케이션에 적합합니다.
특징
- 이중 슬라이더: 두 개의 독립적인 슬라이더 컨트롤(각각 0-255 범위)
- 실시간 값: WebSocket 통신을 통한 즉시 업데이트
- PWM 호환: 8비트 값(0-255)이 analogWrite() 함수에 완벽하게 적합
- 시각적 피드백: 각 슬라이더의 실시간 값 표시
- 프리셋 버튼: 일반 구성에 대한 빠른 프리셋 값
- 터치 및 마우스 지원: 데스크톱, 태블릿 및 모바일 기기에서 작동
- 반응형 디자인: 다양한 화면 크기에 맞게 조정
- 값 지속성: 페이지 재로드 시 슬라이더가 마지막 위치를 기억
- 플랫폼 확장성: 현재 Arduino Uno R4 WiFi용으로 구현되었으나 다른 하드웨어 플랫폼으로 확장할 수 있습니다. 자세한 내용은 DIYables_WebApps_ESP32를 참조하십시오.
준비물
| 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를 사용하는 경우, 아두이노 우노 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 버튼을 클릭합니다.
- 다른 라이브러리 의존성 설치를 요청받게 됩니다.
- 모든 라이브러리 의존성을 설치하려면 Install All 버튼을 클릭하십시오.
- Arduino IDE에서 File 예제 DIYables WebApps WebSlider 예제로 이동하시거나, 위의 코드를 복사하여 Arduino IDE의 편집기에 붙여넣으세요.
/*
* DIYables WebApp Library - Web Slider Example
*
* This example demonstrates the Web Slider feature:
* - Two independent sliders (0-255)
* - Real-time value monitoring
* - Template for hardware control
*
* Hardware: Arduino Uno R4 WiFi or DIYables STEM V4 IoT
*
* Setup:
* 1. Update WiFi credentials below
* 2. Upload the sketch to your Arduino
* 3. Open Serial Monitor to see the IP address
* 4. Navigate to http://[IP_ADDRESS]/webslider
*/
#include <DIYablesWebApps.h>
// WiFi credentials - UPDATE THESE WITH YOUR NETWORK
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create WebApp server and page instances
UnoR4ServerFactory serverFactory;
DIYablesWebAppServer webAppsServer(serverFactory, 80, 81);
DIYablesHomePage homePage;
DIYablesWebSliderPage webSliderPage;
// Current slider values
int slider1Value = 64; // Default 25%
int slider2Value = 128; // Default 50%
void setup() {
Serial.begin(9600);
delay(1000);
// TODO: Initialize your hardware pins here
Serial.println("DIYables WebApp - Web Slider Example");
// Add home and web slider pages
webAppsServer.addApp(&homePage);
webAppsServer.addApp(&webSliderPage);
// Optional: Add 404 page for better user experience
webAppsServer.setNotFoundPage(DIYablesNotFoundPage());
// Start the WebApp server
if (!webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD)) {
while (1) {
Serial.println("Failed to start WebApp server!");
delay(1000);
}
}
// Set up slider callback for value changes
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
// Store the received values
slider1Value = slider1;
slider2Value = slider2;
// Print slider values (0-255)
Serial.println("Slider 1: " + String(slider1) + ", Slider 2: " + String(slider2));
// TODO: Add your control logic here based on slider values
// Examples:
// - Control PWM: analogWrite(LED_PIN, slider1);
// - Control servos: servo.write(map(slider1, 0, 255, 0, 180));
// - Control motor speed: analogWrite(MOTOR_PIN, slider2);
// - Control brightness: strip.setBrightness(slider1);
// - Send values via Serial, I2C, SPI, etc.
});
// Set up callback for config requests (when client requests current values)
webSliderPage.onSliderValueToWeb([]() {
webSliderPage.sendToWebSlider(slider1Value, slider2Value);
Serial.println("Web client requested values - Sent: Slider1=" + String(slider1Value) + ", Slider2=" + String(slider2Value));
});
}
void loop() {
// Handle WebApp server communications
webAppsServer.loop();
// TODO: Add your main application code here
delay(10);
}
- 다음 줄을 업데이트하여 코드에서 WiFi 자격 증명을 구성하십시오:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Arduino IDE에서 Upload 버튼을 클릭하여 Arduino UNO R4/DIYables STEM V4 IoT에 코드를 업로드합니다
- 시리얼 모니터를 엽니다
- 시리얼 모니터에서 결과를 확인합니다. 아래와 같습니다.
COM6
DIYables WebApp - Web Slider Example
INFO: Added app /
INFO: Added app /web-slider
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/
🎚️ Web Slider: http://192.168.0.2/web-slider
==========================================
Autoscroll
Clear output
9600 baud
Newline
- 아무 것도 보이지 않는 경우, 아두이노 보드를 재부팅하십시오.
- 표시된 IP 주소를 기록해 두고, 이 주소를 스마트폰이나 PC의 웹 브라우저 주소 표시줄에 입력하십시오.
- 예: http://192.168.0.2
- 아래 이미지처럼 홈 페이지가 표시됩니다:
- Web Slider 링크를 클릭하면 아래와 같은 Web Slider 앱의 UI가 표시됩니다:
- 또는 IP 주소 뒤에 /web-slider를 붙여 직접 페이지에 접속할 수도 있습니다. 예를 들어: http://192.168.0.2/web-slider
- 두 개의 슬라이더를 움직여 아날로그 값(0-255)을 제어하고 시리얼 모니터에서 실시간 피드백을 확인해 보세요.
창의적 커스터마이징 - 코드를 프로젝트에 맞게 조정하기
기본 슬라이더 값 설정
초기 슬라이더 위치 설정:
// Current slider values (0-255)
int slider1Value = 64; // Default 25% (64/255)
int slider2Value = 128; // Default 50% (128/255)
슬라이더 사용 방법
웹 인터페이스 컨트롤
슬라이더 인터페이스는 다음을 제공합니다:
- 슬라이더 1: 값 표시가 있는 첫 번째 제어 슬라이더(0-255)
- 슬라이더 2: 값 표시가 있는 두 번째 제어 슬라이더(0-255)
- 값 표시: 두 슬라이더의 실시간 숫자 값
- 프리셋 버튼: 일반 값에 빠르게 접근 가능(0%, 25%, 50%, 75%, 100%)
슬라이더 조작
데스크탑 (마우스 제어)
- Click and Drag: 슬라이더 핸들을 클릭한 상태로 끌어 값을 조절합니다
- Click Position: 슬라이더 트랙의 아무 곳이나 클릭하면 해당 값으로 이동합니다
- Fine Control: 정밀하게 조정하려면 작은 마우스 움직임을 사용합니다
모바일/태블릿 (터치 제어)
- 터치 및 드래그: 슬라이더 핸들을 터치하고 새 위치로 드래그
- 탭 위치: 값을 설정하려면 슬라이더 트랙을 탭합니다
- 부드러운 조작: 손가락으로 드래그하면 값이 부드럽게 변합니다
값의 범위
각 슬라이더가 제공하는 것:
- 최소값: 0 (0% - 완전히 꺼짐)
- 최대값: 255 (100% - 최대 밝기)
- 해상도: 256개의 이산 단계(8비트 정밀도)
- PWM 호환성: analogWrite() 함수로 직접 사용
프로그래밍 예제
기본 슬라이더 핸들러
void setup() {
// Set up slider callback for value changes
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
// Store the received values
slider1Value = slider1;
slider2Value = slider2;
// Print slider values (0-255)
Serial.println("Slider 1: " + String(slider1) + ", Slider 2: " + String(slider2));
// Add your control logic here
});
}
LED 밝기 제어
// Pin definitions for PWM LEDs
const int LED1_PIN = 9; // PWM pin for first LED
const int LED2_PIN = 10; // PWM pin for second LED
void setup() {
// Configure LED pins as outputs
pinMode(LED1_PIN, OUTPUT);
pinMode(LED2_PIN, OUTPUT);
// Set initial brightness
analogWrite(LED1_PIN, slider1Value);
analogWrite(LED2_PIN, slider2Value);
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
// Store values
slider1Value = slider1;
slider2Value = slider2;
// Control LED brightness directly (0-255 PWM)
analogWrite(LED1_PIN, slider1);
analogWrite(LED2_PIN, slider2);
Serial.println("LED1 Brightness: " + String(slider1) +
", LED2 Brightness: " + String(slider2));
});
}
서보 위치 제어
#include <Servo.h>
Servo servo1, servo2;
void setup() {
// Attach servos to PWM pins
servo1.attach(9);
servo2.attach(10);
// Set initial positions
servo1.write(map(slider1Value, 0, 255, 0, 180));
servo2.write(map(slider2Value, 0, 255, 0, 180));
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
slider1Value = slider1;
slider2Value = slider2;
// Map slider values (0-255) to servo angles (0-180°)
int angle1 = map(slider1, 0, 255, 0, 180);
int angle2 = map(slider2, 0, 255, 0, 180);
// Move servos to calculated positions
servo1.write(angle1);
servo2.write(angle2);
Serial.println("Servo1: " + String(angle1) + "°, Servo2: " + String(angle2) + "°");
});
}
모터 속도 제어
// Motor driver pins
const int MOTOR1_PWM = 9; // Motor 1 speed control
const int MOTOR1_DIR1 = 2; // Motor 1 direction pin 1
const int MOTOR1_DIR2 = 3; // Motor 1 direction pin 2
const int MOTOR2_PWM = 10; // Motor 2 speed control
const int MOTOR2_DIR1 = 4; // Motor 2 direction pin 1
const int MOTOR2_DIR2 = 5; // Motor 2 direction pin 2
void setup() {
// Configure motor pins
pinMode(MOTOR1_PWM, OUTPUT);
pinMode(MOTOR1_DIR1, OUTPUT);
pinMode(MOTOR1_DIR2, OUTPUT);
pinMode(MOTOR2_PWM, OUTPUT);
pinMode(MOTOR2_DIR1, OUTPUT);
pinMode(MOTOR2_DIR2, OUTPUT);
// Set initial motor directions (forward)
digitalWrite(MOTOR1_DIR1, HIGH);
digitalWrite(MOTOR1_DIR2, LOW);
digitalWrite(MOTOR2_DIR1, HIGH);
digitalWrite(MOTOR2_DIR2, LOW);
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
slider1Value = slider1;
slider2Value = slider2;
// Control motor speeds directly
analogWrite(MOTOR1_PWM, slider1);
analogWrite(MOTOR2_PWM, slider2);
// Calculate percentage for display
int speed1Percent = map(slider1, 0, 255, 0, 100);
int speed2Percent = map(slider2, 0, 255, 0, 100);
Serial.println("Motor1: " + String(speed1Percent) + "%, " +
"Motor2: " + String(speed2Percent) + "%");
});
}
RGB LED 색상 제어
// RGB LED pins
const int RED_PIN = 9;
const int GREEN_PIN = 10;
const int BLUE_PIN = 11;
void setup() {
pinMode(RED_PIN, OUTPUT);
pinMode(GREEN_PIN, OUTPUT);
pinMode(BLUE_PIN, OUTPUT);
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
slider1Value = slider1;
slider2Value = slider2;
// Use sliders to control RGB components
// Slider 1 controls red intensity
// Slider 2 controls blue intensity
// Green is calculated based on both sliders
int redValue = slider1;
int blueValue = slider2;
int greenValue = (slider1 + slider2) / 2; // Average of both sliders
analogWrite(RED_PIN, redValue);
analogWrite(GREEN_PIN, greenValue);
analogWrite(BLUE_PIN, blueValue);
Serial.println("RGB - R:" + String(redValue) +
" G:" + String(greenValue) +
" B:" + String(blueValue));
});
}
고급 프로그래밍 기법
값 평활화
class SliderSmoother {
private:
int currentValue = 0;
int targetValue = 0;
unsigned long lastUpdate = 0;
const int SMOOTH_RATE = 5; // Change per update cycle
public:
void setTarget(int target) {
targetValue = target;
}
int getCurrentValue() {
return currentValue;
}
bool update() {
if (millis() - lastUpdate > 10) { // Update every 10ms
bool changed = false;
if (currentValue < targetValue) {
currentValue = min(currentValue + SMOOTH_RATE, targetValue);
changed = true;
} else if (currentValue > targetValue) {
currentValue = max(currentValue - SMOOTH_RATE, targetValue);
changed = true;
}
lastUpdate = millis();
return changed;
}
return false;
}
};
SliderSmoother smoother1, smoother2;
void setup() {
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
// Set target values for smooth transition
smoother1.setTarget(slider1);
smoother2.setTarget(slider2);
});
}
void loop() {
server.loop();
// Update smoothed values
bool changed1 = smoother1.update();
bool changed2 = smoother2.update();
if (changed1 || changed2) {
// Apply smoothed values to hardware
analogWrite(9, smoother1.getCurrentValue());
analogWrite(10, smoother2.getCurrentValue());
}
}
임계값 기반 제어
void setupThresholdControl() {
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
slider1Value = slider1;
slider2Value = slider2;
// Threshold-based control for discrete outputs
const int LOW_THRESHOLD = 85; // 33%
const int MEDIUM_THRESHOLD = 170; // 66%
// Control digital outputs based on slider 1 thresholds
if (slider1 < LOW_THRESHOLD) {
// Low level: Turn off all outputs
digitalWrite(2, LOW);
digitalWrite(3, LOW);
digitalWrite(4, LOW);
} else if (slider1 < MEDIUM_THRESHOLD) {
// Medium level: Turn on first output
digitalWrite(2, HIGH);
digitalWrite(3, LOW);
digitalWrite(4, LOW);
} else {
// High level: Turn on all outputs
digitalWrite(2, HIGH);
digitalWrite(3, HIGH);
digitalWrite(4, HIGH);
}
// Use slider 2 for analog PWM control
analogWrite(9, slider2);
});
}
프리셋 값 시스템
// Predefined preset values
const int PRESETS[][2] = {
{0, 0}, // Preset 0: Both off
{64, 128}, // Preset 1: Low/Medium
{128, 128}, // Preset 2: Both medium
{255, 128}, // Preset 3: High/Medium
{255, 255} // Preset 4: Both maximum
};
void applyPreset(int presetNumber) {
if (presetNumber >= 0 && presetNumber < 5) {
slider1Value = PRESETS[presetNumber][0];
slider2Value = PRESETS[presetNumber][1];
// Update hardware
analogWrite(9, slider1Value);
analogWrite(10, slider2Value);
// Send updated values to web interface
webSliderPage.sendToWebSlider(slider1Value, slider2Value);
Serial.println("Applied preset " + String(presetNumber) +
": " + String(slider1Value) + ", " + String(slider2Value));
}
}
void setupPresetSystem() {
// You could trigger presets based on other inputs
// For example, reading digital pins for preset buttons
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
slider1Value = slider1;
slider2Value = slider2;
// Your normal slider handling
analogWrite(9, slider1);
analogWrite(10, slider2);
});
}
void loop() {
server.loop();
// Check for preset trigger conditions
// Example: Read buttons connected to digital pins
static bool lastButton = false;
bool currentButton = digitalRead(7); // Preset button on pin 7
if (currentButton && !lastButton) { // Button pressed
static int currentPreset = 0;
applyPreset(currentPreset);
currentPreset = (currentPreset + 1) % 5; // Cycle through presets
}
lastButton = currentButton;
}
하드웨어 통합 예제
LED 스트립 제어
// For WS2812B or similar addressable LED strips
// (requires additional libraries like FastLED or Adafruit NeoPixel)
const int LED_STRIP_PIN = 6;
const int NUM_LEDS = 30;
void setupLEDStrip() {
// Initialize LED strip (depends on library used)
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
slider1Value = slider1;
slider2Value = slider2;
// Slider 1 controls brightness (0-255)
// Slider 2 controls color temperature or hue
uint8_t brightness = slider1;
uint8_t hue = slider2;
// Update LED strip (example with conceptual functions)
// strip.setBrightness(brightness);
// strip.fill(CHSV(hue, 255, 255));
// strip.show();
Serial.println("LED Strip - Brightness: " + String(brightness) +
", Hue: " + String(hue));
});
}
팬 속도 제어
const int FAN1_PIN = 9;
const int FAN2_PIN = 10;
void setupFanControl() {
pinMode(FAN1_PIN, OUTPUT);
pinMode(FAN2_PIN, OUTPUT);
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
slider1Value = slider1;
slider2Value = slider2;
// Control fan speeds with minimum threshold for startup
int fan1Speed = (slider1 > 50) ? map(slider1, 50, 255, 100, 255) : 0;
int fan2Speed = (slider2 > 50) ? map(slider2, 50, 255, 100, 255) : 0;
analogWrite(FAN1_PIN, fan1Speed);
analogWrite(FAN2_PIN, fan2Speed);
Serial.println("Fan1: " + String(map(fan1Speed, 0, 255, 0, 100)) + "%, " +
"Fan2: " + String(map(fan2Speed, 0, 255, 0, 100)) + "%");
});
}
오디오 볼륨 제어
// For controlling audio amplifier or volume IC
const int VOLUME1_PIN = 9; // PWM output to volume control
const int VOLUME2_PIN = 10; // Second channel or tone control
void setupAudioControl() {
pinMode(VOLUME1_PIN, OUTPUT);
pinMode(VOLUME2_PIN, OUTPUT);
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
slider1Value = slider1;
slider2Value = slider2;
// Use logarithmic scaling for better audio perception
float volume1 = pow(slider1 / 255.0, 2) * 255; // Square law
float volume2 = pow(slider2 / 255.0, 2) * 255;
analogWrite(VOLUME1_PIN, (int)volume1);
analogWrite(VOLUME2_PIN, (int)volume2);
Serial.println("Volume1: " + String((int)volume1) +
", Volume2: " + String((int)volume2));
});
}
문제 해결
자주 발생하는 문제
- 슬라이더가 반응하지 않음
- 브라우저 콘솔에서 WebSocket 연결을 확인
- 디바이스와 아두이노 간의 네트워크 연결을 확인
- 브라우저 페이지를 새로고침하여 연결을 재설정
- 시리얼 모니터에서 연결 오류를 확인
- 전체 범위에 도달하지 않는 값들
- 웹 인터페이스에서 슬라이더의 범위 설정을 확인하십시오
- 콜백 함수에서 값 매핑 문제를 확인하십시오
- 다양한 브라우저나 기기에서 테스트하십시오
- 거칠거나 일관성 없는 제어
- 값의 평활화를 구현하여 점진적인 변화에 대응합니다
- 네트워크 지연 문제를 점검합니다
- 빠른 값 변화에 대한 디바운싱을 추가합니다
4. PWM 출력이 작동하지 않음
- 핀들이 PWM을 지원하는지 확인하세요(Arduino 핀아웃을 확인하세요)
- AnalogWrite()가 올바른 핀 번호로 호출되었는지 확인하세요
- 하드웨어 연결 및 부하 요구사항을 확인하세요
디버깅 팁
포괄적 디버깅 추가:
void debugSliderValues(int slider1, int slider2) {
Serial.println("=== Slider Debug ===");
Serial.println("Slider 1: " + String(slider1) + " (" + String(map(slider1, 0, 255, 0, 100)) + "%)");
Serial.println("Slider 2: " + String(slider2) + " (" + String(map(slider2, 0, 255, 0, 100)) + "%)");
Serial.println("PWM Pin 9: " + String(slider1));
Serial.println("PWM Pin 10: " + String(slider2));
Serial.println("===================");
}
프로젝트 아이디어
조명 제어 프로젝트들
- 실내 조명 밝기 조절
- RGB 색상 혼합 인터페이스
- LED 스트립 애니메이션 속도 조절
- 무대 조명 밝기 조절
모터 제어 프로젝트
- 로봇 속도 제어
- 팬 속도 제어
- 펌프 유량 제어
- 컨베이어 벨트 속도
오디오 프로젝트
- 볼륨 제어 인터페이스
- 톤/이퀄라이저 제어
- 사운드 이펙트 강도
- 음악 시각화 제어
홈 자동화
- 실내 기후 제어(난방/냉방 강도)
- 창문 블라인드 위치 제어
- 관개 시스템 유량 제어
- 스마트 기기 밝기/볼륨 제어
다른 예제들과의 통합
WebJoystick와 함께 사용하기
속도 제한에는 슬라이더를, 방향에는 조이스틱을 사용하세요:
// Global speed limit from sliders
int maxSpeed = 255;
// In WebSlider callback
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
maxSpeed = slider1; // Use slider 1 as global speed limit
});
// In WebJoystick callback
webJoystickPage.onJoystickValueFromWeb([](int x, int y) {
// Scale joystick values by slider-controlled speed limit
int scaledX = map(x, -100, 100, -maxSpeed, maxSpeed);
int scaledY = map(y, -100, 100, -maxSpeed, maxSpeed);
controlRobot(scaledX, scaledY);
});
WebDigitalPins과 결합
PWM 및 디지털 핀의 켜고 끄기를 제어하려면 슬라이더를 사용하세요:
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
// Only apply PWM if corresponding digital pins are ON
if (webDigitalPinsPage.getPinState(2)) {
analogWrite(9, slider1);
} else {
analogWrite(9, 0);
}
if (webDigitalPinsPage.getPinState(3)) {
analogWrite(10, slider2);
} else {
analogWrite(10, 0);
}
});
다음 단계
WebSlider 예제를 마스터한 후, 시도해 보세요:
- WebJoystick - 2D 방향 제어용
- WebDigitalPins - 이산 온/오프 제어용
- WebMonitor - 슬라이더 값 디버깅용
- MultipleWebApps - 다른 컨트롤과 함께 여러 슬라이더를 결합
지원
추가 도움이 필요하신 경우:
- API 참조 문서를 확인하세요
- DIYables 튜토리얼들을 방문하세요: https://newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-diyables-webapps
- 아두이노 커뮤니티 포럼