ESP32 슬라이더가 있는 웹 서버: LED 밝기 제어(PWM)

슬라이더가 있는 ESP32 웹 서버: LED 밝기 제어(PWM)

이 튜토리얼에서는 LED 밝기를 제어하는 슬라이더가 있는 ESP32 웹 서버를 만드는 방법을 보여줍니다. 웹 서버 프로젝트에 슬라이더를 추가하고, 값을 가져와 ESP32에서 사용할 수 있는 변수에 저장하는 방법을 알아봅니다. 이 값을 사용하여 PWM 신호의 듀티 사이클을 제어하고 LED의 밝기를 변경합니다. 예를 들어 LED 대신 서보 모터를 제어할 수 있습니다.

Arduino IDE를 사용하여 슬라이더 제어 LED 밝기 PWM이 있는 ESP32 웹 서버

또한 이 튜토리얼의 코드를 수정하여 프로젝트에 슬라이더를 추가하여 코드에서 사용해야 하는 임계값이나 다른 값을 설정할 수도 있습니다.

프로젝트 개요

ESP32 ESP8266 슬라이더 웹 서버 제어 LED 밝기

ESP32는 슬라이더가 있는 웹 페이지를 표시하는 웹 서버를 호스팅합니다.
슬라이더를 움직이면 새 슬라이더 값으로 ESP32에 HTTP 요청을 합니다.
HTTP 요청은 다음 형식으로 제공됩니다. GET/slider?value=SLIDERVALUE, 여기서 SLIDERVALUE는 0~255 사이의 숫자입니다. 슬라이더를 수정하여 다른 범위를 포함할 수 있습니다.
HTTP 요청에서 ESP32는 슬라이더의 현재 값을 가져옵니다.
ESP32는 슬라이더 값에 따라 PWM 듀티 사이클을 조정합니다.
이는 LED의 밝기를 제어하는 데 유용할 수 있습니다(이 예에서처럼), 서보 모터, 임계값 설정 또는 기타 애플리케이션.

필수 조건

이 프로젝트를 진행하기 전에 다음 필수 조건을 확인하세요.

Arduino IDE

Arduino IDE를 사용하여 ESP32 보드를 프로그래밍하므로 이 튜토리얼을 진행하기 전에 Arduino IDE에 ESP32 보드가 설치되어 있는지 확인하세요.

Arduino IDE 2(Windows, Mac OS X, Linux)에 ESP32 보드 설치 비동기 웹 서버 라이브러리

다음 라이브러리를 사용하여 웹 서버를 빌드합니다.

ESPAsyncWebServer
AsyncTCP

이러한 라이브러리는 Arduino 라이브러리 관리자를 통해 설치할 수 없으므로 라이브러리 파일을 Arduino 설치 라이브러리 폴더에 복사해야 합니다. 또는 Arduino IDE에서 스케치 > 라이브러리 포함 > .zip 라이브러리 추가로 이동하여 방금 다운로드한 라이브러리를 선택할 수 있습니다.

코드

다음 코드는 웹 서버의 슬라이더를 사용하여 ESP32 내장 LED의 밝기를 제어합니다. 즉, 슬라이더로 PWM 듀티 사이클을 변경할 수 있습니다. 예를 들어 LED 밝기를 제어하거나 서보 모터를 제어하는데 유용할 수 있습니다.

코드를 Arduino IDE에 복사합니다. 네트워크 자격 증명을 입력하면 코드가 바로 작동합니다.

/*********
  Rui Santos & Sara Santos - Random Nerd Tutorials
  Complete project details at https://RandomNerdTutorials.com/esp32-web-server-slider-pwm/
  
  Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files.
  The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*********/
// Import required libraries
#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>

// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

const int output = 2;

String sliderValue = "0";

// setting PWM properties
const int freq = 5000;
const int ledChannel = 0;
const int resolution = 8;

const char* PARAM_INPUT = "value";

// Create AsyncWebServer object on port 80
AsyncWebServer server(80);

const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ESP Web Server</title>
  <style>
    html {font-family: Arial; display: inline-block; text-align: center;}
    h2 {font-size: 2.3rem;}
    p {font-size: 1.9rem;}
    body {max-width: 400px; margin:0px auto; padding-bottom: 25px;}
    .slider { -webkit-appearance: none; margin: 14px; width: 360px; height: 25px; background: #FFD65C;
      outline: none; -webkit-transition: .2s; transition: opacity .2s;}
    .slider::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 35px; height: 35px; background: #003249; cursor: pointer;}
    .slider::-moz-range-thumb { width: 35px; height: 35px; background: #003249; cursor: pointer; } 
  </style>
</head>
<body>
  <h2>ESP Web Server</h2>
  <p><span id="textSliderValue">%SLIDERVALUE%</span></p>
  <p><input type="range" onchange="updateSliderPWM(this)" id="pwmSlider" min="0" max="255" value="%SLIDERVALUE%" step="1" class="slider"></p>
<script>
function updateSliderPWM(element) {
  var sliderValue = document.getElementById("pwmSlider").value;
  document.getElementById("textSliderValue").innerHTML = sliderValue;
  console.log(sliderValue);
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "/slider?value="+sliderValue, true);
  xhr.send();
}
</script>
</body>
</html>
)rawliteral";

// Replaces placeholder with button section in your web page
String processor(const String& var){
  //Serial.println(var);
  if (var == "SLIDERVALUE"){
    return sliderValue;
  }
  return String();
}

void setup(){
  // Serial port for debugging purposes
  Serial.begin(115200);
  
  // configure LED PWM functionalitites
  ledcAttachChannel(output, freq, resolution, ledChannel);
  
  ledcWrite(output, sliderValue.toInt());

  // Connect to Wi-Fi
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi..");
  }

  // Print ESP Local IP Address
  Serial.println(WiFi.localIP());

  // Route for root / web page
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/html", index_html, processor);
  });

  // Send a GET request to <ESP_IP>/slider?value=<inputMessage>
  server.on("/slider", HTTP_GET, [] (AsyncWebServerRequest *request) {
    String inputMessage;
    // GET input1 value on <ESP_IP>/slider?value=<inputMessage>
    if (request->hasParam(PARAM_INPUT)) {
      inputMessage = request->getParam(PARAM_INPUT)->value();
      sliderValue = inputMessage;
      ledcWrite(output, sliderValue.toInt());
    }
    else {
      inputMessage = "No message sent";
    }
    Serial.println(inputMessage);
    request->send(200, "text/plain", "OK");
  });
  
  // Start server
  server.begin();
}
  
void loop() {
  
}

코드 작동 방식

코드 작동 방식을 알아보려면 계속 읽거나 다음 섹션으로 건너뜁니다.

라이브러리 가져오기

먼저 필요한 라이브러리를 가져옵니다. WiFi, ESPAsyncWebServer 및 ESPAsyncTCP는 웹 서버를 구축하는 데 필요합니다.

#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>

네트워크 자격 증명 설정

다음 변수에 네트워크 자격 증명을 삽입하여 ESP32가 로컬 네트워크에 연결할 수 있도록 합니다.

const char* ssid = "REPLACE_WITH_YOUR_SSID";

const char* password = "REPLACE_WITH_YOUR_PASSWORD";

변수 정의

ESP32 내장 LED의 밝기를 제어합니다. 내장 LED는 GPIO 2에 해당합니다. 제어하려는 GPIO를 출력 변수에 저장합니다.

sliderValue 변수는 슬라이더 값을 보관합니다. 시작 시 0으로 설정됩니다.

String sliderValue = "0";

PWM 속성 설정

다음 줄은 LED를 제어하는 PWM 속성을 정의합니다.

// setting PWM properties
const int freq = 5000;
const int ledChannel = 0;
const int resolution = 8;

8비트 해상도를 사용하는데, 이는 0~255 사이의 값으로 LED 밝기를 제어할 수 있다는 것을 의미합니다.

ESP32의 PWM 속성에 대해 자세히 알아보려면 가이드를 읽어보세요: Arduino IDE를 사용한 ESP32 PWM(아날로그 출력).

입력 매개변수

PARAM_INPUT 변수는 슬라이더가 움직일 때 ESP32에서 수신한 요청에서 슬라이더 값을 "검색"하는 데 사용됩니다. (ESP32는 GET/slider?value=SLIDERVALUE와 같은 요청을 수신합니다.)

const char* PARAM_INPUT = "value";

URL에서 value 값을 검색하여 할당된 값을 가져옵니다.

웹 페이지 구축

이제 웹 서버 페이지로 넘어가겠습니다.

ESP32 슬라이더 웹 서버 작동 방식

이 프로젝트의 웹 페이지는 매우 간단합니다. 제목 하나, 문단 하나, range 유형의 입력 하나가 포함되어 있습니다.

웹 페이지가 어떻게 생성되는지 살펴보겠습니다.

스타일이 포함된 모든 HTML 텍스트는 index_html 변수에 저장됩니다. 이제 HTML 텍스트를 살펴보고 각 부분이 무엇을 하는지 살펴보겠습니다.

다음 Meta 태그는 모든 브라우저에서 웹 페이지를 반응형으로 만듭니다.

<meta name="viewport" content="width=device-width, initial-scale=1">

title 태그 사이에 웹 서버 제목이 있습니다. 제목은 웹 브라우저 탭에 표시되는 텍스트입니다.

스타일

Style 태그 사이에 CSS를 추가하여 웹 페이지의 스타일을 지정합니다.

<style>
  html {font-family: Arial; display: inline-block; text-align: center;}
  h2 {font-size: 2.3rem;}
  p {font-size: 1.9rem;}
  body {max-width: 400px; margin:0px auto; padding-bottom: 25px;}
  .slider { -webkit-appearance: none; margin: 14px; width: 360px; height: 25px; background: #FFD65C;
    outline: none; -webkit-transition: .2s; transition: opacity .2s;}
  .slider::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 35px; height: 35px; background: #003249; cursor: pointer;}
  .slider::-moz-range-thumb { width: 35px; height: 35px; background: #003249; cursor: pointer; }
</style>

기본적으로, 우리는 HTML 페이지를 설정하여 여백 없이 블록으로 Arial 글꼴로 텍스트를 표시하고, 중앙에 정렬합니다.

html {font-family: Arial; display: inline-block; text-align: center;}

다음 줄은 제목(h2)과 문단(p)의 글꼴 크기를 설정합니다.

h2 {font-size: 2.3rem;}
p {font-size: 1.9rem;}

HTML 본문 속성을 설정합니다.

body {max-width: 400px; margin:0px auto; padding-bottom: 25px;}

HTML 본문

Body 태그 안에 웹 페이지 콘텐츠를 추가합니다.

H2 태그는 웹 페이지에 제목을 추가합니다. 이 경우 "ESP 웹 서버" 텍스트이지만 다른 텍스트를 추가할 수 있습니다.

<h2>ESP Web Server</h2>

첫 번째 단락에는 현재 슬라이더 값이 포함됩니다. 특정 HTML 태그에는 나중에 참조할 수 있도록 텍스트 슬라이더 값이라는 ID가 할당되어 있습니다.

<p><span id="textSliderValue">%SLIDERVALUE%</span></p>

%SLIDERVALUE%는 슬라이더 값의 플레이스홀더입니다. ESP32는 브라우저로 보낼 때 실제 값으로 이를 대체합니다. 이는 브라우저에 처음 액세스할 때 현재 값을 표시하는 데 유용합니다.

슬라이더 만들기

HTML에서 슬라이더를 만들려면 input 태그를 사용합니다. INPUT 태그는 사용자가 데이터를 입력할 수 있는 필드를 지정합니다.

다양한 입력 유형이 있습니다. 슬라이더를 정의하려면 "range" 값과 함께 "type" 속성을 사용합니다. 슬라이더에서는 "min" 및 "max" 속성(이 경우 각각 0 및 255)을 사용하여 최소 및 최대 범위도 정의해야 합니다.

<p><input type="range" onchange="updateSliderPWM(this)" id="pwmSlider" min="0" max="255" value="%SLIDERVALUE%" step="1" class="slider"></p>

다음과 같은 다른 속성도 정의해야 합니다.

step 속성은 유효한 숫자 사이의 간격을 지정합니다. 우리의 경우, 1로 설정됩니다.
슬라이더를 스타일링하는 클래스(class="slider")
웹 페이지에 표시된 현재 위치를 업데이트하는 id
슬라이더가 움직일 때 ESP32에 HTTP 요청을 보내는 함수(updateSliderPWM(this))를 호출하는 onchange 속성. this 키워드는 슬라이더의 현재 값을 참조합니다.

HTML 파일에 JavaScript 추가

다음으로 SCRIPT 태그를 사용하여 HTML 파일에 JavaScript 코드를 추가해야 합니다. 현재 슬라이더 값으로 ESP32에 요청을 하는 updateSliderPWM() 함수를 추가해야 합니다.

<script>
function updateSliderPWM(element) {
  var sliderValue = document.getElementById("pwmSlider").value;
  document.getElementById("textSliderValue").innerHTML = sliderValue;
  console.log(sliderValue);
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "/slider?value="+sliderValue, true);
  xhr.send();
}
</script>

다음 줄은 id로 현재 슬라이더 값을 가져와서 sliderValue JavaScript 변수에 저장합니다. 이전에는 슬라이더의 id를 pwmSlider에 할당했습니다. 따라서 다음과 같이 가져옵니다.

var sliderValue = document.getElementById("pwmSlider").value;

그런 다음 슬라이더 레이블(id는 textSliderValue)을 sliderValue 변수에 저장된 값으로 설정합니다.

마지막으로 HTTP GET 요청을 합니다.

var xhr = new XMLHttpRequest();
xhr.open("GET", "/slider?value="+sliderValue, true);
xhr.send();

예를 들어 슬라이더가 0일 때 다음 URL에서 HTTP GET 요청을 합니다.

http://ESP-IP-ADDRESS/slider?value=0

슬라이더 값이 200일 때 다음 URL에서 요청을 받게 됩니다.

http://ESP-IP-ADDRESS/slider?value=200

이렇게 하면 ESP32가 GET 요청을 받을 때 URL에서 값 매개변수를 검색하여 다음 섹션에서 볼 수 있듯이 그에 따라 PWM 신호를 제어할 수 있습니다.

프로세서

이제 브라우저에서 처음으로 액세스할 때 HTML 텍스트의 플레이스홀더를 현재 슬라이더 값으로 대체하는 processor() 함수를 만들어야 합니다.

// Replaces placeholder with button section in your web page
String processor(const String& var){
  //Serial.println(var);
  if (var == "SLIDERVALUE"){
    return sliderValue;
  }
  return String();
}

웹 페이지가 요청되면 HTML에 플레이스홀더가 있는지 확인합니다. %SLIDERVALUE% 플레이스홀더를 찾으면 sliderValue 변수에 저장된 값을 반환합니다.

setup()

setup()에서 디버깅 목적으로 직렬 모니터를 초기화합니다.

Serial.begin(115200);

이전에 정의한 PWM 속성으로 LEDC 핀을 구성합니다.

// LED PWM 기능 구성

ledcAttachChannel(output, freq, resolution, ledChannel);

PWM 신호의 듀티 사이클을 sliderValue에 저장된 값으로 설정합니다(ESP32가 시작되면 0으로 설정됨).

ledcWrite(output, sliderValue.toInt());

로컬 네트워크에 연결하고 ESP32 IP 주소를 인쇄합니다.

// Connect to Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
  delay(1000);
  Serial.println("Connecting to WiFi..");
}

// Print ESP Local IP Address
Serial.println(WiFi.localIP());

요청 처리

마지막으로 웹 서버를 처리하기 위한 다음 코드 줄을 추가합니다.

// Route for root / web page
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
  request->send_P(200, "text/html", index_html, processor);
});

// Send a GET request to <ESP_IP>/slider?value=<inputMessage>
server.on("/slider", HTTP_GET, [] (AsyncWebServerRequest *request) {
  String inputMessage;
  // GET input1 value on <ESP_IP>/slider?value=<inputMessage>
  if (request->hasParam(PARAM_INPUT)) {
    inputMessage = request->getParam(PARAM_INPUT)->value();
    sliderValue = inputMessage;
    ledcWrite(output, sliderValue.toInt());
  }
  else {
    inputMessage = "No message sent";
  }
  Serial.println(inputMessage);
  request->send(200, "text/plain", "OK");
});

루트 URL에서 요청을 하면 index_html 변수에 저장된 HTML 텍스트를 보냅니다. 또한 모든 플레이스홀더를 올바른 값으로 대체하는 프로세서 함수를 전달해야 합니다.

// Route for root / web page
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
  request->send_P(200, "text/html", index_html, processor);
});

현재 슬라이더 값을 저장하고 그에 따라 LED 밝기를 설정하는 또 다른 핸들러가 필요합니다.

server.on("/slider", HTTP_GET, [] (AsyncWebServerRequest *request) {
  String inputMessage;
  // GET input1 value on <ESP_IP>/slider?value=<inputMessage>
  if (request->hasParam(PARAM_INPUT)) {
    inputMessage = request->getParam(PARAM_INPUT)->value();
    sliderValue = inputMessage;
    ledcWrite(output, sliderValue.toInt());
  }
  else {
    inputMessage = "No message sent";
  }
  Serial.println(inputMessage);
  request->send(200, "text/plain", "OK");
});

기본적으로 다음 줄에서 슬라이더 값을 가져옵니다.

if (request->hasParam(PARAM_INPUT)) {
  inputMessage = request->getParam(PARAM_INPUT)->value();
  sliderValue = inputMessage;

그런 다음 제어하려는 LEDC 핀과 값을 인수로 받는 ledcWrite() 함수를 사용하여 LED 밝기(PWM 듀티 사이클)를 업데이트합니다.

ledcWrite(output, sliderValue.toInt());

마지막으로 서버를 시작합니다.

server.begin();

비동기 웹 서버이므로 loop()에 아무것도 쓸 필요가 없습니다.

void loop(){

}

이것이 코드의 작동 방식입니다.

코드 업로드

이제 ESP32에 코드를 업로드합니다. 올바른 보드와 COM 포트를 선택했는지 확인하세요.

업로드 후 115200의 전송 속도로 직렬 모니터를 엽니다. ESP32 재설정 버튼을 누릅니다. 직렬 모니터에 ESP32 IP 주소가 인쇄되어야 합니다.

ESP32 ESP8266 PWM 웹 서버 Arduino IDE 직렬 모니터 IP 주소

웹 서버 데모

브라우저를 열고 ESP32 IP 주소를 입력합니다. 웹 서버에 슬라이더와 현재 값이 표시됩니다.

ESP32 ESP8266 슬라이더 웹 서버 제어 PWM 데모

슬라이더를 움직이면 ESP32 내장 LED가 밝기를 늘리거나 줄이는 것을 볼 수 있습니다.

마무리

이 튜토리얼에서는 웹 서버 프로젝트에 슬라이더를 추가하고 ESP32에서 사용할 수 있는 변수에 값을 가져와 저장하는 방법을 알아보았습니다. 예를 들어 PWM 신호를 제어하여 LED의 밝기를 제어합니다. 예를 들어 LED 대신 서보 모터를 제어할 수 있습니다.

또한 슬라이더는 임계값이나 설정해야 하는 다른 값을 설정하는 데 사용할 수 있으며, 그런 다음 ESP32에서 무언가를 결정하는 데 사용할 수 있습니다.

ESP8266 보드를 사용하는 경우 슬라이더 제어 LED 밝기(PWM)가 있는 ESP8266 NodeMCU 웹 서버를 읽어보세요.

이 프로젝트가 도움이 되었기를 바랍니다. 다음 튜토리얼도 마음에 드실 수 있습니다.

ESP32 비동기 웹 서버 - 제어 출력

ESP 웹 서버 - 타이머가 있는 제어 출력

ESP32 DHT11/DHT22 웹 서버 - 온도 및 습도

다음 리소스를 통해 ESP32에 대해 자세히 알아보세요.

Arduino IDE로 ESP32 배우기(eBook + 비디오 과정)

더 많은 ESP32 프로젝트 및 튜토리얼…

읽어주셔서 감사합니다. 배움을 멈추지 마세요.

저작자표시 비영리 변경금지

'ESP32' 카테고리의 다른 글

ESP32 아두이노 IDE 에서 사용하기 (0)	2025.01.17
Relay Web Server (1)	2025.01.17
PWM32 비동기 웹 서버 ESPAsyncWebServer 라이브러리 (1)	2025.01.17
ESP32 웹 서버(WebSocket): Multiple Slider LED 밝기 제어(PWM) (2)	2025.01.15
ESP32 이벤트 사용 Web Server(센서값 자동 업데이트) (0)	2025.01.14
HTTP POST Web APIs, ThingSpeak 및 IFTTT.com (0)	2025.01.14
ESP32 Bluetooth Classic과 Arduino IDE (1)	2025.01.14
ESP32 HTTP GET Web APIs, OpenWeatherMap.org 및 ThingSpeak (1)	2025.01.13

더욱 좋은 정보를 제공하겠습니다.~ ^^

기린

ESP32 슬라이더가 있는 웹 서버: LED 밝기 제어(PWM)

'ESP32' 카테고리의 다른 글

티스토리툴바

ESP32 슬라이더가 있는 웹 서버: LED 밝기 제어(PWM)

'ESP32' 카테고리의 다른 글

'ESP32' Related Articles

티스토리툴바