For the past few days I've been tinkering with the Arduino IDE + ESP32 Core and a DOIT ESP32 DEVKITV1.
I want to make a web interface using Hieromon's AutoConnect and I've scrolling through his API's libraries and the thing that I didn't understand at all was the "merging" of HTML and C++.
/**< Common html document header. */
const char AutoConnect::_ELM_HTML_HEAD[] PROGMEM = {
"<!DOCTYPE html>"
"<html>"
"<head>"
"<meta charset=\"UTF-8\" name=\"viewport\" content=\"width=device-width, initial-scale=1\">"
};
/**< LuxBar menu element. */
const char AutoConnect::_ELM_MENU[] PROGMEM = {
"<header id=\"luxbar\" class=\"luxbar-fixed\">"
"<input type=\"checkbox\" class=\"luxbar-checkbox\" id=\"luxbar-checkbox\"/>"
"<div class=\"luxbar-menu luxbar-menu-right luxbar-menu-material-bluegrey\">"
"<ul class=\"luxbar-navigation\">"
"<li class=\"luxbar-header\">"
"<a href=\"" AUTOCONNECT_URI "\" class=\"luxbar-brand\">MENU_TITLE</a>"
"<label class=\"luxbar-hamburger luxbar-hamburger-doublespin\" id=\"luxbar-hamburger\" for=\"luxbar-checkbox\"><span></span></label>"
"</li>"
"<li class=\"luxbar-item\"><a href=\"" AUTOCONNECT_URI_CONFIG "\">Configure new AP</a></li>"
"<li class=\"luxbar-item\"><a href=\"" AUTOCONNECT_URI_OPEN "\">Open SSIDs</a></li>"
"<li class=\"luxbar-item\"><a href=\"" AUTOCONNECT_URI_DISCON "\">Disconnect</a></li>"
"<li class=\"luxbar-item\" id=\"reset\"><a href=\"#rdlg\">Reset...</a></li>"
"<li class=\"luxbar-item\"><a href=\"HOME_URI\">HOME</a></li>"
"</ul>"
"</div>"
"<div class=\"lap\" id=\"rdlg\"><a href=\"#reset\" class=\"overlap\"></a>"
"<div class=\"modal_button\"><h2><a href=\"" AUTOCONNECT_URI_RESET "\" class=\"modal_button\">RESET</a></h2></div>"
"</div>"
"</header>"
};
/**< The 404 page content. */
const char AutoConnect::_PAGE_404[] PROGMEM = {
"{{HEAD}}"
"<title>Page not found</title>"
"</head>"
"<body>"
"404 Not found"
"</body>"
"</html>"
};
/**< The page that started the reset. */
const char AutoConnect::_PAGE_RESETTING[] PROGMEM = {
"{{HEAD}}"
"<meta http-equiv=\"refresh\" content=\"{{UPTIME}};URL=" AUTOCONNECT_URI "\">"
"<title>AutoConnect resetting</title>"
"</head>"
"<body>"
"<h2>{{RESET}}</h2>"
"</body>"
"</html>"
};
As you can see, this is the declaration of multiple HTML pages. It starts with:
const char AutoConnect::_ELM_HTML_HEAD[] PROGMEM = {
"<!DOCTYPE html>"
"<html>"
"<head>"
"<meta charset=\"UTF-8\" name=\"viewport\" content=\"width=device-width, initial-scale=1\">"
};
He opened the html and head tag there and never closed them.
He then continued to "making another HTML page"
const char AutoConnect::_PAGE_404[] PROGMEM = {
"{{HEAD}}"
"<title>Page not found</title>"
"</head>"
"<body>"
"404 Not found"
"</body>"
"</html>"
};
And here we find "{{HEAD}}"
and the closing tags of html and head.
And this goes on.
Now, from what I gather he made a HEAD using const char AutoConnect::_ELM_HTML_HEAD[] PROGMEM
, that is actually the start of every HTML page.
Now what I don't understand is why is it named HEAD and not _ELM_HTML_HEAD like in the above declaration.
Also why and how exactly do you use it with {{}} (double curly braces). I tried looking it up on google but I didn't didn't find an on-the-subject explanation.
Do you think you can help me understand ? Or at least point me towards some useful guide ?
Thank you !