재료

  • 저항 3개
  • USB 케이블 1개
  • esp8266 1개
  • 점프 와이어 13개
  • 브래드 보드 1개
  • LED 3개
  • 아두이노 우노 1개
  • AC 어댑터 1개

첨부파일

    이전 프로젝트에서는 하나의 LED를 웹페이지를 이용하여 조작하는 것을 수행해보았습니다. 이번 프로젝트에서는 LED 두 개를 추가로 더 연결하여 좀 더 복잡한 조작을 수행해보도록 하겠습니다. 지난 번 프로젝트에서 사용했던 스케치와 웹페이지 코드, 회로에다 약간의 수정을 더해서 구현하려고 하니 어렵지 않으실 거에요.




STEP1. 준비물

아두이노 보드, USB 케이블, 브래드 보드, AC 어댑터, 저항 3개, LED 3개, 점프와이어 13개



STEP2. 회로도




STEP3. 코드

    아두이노에 아래의 코드를 업로드해주세요. 이 때 ESP8266의 전원 선을 뽑아주시는 것이 좋습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
#include <SoftwareSerial.h>
#define DEBUG true
 
SoftwareSerial esp8266(2,3); //RX는 2번 핀, TX는 3번 핀
 
void setup() {
  // put your setup code here, to run once:
   Serial.begin(9600);
   esp8266.begin(9600); //esp의 보드레이트
 
   pinMode(11, OUTPUT); //LED가 꽂힌 핀을 output으로 설정
   digitalWrite(11, LOW); //LED를 끈 상태로 초기화
 
   pinMode(10, OUTPUT); //LED가 꽂힌 핀을 output으로 설정
   digitalWrite(10, LOW); //LED를 끈 상태로 초기화
 
   pinMode(9, OUTPUT); //LED가 꽂힌 핀을 output으로 설정
   digitalWrite(9, LOW); //LED를 끈 상태로 초기화
 
  /*AT Command 이용*/
  sendData("AT+RST\r\n", 2000, DEBUG); //reset module
  sendData("AT+CWMODE=3\r\n", 1000, DEBUG); //dual mode로 설정
  sendData("AT+CWJAP=\"MakeWith1(2.5G)\",\"mw06010601\"\r\n", 5000, DEBUG); //사용할 공유기 설정
  sendData("AT+CIPMUX=1\r\n", 1000, DEBUG); //multiple connections 설정
  sendData("AT+CIPSERVER=1,80\r\n", 1000, DEBUG); //포트 번호를 80번으로 설정
}
 
void loop() {
  // put your main code here, to run repeatedly:
  if(esp8266.available()){ //esp8266에 웹에서 메시지가 왔는지 파악
    if(esp8266.find("+IPD,")){ //data를 받아옴
      delay(1000); //시리얼 버퍼에서 보내져온 데이터가 다 찰 때까지 대기
      int connectionID=esp8266.read()-48; //connection ID를 알아내고 아스키코드값이므로 48을 빼줌
      esp8266.find("pin=");
      int pinNumber=(esp8266.read()-48)*10; //get the first number
      pinNumber+=(esp8266.read()-48); //get the second number
 
      switch(pinNumber){
        case 19:
          digitalWrite(9, HIGH);
          digitalWrite(10, LOW);
          digitalWrite(11, LOW); break;
        case 10:
          digitalWrite(9, LOW);
          digitalWrite(10, HIGH);
          digitalWrite(11, LOW); break;
        case 11:
          digitalWrite(9, LOW);
          digitalWrite(10, LOW);
          digitalWrite(11, HIGH); break;
        case 20:
          digitalWrite(9, LOW);
          digitalWrite(10, LOW);
          digitalWrite(11, LOW);
          for(int i=0; i<255; i++){
            analogWrite(9, i);
            delay(10);
          }
          for(int i=0; i<255; i++){
            analogWrite(9, 255-i);
            analogWrite(10, i);
            delay(10);
          }
          for(int i=0; i<255; i++){
            analogWrite(10, 255-i);
            analogWrite(11, i);
            delay(10);
          }
          for(int i=0; i<255; i++){
            analogWrite(11, 255-i);
            delay(10);
          }
          break;
        case 21:
          digitalWrite(9, LOW);
          digitalWrite(10, LOW);
          digitalWrite(11, LOW);
          for(int i=0; i<10; i++){
            digitalWrite(9, HIGH);
            delay(100);
            digitalWrite(9, LOW);
            digitalWrite(10, HIGH);
            delay(100);
            digitalWrite(10, LOW);
            digitalWrite(11, HIGH);
            delay(100);
            digitalWrite(11, LOW);
          }
        default: 
          digitalWrite(9, LOW);
          digitalWrite(10, LOW);
          digitalWrite(11, LOW); break;
      }
      
      /*연결을 끊음*/
      String closeCommand="AT+CIPCLOSE=";
      closeCommand+=connectionID;
      closeCommand+="\r\n";
      sendData(closeCommand, 1000, DEBUG);
    }
  }
}
 
/*ESP8266의 정보를 알아내고 설정하기 위한 함수 선언*/
String sendData(String command, const int timeout, boolean debug){
  String response = "";
  esp8266.print(command); //command를 ESP8266에 보냄
  long int time=millis();
  
  while((time+timeout)>millis()){
    while(esp8266.available()){
      /*esp가 가진 데이터를 시리얼 모니터에 출력하기 위함*/
      char c=esp8266.read(); //다음 문자를 읽어옴
      response+=c;
    }
  }
  if(debug){
    Serial.print(response);
  }
 
  return response;
}

    38번째 라인부터 작성된 switch 문을 통해서 각각의 버튼에 따라서 다른 동작을 하도록 프로그래밍하였습니다. 기본적인 내용은 <손에 잡히는 아두이노> 에서 LED를 다룰 때 썼던 코드와 비슷하니 어렵지 않으실 거예요. 위의 코드에 맞게 조작하기 위해서 웹페이지를 만들어봅시다. 기존의 웹페이지에서 몇 개의 버튼을 더 추가하였어요.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<html>
 <head>
  <title> ★ESP8266로 LED 조작하기★ </title>
 </head>
 <body>
 </br></br>
 <center>
 <br><font size=4 face="맑은 고딕" color="GRAY"> ESP8266 Project 2</br>
 <font size=6 face="맑은고딕" color="LIGHTBLUE"> ★ ESP8266로 LED 조작하기 ★
 </font></center></br></br>
 <center>
 <button id="19" class="led" style="height:100; width:130;"><font size=4 color=#FFBB00><b>LED PIN 9</b>
 </font></button>
 <button id="10" class="led" style="height:100; width:130;"><font size=4 color=#2F9D27><b>LED PIN 10</b>
 </font></button>
 <button id="11" class="led" style="height:100; width:130;"><font size=4 color=#FF0000><b>LED PIN 11</b>
 </font></button>
 </br></br>
 <button id="20" class="led" style="height:50; width:410;"><font size=4>LED 아날로그 출력</font></button>
 </br></br>
 <button id="21" class="led" style="height:50; width:410;"><font size=4>LED 디지털 출력</font></button>
 </center>
 
 <script src="jquery.min.js"></script>
 <script type="text/javascript">
  $(document).ready(function(){
   $(".led").click(function(){
    var p = $(this).attr('id'); // get id value (i.e. pin9, pin10, or pin11)
    // send HTTP GET request to the IP address with the parameter "pin" and value "p", then execute the function
    $.get("http://192.168.0.111:80/", {pin:p}); // execute get request
   });
  });
 </script>
 </body>
</html>
 
 


위의 코드를 메모장에 복사해서 붙여넣어주시고, .html 확장자로 저장해주세요. 그런 후에 첨부 파일을 다운받고 그 파일을 html 파일과 같은 디렉터리 안에 넣어주시면 됩니다. 이 때 30번째 라인의 IP 주소 부분을 본인의 IP 주소로 바꾸어서 저장해주시면 됩니다. IP 주소 확인은 링크를 따라가시면 자세하게 설명되어 있습니다.


STEP4. 결과 확인

    결과를 확인해보면 아래와 같은 결과를 확인할 수 있습니다. 만약 시리얼 모니터 상으로 ERROR 라는 메시지가 떴다면 아두이노의 리셋 버튼을 눌러주세요. 한 3번 정도 리셋을 하면 거의 대부분 OK라는 표시를 받을 수 있습니다. 그런 후에 웹페이지의 버튼을 누르면 LED가 원하는 대로 작동하는 것을 확인할 수 있습니다.




    웹페이지 안에서 버튼을 누르면 원하는 결과가 수행되도록 작성된 웹페이지의 모습입니다.  맨 위의 3개의 버튼은 각각의 색이 LED의 색을 의미하여 LED PIN 9를 누르면 노란색 LED가 켜지는 것을 확인할 수 있습니다.


댓글 2

MADE BY

김민정

사물인터넷, 아두이노