Most Efficient Way of Combining Large Strings for HTML Response

Projects Programming
12

You can also use "super quotes" (C++11 raw string literal) which handles embedded quotes in the text without having to litter it with escape characters e.g. :

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

<!DOCTYPE html>
<html>
<head>
<style>
 body {font-family: helvetica,arial,sans-serif;}
 </style>
</head>

<body onload="myInit()">

<div class=title>NTP Clock</div>

<button id="btn1" onclick="goPage(1)">1</button>
<button id="btn2" onclick="goPage(2)">2</button>
<button id="btn3" onclick="goPage(3)">3</button>
<button id="btn4" onclick="goPage(4)">4</button>
<button onclick="check()">update</button>
<p>

<script>
function myInit() {
var pageNo;
var xhr = new XMLHttpRequest();
// . . .
}
</script>

</body>
</html>

)=====";

There are some tricks to add variable information into the html:

  1. embed markers in your static html e.g. TEMP and use a string replace function to put in the current values, then send the page to the browser.
    or
  2. embed java script code in your html which uses the XMLHttpRequest() method to make a return trip to the server to collect all the variables (maybe in json format) and uses the document object model functions within the browser to add in all your variables in to the html page.

I have some (not beautiful) examples of both.

If you are building configuration type pages with lots of fields, but to be displayed on a small screen, another trick is to do that with a "single page application", that is send one physical page to the browser which is divided up into a number of logical pages and your page forward/backward button simply hides everything but the current logical page. This means only one trip to the server and the user can change "page" after adding data and without having to do a submit() each time. There may be other ways of achieving the same thing.