WifiZineThrowie

해커스 앤 디자이너스 - 걸어다니는 신호들 / 와이파이-진 워크숍.

와이파이-진(zine) 이란?

한 줄 설명

• 스마트폰이 핫스팟 로그인을 시도할때, 웹진 형식의 자주독립출판물을 서비스하도록 설계된 무선통신 및 웹서비스 장치

• 더보기

선행 프로젝트

• CaptiveIntraweb by AReResearch (Andy Reischle) @ 2015

  

구성요소

• 유형 요소 (tangible components)
  • Espressif사의 ESP32 모듈
  • 전원장치 (배터리 또는 DC 아답타)
  • (선택적) 통 또는 외형
  • (선택적) 자석

  

  

  

  

  

  (위 이미지들은 Andy Reischle (AReResearch) 님이 게시한 것들입니다.)

• 무형 요소 (intangible components)
  • ESP-IDF 개발 환경
  • ESP32 아두이노 호환성 패키지
  • SPIFFS 파일 시스템
  • ESP 웹서버 라이브러리
  • 도메인 네임서버(captive portal)
  • 웹페이지 (웹-진)

  

  • 더 많은 정보
  • Wi-Fi 스택이 오픈소스가 아닌 문제

알아두어야 할 와이파이-진 시스템의 한계

• 저장용량 2MB 이하
• 일반적인 웹서버에 비해 다소 느린 속도
• 일반적인 웹서버에 비해 다소 불안정한 작동 (때때로, 시스템 재시작이 필요할 수 있음)

와이파이-진 만들기

재료 및 준비물

• 컴퓨터
• ESP32 모듈이 탑재된 개발보드
• 통신용 마이크로 USB 케이블 (안드로이드 데이타 케이블)
• 배터리, 배터리팩 또는 DC 아답타
• 웹페이지 (html/css/js + 미디어 파일)
• (선택적으로) 센서 또는 작동장치 (스피커 등)

와이파이-진 보드 준비하기

• Arduino 다운로드

• Arduino 설치하기

  • Windows

  • Mac OSX

    

    ‘Open’ 을 클릭.

  • Linux

• Arduino IDE 실행 화면

  

• Arduino IDE 설정

  • 컴파일 및 업로드 과정 표시 모드를 ‘상세한 표기’로 변경

    

    ‘Show verbose output during:’ 항목에서 compilation과 upload에 체크

• Arduino IDE에 esp32 보드를 추가하기

  • ‘Additional Boards Manager URLs’ 에 다음 내용을 복사하여 붙여넣고 ‘Ok’.

    https://dl.espressif.com/dl/package_esp32_index.json
    

    

  • 보드 매니져 실행

    

  • 보드 매니져 팝업창의 모습

    

  • 검색창에 ‘esp32’라고 입력 후, ‘Install’ 클릭

    

• Arduino IDE에 와이파이-진 코드와 필요한 라이브러리들 추가하기

  • 와이파이-진 다운로드 및 설치

    ‘Clone or download’ -> ‘Download ZIP’ 클릭

    

    압축 해제 후, 폴더 이름 변경

    

    ~/Documents/Arduino에 해당 폴더 복사

    

  • ESPAsyncWebServer와 AsyncTCP 라이브러리 다운로드 및 설치

    ‘Clone or download’ -> ‘Download ZIP’ 클릭

    

    압축 해제 후, 폴더 이름 변경

    

    ‘Clone or download’ -> ‘Download ZIP’ 클릭

    

    압축 해제 후, 폴더 이름 변경

    

    ~/Documents/Arduino/libraries에 해당 폴더 (2개) 복사

    

  • 컴파일 확인

    • Arduino IDE를 재시작

    • ‘WifiZineThrowie’ 스케치를 연다

      

    • ESP32 Dev Module 보드를 선택한다

      

    • ESP32 Dev Module 보드 설정을 조정한다

      

      • Upload Speed : 921600
      • CPU Frequency : 240MHz
      • Flash Frequency : 80MHz
      • Flash Mode : DIO
      • Flash Size : 4MB (32Mb)
      • Partition Scheme : Default
      • Core Debug Level : None
      • PSRAM : Disabled

    • 컴파일 버튼(빨간 화살표)을 클릭한다

      

    • 컴파일 과정이 정상적으로 끝나면, 성공

      

    • 컴파일 과정이 비-정상적으로 끝나면, 실패

      

• ESP32 모듈과 통신하기 위한 USB 장치 드라이버 설치하기 (칩 이름 : SiliconLabs CP2012)

  • USB 통신 칩 드라이버 다운로드

    • Windows 10

    • Windows 7/8/8.1

      • 설치 과정

    • Mac OSX

      • GateKeeper와의 전쟁

      • Yosemite (10.10.x)

        • Legacy 드라이버를 설치해야 함

        

      • El capitan (10.11.x)

        • GateKeeper 비활성화 방법
        • csrutil enable –without kext

      • Sierra (10.12.x)

        • GateKeeper 비활성화 방법
        • sudo spctl –master-disable

      • High Sierra (10.13.x)

        • GateKeeper 비활성화 방법
        • GateKeeper 비활성화 방법
        • GateKeeper 비활성화 방법
        • spctl kext-consent disable

      • Mojave (10.14.x)

        • GateKeeper 비활성화 방법
        • sudo spctl –master-disable

    • Linux 3.x.x & 4.x.x

      • 드라이버 설치 불필요 (커널에 포함되어 있음)
      • udev rules 업데이트 필요
      • 99-platformio-udev.rules

    • Linux 2.6.x

      • 정보 없음

• USB 드라이버 작동 여부 확인하기

  • 드라이버를 지금 막 설치했다면, 컴퓨터를 재시작한다

  • 재시작한 후에 GateKeeper가 드라이버 로딩을 방해하지는 않았는지 확인한다.

    • System Preferences -> Security & Privacy -> General

      

      빨간색으로 표시된 상자안에 에러문구가 있다면, GateKeeper가 드라이버 작동을 방해한 경우이다.

      

      위와 유사한 상태가 되어있을경우, ‘Allow’를 클릭하고 관리자 암호를 넣어 승인해준 후, 컴퓨터를 재시작한다.

  • Arduino IDE를 시작한 후에, ESP32 모듈과 통신 가능한지 확인

    

    통신이 가능한 경우, 위와 같이 /dev/cu.SLAB_USBtoUART를 선택할 수가 있다.

    

    통신이 불가능한 경우, 위와 같이 /dev/cu.SLAB_USBtoUART가 존재하지 않는다.

• 와이파이-진 네트워크의 이름, 즉 SSID를 정하고 코드를 수정한다.

  

  • 글자 수나 띄어쓰기 등에 의해서 안될 수도 있으므로, 처음에는 공백문자가 포함되지 않은 간단한 영문으로 테스트해본다.
  • 한글을 사용해도 된다.

• 보드에 업로드 한다

  • 업로드 버튼(빨간 화살표)을 클릭하고, ‘Connecting…’ 이란 문구가 나타났을때, ESP 보드의 ‘BOOT’라는 버튼을 1초간 눌렀다가 뗍니다.

    

    업로드 성공한 화면

    

    업로드 실패한 화면

    

• 다양한 문제 요인들

와이파이-진 보드 업로드 용량 늘리기 (선택적인 과정)

• 제공된 ESP32 모듈의 플래쉬 메모리 용량은 4MB이지만, 전부 다 와이파이-진 컨텐츠를 위해서 사용할 수는 없다. 그 이유는 와이파이-진을 구동하는 코드와 칩 자체의 작동을 위한 코드, 그리고 파일 시스템의 구조 (폴더 구조 및 파일의 구분 등)를 표현하기 위해 사용되는 데이터, 즉 SPIFFS의 구현에 의한 오버헤드와 같은 것들이 4MB 중 일부분을 사용하지 않을 수 없기 때문이다.

• ESP32 모듈의 플래쉬 메모리는 작동하는 데이터(즉, 코드), 저장해 두어야 하는 데이터(즉, 메모리), 구조를 기록하는 데이터(즉, 파일 시스템) 등이 파티션을 통해 4MB를 나누어 사용하도록 되어있다.

• 위의 과정 중에서, ESP32 보드를 설정할때,

  

  Partition Scheme : Default
  

  를 선택했었는데, 기본 파티션 구성의 경우 와이파이-진을 위해서 반드시 필요하지 않은 요소들을 포함하고 있으며, 기본 파티션 구성에서 와이파이-진 컨텐츠에 사용할 수 있는 메모리 용량은 1MB 정도밖에는 되지 않는다.

• 따라서, Partition Scheme을 보다 효율적으로 재구성하면, 와이파이-진 컨텐츠를 조금 더 많이 업로드 할 수 있게 할 수도 있다. 이렇게 하면, 약 1.9MB 정도의 용량을 사용할 수 있게 된다.

• 본 과정을 마치게 되면, 다음과 같이

  

  Partition Scheme : WIFI ZINE
  

  을 선택할 수 있게 된다.

• 작업 과정

  • 파티션 설정 파일 다운로드 및 설치

    ~/Library/Arduino15/packages/esp32/hardware/esp32/1.0.1/tools/partitions 에 붙여넣는다

    

    ~/Library/ 폴더는 Finder에서 숨겨진 폴더이므로 Cmd-Shift-G를 누르고 Library 라고 타이핑하여 들어간다

    

    이후, Arduino15 폴더는 일반적인 폴더와 같이 더블 클릭하여 들어간다

    

    위와 같은 위치로 이동한다

    

    위와 같은 상태로 만든다

  • boards.txt 파일 수정

    

    위와 같은 위치에 존재하는 파일 boards.txt 파일을 열어 다음에 +로 표시된 4줄을 추가한다 (+표시는 제거한다!)

    --- /Users/doohoyi/Downloads/Telegram Desktop/boards.txt
    +++ /Users/doohoyi/Library/Arduino15/packages/esp32/hardware/esp32/1.0.1/boards.txt
    @@ -52,6 +52,10 @@
     esp32.menu.PartitionScheme.min_spiffs.upload.maximum_size=1966080
     esp32.menu.PartitionScheme.fatflash=16M Fat
     esp32.menu.PartitionScheme.fatflash.build.partitions=ffat
    +esp32.menu.PartitionScheme.wifi_zine=WIFI ZINE
    +esp32.menu.PartitionScheme.wifi_zine.build.partitions=wifi_zine
    +esp32.menu.PartitionScheme.wifi_zine.upload.maximum_size=1048576
    +esp32.menu.PartitionScheme.wifi_zine.upload.maximum_data_size=2752512
    
     esp32.menu.CPUFreq.240=240MHz (WiFi/BT)
     esp32.menu.CPUFreq.240.build.f_cpu=240000000L
    

  • Arduino IDE 를 재시작한 후, ESP32 DEV Module 설정 중 PartitionScheme을 WIFI ZINE으로 선택하고, 컴파일해본다.

와이파이-진 컨텐츠 업로드/출판 하기

• 와이파이-진 컨텐츠는 작동하는 코드와는 별도로 저장된다. 따라서, 일반적인 Arduino IDE의 코드 업로드 과정과는 별도의 과정을 거친다. 이를 위해, 별도의 확장 플러그인을 설치해야 합니다.

• ESP32FS 플러그인 다운로드 및 설치

  ~/Documents/Arduino/tools 라는 폴더 생성

  

  압축이 풀린 ESP32FS 를 이곳에 복사 설치

  

  폴더의 구성에 조심해야 합니다. 다음 그림과 같이 설치되어야 합니다. (폴더의 이름이 ESP32FS 인 것도 주의!)

  

  Arduino IDE를 재시작한 후, 플러그인 설치가 성공했는지 확인합니다. 성공했다면, ‘ESP32 Sketch Data Upload’ 라는 메뉴가 추가된 것을 확인할 수 있습니다.

  

  이 메뉴를 실행하면, ~/Documents/Arduino/WifiZineThrowie/data 폴더에 들어있는 모든 파일을 ESP32 모듈의 웹 페이지 저장소에 이동시키게 됩니다.

  

  업로드를 실행하십시오. 업로드 중 출력되는 메세지의 색깔이 빨간색이 아니라 흰색으로 출력됩니다. 코드를 업로드 할 때와 마찬가지로, ‘Connecting…’ 이란 문구가 나타났을때, ESP 보드의 ‘BOOT’라는 버튼을 1초간 눌렀다가 땝니다.

  업로드가 성공적으로 완료된 경우의 화면

  

  축하합니다. 와아파이-진을 제작/출판하기 위한 모든 준비가 끝났습니다.

와이파이-진 컨텐츠 예시

• 예시 1 텍스트 페이지

  • Hello, Text?

    • 폰트 구하기

• 예시 2

  • Imaginary, world

• 예시 3

  • Sound-world!

• 예시 4

  • Looooong story! (TBD)

• 예시 5

  • (advanced) WebSocket - socket.io + server-side programming @ arduino (TBD)

    • 해본적 없지만, 가능해 보임. 예제를 만들어 봅시다.

형태와 재질을 가지고 놀아보기

• 센서를 붙여보기

  • 스위치?

• 작동하는 것을 붙여보기

  • 모터?

장소와 함께 생각하기

• 자석을 이용해서 거리나 공간의 철골 구조에 부착

프로젝트에 기여하기

• ZINE 컨텐츠를 공유해주면, 다른 사람들이 각자 ZINE을 제작할 때, 아이디어와 영감을 얻을 수 있습니다. 이때, ZINE이 제작된 배경 이야기나 맥락, 형태 등 부가정보를 알려주면 더 좋습니다.
• 와이파이-진 프로그램의 여러가지 부분을 개선할 수 있는 아이디어가 있으시다면, github의 PR 기능으로 수정내역을 보내주세요.
• 그밖에 여러가지 생각들이나 의견들은 이메일로 주시면 됩니다. pilotedeguerre@gmail.com

고맙습니다!

This site is open source. Improve this page.