Leave a comment

ESP8266-WiFiWebServer-브라우저로 LED 제어하기

ESP8266 보드를 사용하여 웹서버를 구축, 브라우저로 LED를 제어해 봅니다.

    프로젝트를 진행하기 위해서 무선 공유기 2.4G가 필요합니다.

  1. 아두이노 개발환경 구축(아두이노가 설치되어 있으면 skip~)
  2. ESP8266-IoT 보드에 코드를 작성하고 작성한 코드를 업로드하는 프로그램을 설치해야 합니다.
    https://www.arduino.cc/en/Main/Software 로 이동하여 아래의 다운로드 영역을 찾습니다.

    사용하고 계신 운영체제에 맞는 프로그램을 다운받아 설치합니다.

  3. ESP8266 라이브러리 설치
  4. 파일->환경설정으로 이동합니다.

    환경설청 창에서 “컴파일”,”업로드”,”줄 번호 표시”를 체크해주세요.
    아래 주소를 복사해서 “추가적인 보드 매니저 URLs”에 추가해 줍니다. 추가 후 확인을 눌러주세요.
    http://arduino.esp8266.com/stable/package_esp8266com_index.json

    툴->보드->보드 매니저로 이동합니다.

    검색창에 “ESP8266″을 입력 후 최신 버젼으로 “설치”하세요. 설치하는데에는 시간이 걸립니다.. 설치가 완료되면 창을 닫아주세요.

    보드 리스트에 ESP8266과 관련된 보드정보가 추가되었습니다. 아래처럼 “NodeMCU 1.0″을 선택하세요.

  5. OLED 디스플레이 라이브러리 설치
  6. ESP8266-IoT 보드에서 사용되는 LCD의 라이브러리를 설치합니다.
    아래 파일은 다운로드 받습니다.
    esp8266-OLED-master
    다운로드 받은 파일을 아래처럼 “.ZIP 라이브러리 추가”해줍니다.

  7. 시리얼 통신 드라이버 설치 및 보드와 연결
  8. 시리얼 통신 모듈을 USB포트에 연결하고 드라이버를 설치합니다. 만약 드라이버가 자동으로 설치되지 않는경우 아래 링크에서 시스템에 맞는 드라이버를 찾아 설치해주세요.
    http://www.silabs.com/products/development-tools/software/usb-to-uart-bridge-vcp-drivers


    전원핀을 잘못 꽂을 경우 보드가 고장날 수 있습니다!!! 아래 연결을 참고하여 연결하세요.

  9. 컴포트 설정
  10. “장치 관리자”에서 “Silicon Labs CP210x——-“로 시작되는 COM포트 번호를 기억하세요. 여기서는 COM11 입니다.
    (사용하고 있는 시리얼 통신 모듈에 따라 이름이 다르게 나타날 수 있습니다. COMxx 번호만 기억하세요!)

    아두이노 프로그램 -> 툴 -> 포트를 아래처럼 설정합니다.

  11. ESP8266 보드를 업로드 모드로 설정하기
  12. 소스코드를 업로드 하기전에 ESP8266 보드를 프로그램 업로드 모드로 전환해야 합니다.
    ESP8266 보드에 RESET버튼과 BOOT MODE 버튼이 있습니다.
    1. “BOOT MODE” 버튼을 누르고 있는다.
    2. “BOOT MODE” 버튼이 눌려있는 상태에서 “RESET”버튼을 누른다.
    3. “RESET”버튼을 떼고
    4. “BOOT MODE”버튼을 뗀다.

  13. 소스코드
  14. 간단한 웹 서버 예제입니다.
    아래 소스코드에서 5,6번째 줄의 무선공유기의 이름과 비밀번호만 수정해서 업로드 합니다.
    (중요! 2.4G wifi만 됩니다. 한글은 안됩니다.)

    ESP8266 보드를 업로드 모드로 전환
    1. “BOOT MODE” 버튼을 누르고 있는다.
    2. “BOOT MODE” 버튼이 눌려있는 상태에서 “RESET”버튼을 누른다.
    3. “RESET”버튼을 떼고
    4. “BOOT MODE”버튼을 뗀다.

    위의 코드를 복사&붙여넣기 후 “업로드” 합니다.

  15. 조립
  16. 볼트와 서포트를 조립합니다.

    아래처럼 IoT 보드가 올라갈꺼에요~

    기둥을 세워줍니다.

    남은 기둥 1개와 LED바가 보입니다.

    사진처럼 LED바를 기둥에 붙여줍니다.

    뒤쪽 방향의 LED바는 짧습니다~

    LED바 기둥을 세워줍니다.

    +/- 를 잘 구분하여 연결해줍니다. (-드라이버로 소켓을 연다음 선을 넣고 닫아줍니다)
    사진에서 윗부분이 1번 채널, 아래는 2번 채널 입니다.


    상단부를 조립해 줍니다.

    정면샷!

    후면샷!

    밑에서도!

    12V DC 어댑터를 연결해 줍니다.

    위 예제소스가 입력되어 있어서 LCD에 각종 정보가 표시됩니다.

    웹 브라우저로 위에 표시된 IP주소로 접속하여 LED를 제어해 봅니다.
    “Output Control”창의 버튼을 눌러서 밝기 조절 및 간단한 효과를 실행 할 수 있습니다.

댓글 남기기