사물인터넷(IoT)2016. 3. 15. 09:30

예전 포스팅에서 ESP8266의 펌웨어를 업데이트 해봤고(http://deneb21.tistory.com/269) AT 커맨드를 이용하여 공유기에 연결해 보았다.(http://deneb21.tistory.com/272) 이번엔 웹페이지를 통해서 아두이노에 달린 LED를 컨트롤 해 보자


웹페이지의 버튼을 클릭하면 아두이노에 연결된 특정 LED가 켜지고 꺼지는 것을 구현해 보는 것이다.


연결은 다음과 같이 해 주었다. 그리고 위의 두 개의 글에서도 말을 했지만 ESP8266은 3.3V에서 동작하는데 아두이노 디지털핀의 출력은 5V이다. 저항 등을 연결하여 다운시켜야 고장이 없지만 저항이 없어서 직접 연결하였다. 이는 ESP8266 모듈의 고장이나 아두이노의 고장의 원인이 될 수가 있다고 한다. 하지만 나의 경우는 운이 좋아서 그런건지 몇 시간을 테스트 해도 이상이 없다;; 물론 LED도 저항과 함께 연결해야 한다.



■ Fritzing 파일: 

ESP8266_WEB_LED.fzz


아두이노측 소스


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
#include <SoftwareSerial.h>
#define DEBUG true
 
SoftwareSerial esp8266(2,3); // make RX Arduino line is pin 2, make TX Arduino line is pin 3.
                                        // This means that you need to connect the TX line from the esp to the Arduino's pin 2
                                        // and the RX line from the esp to the Arduino's pin 3
 
void setup() {
  Serial.begin(9600);
  esp8266.begin(9600); // your esp's baud rate might be different
  
  pinMode(11, OUTPUT);
  digitalWrite(11, LOW);
  
  pinMode(12, OUTPUT);
  digitalWrite(12, LOW);
  
  pinMode(13, OUTPUT);
  digitalWrite(13, LOW);
   
  sendData("AT+RST\r\n",2000,DEBUG); // reset module
  sendData("AT+CIOBAUD?\r\n",2000,DEBUG); // check baudrate (redundant)
  sendData("AT+CWMODE=3\r\n",1000,DEBUG); // configure as access point (working mode: AP+STA)
  sendData("AT+CWLAP\r\n",3000,DEBUG); // list available access points
  sendData("AT+CWJAP=\"AP NAME\",\"AP PASSWORD\"\r\n",5000,DEBUG); // join the access point
  sendData("AT+CIFSR\r\n",1000,DEBUG); // get ip address
  sendData("AT+CIPMUX=1\r\n",1000,DEBUG); // configure for multiple connections
  sendData("AT+CIPSERVER=1,80\r\n",1000,DEBUG); // turn on server on port 80
}
 
void loop() {
  if(esp8266.available()) { // check if the esp is sending a message
    if(esp8266.find("+IPD,")) {
      delay(1000); // wait for the serial buffer to fill up (read all the serial data)
      // get the connection id so that we can then disconnect
      int connectionId = esp8266.read()-48// subtract 48 because the read() function returns 
                                           // the ASCII decimal value and 0 (the first decimal number) starts at 48
      esp8266.find("pin="); // advance cursor to "pin="
      int pinNumber = (esp8266.read()-48)*10// get first number i.e. if the pin 13 then the 1st number is 1, then multiply to get 10
      pinNumber += (esp8266.read()-48); // get second number, i.e. if the pin number is 13 then the 2nd number is 3, then add to the first number
      digitalWrite(pinNumber, !digitalRead(pinNumber)); // toggle pin    
     
      // make close command
      String closeCommand = "AT+CIPCLOSE="
      closeCommand+=connectionId; // append connection id
      closeCommand+="\r\n";
      sendData(closeCommand,1000,DEBUG); // close connection
    }
  }
}
 
/*
* Name: sendData
* Description: Function used to send data to ESP8266.
* Params: command - the data/command to send; timeout - the time to wait for a response; debug - print to Serial window?(true = yes, false = no)
* Returns: The response from the esp8266 (if there is a reponse)
*/
String sendData(String command, const int timeout, boolean debug) {
    String response = "";
    esp8266.print(command); // send the read character to the esp8266
    long int time = millis();
    
    while( (time+timeout) > millis()) {
      while(esp8266.available()) {
        // The esp has data so display its output to the serial window 
        char c = esp8266.read(); // read the next character.
        response+=c;
      }
    }
    
    if(debug) {
      Serial.print(response);
    }
    return response;
}
cs


위에서 25행에 AP NAME, AP PASSWORD 부분에는 자신이 연결하려고 하는 공유기의 AP이름과 패스워드를 적어 주어야 한다.


나의 경우 전력부족으로 추정되는 에러로 위의 프로그램이 업로드가 되지 않는 현상이 있었다. 이런 경우 ESP8266의 전원케이블을 뽑고 프로그램을 업로드 하니 업로드가 잘 된다. 역시 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
<html>
 <head>
  <title>ESP8266 LED Control</title>
 </head>
 <body>
 
 <!-- in the <button> tags below the ID attribute is the value sent to the arduino -->
 <h>ESP8266 LED Control</h></br></br>
 <button id="11" class="led">LED PIN 11</button<!-- button for pin 11 -->
 <button id="12" class="led">LED PIN 12</button<!-- button for pin 12 -->
 <button id="13" class="led">LED PIN 13</button<!-- button for pin 13 -->
  
 <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. pin13, pin12, 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.1.102:80/", {pin:p}); // execute get request
   });
  });
 </script>
 </body>
</html>
cs


웹페이지 소스도 19행의 '192.168.1.102' 부분을 자신의 ESP8266 IP주소로 바꿔주어야 한다. 그리고 아래의 jquery.min.js 파일을 위의 html 파일과 같은 폴더에 넣어준다.

jquery.min.js


그리고 로컬 컴퓨터에서 테스트 하는 것은 그냥 html 파일을 브라우저로 불러와서 테스트해도 되지만 원격에서 테스트 하고자 하는 경우 당연한 얘기겠지만 자신의 PC에 웹서버를 설치하고 html 파일을 웹서버에 올려야 한다. 그리고 공유기 환경이라면 포트포워딩 등을 통해서 외부에서 접근 가능하도록 해야 한다. 나의 경우는 간단한 웹서버로 Mongoose 웹서버를 즐겨쓴다.


결과

각 버튼을 클릭하면 약간의 텀이 있지만 해당되는 LED가 잘 켜지고 잘 꺼진다. 더 응용하면 릴레이나 모터의 제어도 가능할 것 같다.




참고 사이트: 

http://allaboutee.com/2015/01/02/esp8266-arduino-led-control-from-webpage/

http://blog.naver.com/damtaja/220311479276

반응형
Posted by 대네브 (deneb)

댓글을 달아 주세요

  1. 비밀댓글입니다

    2016.10.28 15:37 [ ADDR : EDIT/ DEL : REPLY ]
    • 내부 사설 ip를 이용하니 당연히 외부 네트워크에서는 안되겠죠. 공유기를 사용한다면 포트포워딩 등의 방법으로 외부로 esp8266의 네트워크를 뚫어주어야 합니다. 그리고 공인 ip를 적든지 ddns 도메인을 적어야 외부에서 접근하겠죠. http://deneb21.tistory.com/408 제가 예전에 적은 글을 읽어보시기 바랍니다. 그리고 질문글은 비밀글로 올리지 않으셨으면 좋겠어요.

      2016.10.28 16:55 신고 [ ADDR : EDIT/ DEL ]
  2. 배성우

    충고감사합니다.^

    2016.10.29 13:03 [ ADDR : EDIT/ DEL : REPLY ]
  3. 임상민

    정말 좋은 글 감사드립니다!
    하나 질문좀해도 괜찮을까요?
    저 코드를 가져가서 AP NAME, AP PASSWORD 란에
    각각 와이파이 이름과 패스워드를 입력하고
    시리얼 모니터를 틀었는데
    아무런 반응이 없어서...

    혹시나 하는 마음에
    모든 "esp8266"을 Serial로 바꾸어서 해봤더니
    이놈이 AP명령어를 명령어로 인식하지 않고 텍스트로 출력만 하더라고요....

    혹시 코딩하시면서 저와 비슷한 경험이 있으셨다면 조언을 좀 구해도 될까요...?

    P.S 혹시 Serial.print로 데이터를 출력하는데 왜 ap명령어 인식을 하지 않는건지 조언을 좀 듣고 싶습니다!

    2017.04.04 06:45 [ ADDR : EDIT/ DEL : REPLY ]
    • 아두이노와 ESP8266 간의 통신
      아두이노와 PC 와의 통신 (Serial 통신)
      둘 다 같은 포트를 이용해서 그런것 아닐까요?
      (저도 짐작만 그렇다는거지 확실한건 잘 모르겠습니다.)

      2017.04.04 22:55 신고 [ ADDR : EDIT/ DEL ]
  4. 로청

    한가지 질문좀 드려도 될까요.

    웹페이지 소스같은경우 그냥 메모장으로 작성한후 HTML파일로 저장해도 유효한가요? 아니면 다른 프로그램쓰시는게 있나요.?

    2017.05.10 22:13 [ ADDR : EDIT/ DEL : REPLY ]
  5. 붸에에에

    코딩을 복사해서 AP NAME, AP PASSWORD를 바꾸고 와이파이 모듈에 넣었더니
    avrdude: skt500_getsync() attempt 1 of 10: not in sync: resp=0x82라고 뜨고 10 of 10까지 쭉 안되는데요
    무엇이 문제일까요?

    2018.02.11 13:31 [ ADDR : EDIT/ DEL : REPLY ]
  6. Gps

    안녕하세요. Led 말고 gps 모듈을 써서 위도, 경도 값만 보내려고 하는데 wifi연결도 하고 위도, 경도도 불러와지는데 그 값을 웹페이지로 보내려면 소스코드를 어떻게 해야할까요???

    2018.06.07 00:55 [ ADDR : EDIT/ DEL : REPLY ]
    • 와이파이 연결까지 되었으면 웹서버로 전송해서 저장하고 그걸 클라이언트가 데이터를 받아가는 방식도 괜찮겠네요. 웹서버 구축이 부담되면 iot 클라우드 서비스를 이용하는것도 방법입니다. thingspeak 같은... 소스는 짜드리지 않습니다

      2018.06.07 07:11 신고 [ ADDR : EDIT/ DEL ]
    • Gp

      시리얼 모니터에 뜨는 위도 경고 값을 웹서버에 저장 안하고 웹페이지에 출력만 하는건 <!DOCTYPE> 로 cilent.print로 가능할까요?

      2018.06.07 12:20 [ ADDR : EDIT/ DEL ]
    • 그렇게 간단한 코딩으로 시리얼통신 값을 받아올수 있나요??? 잘 모르겠지만 예를들어 자바로 웹페이지를 만든다면 자바의 시리얼통신 관련 라이브러리를 참고해야하고 다른 언어라도 마찬가지일 것입니다

      2018.06.07 12:33 신고 [ ADDR : EDIT/ DEL ]
  7. FD

    잘봤습니다. 실제로 구성을 하여 테스트를 진행했습니다.
    모든게 잘되었습니다 구성은 모바일 핫스팟을 이용한 랜 구성으로 하였습니다.
    브라우저에서 HTML로 열어서 신호를 보냈지만 크롬에선 해당 모듈아이피의 80번 포트로 연결했으나
    컨넥션이 불가능했다고 뜨는데요(오류 : ERR_CONNECTION_REFUSED), 혹시 다른 추가설정을 하셨는지 궁금합니다.
    핑으로는 재대로 연결이 되고, 내부 네트워크 통신이 가능했습니다.

    2018.09.05 15:29 [ ADDR : EDIT/ DEL : REPLY ]
    • 웹서버 쪽에 문제가 있네요. 외부접속시 공유기를 쓴다면 포트포워딩 등이 잘 설정 되었는지 확인해 보세요

      2018.09.07 09:35 신고 [ ADDR : EDIT/ DEL ]
  8. J

    안녕하세요. 유익한 글 잘 보았습니다.
    현재 서버 연결까지 잘 됐는데 서보모터를 제어하려면 어떻게 코딩해야하는지 알 수 있을까요?
    pwm은 11에 연결시켰습니다.

    2019.10.24 01:11 [ ADDR : EDIT/ DEL : REPLY ]
  9. 궁금하면500원

    시리얼모니터에 아무것도 안찍히고 AT를 입력해도 반응이없어요.ㅠㅠ혹시 아직 피드백 받으시나용??ㅠㅠ

    2020.12.08 22:14 [ ADDR : EDIT/ DEL : REPLY ]
  10. 체리

    안녕하세요. 좋은 글 잘 보았습니다. 도움이 많이됬습니다. 졸업작품 하던와중인데 질문이 있습니다.
    혹시 LED말고 LCD와 서보모터로 다중 제어 하려면 아두이노 코드를 그대로 쓰되 12~19행을 지우고 그 자리에 LCD와 서보모터 동작 코드를 넣으면 되나요?
    그리고 jquery.min.js 파일이 정확히 새폴더를 만들고 html 파일과 저 파일을 넣으면 되나요?

    2021.06.02 00:31 [ ADDR : EDIT/ DEL : REPLY ]
  11. 이현희

    안녕하세요?
    열공하는 왕초보입니다.

    AT명령을 하였는데 WIFI DISCONNECTED 라고 나오니
    별짓을 다해봐도 이 모양입니다.

    혹시 시간되시면 좀 지도바랍니다.
    컴에서 설정을 잘못한 건지요?
    저기서 전에는 AT+CWJAP? 하면 OK 나왔는데
    지금은 NO AP 라고 나오니 갑자기 무슨일일지 모르겠네요.

    AT


    OK
    AT+CWMODE?

    +CWMODE:1

    OK
    AT+CWMODE=3


    OK
    AT+CWLAP

    +CWLAP:(4,"SO070VOIP8B68",-66,"e4:be:ed:c2:8b:6a",1,71,0)
    +CWLAP:(3,"U+Net34FB",-70,"18:c5:01:0a:34:fa",1,56,0)
    +CWLAP:(3,"[room a/c] Samsung",-73,"28:6d:97:a4:fd:6f",1,66,0)
    +CWLAP:(3,"TP-Link_602C",-54,"ac:84:c6:17:60:2c",2,48,0)
    +CWLAP:(4,"SK_WiFiGIGA4A5C",-93,"08:5d:dd:d1:4a:5f",5,56,0)
    +CWLAP:(3,"AndroidHotspot6866",-53,"aa:34:6a:0f:79:56",6,75,0)
    +CWLAP:(3,"U+NetCB92",-44,"b4:a9:4f:77:cb:91",7,71,0)
    +CWLAP:(4,"SK_WiFiGIGABA10",-76,"88:3c:1c:e8:ba:13",10,61,0)
    +CWLAP:(4,"SK_WiFiGIGA27F8_2.4G",-90,"42:09:a5:04:27:fa",10,68,0)
    +CWLAP:(4,"SK_WiFiGIGA27F8",-91,"04:09:a5:04:27:fa",10,68,0)
    +CWLAP:(3,"U+NetEB1F",-88,"08:5d:dd:bf:eb:1d",11,63,0)
    +CWLAP:(2,"iptime_ahn",-68,"64:e5:99:c8:9c:5e",13,46,0)

    OK
    AT+CWJAP?

    No AP

    OK
    AT+CWJAP="U+NetCB92","2872927CM!"

    WIFI DISCONNECT
    +CWJAP:1

    FAIL

    2021.06.05 22:45 [ ADDR : EDIT/ DEL : REPLY ]