아두이노 우노 보드에 전기적인 접촉에 유의하면서 직접 만든 DIY ESP 8266 ESP-01 모듈 쉴드를 장착하자. 와이파이 LED on OFF 제어를 위해 빵판에 LED 와 220옴 저항 회로를 꾸미고 전기 저항의 한쪽은 GND 와 LED 의 다리가 긴 양극은 디지털 데이터 핀 12번에 연결한다. 쉴드 장착의 이점으로 인해서 배선이 극히 간단하다.
아두이노 우노 보드의 붙박이 LED 13번을 이용면 빵판 LED 배선을 대신할 수 있으나 아크릴 하우징 위에 쉴드 장착으로 인해 안이 잘 보이지 않는다.
DIY 쉴드를 만들어 끼워 본 결과 각 핀들의 전기적 접촉이 대단히 중요하며 쉴드가 수평을 잘 유지할 수 있도록 바같 모서리를 따라 골고루 균일하게 눌러 줄 필요가 있다.
위는 ESP8266-01 모듈LED on OFF를 하기 위한 코드의 구성도이다.
아두이노 코드가 실행되면 SoftwareSerial 라이브러지의 지원을 받아 ESP-01 모듈과 AT+⚫⚫⚫명령어를 사용하는 통신이 이루어지게 되며 그 결과는 시리얼 모니터 창에 기록된다.
즉 ESP8266 ESP-01을 장착한 아두이노가 실행되면 일차적으로 와이파이가 연결되는 단계까지 AT 명령들이 실행된다.
이어서 Notepad++을 이용하여 HTML+Java Script 로 작성된 ledcontrol.html 코드를 실행한다. 단 이때 html 코드의 <src> 태그에 정의된 바대로 jquery.min.js 라이브러리가 html 코드와 반드시 동일한 디렉토리에 들어 있어야 한다.
ESP-01 모듈은 ESP-12E 모듈을 사용하는 NodeMCU 나 weMod 보드와는 달리 별도의 지원 라이브러리가 없는 대신 아두이노와 ESP-01과의 교신을 위한 SoftwareSerial.h 라이브러리를 설치해야 한다.
아두이노와 PC와의 통신을 위한 디지털 데이터 핀인 0번과 1번은 USB-2 –Serial 인터페이스 사용을 위해 설정되어 있기 때문에 본 코드에서는 8,9번 핀을 설정하였다. 쉴드에서 점퍼 케이블화 해둔 이유가 바로 그것이다. 필요에 따라서 바꾸어 끼면 된다.
setup()문에서 USB-2-Serial 과 ESP-01과의 통신속도를 각각 지정하도록 한다.
AT+⚫⚫⚫명령어들을 실행하기 위해 sendData() 함수를 사용하도록 한다. 이 함수는 AT+⚫⚫⚫명령어와 수행에 필요한 허용시간 및 디버깅 여부를 파라메터로 넘겨받아 실행하고 결과를 시리얼 모니터 창에 기록해준다.
허용시간 즉 timeout 이내에 ESP-01에서 반응이 있는지 버퍼를 체크하여 들어 온 문자가 있으면 문자열 변수 response에 추가하여 저장한다.
한편 아두이노 코드는 ESP-01 모듈 RESET(RST)부터 시작하여 MODE를 설정해야 한다. AT+CWMODE=1 이나 3 으로 설정한다. 1은 STA(STATION) 모드이며 3은 STA+AP 모드이다.
AP는 무선 공유기를 뜻하는데, 스마트폰 핫스팟이나 PC와 연결된 무선 공유기를 사용하는 게 좋다. SCAN 작업에 의해 주변의 공유기를 파악 후 AT+CWJAP=“무선공유기 ID”,“비밀번호” 명령에 의해 설정이 가능하다.
이런 과정들은 아두이노 코드를 실행시킬 때마다 할 필요는 없으며 별도로 AT 명령어로 시리얼 모니터 창에서 설정한 후 전원을 OFF 해도 플레시 메모리에 기억되어 있기 마련이다.
굳이 변경할 필요가 없다면 RST,CIFSR,CIPMUX,CIPSERVER 4가지 AT 명령만 실행하면 충분하다. AT+CIFSR 명령은 ESP-01 모듈이 설치된 아두이노의 가상 IP 를 출력해 준다. AT+CIPMUX=1은 서버 사용을 위한 다중 연결 모드를 설정하며 AT+CIPSERVER=1,80 은 서버 연결과 동시에 포트 번호를 80에 설정하게 된다.
즉 이 과정들은 아두이노 NodeMCU에서 WiFi Connected까지의 과정에 해당하며 포트 번호 설정은 WiFiServer server(80)을 의미한다.
HTML+Java Script 코드 실행을 위해서 Java Script를 지원하는 jquery 라이브러리가 HTML 코드와 함께 설치가 되어야 한다. HTML 파일을 편리하게 다룰 수 있도록 무료 편집기인 Notepad++을 다운 받아 사용하면 편리하다.
코드의 내용을 해석해 보자. led 란 단어가 들어 있는 예를 들면 버튼의 텍스트 내용을 클릭하면 ‘id’에 해당하는 속성 값 즉 12를 변수 p에 담아 가상 IP 및 포트 번호 192.168.0.11:80 로 GET 절차에 의해서 송신한다는 뜻이다. GET 이란 정보를 ASCII 문자 형태로 웹브라우저 url 주소창을 통해 특별한 보안 없이 정보 열람이 가능하도록 보내는 과정으로 보이지 않게 2진 8비트 데이터로 보내는 POST의 반대 과정이다.
loop(0 문에서는 웹에서 데이터를 보내면 시리얼 모니터 창에 +IPD,0, ⚫⚫⚫ 메시지가 도착하며, .read() 명령으로 ASCII 문자 정보를 읽어서 정수로 환원하여 처리하게 된다.
한편 웹에서는 pin:⚫⚫⚫ 으로 되어 있는 정보가 아두이노에서는 pin= 로 읽힌다는 점에도 유의하자.
ASCII 문자를 해독하여 pinNumber를 정수로 변환하여 digitalRead() 명령으로 HIGH LOW 인지 즉 “1” 이나 “0”인지 파악하여 그 반대값을 출력하면 LED 상태가 토글된다.
LED 가 토글링 되고 나면 마지막으로 “AT+CIPCLOSE=번호” 명령을 작성하여 sendData() 함수를 사용하여 실행한다.
LED 가 on 된 모습이다. on OFF 명령 전달 속도는 약간 느린 듯한 느낌이 든다.
전달 패턴을 보면 ESP-01의 LED 가 먼저 껌벅하고 나서 LED 가 on OFF 된다.
LED를 제외한 온습도 센서나 가변 저항으로부터의 전압 데이터를 웹에서 수신하려면 위의 Java Script 코드를 수정해야 할 것이다.
ESP_01_LEDCONTROL_01
#include <SoftwareSerial.h>
#define DEBUG true
SoftwareSerial esp8266(8,9);
void setup() {
Serial.begin(9600);
esp8266.begin(9600);
pinMode(11, OUTPUT);
digitalWrite(11, LOW);
pinMode(12, OUTPUT);
digitalWrite(12, LOW);
pinMode(13, OUTPUT);
digitalWrite(13, LOW);
sendData("AT+CIFSR\r\n",1000,DEBUG);
sendData("AT+CIPMUX=1\r\n",1000,DEBUG);
sendData("AT+CIPSERVER=1,80\r\n",1000,DEBUG);
esp8266.println("Hello World!");
}
void loop() {
if(esp8266.available()) {
if(esp8266.find("+IPD,")) {
delay(1000);
int connectionId = esp8266.read()-48;
esp8266.find("pin=");
int pinNumber = (esp8266.read()-48)*10;
pinNumber += (esp8266.read()-48);
digitalWrite(pinNumber, !digitalRead(pinNumber));
// make close command
String closeCommand = "AT+CIPCLOSE=";
closeCommand+=connectionId; // append connection id
closeCommand+="\r\n";
sendData(closeCommand,1000,DEBUG); // close connection
}
}
}
String sendData(String command, const int timeout, boolean debug) {
String response = "";
esp8266.print(command);
long int time = millis();
while( (time+timeout) > millis()) {
while(esp8266.available()) {
char c = esp8266.read();
response+=c;
}
}
if(debug) {
Serial.print(response);
}
return response;
}//끝
jquery.min.js 라이브러리 다운로드
jquery.min.jsLEDCONTROL.html
<html>
<head>
<title>ESP8266 LED</title>
</head>
<body>
<!-- in <button> tags below the ID attribute is sent to the arduino -->
<h>ESP8266 LED Control</h></br></br>
<button id="12" class="led">LED PIN 12</button>
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".led").click(function(){
// get id value (i.e. pin13, pin12, or pin11)
var p = $(this).attr('id');
// send HTTP GET request to the IP address with the parameter
//"pin" and value "p", then execute the function
$.get("http://192.168.0.11:80/", {pin:p}); // execute get request
});
});
</script>
</body>
</html>
끝