ESP32 ESPAsyncWebServer drops a part of the index.html file

Projects Networking, Protocols, and Devices
1

Hello odd Problem
This i a part of my setup i get the favicon and the style.css also the sript.js

server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(SPIFFS, "/index.html" , String(), false, HTML_Processor);
  });
 
   server.serveStatic("/", SPIFFS, "/").setDefaultFile("index.html");

server.on("/index.html", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(SPIFFS, "/index.html" , "text/css");
  });
  // Route to load style.css file
  server.on("/style.css", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(SPIFFS, "/style.css" , "text/css");
  });
        
   server.on("/favicon.ico", HTTP_GET, [](AsyncWebServerRequest *request){
   request->send(SPIFFS, "/favicon.ico", "image/x-icon"); 
     });

All atfer the <table is dropped



<h4> Hallo das ist ein Test 1</h4>



<table style="width:100%">
  <tr>
    <td>Line</td>
    <td>Switch</td>
  </tr>

   <tr>
    <td>

<div class="div-1">
<h1> Line 1 </h1>
<label class="switch">
 
  <input type="checkbox" unchecked onchange="toggleCheckbox(this, 'h125')" id="25"/>
  <div class="indicator left"></div>
  <div class="indicator right"></div>
  <div class="button"></div>
</label>
 <h1 id="h125" > Status 1 </h1>
</div>

  </td>
  <td>

<div class="div-2">
<h1> Line 2 </h1>
<label class="switch">
 
  <input type="checkbox" unchecked onchange="toggleCheckbox(this, 'h126')" id="26"/>
  <div class="indicator left"></div>
  <div class="indicator right"></div>
  <div class="button"></div>
</label>
 <h1 id="h126" > Status 1 </h1>
</div>

</td>
</tr>
<h4> Hallo das ist ein Test 4</h4>
	<tr> 
    <td>
<div class="div-3">
<h1> Line 3 </h1>
<label class="switch">
 
  <input type="checkbox" unchecked onchange="toggleCheckbox(this, 'h127')" id="27"/>
  <div class="indicator left"></div>
  <div class="indicator right"></div>
  <div class="button"></div>
</label>
 <h1 id="h127" > Status 1 </h1>
</div>


   </td>

	<td>

<div class="div-4">
<h1> Line 4 </h1>
<label class="switch">
 
  <input type="checkbox" unchecked onchange="toggleCheckbox(this, 'h128')" id="28"/>
  <div class="indicator left"></div>
  <div class="indicator right"></div>
  <div class="button"></div>
</label>
 <h1 id="h128" > Status 1 </h1>
</div>

	</td>
	</tr> 
	
	<tr>
    <td>

<div class="div-5">
<h1> Line 5 </h1>
<label class="switch">
 
  <input type="checkbox" unchecked onchange="toggleCheckbox(this, 'h129')" id="29"/>
  <div class="indicator left"></div>
  <div class="indicator right"></div>
  <div class="button"></div>
</label>
 <h1 id="h129" > Status 1 </h1>
</div>

	</td>	
	</tr>

</table>


<table style="width:100%">
  <tr>
    <td>VPN</td>
    <td>IOT</td>
  </tr>

   <tr>
    <td>
<button class="Bu1" onclick="SetSwitch('25', true)">Switch 25 On</button>
  </td>
  <td>
<button class="Bu2" onclick="SetSwitch('25', false)">Switch 25 Off</button>
</td>
</tr>

	<tr> 
    <td>
<button class="Bu3" onclick="SetSwitch('26', true)">Switch 26 On</button>
   </td>

	<td>
<button onclick="SetSwitch('26', false)">Switch 26 Off</button>
	</td>
	</tr> 
	
	<tr>
    <td>
<button onclick="SetSwitch('27', true)">Switch 27 On</button>
  </td>
    <td>
<button onclick="SetSwitch('27', false)">Switch 27 Off</button>
	</td>	
    </tr>
	
	<tr>
	<td>
 <button onclick="SetSwitch('28', true)">Switch 28 On</button>
	</td>
	
	<td> 
<button onclick="SetSwitch('28', false)">Switch 28 Off</button>
    </td>	
    </tr>
	
	
	<tr>
	<td>
<button onclick="SetSwitch('29', true)">Switch 29 On</button>
	</td>
	<td>
<button onclick="SetSwitch('29', false)">Switch 29 Off</button>
	</td>	
	</tr>

</table>

<div>

<h1>window.toolbar</h1>
<main>
	<button   id="interaktiv">Werte auslesen!</button>
	<p>
		<output></output>
	</p>
</main>

</div>
 </body>
</html>



<h4> Hallo das ist ein Test 1</h4>



<table style="width:100">
  <tr>
    <td>VPN</td>
    <td>IOT</td>
  </tr>

   <tr>
    <td>
<button class="Bu1" onclick="SetSwitch('25', true)">Switch 25 On</button>
  </td>
  <td>
<button class="Bu2" onclick="SetSwitch('25', false)">Switch 25 Off</button>
</td>
</tr>

	<tr> 
    <td>
<button class="Bu3" onclick="SetSwitch('26', true)">Switch 26 On</button>
   </td>

	<td>
<button onclick="SetSwitch('26', false)">Switch 26 Off</button>
	</td>
	</tr> 
	
	<tr>
    <td>
<button onclick="SetSwitch('27', true)">Switch 27 On</button>
  </td>
    <td>
<button onclick="SetSwitch('27', false)">Switch 27 Off</button>
	</td>	
    </tr>
	
	<tr>
	<td>
 <button onclick="SetSwitch('28', true)">Switch 28 On</button>
	</td>
	
	<td> 
<button onclick="SetSwitch('28', false)">Switch 28 Off</button>
    </td>	
    </tr>
	
	
	<tr>
	<td>
<button onclick="SetSwitch('29', true)">Switch 29 On</button>
	</td>
	<td>
<button onclick="SetSwitch('29', false)">Switch 29 Off</button>
	</td>	
	</tr>

</table>

<div>

<h1>window.toolbar</h1>
<main>
	<button   id="interaktiv">Werte auslesen!</button>
	<p>
		<output></output>
	</p>
</main>
</div>

 </body>
</html>

this is when I debug it with the chrome browser.
I read the spiff and the whole index.html file is getting dispayed
What happend with the missing html Code

2

what are you doing in HTML_Processor?
is your HTML correct?

try with

request->send(SPIFFS, "/index.html", "text/html");

and see if you get the whole file (with the place holders as I've removed the processor)

3

Your topic has been moved. Please do not post in "Uncategorized"; see the sticky topics in Uncategorized - Arduino Forum.

4

Thx Jackson HTML_Processor will be the next step. In the mooment I just want to see the checkboxes

5

not sure what you mean...

6

Oh It was the table. It was not correct set
now it works. Stupid me !!!

7

:slight_smile:

you are the first one to do that mistake !

8

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.