diff --git a/esphome/components/web_server/__init__.py b/esphome/components/web_server/__init__.py
index d8343c6c39..130c082277 100644
--- a/esphome/components/web_server/__init__.py
+++ b/esphome/components/web_server/__init__.py
@@ -81,6 +81,37 @@ CONFIG_SCHEMA = cv.All(
)
+def build_index_html(config) -> str:
+ html = ""
+ css_include = config.get(CONF_CSS_INCLUDE)
+ js_include = config.get(CONF_JS_INCLUDE)
+ if css_include:
+ html += ""
+ if config[CONF_CSS_URL]:
+ html += f''
+ html += ""
+ if js_include:
+ html += ""
+ html += ""
+ if config[CONF_JS_URL]:
+ html += f''
+ html += ""
+ return html
+
+
+def add_resource_as_progmem(resource_name: str, content: str) -> None:
+ """Add a resource to progmem."""
+ content_encoded = content.encode("utf-8")
+ content_encoded_size = len(content_encoded)
+ bytes_as_int = ", ".join(str(x) for x in content_encoded)
+ uint8_t = f"const uint8_t ESPHOME_WEBSERVER_{resource_name}[{content_encoded_size}] PROGMEM = {{{bytes_as_int}}}"
+ size_t = (
+ f"const size_t ESPHOME_WEBSERVER_{resource_name}_SIZE = {content_encoded_size}"
+ )
+ cg.add_global(cg.RawExpression(uint8_t))
+ cg.add_global(cg.RawExpression(size_t))
+
+
@coroutine_with_priority(40.0)
async def to_code(config):
paren = await cg.get_variable(config[CONF_WEB_SERVER_BASE_ID])
@@ -89,13 +120,17 @@ async def to_code(config):
await cg.register_component(var, config)
cg.add_define("USE_WEBSERVER")
+ version = config[CONF_VERSION]
cg.add(paren.set_port(config[CONF_PORT]))
cg.add_define("USE_WEBSERVER")
cg.add_define("USE_WEBSERVER_PORT", config[CONF_PORT])
- cg.add_define("USE_WEBSERVER_VERSION", config[CONF_VERSION])
- cg.add(var.set_css_url(config[CONF_CSS_URL]))
- cg.add(var.set_js_url(config[CONF_JS_URL]))
+ cg.add_define("USE_WEBSERVER_VERSION", version)
+ if version == 2:
+ add_resource_as_progmem("INDEX_HTML", build_index_html(config))
+ else:
+ cg.add(var.set_css_url(config[CONF_CSS_URL]))
+ cg.add(var.set_js_url(config[CONF_JS_URL]))
cg.add(var.set_allow_ota(config[CONF_OTA]))
if CONF_AUTH in config:
cg.add(paren.set_auth_username(config[CONF_AUTH][CONF_USERNAME]))
@@ -103,13 +138,13 @@ async def to_code(config):
if CONF_CSS_INCLUDE in config:
cg.add_define("USE_WEBSERVER_CSS_INCLUDE")
path = CORE.relative_config_path(config[CONF_CSS_INCLUDE])
- with open(file=path, encoding="utf-8") as myfile:
- cg.add(var.set_css_include(myfile.read()))
+ with open(file=path, encoding="utf-8") as css_file:
+ add_resource_as_progmem("CSS_INCLUDE", css_file.read())
if CONF_JS_INCLUDE in config:
cg.add_define("USE_WEBSERVER_JS_INCLUDE")
path = CORE.relative_config_path(config[CONF_JS_INCLUDE])
- with open(file=path, encoding="utf-8") as myfile:
- cg.add(var.set_js_include(myfile.read()))
+ with open(file=path, encoding="utf-8") as js_file:
+ add_resource_as_progmem("JS_INCLUDE", js_file.read())
cg.add(var.set_include_internal(config[CONF_INCLUDE_INTERNAL]))
if CONF_LOCAL in config and config[CONF_LOCAL]:
cg.add_define("USE_WEBSERVER_LOCAL")
diff --git a/esphome/components/web_server/web_server.cpp b/esphome/components/web_server/web_server.cpp
index 1ac94375c2..b3a2dfdb66 100644
--- a/esphome/components/web_server/web_server.cpp
+++ b/esphome/components/web_server/web_server.cpp
@@ -90,10 +90,17 @@ WebServer::WebServer(web_server_base::WebServerBase *base)
#endif
}
+#if USE_WEBSERVER_VERSION == 1
void WebServer::set_css_url(const char *css_url) { this->css_url_ = css_url; }
-void WebServer::set_css_include(const char *css_include) { this->css_include_ = css_include; }
void WebServer::set_js_url(const char *js_url) { this->js_url_ = js_url; }
+#endif
+
+#ifdef USE_WEBSERVER_CSS_INCLUDE
+void WebServer::set_css_include(const char *css_include) { this->css_include_ = css_include; }
+#endif
+#ifdef USE_WEBSERVER_JS_INCLUDE
void WebServer::set_js_include(const char *js_include) { this->js_include_ = js_include; }
+#endif
void WebServer::setup() {
ESP_LOGCONFIG(TAG, "Setting up web server...");
@@ -159,20 +166,14 @@ void WebServer::handle_index_request(AsyncWebServerRequest *request) {
response->addHeader("Content-Encoding", "gzip");
request->send(response);
}
-#else
+#elif USE_WEBSERVER_VERSION == 1
void WebServer::handle_index_request(AsyncWebServerRequest *request) {
AsyncResponseStream *stream = request->beginResponseStream("text/html");
- // All content is controlled and created by user - so allowing all origins is fine here.
- stream->addHeader("Access-Control-Allow-Origin", "*");
-#if USE_WEBSERVER_VERSION == 1
const std::string &title = App.get_name();
stream->print(F(""));
stream->print(title.c_str());
stream->print(F(""));
-#else
- stream->print(F(""));
-#endif
#ifdef USE_WEBSERVER_CSS_INCLUDE
stream->print(F(""));
#endif
@@ -182,7 +183,6 @@ void WebServer::handle_index_request(AsyncWebServerRequest *request) {
stream->print(F("\">"));
}
stream->print(F(""));
-#if USE_WEBSERVER_VERSION == 1
stream->print(F(""));
stream->print(title.c_str());
stream->print(F("
"));
@@ -308,49 +308,40 @@ void WebServer::handle_index_request(AsyncWebServerRequest *request) {
"type=\"file\" name=\"update\">"));
}
stream->print(F("Debug Log
"));
-#endif
#ifdef USE_WEBSERVER_JS_INCLUDE
if (this->js_include_ != nullptr) {
stream->print(F(""));
}
-#endif
-#if USE_WEBSERVER_VERSION == 2
- stream->print(F(""));
#endif
if (strlen(this->js_url_) > 0) {
stream->print(F(""));
}
-#if USE_WEBSERVER_VERSION == 1
stream->print(F(""));
-#else
- stream->print(F(""));
-#endif
-
request->send(stream);
}
+#elif USE_WEBSERVER_VERSION == 2
+void WebServer::handle_index_request(AsyncWebServerRequest *request) {
+ AsyncWebServerResponse *response =
+ request->beginResponse_P(200, "text/html", ESPHOME_WEBSERVER_INDEX_HTML, ESPHOME_WEBSERVER_INDEX_HTML_SIZE);
+ request->send(response);
+}
#endif
+
#ifdef USE_WEBSERVER_CSS_INCLUDE
void WebServer::handle_css_request(AsyncWebServerRequest *request) {
- AsyncResponseStream *stream = request->beginResponseStream("text/css");
- if (this->css_include_ != nullptr) {
- stream->print(this->css_include_);
- }
-
- request->send(stream);
+ AsyncWebServerResponse *response =
+ request->beginResponse_P(200, "text/css", ESPHOME_WEBSERVER_CSS_INCLUDE, ESPHOME_WEBSERVER_CSS_INCLUDE_SIZE);
+ request->send(response);
}
#endif
#ifdef USE_WEBSERVER_JS_INCLUDE
void WebServer::handle_js_request(AsyncWebServerRequest *request) {
- AsyncResponseStream *stream = request->beginResponseStream("text/javascript");
- if (this->js_include_ != nullptr) {
- stream->addHeader("Access-Control-Allow-Origin", "*");
- stream->print(this->js_include_);
- }
-
- request->send(stream);
+ AsyncWebServerResponse *response =
+ request->beginResponse_P(200, "text/javascript", ESPHOME_WEBSERVER_JS_INCLUDE, ESPHOME_WEBSERVER_JS_INCLUDE_SIZE);
+ request->send(response);
}
#endif
diff --git a/esphome/components/web_server/web_server.h b/esphome/components/web_server/web_server.h
index 45d0bc03a4..a664bb5a12 100644
--- a/esphome/components/web_server/web_server.h
+++ b/esphome/components/web_server/web_server.h
@@ -14,6 +14,22 @@
#include
#include
#endif
+
+#if USE_WEBSERVER_VERSION == 2
+extern const uint8_t ESPHOME_WEBSERVER_INDEX_HTML[] PROGMEM;
+extern const size_t ESPHOME_WEBSERVER_INDEX_HTML_SIZE;
+#endif
+
+#ifdef USE_WEBSERVER_CSS_INCLUDE
+extern const uint8_t ESPHOME_WEBSERVER_CSS_INCLUDE[] PROGMEM;
+extern const size_t ESPHOME_WEBSERVER_CSS_INCLUDE_SIZE;
+#endif
+
+#ifdef USE_WEBSERVER_JS_INCLUDE
+extern const uint8_t ESPHOME_WEBSERVER_JS_INCLUDE[] PROGMEM;
+extern const size_t ESPHOME_WEBSERVER_JS_INCLUDE_SIZE;
+#endif
+
namespace esphome {
namespace web_server {
@@ -40,6 +56,7 @@ class WebServer : public Controller, public Component, public AsyncWebHandler {
public:
WebServer(web_server_base::WebServerBase *base);
+#if USE_WEBSERVER_VERSION == 1
/** Set the URL to the CSS that's sent to each client. Defaults to
* https://esphome.io/_static/webserver-v1.min.css
*
@@ -47,24 +64,29 @@ class WebServer : public Controller, public Component, public AsyncWebHandler {
*/
void set_css_url(const char *css_url);
- /** Set local path to the script that's embedded in the index page. Defaults to
- *
- * @param css_include Local path to web server script.
- */
- void set_css_include(const char *css_include);
-
/** Set the URL to the script that's embedded in the index page. Defaults to
* https://esphome.io/_static/webserver-v1.min.js
*
* @param js_url The url to the web server script.
*/
void set_js_url(const char *js_url);
+#endif
+#ifdef USE_WEBSERVER_CSS_INCLUDE
+ /** Set local path to the script that's embedded in the index page. Defaults to
+ *
+ * @param css_include Local path to web server script.
+ */
+ void set_css_include(const char *css_include);
+#endif
+
+#ifdef USE_WEBSERVER_JS_INCLUDE
/** Set local path to the script that's embedded in the index page. Defaults to
*
* @param js_include Local path to web server script.
*/
void set_js_include(const char *js_include);
+#endif
/** Determine whether internal components should be displayed on the web server.
* Defaults to false.
@@ -240,10 +262,16 @@ class WebServer : public Controller, public Component, public AsyncWebHandler {
web_server_base::WebServerBase *base_;
AsyncEventSource events_{"/events"};
ListEntitiesIterator entities_iterator_;
+#if USE_WEBSERVER_VERSION == 1
const char *css_url_{nullptr};
- const char *css_include_{nullptr};
const char *js_url_{nullptr};
+#endif
+#ifdef USE_WEBSERVER_CSS_INCLUDE
+ const char *css_include_{nullptr};
+#endif
+#ifdef USE_WEBSERVER_JS_INCLUDE
const char *js_include_{nullptr};
+#endif
bool include_internal_{false};
bool allow_ota_{true};
#ifdef USE_ESP32
diff --git a/esphome/components/web_server_base/web_server_base.h b/esphome/components/web_server_base/web_server_base.h
index f6d3a84f89..ae286b1e22 100644
--- a/esphome/components/web_server_base/web_server_base.h
+++ b/esphome/components/web_server_base/web_server_base.h
@@ -83,6 +83,7 @@ class WebServerBase : public Component {
return;
}
this->server_ = std::make_shared(this->port_);
+ // All content is controlled and created by user - so allowing all origins is fine here.
DefaultHeaders::Instance().addHeader("Access-Control-Allow-Origin", "*");
this->server_->begin();