lbsadmin/ESPUI
1
0
Fork 0
mirror of https://github.com/s00500/ESPUI.git synced 2026-01-16 18:46:21 +00:00
Code Issues Releases Activity

Implement setCustomCSS for custom CSS injection

Browse Source 
This commit introduces `setCustomCSS` to the ESPUI class, allowing users to inject custom CSS into the web interface, analogous to `setCustomJS`.

Changes include:
- Added `setCustomCSS` method to `ESPUI.h` and `ESPUI.cpp`.
- Added `/css/custom.css` route handler in `ESPUI.begin`.
- Updated `src/dataIndexHTML.h` to include the link to `/css/custom.css` in both `HTML_INDEX` and `HTML_INDEX_GZIP`.
This commit is contained in:
google-labs-jules[bot]
2025-11-22 22:08:37 +00:00
parent a20fe6a4d6
commit 41c75cc41e
3 changed files with 28 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/ESPUI.cpp
View File

@@ -22,6 +22,11 @@
// js: JavaScript code as a C-string. Must remain valid for the lifetime of the ESPUIClass instance.
static const char* customJS = nullptr;
// Optional user-defined CSS to be included in the UI.
// Served at /css/custom.css, which is automatically included in index.htm.
// css: CSS code as a C-string. Must remain valid for the lifetime of the ESPUIClass instance.
static const char* customCSS = nullptr;
// Set custom JavaScript to be included in the UI.
// js: JavaScript code as a C-string. Must remain valid for the lifetime of the ESPUIClass instance.
void ESPUIClass::setCustomJS(const char* js)
@@ -29,6 +34,13 @@ void ESPUIClass::setCustomJS(const char* js)
customJS = js;
}
// Set custom CSS to be included in the UI.
// css: CSS code as a C-string. Must remain valid for the lifetime of the ESPUIClass instance.
void ESPUIClass::setCustomCSS(const char* css)
{
customCSS = css;
}
static String heapInfo(const __FlashStringHelper* mode)
{
String result;
@@ -1293,6 +1305,15 @@ void ESPUIClass::begin(const char* _title, const char* username, const char* pas
request->send(200, "application/javascript", customJS ? customJS : "");
});
server->on("/css/custom.css", HTTP_GET, [](AsyncWebServerRequest* request) {
if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername, ESPUI.basicAuthPassword))
{
return request->requestAuthentication();
}
request->send(200, "text/css", customCSS ? customCSS : "");
});
server->begin();
#if defined(DEBUG_ESPUI)

5
src/ESPUI.h
View File

@@ -206,6 +206,11 @@ public:
// This is intentionally not a String to avoid dynamic memory allocation.
void setCustomJS(const char* js);
// Set optional user-defined CSS to be included in the UI.
// css: CSS code as a C-string. Must remain valid for the lifetime of the ESPUIClass instance.
// This is intentionally not a String to avoid dynamic memory allocation.
void setCustomCSS(const char* css);
// Variables
const char* ui_title = "ESPUI"; // Store UI Title and Header Name
Control* controls = nullptr;

4
src/dataIndexHTML.h
View File

@@ -1,5 +1,5 @@
const char HTML_INDEX[] PROGMEM = R"=====(
<!DOCTYPE html><html> <head><meta charset=utf-8><title>Control</title><meta name=viewport content="width=device-width, initial-scale=1"><link rel="shortcut icon" href=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAPFBMVEUAAACA1VWR21qQ2liR3FqR3FqS3VuR3VqR3VuR3VqO21mS21uS3FqS3FqS21uJ2GKQ21qR3FuR3FoAAAB/3Gu7AAAAEnRSTlMABoA3kPBwz8i5Kzioxg4NVcU3uEJHAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAAN1wAADdcBQiibeAAAAAd0SU1FB+EFEhcEM+HpYwQAAABYSURBVBjThY/JDsAgCESt4lpX/v9jLQZJ6qF9t3khAyj1xXUKbQ4BVowDwqOYgExkkW4iY6lPaF06RqM8YItOuRbMaz6xjbsusDAW/drplBg47jP696cXE8bPA1eUDeK2AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE3LTA1LTE4VDIzOjA0OjUxKzAyOjAwxE59ewAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNy0wNS0xOFQyMzowNDo1MSswMjowMLUTxccAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb7jwaAAAAAElFTkSuQmCC><link rel=stylesheet href=/css/normalize.css><link rel=stylesheet href=/css/style.css><script src=/js/zepto.min.js></script><script src=/js/slider.js></script><script src=/js/graph.js></script><script src=/js/controls.js></script><script src=/js/tabbedcontent.js></script><script src=/js/custom.js></script></head> <body onload=javascript:start();> <div> <h4> <div id=mainHeader>Control</div> <span id=conStatus class=label>Offline</span> </h4> </div> <hr> <div class=container> <div id=row class="row u-full-width"></div> <ul id=tabsnav class="navigation navigation-tabs u-full-width"></ul> <div id=tabscontent class="tabscontent u-full-width"></div> </div> </body> </html>
<!DOCTYPE html><html> <head><meta charset=utf-8><title>Control</title><meta name=viewport content="width=device-width, initial-scale=1"><link rel="shortcut icon" href=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAPFBMVEUAAACA1VWR21qQ2liR3FqR3FqS3VuR3VqR3VuR3VqO21mS21uS3FqS3FqS21uJ2GKQ21qR3FuR3FoAAAB/3Gu7AAAAEnRSTlMABoA3kPBwz8i5Kzioxg4NVcU3uEJHAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAAN1wAADdcBQiibeAAAAAd0SU1FB+EFEhcEM+HpYwQAAABYSURBVBjThY/JDsAgCESt4lpX/v9jLQZJ6qF9t3khAyj1xXUKbQ4BVowDwqOYgExkkW4iY6lPaF06RqM8YItOuRbMaz6xjbsusDAW/drplBg47jP696cXE8bPA1eUDeK2AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE3LTA1LTE4VDIzOjA0OjUxKzAyOjAwxE59ewAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNy0wNS0xOFQyMzowNDo1MSswMjowMLUTxccAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb7jwaAAAAAElFTkSuQmCC><link rel=stylesheet href=/css/normalize.css><link rel=stylesheet href=/css/style.css><link rel=stylesheet href=/css/custom.css><script src=/js/zepto.min.js></script><script src=/js/slider.js></script><script src=/js/graph.js></script><script src=/js/controls.js></script><script src=/js/tabbedcontent.js></script><script src=/js/custom.js></script></head> <body onload=javascript:start();> <div> <h4> <div id=mainHeader>Control</div> <span id=conStatus class=label>Offline</span> </h4> </div> <hr> <div class=container> <div id=row class="row u-full-width"></div> <ul id=tabsnav class="navigation navigation-tabs u-full-width"></ul> <div id=tabscontent class="tabscontent u-full-width"></div> </div> </body> </html>
)=====";
const uint8_t HTML_INDEX_GZIP[923] PROGMEM = { 31,139,8,0,111,41,29,105,2,255,133,148,109,115,162,58,20,199,191,10,215,87,247,206,110,139,138,181,237,174,58,19,20,108,85,84,64,240,225,93,128,20,130,225,161,36,136,250,233,55,1,59,221,59,123,167,215,25,146,147,156,223,249,159,228,8,103,240,215,100,53,222,236,215,154,20,177,132,140,6,245,40,13,34,4,131,209,32,65,12,74,126,4,11,138,216,176,100,111,119,79,163,1,195,140,160,209,56,75,89,145,145,129,220,44,27,50,133,9,26,158,48,170,242,172,96,146,207,17,148,178,97,171,194,1,139,134,1,58,97,31,221,213,139,239,18,78,49,195,144,220,81,31,18,52,236,180,70,3,130,211,163,84,32,50,108,209,136,135,251,37,147,48,151,104,73,81,129,222,134,1,100,240,7,78,96,136,228,60,13,127,122,144,162,126,239,59,118,213,149,85,181,231,211,48,3,252,183,180,157,72,115,66,110,169,98,9,204,49,48,196,156,45,204,231,141,48,212,105,160,110,28,13,128,197,116,61,150,207,145,106,242,205,177,26,219,250,108,201,189,253,25,143,13,95,249,230,90,232,141,65,159,143,129,136,92,229,66,181,159,240,65,87,198,126,73,180,39,161,183,214,85,195,213,156,154,237,184,91,171,219,121,55,187,4,91,138,254,46,30,91,113,75,75,113,185,221,204,171,110,39,177,187,157,210,174,125,252,225,246,172,59,157,155,60,142,243,156,209,69,94,85,86,166,229,163,208,215,82,203,222,16,3,168,25,80,142,107,181,186,62,225,135,249,21,103,231,176,183,116,125,71,41,181,217,75,125,211,237,108,97,181,77,128,129,19,216,245,6,169,108,157,92,69,77,58,21,0,147,192,87,77,140,61,84,251,130,182,237,116,116,245,155,166,107,145,175,25,223,94,242,125,37,10,161,238,109,199,82,93,53,222,68,123,121,54,161,32,28,107,54,235,145,124,39,159,158,227,133,121,152,245,223,245,103,166,28,35,112,137,59,231,157,51,247,204,158,234,102,213,164,122,95,237,67,237,124,60,110,123,120,223,39,107,168,183,251,214,187,241,180,127,101,171,210,242,12,120,237,159,99,143,150,116,2,182,114,80,228,68,13,123,143,241,186,255,220,247,119,218,147,183,6,29,228,76,208,188,43,78,55,219,89,250,246,197,58,238,119,22,89,37,203,203,97,171,183,15,38,184,24,19,77,89,108,64,103,177,209,122,238,228,245,186,138,65,123,21,59,231,249,21,92,184,93,157,181,135,103,84,137,191,194,109,91,110,212,62,76,121,220,38,103,94,215,202,15,233,17,24,49,56,47,47,237,106,105,183,207,43,221,188,24,215,172,90,78,178,142,97,211,202,136,179,202,88,56,155,179,239,139,35,28,2,205,221,7,250,242,116,72,45,101,191,155,17,240,18,40,193,229,33,247,18,118,221,119,245,234,96,63,156,252,4,121,143,113,5,235,146,106,68,223,28,237,210,76,198,227,223,222,100,202,46,4,209,8,33,214,188,196,178,79,169,156,102,69,2,9,190,162,123,190,250,63,184,222,108,64,234,23,56,103,18,45,252,161,28,83,249,138,114,150,221,39,56,189,143,185,83,110,188,127,80,148,224,0,21,95,34,97,1,243,232,75,194,111,190,117,250,37,196,160,231,161,224,246,205,127,45,87,82,150,37,255,70,228,186,223,72,3,47,11,46,82,150,146,12,6,195,24,158,96,227,255,65,25,44,216,223,255,252,228,68,128,79,162,61,245,26,83,194,193,48,129,56,125,225,225,168,248,236,74,13,69,115,152,10,130,159,202,102,144,149,84,242,9,164,116,72,160,135,200,104,245,246,198,139,143,248,33,56,198,105,185,22,189,133,70,197,45,65,19,33,238,197,211,160,226,51,109,145,85,55,103,75,152,229,221,91,73,72,211,222,120,55,187,201,148,68,160,188,54,52,133,31,90,45,110,226,16,50,156,165,210,167,121,39,160,63,84,74,242,153,80,0,183,250,126,40,253,190,245,223,7,248,152,68,97,235,59,214,237,253,23,75,224,118,101,245,5,0,0 };
const uint8_t HTML_INDEX_GZIP[929] PROGMEM = { 31,139,8,0,58,50,34,105,2,255,141,149,109,115,170,56,20,199,191,10,235,171,221,185,183,197,167,218,246,94,113,38,40,216,170,136,128,224,195,187,0,169,4,195,67,73,16,245,211,111,2,118,122,119,238,78,119,157,33,57,201,249,157,255,73,14,204,113,248,199,196,28,175,119,43,77,138,88,66,70,195,122,148,134,17,130,225,104,152,32,6,165,32,130,5,69,76,41,217,219,221,211,104,200,48,35,104,52,206,82,86,100,100,40,55,203,134,76,97,130,148,19,70,85,158,21,76,10,56,130,82,166,180,42,28,178,72,9,209,9,7,232,174,94,124,151,112,138,25,134,228,142,6,144,32,165,211,26,13,9,78,143,82,129,136,210,162,17,15,15,74,38,97,46,209,146,162,2,189,41,33,100,240,7,78,224,1,201,121,122,248,233,67,138,6,253,239,216,83,77,187,106,207,167,135,12,240,223,210,113,35,205,61,112,75,21,75,96,141,129,33,230,108,97,61,175,133,161,78,67,117,237,106,0,44,166,171,177,124,142,84,139,111,142,213,216,209,103,75,238,29,204,120,236,225,149,111,174,132,222,24,12,248,24,138,72,51,23,170,131,132,15,122,111,28,148,68,123,18,122,43,93,53,60,205,173,217,142,183,177,187,157,119,171,75,176,221,211,223,197,227,244,188,210,238,121,220,110,102,179,219,73,156,110,167,116,106,31,127,184,61,235,78,231,22,143,227,60,103,116,145,87,149,123,211,242,81,232,107,169,237,172,137,1,212,12,244,142,43,181,186,62,225,135,249,21,103,231,67,127,233,5,110,175,212,102,47,245,77,55,179,133,221,182,0,6,110,232,212,27,164,114,116,114,21,53,233,84,0,76,194,64,181,48,246,81,237,11,219,142,219,209,213,111,154,174,69,129,102,124,123,201,119,149,40,132,186,115,92,91,245,212,120,29,237,228,217,132,130,195,88,115,88,159,228,91,249,244,28,47,172,253,108,240,174,63,179,222,49,2,151,184,115,222,186,115,223,234,171,94,86,77,170,119,115,119,208,206,199,227,166,143,119,3,178,130,122,123,96,191,27,79,187,87,102,150,182,111,192,235,224,28,251,180,164,19,176,145,195,34,39,234,161,255,24,175,6,207,131,96,171,61,249,43,208,65,238,4,205,187,226,116,179,173,173,111,94,236,227,110,107,19,51,89,94,246,27,189,189,183,192,197,152,104,189,197,26,116,22,107,173,239,77,94,175,102,12,218,102,236,158,231,87,112,225,118,117,214,30,158,81,37,94,133,215,182,189,168,189,159,242,184,117,206,252,174,157,239,211,35,48,98,112,94,94,218,213,210,105,159,77,221,186,24,215,172,90,78,178,142,225,208,202,136,179,202,88,184,235,115,16,136,35,236,67,205,219,133,250,242,180,79,237,222,110,59,35,224,37,236,133,151,135,220,79,216,117,215,213,171,189,243,112,10,18,228,63,198,21,172,75,170,17,125,125,116,74,43,25,143,127,249,146,41,187,16,68,35,132,88,243,17,203,1,165,114,154,21,9,36,248,138,238,249,234,191,224,122,243,255,128,65,73,89,150,52,36,13,10,156,51,137,22,129,34,199,84,190,162,156,101,247,9,78,239,99,238,148,27,239,111,20,37,56,68,197,151,200,161,128,121,244,37,17,52,93,129,126,9,49,232,251,40,188,117,135,175,229,154,75,253,3,145,235,206,36,13,253,44,188,72,89,74,50,24,42,49,60,193,198,255,131,50,88,176,63,255,250,201,137,16,159,68,35,235,55,166,132,67,37,129,56,125,225,225,168,248,236,95,13,69,115,152,10,130,159,202,97,144,149,84,10,8,164,84,33,208,71,100,100,190,189,241,234,35,126,8,142,113,90,174,69,111,161,81,113,75,208,68,136,123,241,52,168,248,76,91,100,213,205,217,18,102,121,247,86,18,210,52,66,222,247,110,50,37,17,40,175,13,77,225,135,86,139,155,248,0,25,206,82,233,211,188,19,208,111,42,37,249,76,40,128,91,125,63,148,126,221,250,247,3,124,76,162,176,245,29,197,31,193,223,252,187,141,254,30,6,0,0 };