Insert a HTML file at specific location in a sketch?

Projects Programming
1

If have the following ESP32 code segment.
Was wondering if there was a way to include a .html file at a location in the code:

This code works fine.

const char PAGE_MAIN[] PROGMEM = R"=====(
  <html>
    <style>
     .fanrpmslider {
      width: 30%;
      height: 55px;
      outline: none;
    }
     .bodytext {
      font-family: "Verdana", "Arial", sans-serif;
      font-size: 24px;
      text-align: left;
      font-weight: light;
      border-radius: 5px;
      display:inline;
    }
    </style>
    <body>
      <header>
      
      </header>
      <main>
          <div class="bodytext">Fan Speed Control (RPM: <span id="fanrpm"></span>)</div>
    <br>
          <input type="range" class="fanrpmslider" min="0" max="255" value = "0" width = "0%" oninput="UpdateSlider(this.value)"/>
      </main>
      <footer>
      
      </footer>
    </body>
    <script>
    
    </script>
  </html>
  
  )=====";

This is the web page I want to insert:

  <html>
    <style>
     .fanrpmslider {
      width: 30%;
      height: 55px;
      outline: none;
    }
     .bodytext {
      font-family: "Verdana", "Arial", sans-serif;
      font-size: 24px;
      text-align: left;
      font-weight: light;
      border-radius: 5px;
      display:inline;
    }
    </style>
    <body>
      <header>
      
      </header>
      <main>
          <div class="bodytext">Fan Speed Control (RPM: <span id="fanrpm"></span>)</div>
    <br>
          <input type="range" class="fanrpmslider" min="0" max="255" value = "0" width = "0%" oninput="UpdateSlider(this.value)"/>
      </main>
      <footer>
      
      </footer>
    </body>
    <script>
    
    </script>
  </html>

Something like this:

const char PAGE_MAIN[] PROGMEM = R"=====(

//insert Page.html file here ?

  )=====";

The Page.html file would be in the same directory where the .ino file is located.

2

#include?

It's not very clear how the first two HTML documents are related (80% identical) to the "insert".

3

The top file is what works now.

Sorry, yes the middle file is the HTML web page code sitting in the top file, it works :slight_smile: .

I was hoping to pull this web page stuff out of the .ino file and put it into a separate/external .html file.

Then I wanted to, some how, place the contents of the newly created HTML file into the Arduino code segment, something like the last example, as seen in post #1 .

BTW, I tried to use include but, it will be inside the char array so the compile ignores it :frowning:

4

Test the condition, add or do not add an external file.

if (pizza)
    <script src=htmlfile.txt></script>
5

Hmmm. I have the exact problem and you might have just inspired me to fix it instead of working around it for so long :slight_smile:

6

You'll have to insert the quotation marks into the HTML file. The preprocessor of course ignores a #include inside a string literal.

Eventually add quotation marks using the # operator, somehow?

7

So what I did was to put the HTML in a header file as a single string like this:
index_html.h:

const char *index_html =
        "<head>\
            <style>\
                body{background-color:black; color:yellow;font-family:sans-serif;font-size:12}\
                .status{margin-left:30vw;padding-left:1vw;background-color:darkslateblue; color:white;width:30vw;font-size:24}\
                .control{margin-left:30vw;padding-left:1vw;vertical-align:center;background-color:darkslateblue; color:white;width:30vw;height:10vh;font-size:24}\
                .buttonStyle{height:75px;width:100px;font-size:24}\
            </style>\
       <\head>\
blah, blah blah...

And in my .ino file:

#include "index_html.h"
...
server.send(server.send(200, "text/html", index_html);

Much easier to update now!

In your case, you could include the const char PAGE_MAIN[] PROGMEM = as part of your definition. That doesn't work for me since the page is dynamically created when you go to it.

1 Like
8

Thanks for the responses.

Decided to add a tab in the sketch folder and just place the HTML array in that Tab.

9

This is how I am dealing with Web Page code to be use in the ESP32 Arduino sketch.

Using Notepad++ to edit the Arduino and HTML code.

Write the HTML code and test it out using the Preview HTML Notepad plugin.

A short Macro deletes the Char Array in the Arduino sketch, then paste the HTML code into the cleaned out array.

This Macro can be used over and over again in other projects too.

A
A1360×906 365 KB

B

C
C749×513 124 KB

D
D907×408 113 KB

10

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