TechQA.

Linked Questions

Popular Questions

I don't understand the merging between C++ and HTML in a piece of code

Asked by At

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 !

html c++ css
Original Q&A

Related Questions