search

Hieromon / PageBuilder

An arduino library to create html string in the sketch for ESP8266/ESP32 WebServer.
MIT License
193 stars 40 forks source link

Change request - #2

Closed RudyFiero closed 6 years ago

RudyFiero commented 6 years ago

I don't know how this affects your library beyond the WebLed example. In that example you have the web page source quote wrapped and added the required escape characters in front of internal quotes.

"<p><a class=\"button\" href=\"/?led=on\">ON</a></p>"

The extra escape characters, and the beginning and ending quote characters" makes things confusing to look at. It would be better if this could be done instead.

static const char PROGMEM _PAGE_LED[] = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
  <title>ESP8266 LED Control</title>
  <style type="text/css">
  {{STYLE}}
  </style>
</head>
<body>
  <p>ESP8266 LED Control</p>
  <div class="one">
  <p><a class="button" href="/?led=on">ON</a></p>
  <p><a class="button" href="/?led=off">OFF</a></p>
  </div>
  <div class="img">
  <img src="{{LEDIO}}"/>
  </div>
</body>
</html>
)rawliteral";

And.

static const char PROGMEM _STYLE_BUTTON[] = R"rawliteral(
body {-webkit-appearance:none;}
p {
  font-family:'Arial',sans-serif;
  font-weight:bold;
  text-align:center;
}
.button {
  display:block;
  width:150px;
  margin:10px auto;
  padding:7px 13px;
  text-align:center;
  background:#668ad8;
  font-size:20px;
  color:#ffffff;
  white-space:nowrap;
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
}
.button:active {
  font-weight:bold;
  vertical-align:top;
  padding:8px 13px 6px;
}
.one a {text-decoration:none;}
.img {text-align:center;}
)rawliteral";
Hieromon commented 6 years ago

You are quite right. Since the purpose of PageBuilder is to improve the readability of the source code, your pointed out is useful. I improved the WebLED example. This fix does not affect the library.

Hieromon commented 6 years ago

Improved example code has been released.