[작업 로그] ESP8266을 AP · 웹 서버로 사용해보기

8853 단어 ESP8266
· 목적
스마트 폰에서 외부 장치로 ESP8266에 연결 제어하는 ​​예비 실험.
게다가 표시하는 HTML을 SPIFFS로 자원으로부터 취해 표시시켜 보자.

· 준비

1.
우선, AP/Web서버를 시작해 스마트폰에서 볼 수 있는지를 테스트.

아래에 쓰는 소스.
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

static const char *ssid = "gkgk";
static const char *pwd = "12341234";

ESP8266WebServer server(1234); 
IPAddress ip( 192, 168, 128, 21); 
IPAddress subnet( 255, 255, 255, 0 ); 

void handleRoot() {
    Serial.println("receive req: /");
    server.send(200, "text/html", "<h1>Welcome GKGK</h1>");
}

void setup() { 
  Serial.begin(9600);
  WiFi.mode(WIFI_AP); 
  WiFi.softAPConfig(ip, ip, subnet); 
  WiFi.softAP(ssid, pwd); 
  server.on("/", handleRoot); 
  server.begin();
  Serial.println("ap setup..."); 
} 
void loop() { 
  server.handleClient(); 
}

AP
SSID:gkgk
pwd:12341234

WebServer
192.168.128.21:1234/

했다.

빌드하고 쓰고 실행.

iphone에서 esp8266에 wifi 연결해 봅니다.



연결되었다.

chrome에서 보자.
http://192.168.128.21:1234



Aruduino의 콘솔에서도 확인.


요청을 받고 직렬로 출력합니다.
뭐라고 하는 간편함. . .

2.
SPIFFS로 내부 플래시? 에 쓴 리소스를 읽을 수 있도록 환경을 만듭니다.
[1]
아래 페이지로 날아가,
htps : // 기주 b. 코 m / 에 sp8266 / 아 r 즈이 노 에 sp 8266 fsp-p ㎅

Download the tool archive from releases page
링크를 클릭하고 zip 파일을 다운로드하고 압축을 풉니 다.

[2]
해동한 것을 다음과 같이 둔다.
[Aruduinoインストールフォルダ]/Arduino/tools/ESP8266FS/tool/esp8266fs.jar

[3]
IDE가 시작되면 재부팅.
IDE의 툴에, 「ESP8266 Sketch Data Upload」가 나와 있으면 OK.

3.
리소스 준비
[1]
스케치 폴더에 data 디렉토리 만들기


[2]
index 페이지의 템플릿을 파일로 준비.
아래 소스.
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>GKGK TEST</title>
  </head>
  <body>
    <h1>Welcome...</h1>
    <h2>GKGK Test Resource HTML...</h2><br/>
    <form name="g_form" method="post" action="/">
        <img src="${img}" onclick="forms['g_form'].submit();"/><br/>
        <input type="hidden" name="FLAG" value="${flag}" />
        <input type="submit" value="${submit_msg}"/>
    </form>
  </body>
</html>

제출 버튼 또는 이미지를 누르면 표시가 전환되는 느낌.

[3]
data 폴더 내에 표시할 리소스를 배치.


표시 할 색인 페이지의 템플릿과 HTML에 표시
이미지를 준비했다.

[4]
IDE 도구 -> ESP8266 Sketch Data Upload를 클릭하십시오.
ESP8266에 쓰기가 시작됩니다.


4.
Aruduino 측면의 구현.
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <FS.h>

static const char *ssid = "gkgk";
static const char *pwd = "12341234";

ESP8266WebServer server(1234); 
IPAddress ip( 192, 168, 128, 21); 
IPAddress subnet( 255, 255, 255, 0 );

String strIndexHtml;
boolean flagGod;

// indexページ
void handleRoot() {

    Serial.println("receive req: /");
    // Postの場合、パラメータからフラグを設定
    if (server.method() == HTTP_POST) {
      String s = server.arg("FLAG");
      if (s == "1") {
        flagGod = true;
      } else {
        flagGod = false;
      }
    }
    // テンプレートのindexページ文字列をフラグによって設定
    String msg = "";
    if (!flagGod) {
      msg = "チェンジ・ぷらいべーとモード！";
    } else {
       msg = "チェンジ・ビジネスモード！";
    }
    String arg1 = "${submit_msg}";
    String tmpl = "" + strIndexHtml;
    tmpl.replace(arg1, msg);
    tmpl.replace("${flag}", flagGod ? "0" : "1");
    tmpl.replace("${img}", flagGod ? "/img2.gif" : "/img1.gif");
    Serial.println(tmpl);

    // クライアントに返す
    server.send(200, "text/html", tmpl);

}

// /img1.gifハンドラ
void handleImg1() {
    Serial.println("receive req: /img1.gif");
    // リソースから読み込んで画像をかえす。
    SPIFFS.begin();
    File hogeFile = SPIFFS.open("/god_on.gif", "r");
    // バイナリのリソースを返すならこんな感じ。
    server.streamFile(hogeFile, "image/gif");
    hogeFile.close();
}
// /img2.gifハンドラ
void handleImg2() {
    Serial.println("receive req: /img2.gif");

    // リソースから読み込んで画像をかえす。
     SPIFFS.begin();
    File hogeFile = SPIFFS.open("/god_off.gif", "r");
    // バイナリのリソースを返すならこんな感じ。
    server.streamFile(hogeFile, "image/gif");
    hogeFile.close();
}

// テキストファイルを読み込み
String loadTextFile(String path) {
  String txt = "";
  String line = "";
  char c;
  File hogeFile = SPIFFS.open(path, "r");
    strIndexHtml = "";
  if (hogeFile) {
    Serial.println("file open success...");

    while (hogeFile.available()) {
      // １文字読み込み
      c = hogeFile.read();
      // 改行の場合
      if (c == '\n' || c == '\r') {
        // 行文字列の長さが１以上の場合
        if (line.length() > 0) {
          txt = txt + line + "\n";
          //Serial.println(line);
        }
        // 改行文字が来たので行文字列をクリア
        line = "";
      } else {
        // 改行文字でなければ行文字列に読み込んだ1文字を追加
        line = line + String(c);       
      }
    }
    if (line.length() > 0) {
      txt = txt + line;
    }

    hogeFile.close();
  } else {
    Serial.println("file open failed...");
  }
  Serial.println(path + " is loaded...");

  return txt;

}


// リソース読み込み
void loadHtmlResource() {

  String line = "";
  char c;

  SPIFFS.begin();
//  Dir dir = SPIFFS.openDir("/");
//  while (dir.next()) {
//    Serial.print(dir.fileName());
//    File f = dir.openFile("r");
//    Serial.println(String(" ") + f.size());
//  }

  strIndexHtml = loadTextFile("/index.html");
}



void setup() { 
  flagGod = false;
  Serial.begin(9600);
  WiFi.mode(WIFI_AP); 
  WiFi.softAPConfig(ip, ip, subnet); 
  WiFi.softAP(ssid, pwd); 

  // ハンドラ設定
  server.on("/", handleRoot); 
  server.on("/img1.gif", handleImg1); 
  server.on("/img2.gif", handleImg2); 

  server.begin();
  Serial.println("ap setup..."); 
  loadHtmlResource();
  Serial.println(strIndexHtml);
  Serial.println("load complete...");
} 
void loop() { 
  server.handleClient(); 
}

플래그로 화상을 전환하는 느낌의 처리로 하고 있다.
쓰레드 세이프라든가는, 우선, 무시. . .
처리의 전환에 의한 액션을 L치카로 해도 좋았지만,
이미지의 좋은 자원을 어떻게 취급하는지 시험하고 싶었기 때문에, 이런 느낌으로 했다.

· 실행 확인

위의 소스를 빌드하고 ESP8266에로드하고 실행.

아이폰으로 연결하여 화면을 본다.


리소스에서 읽은 것을 표시 할 수 있는지 확인.
일본어도 아무것도 신경쓰지 않고 나오는구나. . .
에서 비즈니스 모드로 만들기 위해 버튼을 누릅니다.


POST 처리 잘 작동합니다.
다시 버튼을 눌러 원래 화면이 나오는지 확인합니다.



비공개 모드로 안전하게 돌아가기w

・TODO
쓰레드 세이프한 느낌으로 하는 것은 어떠한 좋은지 조사한다.
(원래, Arduino적으로는 무슨 일이겠지...)

Basic 인증이라든지 할 수 있는 것 같기 때문에, 조사해 둔다.
[작업 로그] ESP8266에서 SD 카드를 읽어보기
WA-MIKAN(와미칸)과 USB 시리얼 변환 키트(아키즈키 전자 통상 850엔)를 접속하는 방법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage