Esp-32-s3 Trying to import and export data to HTML

Projects Networking, Protocols, and Devices
1

Hey guys,

I am working on an application managing ESP32-S3-based hardware and looking to use an HTML page to configure the exchange of data to and from the HTML page, like setting serial numbers. I am trying to take the settings already in the application, showing them on a webpage, and offering the user to either type the change or use a pulldown menu.

Also, for serial numbers, you want to take a predefined serial number in the app and show it on the webpage.

The first example is a relatively simple set of information that the user would change and save to the main application. The VALUEs here are preset, that is not what I want, I need them to be coming from the previously saved info in the main ESP32 application?

<td width="50%" height="15px" style="vertical-align: top; overflow:hidden; ">
  <div id="cell_68f535dd">
  <div class="textstyle2">
  <form action="/" method="get">
  <center>
  <label for="fname">LOW : </label>
  <input type="number" value="7000" title="" name="SA4Low" min="1800" max="1500000" step="1"  id="edit_4a7be9cd" ><br/>
  <center>
  <label for="lname">HIGH : </label>
  <input type="number" value="7300" title="" name="SA4High" min="1800" max="1500000" step="1"  id="edit_7ff8c789" ><br/>
  <center>
  <label for="fname">OUTPUT : </label>
  <select name="SA4Output" title=""  id="combo_1f26a827" >
  <option value="0" selected="selected">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  </select>
  <center>
  <input type="submit" value="SUBMIT">
  </form>
  </div>
  </div>
	</td> 
	</tr>

In this second example, I am trying to show the serial number generated by the main ESP32 application again; the serial number does not come up. I tried using SerialNumber, the int variable defined in the main ESP32 app.

<tr>
<td width="50%" height="15px" style="vertical-align: top; overflow:hidden; ">
  <div id="cell_74b63437">
  <div class="textstyle2">
  <center>
  <span class="textstyle9">SERIAL NUMBER</span>
  </div>
  </div>
</td>
<td width="50%" height="15px" style="vertical-align: top; overflow:hidden; ">
<div id="cell_1f93b6e7">
<div class="textstyle2">
<input type="text" value=SerialNumber title="" name="\password" readonly="readonly" maxlength="20"  id="edit_3eee62e2" >
  </div>
  </div>
	</td>
	</tr>

This last example is a table to set up wifi settings (missing things like AP vs Client option.)

  </table>
  </div>
  </div>
  <span class="textstyle8"><br/></span>
  <center>
  <table id="table_7d022765" cellpadding="3" cellspacing="1" >
  <tr>
  <td width="50%" height="15px" colspan="2" style="vertical-align: top; overflow:hidden; ">
  <div id="cell_7af4dfa0">
  <div class="textstyle2">
  <center>
  <span class="textstyle9">WiFi CONFIGURATION</span>
  </div>
  </div>
  </td>
  </tr>
  <tr>
  <td width="50%" height="15px" style="vertical-align: top; overflow:hidden; ">
  <div id="cell_33c28df6">
  <div class="textstyle2">
  <center>
  <span class="textstyle9">SSID</span>
  </div>
  </div>
  </td>
  <td width="50%" height="15px" style="vertical-align: top; overflow:hidden; ">
   <div id="cell_d65920a">
  <div class="textstyle2">
  <center>
  <input type="text" value="VE2DX Band Decoder" title="" name="ssid" maxlength="20"  id="edit_67d8ae12" >
  <center>
  <input type="submit" value="SUBMIT">
  </div>
  </div>
  </td>
  </tr>
  <tr>
  <td width="50%" height="15px" style="vertical-align: top; overflow:hidden; ">
  <div id="cell_4f34cc6e">
  <div class="textstyle2">
  <center>
  <span class="textstyle9">SSID PASSWORD</span>
  </div>
  </div>
  </td>
  <td width="50%" height="15px" style="vertical-align: top; overflow:hidden; ">
  <div id="cell_28787caa">
  <div class="textstyle2">
  <center>
  <input type="text" value="VE2DX2025" title="" name="ssid_password" maxlength="20"  id="edit_30c92ef0" >
  <center>
  <input type="submit" value="SUBMIT">
  </div>
  </div>
  </td>
  </tr>
  <tr>
  <td width="50%" height="15px" style="vertical-align: top; overflow:hidden; ">
  <div id="cell_7d7f79dd">
  <div class="textstyle2">
  <center>
  <span class="textstyle9">DNS</span>
  </div>
  </div>
  </td>
  <td width="50%" height="15px" style="vertical-align: top; overflow:hidden; ">
  <div id="cell_7d7f79dd">
  <div class="textstyle2">
  <center>
  <select name="IPMode" title=""  id="combo_1cac92e" >
  <option value="0" selected="selected">STATIC</option>
  <option value="1">DNS</option>
  </select>
  <center>
  <input type="submit" value="SUBMIT">
  </div>
  </div>
  </td>
  </tr>
  <tr>
  <td width="50%" height="15px" style="vertical-align: top; overflow:hidden; ">
  <div id="cell_6e9e2c54">
  <div class="textstyle2">
  <center>
  <span class="textstyle9">IP ADDRESS</span>
  </div>
  </div>
  </td>
  <td width="50%" height="15px" style="vertical-align: top; overflow:hidden; ">
  <div id="cell_7d7f79dd">
  <div class="textstyle2">
  <center>
  <input type="text" value="192.168.000.001" title="" name="IPADDRESS" maxlength="15"  id="edit_3069617d" >
  <center>
  <input type="submit" value="SUBMIT">
  </div>
  </div>
  </td>
  </tr>
  <tr>
  <td width="50%" height="15px" style="vertical-align: top; overflow:hidden; ">
  <div id="cell_6a4e7890">
  <div class="textstyle2">
  <center>
  <span class="textstyle9">IP GATEWAY</span>
  </div>
  </div>
  </td>
  <td width="50%" height="15px" style="vertical-align: top; overflow:hidden; ">
  <div id="cell_55c7cedb">
  <div class="textstyle2">
  <center>
  <input type="text" value="192.168.000.001" title="" name="GATEWAY"  id="edit_27490192" >
  <center>
  <input type="submit" value="SUBMIT">
  </div>
  </div>
  </td>
  </tr>
  <tr>
  <td width="50%" height="15px" style="vertical-align: top; overflow:hidden; ">
  <div id="cell_1775169f">
  <div class="textstyle2">
  <center>
  <span class="textstyle9">IP SUBNET</span>
  </div>
  </div>
  </td>
  <td width="50%" height="15px" style="vertical-align: top; overflow:hidden; ">
  <div id="cell_5c366bf8">
  <div class="textstyle2">
  <center>
  <input type="text" value="255.255.255.000" title="" name="SUBNET"  id="edit_7af158d2" >
  </div>
  </div>
  </td>
  </tr>  
  </table>

Don't laugh new at this!!! :stuck_out_tongue_winking_eye:

Thanks, Richard

2

Check out the website Random Nerds Tutorials,
they have lots of examples of using html

3

It looks like you have two problem areas to deal with:

  1. Javascript and DOM (document object model) to present the data to the user in the form of a web page and maybe part process, validate it. It is easy enough to test off line simply on a PC with a rough model of your web page.
  2. Building the webpage for the web server to display (including any data which should be presented to the user) and parsing the returned data when the user submits the form.

Here is quite a compact example which uses an HTML form to present data to the user, allow him/her to modify it and return it to the server for processing. ESP32 ESPAsyncWebServer sample demonstration application