上位に戻る ESP32 webサーバ ブラウザから設定変更する 初版2025/1/10

ESP32 雨検出器を作りたく始めたのですが、色々引っかかったので、記録しておこうと思います
雨の通知は行うのですが、現状の計測値を表示したくwebサーバを構成しました ついでにメンテ処理機能でパラメータの変更や
静電容量の初期値を更新させるなどの処理をブラウザから出来るようにしてみました
getやpostのリクエストhtmlを解析して処理しようかと思ったのですが、getで、引数を受け取って処理したほうがデバッグしやすいので
server.arg()でパラメータを受け取ることにします 難点は、ブラウザのアドレスバーに引数の表示が残ってしまう → デバッグしやす
い デバッグ終わったら jabascriptで消すとか、もう一回リロードしなおすとか・・・。

  1. サンプル構成

    ■ボタンで制御
     シリアルプリントボタンを押すと、処理完了フォームが表示されて、シリアルコンソールにメッセージが出力されます

    ■パラメータの変更
     テキスト入力ボックスの値を更新して、変数に代入して、シリアルコンソールにメッセージを出力します

    ■あり 無し設定
     チェックボタンで、最初作ったのですが、チェックが無いとargに値が入らなく解除できなかったのでラジオボタンにしました

    ■動作結果
    設定ボタンを押すとアドレスバーに引数が表示されます



    プリントボタンを押すと

    てな感じの表示に遷移します

    シリアルコンソールへの出力結果

    てな感じです
  2. webサーバのスケッチ例

    #include <WiFi.h>
    #include <WebServer.h>

    // Wi-Fi接続情報を入力
    const char* ssid     ="ssiddesu";
    const char* password = "passworddesu";
    int lpcnt;
    int lpcnt2;

    //WebServerクラス
    WebServer server(80);       //通信を受けるポート番号(通常は80に設定)

    //webserver変数
    String atai1="りんご";
    String atai2="みかん";
    String chkk1;
    String chkk2;

    void setup() {
      // put your setup code here, to run once:
      Serial.begin(115200);
      delay(500);
       // ssidとpasswordを用いてWi-Fiに接続
      Serial.print("Connecting to ");
      Serial.println(ssid);
       while (WiFi.status() != WL_CONNECTED) {    // 接続確認
          delay(500);                            //   0.5秒毎にチェック
          lpcnt += 1 ;                           //
          if (lpcnt > 6) {                       // 6回目(3秒) で切断/再接続
            WiFi.disconnect(true,true) ;         //
            WiFi.begin(ssid, password);    //
            lpcnt = 0 ;                          //
            lpcnt2 += 1 ;                        // 再接続の回数をカウント
          }                                      //
          if (lpcnt2 > 3) {                      // 3回 接続できなければ、
            ESP.restart() ;                      // ソフトウェアリセット
          }                                      //
          Serial.print(".");                     //
      }            
     
      // IPアドレスを出力し、webserverをスタート
      Serial.println("");
      Serial.println("WiFi connected.");
      Serial.println("IP address: ");
      Serial.println(WiFi.localIP());

       //serverにアクセスしたときの処理関数
      server.on("/", handleSample);      //TOPページのアドレスにアクセスしたときの処理関数
      server.onNotFound(handleNotFound); //存在しないアドレスにアクセスしたときの処理関数
      server.on("/jikoku", jikokuawase);
      //WebServerを起動、server(80)で作成したサーバー
      server.begin();                    //WebServer起動

    }
    //TOPページにアクセスしたきの処理関数
    void handleSample() {
      if(server.argName(0)=="pr01"){
        atai1=server.arg(0);
        Serial.print("好きなもの1:");
        Serial.println(atai1);
        }
      if(server.argName(1)=="pr02"){
        atai2=server.arg(1);
        Serial.print("好きなもの2:");
        Serial.println(atai2);  
        }
      if(server.argName(0)=="pr03"){
        if(server.arg(0)=="する"){chkk1="checked";chkk2="";}
        if(server.arg(0)=="しない"){chkk2="checked";chkk1="";}
        Serial.print("メール送信:");
        Serial.println(server.arg(0));      
        }

      String html;
     
      //HTML記述
      html = "<!DOCTYPE html>\n";
      html += "<html lang='ja'>\n";
      html += "<head>\n";
      html += "<meta charset=\"utf-8\">\n";
      html += "<META name=\"viewport\" content=\"width=399\">\n";
      html += "<title>テストwebサーバ</title>\n";
      html += "</head>\n";
      html += "<body>\n";
      html += "<center><h1>テストwebサーバ</h1></center><p>\n";
      html += "<hr><p>\n";
      html += "<p><button type=\"button\" onclick=\"location.href='/jikoku'\">シリアルプリント処理</button></p>\n";
      html += "<form method='get'>\n";
      html += "<p>好きなもの1:\n";
      html += "<input type='text' name='pr01' size='4' value="+atai1+"><br>\n";
      html += "好きなもの2:\n";
      html += "<input type='text' name='pr02' size='4' value="+atai2+"><br>\n";
      html += "<input type='submit' value='設定'></p>\n</form>\n";
      html += "<form method='get'>\n";
      html += "メール送信 :[";
      html += "<input type='radio' name='pr03' value='する' "+chkk1+">する\n";
      html += "<input type='radio' name='pr03' value='しない' "+chkk2+">しない]\n";
      html += "<input type='submit' value='設定'></p>\n</form>\n";
      html += "</body>\n";
      html += "</html>\n";

      // HTMLを出力する
      server.send(200, "text/html", html);
    }
    void jikokuawase(){
    String html;
     //HTML記述
      html = "<!DOCTYPE html>";
      html += "<html lang='ja'>";
      html += "<head>";
      html += "<meta charset=\"utf-8\">";
      html += "<META name=\"viewport\" content=\"width=399\">";
      html += "<title>テストwebサーバ</title>";
      html += "</head>";
      html += "<body>";
      html += "<center><h1>シリアルモニターに出力しました</h1></center>";
      html += "<p><button type=\"button\" onclick=\"location.href='/'\">戻る</button></p>";
      html += "</body>";
      html += "</html>";
      server.send(200, "text/html", html);
      Serial.println("シリアルモニターに出力しました");
    }
    //存在しないアドレスへアクセスしたときの処理関数
    void handleNotFound(void) {
      server.send(404, "text/plain", "Not Found");
    }


    void loop() {
      // put your main code here, to run repeatedly:
    server.handleClient();
    }










    以上間違い等ありましたら、以下ご意見箱にお願いします

   

    ご意見箱