재료

  • LCD 1개
  • 점프와이어 23개
  • 아두이노 우노 1개
  • AC 어댑터 1개
  • 가변저항 1개
  • USB 케이블 1개
  • esp8266 1개
  • 저항 1개
  • 브래드 보드 1개

첨부파일

    카카오톡이나 라인같은 메신저들을 보면 보내고 싶은 내용을 전송하면 상대방에게 그 내용을 전송해서 LCD에 출력해줍니다. 앞선 프로젝트에서는 간단하게 Wi-Fi를 이용하여 LED를 제어해보았는데, 이번 프로젝트에서는 원하는 내용을 아두이노로 전송하여 아두이노에서 LCD에게 출력을 지시하도록 프로젝트를 진행해봅시다.




STEP1. 준비물

아두이노 보드, USB 케이블, 브래드 보드, ESP8266, LCD, 가변저항, 저항, 점프와이어 23개




STEP2. 회로도

    회로도가 조금 복잡해보이지만 <손에 잡히는 아두이노-LCD 구동하기>의 회로도에 ESP8266을 추가한 것 뿐입니다. 회로도가 너무 복잡하시다면 저 링크로 이동하셔서 LCD를 연결해주시고 그 후에 ESP8266을 연결해주세요. 여기서 한가지 더 참고하실 부분은 3.3V와 5V를 모두 사용하였다는 것입니다. 처음에는 LCD에도 3.3V를 그대로 사용했었는데 그렇게 되면 LCD 화면이 너무 어둡게 출력되어서 LCD에는 5V를 사용하여 연결해주었습니다. (ESP8266에 5V를 연결하시면 고장납니다!)


STEP3. 코드


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
#include <SoftwareSerial.h>
#include <LiquidCrystal.h>
#define DEBUG true
 
SoftwareSerial esp8266(2,3); //RX는 2번 핀, TX는 3번 핀
LiquidCrystal lcd(12117654);
 
void setup() {
  // put your setup code here, to run once:
   Serial.begin(9600);
   esp8266.begin(9600); //esp의 보드레이트
 
   lcd.begin(16,2);
   lcd.print("ESP8266 project3");
  /*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=");
      char arr[25]={0,};
      for(int i=0; i<25; i++){
        arr[i]=esp8266.read();
        if(arr[i]=='+'//space
          arr[i]=' ';
      }
      for(int i=0; i<=17; i++){
        if(arr[i]=='H' && arr[i+1]=='T' && arr[i+2]=='T' && arr[i+3]=='P' 
        && arr[i+4]=='/' && arr[i+5]=='1' && arr[i+6]=='.' && arr[i+7]=='1'){
            for(int j=i; j<25; j++)
              arr[j]=' ';
            break;
           }
      }
      sendData("    "1000, DEBUG);
      sendData(arr, 1000, DEBUG); //디버깅용
      sendData("    "1000, DEBUG);
      lcd.setCursor(0,1);
      lcd.print(arr);
            
      /*연결을 끊음*/
      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;
}
cs


    위의 코드를 아두이노에 업로드 하시면 됩니다. 하실 때 주의 사항은 전력 부족 오류를 막기위해서 ESP8266의 전선 중 전압이 들어가는 전선의 연결을 살짝 빼주신 후에 전송해주셔야 합니다. 코드 중 36번째 라인의 for문을 추가한 이유는 웹페이지에서 문자를 전송할 때 마지막에 "HTTP/1.1" 도 함께 보내기 때문에 16자가 넘어가지 않는 입력을 넣었을 경우 저 문장이 같이 출력되는 것을 막기위해서입니다.


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
<html>
 <head>
  <title> ★ESP8266로 LCD 구동하기★ </title>
 </head>
 <body>
 </br></br>
 <center>
 <br><font size=4 face="맑은 고딕" color="GRAY"> ESP8266 Project 3</br>
 <font size=6 face="맑은고딕" color="LIGHTBLUE"> ★ ESP8266로 LCD에 원하는 문자 출력하기 ★
 </font></center></br></br>
 <center>
 </br></br>
 <font size=3 face="맑은 고딕" color="BLACK"> 영어 또는 숫자로 이루어진 <mark>16자 이내</mark>의 문자를 입력해주세요.
 </br></br>
 <input type="text" id="string" class="text" style="height:50; width:350;" maxlength=16>
 <button id="save" class="button" style="height:50; width:80;"><font size=3 face="맑은 고딕">전 송</font></button>
 </center>
 
 <script src="jquery.min.js"></script>
 <script type="text/javascript">
  $(document).ready(function(){
   var arr="";
   $(".button").click(function(){
    arr=$("#string").val();
 
    // 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:arr}); // execute get request
   });
  });
 </script>
 </body>
</html>
cs


    위의 코드를 메모장에 붙여넣으시고 확장자를 html이 되도록 만들어서 저장해주세요. 그런 후에 첨부파일을 다운받으셔서 같은 폴더 안에 넣으시면 됩니다. 위의 코드는 문자를 아두이노에게 전송해주는 웹페이지입니다. 원하는 문자를 입력하시고 전송 버튼을 누르시면 문자가 Wi-Fi를 통해서 아두이노로 전송됩니다. 27번째 라인은 본인의 IP주소로 바꾸어주시면 됩니다. 여기에 관련된 사항은 <ESP8266을 공유기에 연결해보자> 글에 자세하게 설명되어 있습니다.


STEP4. 결과 확인

    웹페이지는 아래와 같고 TEXT 창에 16자를 넘어가지 않는 원하는 문장을 입력하시면 그 글이 아두이노에 연결된 LCD에 출력됩니다.





댓글 0

사물 인터넷(IoT)

LCD에 내가 원하는 내용을 전송해보자

by 김민정

MADE BY

김민정

사물인터넷, 아두이노