[아두이노] 웹페이지에서 ESP8266으로 데이터 전송 및 LED 제어하는 방법 > 전기/전자

[MCU] [아두이노] 웹페이지에서 ESP8266으로 데이터 전송 및 LED 제어하는 방법

하나를하더라도최선을

2024-07-20 20:10 258 0 0 0

본문

웹 인터페이스를 통해 ESP8266으로 데이터를 제어하고 상태 확인 및 LED 제어하는 간단한 예제

소개

이 포스트에서는 ESP8266(WiFi 모듈) 을 사용하여 웹페이지에서 데이터를 전송하고, 이를 시리얼 모니터를 통해 확인하는 방법을 설명합니다.ESP8266은 IoT 프로젝트에서 널리 사용되며, 웹 기반 제어는 매우 유용한 기능입니다.

준비물

ESP8266 모듈: WiFi를 지원하는 ESP8266 모듈(예: NodeMCU)

알리에서 "ESP8266 ESP-12E NodeMcu" 를 하나 구입했습니다.

Arduino IDE: ESP8266을 프로그래밍할 수 있는 Arduino IDE

아두이노 IDE 를 다운받아 설치합니다.

시리얼 모니터: ESP8266에서 시리얼 통신을 통해 데이터를 확인할 수 있는 환경
esp8266-3.1.2.zip을 다운받아 압축을 풀고 필요한 라이브러리를 아두이노 라이브러리 폴더에 넣어줍니다.

프로그래밍:

웹에서 검색해가면서 아두이노에서 프로그래밍을 했습니다.

아래는 아두이노 전체 소스코드 입니다.

/* ip로 접속 버튼 핸들링 */
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

const char* ssid = "와이파이명";
const char* password = "와이파이비밀번호";
const int ledPin =  2;
boolean bLED = false; 

// Create an instance of the server
// specify the port to listen on as an argument
ESP8266WebServer server(800);    // 일반적인 웹포트는 80입니다.

void handleRoot() {
  String html = "<!DOCTYPE html><html lang='ko'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8'><title>ESP8266 :: WebServer</title><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script><link rel='stylesheet' type='text/css' href='../../../Arduino/main.css'></head><body><script type='text/javascript' src='http://code.jquery.com/jquery-3.5.1.min.js'></script><div class='container'><div class='inner'><div class='content'><form id='join_form' class='form btn_fixed' action='/api' method='POST'><div class='form_content'><div class='form_section'><div class='check_terms'><div class='check_wrap'><input type='checkbox' id='chk_all' name='chk_all' class='blind' checked='checked'><label for='chk_all'><span class='text check_all'>전체 켜기</span></label></div></div><ul class='terms_list'><li class='terms_item'><div class='check_terms'><div class='check_wrap'><input type='checkbox' id='d_1' class='blind' checked='checked'><label for='d_1'><em class='option point'>Device 1</em><div class='text_wrap'><span class='text'>Device 1</span></div></label></div></div></li><li class='terms_item'><div class='check_terms'><div class='check_wrap'><input id='d_2' name='d_2' type='checkbox' checked='checked'><label for='d_2'><em class='option point'>Device 2</em><div class='text_wrap'><span class='text'>Device 2</span></div></label></div></div></li><li class='terms_item'><div class='check_terms'><div class='check_wrap'><input type='checkbox' id='d_3' name='d_3' checked='checked'><label for='d_3'><em class='option'>Device 3</em><span class='text'>Device 3</span></label></div></div></li><li class='terms_item'><div class='check_terms'><div class='check_wrap'><input type='checkbox' id='d_4' name='d_4' checked='checked'><label for='d_4'><em class='option'>Device 4</em><div class='text_wrap'><span class='text'>Device 4</span></div></label></div></div></li><li class='terms_item'><div class='check_terms'><div class='check_wrap'><input type='checkbox' id='d_5' name='d_5' checked='checked'><label for='d_5'><em class='option'>Device 5</em><div class='text_wrap'><span class='text'>Device 5</span></div></label></div></div></li></ul></div></div><div class='btn_submit_wrap'><button type='button' id='submit' class='btn_submit'>적용</button></div></form></div><p id='message'></p></div></div><script src='../../../Arduino/main.js'></script></body></html>";

  server.send(200, "text/html", html);
}

void handleSubmit() {
  String message = "Hello from ESP8266!";
  message += "\nPOST variables:\n";

  if (server.hasArg("d_1") && server.hasArg("d_2")) {
    String d_1 = server.arg("d_1");
    String d_2 = server.arg("d_2");
    if (d_1 == "on") {
      bLED = true;
      digitalWrite(ledPin, LOW);  // LED 켜기
      Serial.println("LED is ON");
    } else if (d_1 == "off") {
      bLED = false;
      digitalWrite(ledPin, HIGH); // LED 끄기
      Serial.println("LED is OFF");
   }
    message += "d_1: " + d_1 + ", d_2: " + d_2 + "\n";
  } else {
    message += "No POST data received\n";
  }

  server.send(200, "text/plain", message);
}

void setup() {
  pinMode(ledPin, OUTPUT);
  Serial.begin(115200);
  delay(100);

  // WiFi 연결
  Serial.print("Connecting to ");
  Serial.println(ssid);
  WiFi.begin(ssid, password);

  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  Serial.println("");
  Serial.println("WiFi connected");
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());

  // 핸들러 등록
  server.on("/", HTTP_GET, handleRoot);    // 루트 페이지 처리
  server.on("/api", HTTP_POST, handleSubmit); // POST 처리

  // 웹 서버 시작
  server.begin();
  Serial.println("HTTP server started");
}

void loop() {
  // 클라이언트 요청 처리
  server.handleClient();

  // 시리얼 데이터 수신 처리
  if (Serial.available() >= 4) {
    // 시리얼에서 4바이트 읽기
    byte data[4];
    for (int i = 0; i < 4; i++) {
      data[i] = Serial.read();
    }

    // 데이터 확인 및 처리
    if (data[0] == 241 && data[1] == 123 && data[3] == 242) {
      if (data[2] == 1) {
        bLED = true;
        digitalWrite(ledPin, LOW);  // LED 켜기
        Serial.println("Received: 241,123,1,242 - LED is ON");
      } else if (data[2] == 0) {
        bLED = false;
        digitalWrite(ledPin, HIGH); // LED 끄기
        Serial.println("Received: 241,123,0,242 - LED is OFF");
      }
    }
  }
}

html 코드:

일부 자바스크립트와 css 는 제 웹서버에 두고 ESP8266 에 접속하면 제 웹서버에서 로딩 하도록 했습니다.

../../../Arduino/

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>ESP8266 :: WebServer</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../../../Arduino/main.css">
</head>

<body>
    <script type="text/javascript" src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
    <div class="container">
        <div class="inner">
            <div class="content">
                <form id="join_form" class="form btn_fixed" action="/api" method="POST">
                    <div class="form_content">
                        <div class="form_section">
                            <div class="check_terms">
                                <div class="check_wrap"><input type="checkbox" id="chk_all" name="chk_all" class="blind" checked="checked"><label for="chk_all"><span class="text check_all">전체 켜기</span></label></div>
                            </div>
                            <ul class="terms_list">
                                <li class="terms_item">
                                    <div class="check_terms">
                                        <div class="check_wrap"><input type="checkbox" id="d_1" class="blind" checked="checked"><label for="d_1"><em class="option point">Device 1</em>
                                                <div class="text_wrap"><span class="text">Device 1</span></div>
                                            </label></div>
                                    </div>
                                </li>
                                <li class="terms_item">
                                    <div class="check_terms">
                                        <div class="check_wrap"><input id="d_2" name="d_2" type="checkbox" checked="checked"><label for="d_2"><em class="option point">Device 2</em>
                                                <div class="text_wrap"><span class="text">Device 2</span></div>
                                            </label></div>
                                    </div>
                                </li>
                                <li class="terms_item">
                                    <div class="check_terms">
                                        <div class="check_wrap"><input type="checkbox" id="d_3" name="d_3" checked="checked"><label for="d_3"><em class="option">Device 3</em><span class="text">Device 3</span></label></div>
                                    </div>
                                </li>
                                <li class="terms_item">
                                    <div class="check_terms">
                                        <div class="check_wrap"><input type="checkbox" id="d_4" name="d_4" checked="checked"><label for="d_4"><em class="option">Device 4</em>
                                                <div class="text_wrap"><span class="text">Device 4</span></div>
                                            </label></div>
                                    </div>
                                </li>
                                <li class="terms_item">
                                    <div class="check_terms">
                                        <div class="check_wrap"><input type="checkbox" id="d_5" name="d_5" checked="checked"><label for="d_5"><em class="option">Device 5</em>
                                                <div class="text_wrap"><span class="text">Device 5</span></div>
                                            </label></div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="btn_submit_wrap"><button type="button" id="submit" class="btn_submit">적용</button></div>
                </form>
            </div>
            <p id="message"></p>
        </div>
    </div>
    <script src="../../../Arduino/main.js"></script>
</body>

</html>

https://program1472.com/Arduino/main.js

$('#chk_all').click(function(event) {
    if (this.checked) {
        $(':checkbox').each(function() {
            this.checked = true;
        });
    } else {
        $(':checkbox').each(function() {
            this.checked = false;
        });
    }
});


$(document).ready(function() {
    $('#submit').click(function() { //submit 버튼을 클릭하였을 때
        sendCheckboxData(); // 
    });

    $('input[type=checkbox]').click(function(event) {
        sendCheckboxData(); // 
    });

    // 체크박스 데이터 전송 함수 정의
    function sendCheckboxData() {
        // 체크된 체크박스들의 id와 값을 배열에 담기
        let checkboxes = $('input[type=checkbox]').map(function() {
            let id = $(this).attr('id');
            let value = $(this).prop('checked') ? 'on' : 'off';
            return id + '=' + value;
        }).get();

        // 배열을 문자열로 변환하여 sendData에 담기
        let sendData = checkboxes.join('&');

        $.ajax({
            type: 'post', //post 방식으로 전송
            url: '/api', //데이터를 주고받을 파일 주소
            data: sendData, //위의 변수에 담긴 데이터를 전송해준다.
            dataType: 'html', //html 파일 형식으로 값을 담아온다.
            success: function(data) { //파일 주고받기가 성공했을 경우. data 변수 안에 값을 담아온다.
                $('#message').html(data); //현재 화면 위 id="message" 영역 안에 data안에 담긴 html 코드를 넣어준다. 
            }
        });
    }

});

https://program1472.com/Arduino/main.css

<소스코드 생략>

ESP8266 에 접속해서 테스트 해봤습니다

시리얼로 에코찍어서 상태도 확인했습니다.

역시 동작 잘 합니다

0 0

로그인 후 추천 또는 비추천하실 수 있습니다.

댓글목록0

등록된 댓글이 없습니다.