ESP8266の小物を作っていると、WebServer機能でのパラメータ登録機能があると
同じ小物を複数個運用するのに、設定や確認が楽だろうなぁと感じています。
今回はSPIFFSにあるhtmlファイルを読込んで、inifileに従った内容に更新するクラスを作成しました。
　＝＞xmlでやれば良かったと何気に後悔中です。
これだけだとイマイチなのですが、ESP8266WebServer.hを使うと良い感じになるのでは？　と期待して作っています。

ESP8266環境で必要なリソース

　SPIFFS / FS等のファイルアクセスの環境
　inifile.h 私が作成したヤツです。

機能

　1.　入力項目 input type="text"　の value をinifileの登録値に変更する
　2.　パスワード入力項目 input type="password" の value をinifileの登録値に変更する
　3.　ラジオボタンの初期値をinifileの登録値側にします。
　4.　レンジ入力の初期値をinifileのものに置き換えます。
　5.　コンボ入力の初期値をinifileのものに置き換えます。

使い方

ソースはこんな風にします。

usage.ino

# include <inifile.h>
const char *iniFileName = "/setup.ini"; // Inifileのファイル名
const char *iniHeader = "SETUP";
iniFiles ini(iniFileName);
# include <WebServerToolHtml.h>

//==
void setup() {
  Serial.begin(115200);  Serial.flush(); delay(1000);
  Serial.println("program start");
  if( SPIFFS.begin() )
    Serial.println("SPIFFS Initialize....ok");
  else
  {
    Serial.println("SPIFFS Initialization...failed");
    return;
  }
  WebServerToolHtml.readHtmlFile( "/index.html" );
  Serial.println( WebServerToolHtml.buffer() );
  WebServerToolHtml.release();
}

void loop() {
}

ESP8266/ESP32のSPIFFSに、このsetup.iniファイルをコピーします。

SETUP.ini

[SETUP]
SSID=TEST_SSID
PASSWORD=TEST_PASSWORD
switch=on
range=22.2
sensor=HTU21D
*

ESP8266/ESP32のSPIFFSに、このhtmlファイルをコピーします。注) '<' を '＜'に変更してあるので戻す必要があります。

index.html

＜html lang="ja">
＜head>
＜meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
＜meta name="viewport" content="width=device-width,initial-scale=1">
＜/head>
＜form name='SETUP' action=SETUP method='post'>
＜p>SWITCH＜/p>

＜p>SSID：＜input type="text" name="SSID" size="30" maxlength="30" value="SAMPLESSID">＜/p>

＜p>PASS：＜input type="password" name="PASSWORD" size="30" maxlength="30" value="SAMPLEPASSWORD">＜/p>

＜p>
＜input type="radio"  name="switch" value="on" >ON
＜input type="radio"  name="switch" value="off">OFF
＜/p>

＜p>＜input type="range" name="volume1" value="1" min="-10.0" max="29.9" step="0.1">＜/p>

＜p>
＜select name="sensor">
＜option value="DHT11">DHT11＜/option>
＜option value="LM75A">LM75A＜/option>
＜option value="HTU21D">HTU21D＜/option>
＜option value="SHT31">SHT31＜/option>
＜option value="BME280">BME280＜/option>
＜option value="BMP280">BMP280＜/option>
＜/select>
＜/p>

＜input type=submit value=on target=tif>
＜/form>
＜/html>

ソースコード

cppには何も書いていません。

webservertoolhtml.h

# include <inifile.h>

# ifndef HTMLANDINIFILE_H
# define HTMLANDINIFILE_H

class WebServerToolHtmlClass {
    // 空白文字の判定(タブ・スペース・改行)
    bool charSpace( char chData ) {  return ((chData == ' ' || chData == 0x9 || chData == 0xd || chData == 0xa) ? true : false);  }
    // '>' と 空白文字の判定 
    bool charDataTerminate( char chData ){  return ((charSpace(chData)==true || chData=='>')?true:false);  }
    File fp;
    char *writeBuffer;
    int writePos;
    char readCharSkip( ){  char ch = fp.read();                                            return ch;  }
    char readChar( ){      char ch = writeBuffer[writePos] = readCharSkip();  writePos++;  return ch;  }
    String upperCaseChar( char *str ){  String s = str;  s.toUpperCase();  return s;  }
    //== タグを見つけて、区切り文字列を返す ========
    String OLDTAG, TAG;
    char readTAG() {
      char chData[15], POS = 0;  TAG = "";
      while ( fp.available() ) {
        char ch = chData[POS] = readChar();  
        if ( charDataTerminate(ch) ){  chData[POS] = 0x00;  TAG = upperCaseChar(chData);         return ch;  }  // タグが読めた
        POS++;
      }
      return -1;
    }
    //== 設定内容の読込　（設定の右辺）=============
    String detailData;
    char readDetailData() {
      char chData[48], POS = 0;  detailData = "";
      while ( fp.available() ) {
        char ch = chData[POS] = readChar();
        if ( charDataTerminate(ch) ){  chData[POS] = 0x00;  detailData = upperCaseChar(chData);
//          Serial.println( detailData );
          return ch;
        }  // データが読めた
        POS++;
      }
      return -1;
    }
    //==設定内容の読込　（設定の右辺　　　　バッファへは移さない
    char replaceDetailData( char *data ) {
      int oldWritePos = writePos;
      for( int POS=0 ; data[POS]!=0 ; POS++ ){  writeBuffer[ writePos ] = data[POS];  writePos++;  }  // データをバッファに書き出す
      while ( fp.available() ) {
        char ch = readCharSkip();
        if ( charDataTerminate(ch) ){     // データが読めた
          writeBuffer[ writePos++ ] = ch;
  //        writeBuffer[ writePos ] = 0;          Serial.print( "[rep]=" );      Serial.println( &writeBuffer[oldWritePos] );
          return ch;
        }
      }
      return -1;
    }
    //==
    String TYPE, NAME, VALUE, lineType, FORMNAME, OLDNAME;
    //============================================
    char readDetailTitle() {
    char chData[48], POS = 0;
      while ( fp.available() ) {
        char ch = readChar();
        if ( charSpace(ch) )        continue;                                                                   // 読み飛ばし
        if ( ch == '>' )                                                                         return ch;     // 検索中に終端
        chData[ POS++ ] = ch;
        while ( fp.available() ) {
          ch = readChar();
          if ( ch == '=' ) {  // タイトルが読めた
            chData[ POS ] = 0x00;
            String titleData = upperCaseChar( chData );
//            Serial.print( "LINE:" );      Serial.print( titleData );
            if( titleData=="TYPE" ){    ch = readDetailData();  TYPE = detailData.substring( 1, detailData.length()-1 );  return ch;  }
            if( titleData=="NAME" ){    ch = readDetailData();  NAME = detailData.substring( 1, detailData.length()-1 );  return ch;  }
            if( titleData=="VALUE" ){
              if ( TYPE != "TEXT" && TYPE != "PASSWORD" && TYPE != "RANGE" ){
//                Serial.print( "[noquate]" );  Serial.print( TYPE );   
                                        ch = readDetailData();  VALUE = detailData.substring( 1, detailData.length()-1 ); return ch;  }
              String tempString = "\"";
              tempString += ini.get( (char*)iniHeader, (char*)NAME.c_str(), "" );
              tempString += "\"";
              if( tempString=="\"\"" )  ch = readDetailData();  else  ch = replaceDetailData( (char*)tempString.c_str() );
                                                                                    return ch;  }
                                        ch = readDetailData();                      return ch;
          }
          if( charSpace(ch) ){
            chData[ POS ] = 0x00;
            String titleData = upperCaseChar( chData );
//            Serial.print( "SINGLE" );
//            Serial.println( titleData );
            if( titleData=="FORM" )   lineType = "FORM";
            if( titleData=="/FORM" )  FORMNAME = "";                                return ch;
          }
          if ( charDataTerminate( ch )==true  ){                                    return ch;  }  // タイトルが読めた / 読込中に終端
          chData[ POS++ ] = ch;
        }
      }
      return -1;
    }
  public:
    WebServerToolHtmlClass(){ writeBuffer=NULL; }
    ~WebServerToolHtmlClass(){ release(); }
    void release(){  if( writeBuffer!=NULL )  free( writeBuffer );  writeBuffer=NULL;  }
    char *buffer(){  return writeBuffer; }
    //============================================
    char *readHtmlFile( const char *htmlFileName ) {
      if( writeBuffer!=NULL )  release();
      fp = SPIFFS.open( htmlFileName, "r" );
      int filesize = fp.size();
      writeBuffer = (char*)malloc( filesize+1000 );
      writePos = 0;
      FORMNAME = "";
//      Serial.print( "filesize:" );      Serial.println( filesize );
      while ( fp.available() ) {
        if ( readChar() != '<' )      continue;  // 先頭文字を探す
        char ch = readTAG( );                    // タグを見つけて、区切り文字列を返す
        if( ch==-1 || ch=='>' ){
               continue;
        }else{
          TYPE = "";  NAME = "";  VALUE = ""; 
          for( ; ; )  if( !charSpace(ch=readDetailTitle()) )  break;  // データを解釈する
          if( ch=='>' ){
//            Serial.print( "LINE NAME:" );
//            Serial.print( NAME );
//            Serial.print( " VALUE:" );
//            Serial.println( VALUE );
            if( TYPE=="RADIO" ){
              String tempString = ini.get( (char*)iniHeader, (char*)NAME.c_str(), "" );
              tempString.toUpperCase();
//              Serial.print( " STRING:" );
//              Serial.println( tempString );
              if( VALUE == tempString ){
//                Serial.print( "[+checked]" );
                writeBuffer[ writePos-1 ] = ' ';
                strcpy( &writeBuffer[ writePos ], "checked>" );
                writePos += 8;
              }
            }
//            Serial.print(TAG);
            if( TAG!="OPTION" ){
              OLDTAG=TAG;  OLDNAME=NAME;
//              Serial.println("");
            }else{
//              Serial.print(OLDTAG);
//              Serial.print(OLDNAME);
              if( OLDTAG=="SELECT" ){
                String tempString = ini.get( (char*)iniHeader, (char*)OLDNAME.c_str(), "" );
                tempString.toUpperCase();
//                Serial.print(":");
//                Serial.print(VALUE);
//                Serial.print(tempString);
                if( VALUE == tempString ){
                  writeBuffer[ writePos-1 ] = ' ';
                  strcpy( &writeBuffer[ writePos ], "selected>" );
                  writePos += 9;
                }
              }
              Serial.println("");
            }
          }
        }
      }
//      Serial.println( "[EOF]" );
      writeBuffer[ writePos++ ] = 0;
      fp.close();
      return writeBuffer;
    }
    //============================================
};

WebServerToolHtmlClass WebServerToolHtml;
# endif