And if you'd like to support my work, you can also
EspWebUI is a framework library to build flexible and powerfull webserver based on ESP
You can find the corresponding Template Project here: https://github.com/dewenni/EspWebUI-Template
🚧
A list of features and a detailed description will follow....
- Download the latest version of this library from GitHub.
- Extract the ZIP file into your Arduino
librariesfolder. - Restart the Arduino IDE.
-
Add the library to your
platformio.inifile:lib_deps = https://github.com/dewenni/EspWebUI
EspWebUI uses responsive base font sizes of 75%, 80%, 85%, 90%, 95%, and 100%
at viewport widths of 100, 576, 768, 1024, 1280, and 1536 pixels respectively.
Set an offset in your project's web/css/custom.css to adjust all breakpoints:
:root {
--pico-font-size-override: 10%;
}The default offset is 0%. The example adds 10 percentage points, resulting
in 85%, 90%, 95%, 100%, 105%, and 110%. Negative offsets such as -5% are also
supported. Use a percentage value, including 0% for no adjustment.
Remove any project-specific --pico-font-size breakpoint declarations when
switching to this offset, since they override the library's calculated values.
The build checks translations declared in lib_translations and user_translations
against both data-i18n attributes in HTML and translation reads in JavaScript.
Library and project JavaScript are checked together, including project helper
functions; their names are not hardcoded. For example:
function text(key) {
return user_translations[key][lang];
}
status.textContent = text(success ? "connected" : "disconnected");Direct accesses such as user_translations.connected[lang] or
lib_translations["close"][lang] are also recognized, as are forwarded key
parameters in named functions and assigned arrow functions, and calls inside
template interpolations. Declarations, comments and unrelated string literals
do not count as uses. Missing literal keys fail the build; unused declarations
and duplicate keys produce warnings.
This is a static check, not a JavaScript interpreter. Runtime-generated keys
(e.g. text("state_" + state)), variable aliases and other dynamic data flows
cannot be reliably resolved. Prefer explicit literal alternatives when possible.
Run the checker regression tests with:
python3 -B -m unittest discover -s testsThe WebUI selects its WebSocket protocol from the page URL: HTTP uses ws://,
HTTPS uses wss://. The page's host and port are retained, with /ws as the
WebSocket endpoint. An HTTPS reverse proxy or tunnel must forward WebSocket
connections to the ESP. This selection does not add TLS support to the ESP;
when a proxy terminates TLS, its connection to the ESP can still use plain HTTP/WS.
See Settings navigation for category markup,
responsive tabs/sidebar layouts and optional initial selection. Controls marked
data-ui-local are handled by the application instead of automatically sending
button/select events to the ESP.
The generated login page uses the application HTML's <title> as its name,
escapes it as text and uses ESP WebUI if no title is provided. Login texts use
the browser's German or English language; configuration is not fetched before login.
Browser applications can listen for webui:connected, webui:disconnected, and
webui:message. The latter carries unhandled application messages in event.detail.
setCallbackWebElementClient(callback) receives (clientId, elementID, elementValue)
and takes precedence over setCallbackWebElement. Forward common commands in that
callback if needed. wsSendClient(clientId, jsonDoc) replies to that client only
and returns false when the client is unavailable, cannot send, or allocation fails.
The existing broadcast/element update mechanisms remain available.
The legacy GitHub version dialog is optional. Projects without version_dialog
can provide their own inline update interface and handlers.
Unused-translation warnings apply to project vocabulary only. Missing translations and duplicate declarations are still checked across library and project texts.