Wifiマイコン(ESP-WROOM)をPCのWebブラウザ（javascript）で監視やらコントロールしたい。

正直なところ、WebブラウザでHTML＋javascriptでしかグラフィカルなインターフェイス作るのできないです。
マイコンはシリアル通信が普通ですが、Webブラウザでシリアル通信はHTML標準でないので、簡単にはマイコン制御はできない。。。

しかし、
ESP-WROOMだとWifiにつながるしPCのWebブラウザと簡単につながりそう。

だが実際にやってみるとWifiのSSIDとかIPアドレスとかが以下のように面倒。

普通は以下の1~3のいずれかで接続。

ESP-WROOMをアクセスポイントモードにして、PCのWifiをESP-WROOMに接続。

PCがWifiルーターでつながっているのを一旦切って、ESP-WROOMにWifi接続するので、Wifiのネットが利用できなくて困ります。
PCは有線LANでネットとつなげてるという手はありますが…
ESP-WROOMをステーションモードにし、スケッチにSSID、パスワード記入してWifiルーターとつなぎ、Wifiルーター経由でPCとESP-WROOMに接続。

PCのWifiはネットつながったままですが、ESP-WROOMと接続するWifiルーターのSSID,パスワードをスケッチに記入して指定するので、接続するWifiルーターが変わる場合はスケッチを書きかえねばならないです。
使うところがいつも同じ場所であればそのままでいいですが。
ESP-WROOMにWiFiManagerいれて、WebブラウザからSSID、パスワードを指定してWifiルーターとつなぎ、Wifiルーター経由でPCとESP-WROOMに接続。

最近、AmbientブログをみてWiFiManagerを知りました。
これで万事うまくいくかと思いますが、WiFiManagerにパスワードを入力しなければならない手間はあります。
また、AOSS/WPSのWifiルーターのデフォだとパスワードがやたら長いので…まあコピペすればいいんですが…

これ以外にPCとつなぐ方法はないもんか？

PCにある一つのWifiデバイスで仮想デバイスなんかで2ヶ所につなげれないかと思って調べていたら、
WindowsのSoftAP　てのがあるらしい。

SoftAP とは
WindowsのPCをWiFiアクセスポイント(WiFiルーター）として動作させられる機能のことです。
一つのWifiデバイスから仮想Wifiデバイスを生成し、WiFiアクセスポイントとしています。

じゃ、SoftAP立ち上げて、そこにつながるんじゃないかと

SoftAPを使ってESP-WROOMを接続

ESP-WROOMをステーションモードにし、スケッチに適当なSSID、パスワードを記入。
PCでESP-WROOMのスケッチに記入したSSID,パスワードと同じSoftAPをコマンドラインから入力して立ち上げ
ESP-WROOMをリセット、PCのSoftAPにDHCPで接続。
mDNS対応したWindowsであれば、ESP-WROOMのスケッチに書いたホスト名.local で接続。

でうまくいきました！

面倒なのはPCでSoftAPの設定と立ち上げをしなければならないところですが、以下のようにBatファイルと管理者ショートカット作ればいいです。

Ｗindows softAPでWifi接続

PC電源を切るとSoftAPはなくなってしまいます。
Windowsのスタートアップに置いとけばいいかとおもいます。

SoftAPの設定と立ち上げ

バッチファイルの内容は以下です。

rem ネットワークモードを許可する
netsh wlan set hostednetwork mode=allow

rem 設定するアクセスポイントのSSIDとパスワードを設定します。
rem WPA2-Personal方式のパスワードなので8文字以上で設定
netsh wlan set hostednetwork ssid=wroom-ap key=12345678 keyUsage=persistent

rem アクセスポイントの開始
netsh wlan start hostednetwork

rem ネットワーク接続ウィンドウ表示
ncpa.cpl

管理者権限で実行しなければいけません。

そのほかMACやLinuxでも

SoftAPのような機能があり、検証していませんが可能なようです。
- MacをWiFiアクセスポイントとして使う方法
- コマンド一発でLinuxマシンを即席無線LANルーターにできる「create_ap」がすごい便利だった
- Androidはテザリング設定かな。

mDNS使うとESP-WROOMにIPアドレス無しでアクセス、Ajaxで便利

ESP-WROOMは以下のコードです。

#include <ESP8266WebServer.h>
#include <ESP8266WiFi.h>
#include <ESP8266mDNS.h>
#include <WiFiClient.h>

const char *ssid = "wroom-ap";
const char *password = "12345678";

ESP8266WebServer server(80);

void handleRoot() {
  // HTTPステータスコード(200) リクエストの成功
  server.send(200, "text/plain", "Root Accessed.\n");
}

void setup(void) {
  // WIFI_AP, WIFI_STA, WIFI_AP_STA or WIFI_OFF
  WiFi.mode(WIFI_STA);
  //WiFi.config(ip, gateway, netmask); //ない場合DHCP
  WiFi.begin(ssid, password);
  // Wifi接続ができるまで待機
  Serial.begin(115200);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.print("IPAddress: ");
  Serial.println(WiFi.localIP());
  server.on("/", handleRoot);
  // ローカルネットワーク内のみ有効のmDNS(マルチキャストDNS)を開始
  // bool MDNSResponder::begin(const char* hostname){}
  if (!MDNS.begin("wroom")) {
    Serial.println("Error setting up MDNS responder!");
    while (1) {
      delay(1000);
    }
  }
  // Start TCP (HTTP) server
  server.begin();
  // Add service to MDNS-SD
  MDNS.addService("http", "tcp", 80);
}

void loop(void) {
  // Webサーバの接続要求待ち
  server.handleClient();
}

Windows10の2018年4月版以降や,AppleのBonjourをインストしたWindows7以降でmDNSができました。
私のWindows10の一つはデフォでmDNSきかなかったんで、以下のようにBonjourで実装しました。
windows10でmDNSの問題を解決する

これで、DHCPでIPアドレス管理せずにつないでも迷子にはなりません。

mDNSのMAC、Windows、Linux、詳しくは以下にありました。
mDNSを使ってローカルDNSサーバーを廃止する

AndroidはmDNSがデフォでは使えないようです。

これでやってみたいこと

PCのブラウザでGoogleMapとGPSデーターを連携したんだけど、GPSとjavascriptでこれで通信したらいいかとおもってます。

参考にしたサイト

WIFI-TNGとESP-WROOM-02で始めるWIFI Arduino
https://qiita.com/tadfmac/items/17448a2d96bd56373a66

ESP-WROOM-02 ( ESP8266 ) チップ・メモリ・MACアドレス情報確認方法
https://www.mgo-tec.com/blog-entry-chip-info-esp-wroom-02-esp8266.html

ESP8266でmDNS
https://blog.maripo.org/2018/01/esp8266_mdns/

ESP-WROOMスケッチのSSIDパスワードを変更せずにPCとWifi接続できるSoftAPを使った方法