lbsadmin/ESPUI
1
0
Fork 0
mirror of https://github.com/s00500/ESPUI.git synced 2024-11-22 09:10:54 +00:00
Code Issues Releases Activity

Style change again

Browse Source
This commit is contained in:
Lukas Bachschwell 2019-03-24 18:10:21 +01:00
parent 70288fc69f
commit 218ebc67d9
2 changed files with 256 additions and 302 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
README.md
View File

@ -1,6 +1,7 @@
# ESPUI
![ESPUI](https://github.com/s00500/ESPUI/blob/master/docs/ui_complete.png)
![ESPUI](https://github.com/s00500/ESPUI/blob/master/docs/ui_complete.png) //
TODO: Update Logo
ESPUI is a simple library to make a web user interface for your projects using
the **ESP8266** or the **ESP32** It uses web sockets and lets you create,
@ -14,13 +15,11 @@ So if you either don't know how or just don't want to waste time: this is your
simple solution user interface without the need of internet connectivity or any
additional servers.
I completely rewrote the EasyUI Library created by ayushsharma82
[Here](https://github.com/ayushsharma82/) Now it uses ESPAsyncWebserver and is
mainly to be used with the ESP32 Processor.
The Library runs fine on any kind of ESP8266 and ESP32 (NodeMCU Boards, usw)
# Important notes
THIS IS THE 2.0.0 development branch
THIS IS THE 2.0.0 DEVELOPMENT BRANCH, NOT GUARANTIED TO WORK
**Roadmap for 2.0.0:**
@ -35,10 +34,10 @@ THIS IS THE 2.0.0 development branch
- Min Max on slider
- Accelerometer Widget
- Cleanup Example
- New Documentation
- Numberfield
- Textfield
- Data directory
- Cleanup and extend Documentation
- Number field ✅
- Text field ✅
- Data directory ✅
- Graph Usage
- Accelerometer
- Slider
@ -51,10 +50,8 @@ THIS IS THE 2.0.0 development branch
This library is dependent on the following libraries to function properly.
- [ESPAsyncWebserver](https://github.com/me-no-dev/ESPAsyncWebServer)
- [ArduinoJson](https://github.com/bblanchon/ArduinoJson) **(VERSIONS 5.x only
currently)**
**Plus for ESP8266**
- [ArduinoJson](https://github.com/bblanchon/ArduinoJson) (Last tested with
version 6.10.0) **Plus for ESP8266**
- [ESPAsyncTCP](https://github.com/me-no-dev/ESPAsyncTCP)
@ -92,16 +89,16 @@ Go to Sketch>Include Library>Add .zip Library> Select the Downloaded .zip File.
## Getting started
ESPUI serves several files to the browser to build up its webinterface. This can
be achieved in 2 ways: _PROGMEM_ or _SPIFFS_
ESPUI serves several files to the browser to build up its web interface. This
can be achieved in 2 ways: _PROGMEM_ or _SPIFFS_
_When `ESPUI.begin()` is called the default is serving files from Memory and
ESPUI should work out of the box!_
But if this causes your program to _use too much memory_ you can burn the files
into the SPIFFS filesystem on the ESP. There are now two ways to do this: you
can either use the ESP file upload tool or you use the library function
`ESPUI.prepareFileSystem()`
**OPTIONAL:** But if this causes your program to _use too much memory_ you can
burn the files into the SPIFFS filesystem on the ESP. There are now two ways to
do this: you can either use the ESP file upload tool or you use the library
function `ESPUI.prepareFileSystem()`
#### Simple filesystem preparation (_recommended_)
@ -111,19 +108,8 @@ will create all needed files. Congratulations, you are done, from now on you
just need to to this again when there is a library update, or when you want to
use another chip :-) Now you can upload your normal sketch, when you do not call
the `ESPUI.prepareFileSystem()` function the compiler will strip out all the
unnecessary that is already saved in the chip's filesystem and you have more
programm memory to work with.
#### Manual way (mainly for development)
To do this download and install me-no-devs wonderful
[ESP32 sketch data uploader](https://github.com/me-no-dev/arduino-esp32fs-plugin)
or for ESP8266
[ESP8266 sketch data uploader](https://github.com/esp8266/arduino-esp8266fs-plugin)
Then open the **gui** example sketch and select "Upload Sketch Data" from the
Tools menu for your processor. Now you are set to go and use any code you want
to with this library
unnecessary strings that are already saved in the chip's filesystem and you have
more program memory to work with.
## User interface Elements
@ -235,6 +221,28 @@ realtime data, are touch compatible and can be used to for example control a
Servo. The current value is shown while the slider is dragged in a little bubble
over the handle.
#### Number Input
TODO: Add image
The numberinput can be used to directly input numbers to your program. You can
enter a Value into it and when you are done with your change it is sent to the
ESP.
#### Text Input
TODO: Add image
The textinput works very similar like the number input but with a string. You
can enter a String into it and when you are done with your change it is sent to
the ESP.
#### Using Tabs
TODO: Add image
// TODO: add Text for tabs
#### Initialisation of the UI
After all the elements are configured you can use `ESPUI.begin(“Some Title”);`
@ -244,11 +252,24 @@ example). The web interface can then be used from multiple devices at once and
also shows an connection status in the top bar. The library is designed to be
easy to use and can still be extended with a lot of more functionality.
#### Log output
ESPUI has several different log levels. You can set them using the
`ESPUI.setVerbosity(Verbosity::VerboseJSON)` function.
Loglevels are:
- Verbosity::Quiet (default)
- Verbosity::Verbose
- Verbosity::VerboseJSON
// TODO: Add some more notes here
# Notes for Development
If you want to work on the HTML/CSS/JS files, do make changes in the
`examples/gui/data` directory. When you need to transfer that code to the ESP,
run `tools/prepare_static_ui_sources.py -a` (this script needs python3 with the
If you want to work on the HTML/CSS/JS files, do make changes in the `data`
directory. When you need to transfer that code to the ESP, run
`tools/prepare_static_ui_sources.py -a` (this script needs python3 with the
modules htmlmin, jsmin and csscompressor). This will generate a) minified files
next to the original files to be uploaded with the ESP32 sketch data uploader
mentioned above and b) the C header files in `src` that contain the minified and
@ -271,3 +292,5 @@ commits.
Liked this Library? You can **support** me by sending me a :coffee:
[Coffee](https://paypal.me/lukasbachschwell/3).
Otherwise I really welcome **Pull Requests**.

183
src/ESPUI.cpp
View File

@ -253,8 +253,7 @@ void ESPUIClass::prepareFileSystem() {
}
// Handle Websockets Communication
void onWsEvent(AsyncWebSocket* server, AsyncWebSocketClient* client,
AwsEventType type, void* arg, uint8_t* data, size_t len) {
void onWsEvent(AsyncWebSocket *server, AsyncWebSocketClient *client, AwsEventType type, void *arg, uint8_t *data, size_t len) {
switch (type) {
case WS_EVT_DISCONNECT: {
if (ESPUI.verbosity) {
@ -384,12 +383,9 @@ void onWsEvent(AsyncWebSocket* server, AsyncWebSocketClient* client,
}
}
uint16_t ESPUIClass::addControl(ControlType type, const char* label,
String value, ControlColor color,
uint16_t parentControl,
uint16_t ESPUIClass::addControl(ControlType type, const char *label, String value, ControlColor color, uint16_t parentControl,
void (*callback)(Control *, int)) {
Control* control =
new Control(type, label, callback, value, color, parentControl);
Control *control = new Control(type, label, callback, value, color, parentControl);
if (this->controls == nullptr) {
this->controls = control;
@ -406,53 +402,36 @@ uint16_t ESPUIClass::addControl(ControlType type, const char* label,
return control->id;
}
int ESPUIClass::label(const char* label, ControlColor color, String value) {
return addControl(ControlType::Label, label, value, color);
int ESPUIClass::label(const char *label, ControlColor color, String value) { return addControl(ControlType::Label, label, value, color); }
int ESPUIClass::graph(const char *label, ControlColor color) { return addControl(ControlType::Graph, label, "", color); }
int ESPUIClass::slider(const char *label, void (*callback)(Control *, int), ControlColor color, String value) {
return addControl(ControlType::Slider, label, "", color, Control::noParent, callback);
}
int ESPUIClass::graph(const char* label, ControlColor color) {
return addControl(ControlType::Graph, label, "", color);
int ESPUIClass::button(const char *label, void (*callback)(Control *, int), ControlColor color, String value) {
return addControl(ControlType::Button, label, value, color, Control::noParent, callback);
}
int ESPUIClass::slider(const char* label, void (*callback)(Control*, int),
ControlColor color, String value) {
return addControl(ControlType::Slider, label, "", color, Control::noParent,
callback);
int ESPUIClass::switcher(const char *label, bool startState, void (*callback)(Control *, int), ControlColor color) {
return addControl(ControlType::Switcher, label, "", color, Control::noParent, callback);
}
int ESPUIClass::button(const char* label, void (*callback)(Control*, int),
ControlColor color, String value) {
return addControl(ControlType::Button, label, value, color, Control::noParent,
callback);
}
int ESPUIClass::switcher(const char* label, bool startState,
void (*callback)(Control*, int), ControlColor color) {
return addControl(ControlType::Switcher, label, "", color, Control::noParent,
callback);
}
int ESPUIClass::pad(const char* label, bool center,
void (*callback)(Control*, int), ControlColor color) {
int ESPUIClass::pad(const char *label, bool center, void (*callback)(Control *, int), ControlColor color) {
if (center) {
return addControl(ControlType::PadWithCenter, label, "", color,
Control::noParent, callback);
return addControl(ControlType::PadWithCenter, label, "", color, Control::noParent, callback);
} else {
return addControl(ControlType::Pad, label, "", color, Control::noParent,
callback);
return addControl(ControlType::Pad, label, "", color, Control::noParent, callback);
}
}
int ESPUIClass::number(const char* label, void (*callback)(Control*, int),
ControlColor color, int number, int min, int max) {
return addControl(ControlType::Number, label, String(number), color,
Control::noParent, callback);
int ESPUIClass::number(const char *label, void (*callback)(Control *, int), ControlColor color, int number, int min, int max) {
return addControl(ControlType::Number, label, String(number), color, Control::noParent, callback);
}
int ESPUIClass::text(const char* label, void (*callback)(Control*, int),
ControlColor color, String value) {
return addControl(ControlType::Text, label, value, color, Control::noParent,
callback);
int ESPUIClass::text(const char *label, void (*callback)(Control *, int), ControlColor color, String value) {
return addControl(ControlType::Text, label, value, color, Control::noParent, callback);
}
Control *ESPUIClass::getControl(uint16_t id) {
@ -520,8 +499,7 @@ void ESPUIClass::updateControl(uint16_t id, int clientId) {
updateControl(control, clientId);
} else {
if (this->verbosity) {
Serial.println(String("Error: There is no control with ID ") +
String(id));
Serial.println(String("Error: There is no control with ID ") + String(id));
}
}
}
@ -542,37 +520,24 @@ void ESPUIClass::updateControl(uint16_t id, String value, int clientId) {
updateControl(control, value, clientId);
} else {
if (this->verbosity) {
Serial.println(String("Error: There is no control with ID ") +
String(id));
Serial.println(String("Error: There is no control with ID ") + String(id));
}
}
}
void ESPUIClass::print(uint16_t id, String value) { updateControl(id, value); }
void ESPUIClass::updateLabel(uint16_t id, String value) {
updateControl(id, value);
}
void ESPUIClass::updateLabel(uint16_t id, String value) { updateControl(id, value); }
void ESPUIClass::updateSlider(uint16_t id, int nValue, int clientId) {
updateControl(id, String(nValue), clientId);
}
void ESPUIClass::updateSlider(uint16_t id, int nValue, int clientId) { updateControl(id, String(nValue), clientId); }
void ESPUIClass::updateSwitcher(uint16_t id, bool nValue, int clientId) {
updateControl(id, String(nValue ? "1" : "0"), clientId);
}
void ESPUIClass::updateSwitcher(uint16_t id, bool nValue, int clientId) { updateControl(id, String(nValue ? "1" : "0"), clientId); }
void ESPUIClass::updateNumber(uint16_t id, int number, int clientId) {
updateControl(id, String(number), clientId);
}
void ESPUIClass::updateNumber(uint16_t id, int number, int clientId) { updateControl(id, String(number), clientId); }
void ESPUIClass::updateText(uint16_t id, String text, int clientId) {
updateControl(id, text, clientId);
}
void ESPUIClass::updateText(uint16_t id, String text, int clientId) { updateControl(id, text, clientId); }
void ESPUIClass::updateSelect(uint16_t id, String text, int clientId) {
updateControl(id, text, clientId);
}
void ESPUIClass::updateSelect(uint16_t id, String text, int clientId) { updateControl(id, text, clientId); }
/*
Convert & Transfer Arduino elements to JSON elements
@ -628,8 +593,7 @@ void ESPUIClass::jsonDom(AsyncWebSocketClient* client) {
client->text(json);
}
void ESPUIClass::beginSPIFFS(const char* _title, const char* username,
const char* password) {
void ESPUIClass::beginSPIFFS(const char *_title, const char *username, const char *password) {
ui_title = _title;
this->basicAuthUsername = username;
this->basicAuthPassword = password;
@ -645,9 +609,7 @@ void ESPUIClass::beginSPIFFS(const char* _title, const char* username,
if (!SPIFFS.begin()) {
if (ESPUI.verbosity) {
Serial.println(
"SPIFFS Mount Failed, PLEASE CHECK THE README ON HOW TO "
"PREPARE YOUR ESP!!!!!!!");
Serial.println("SPIFFS Mount Failed, PLEASE CHECK THE README ON HOW TO PREPARE YOUR ESP!!!!!!!");
}
return;
@ -659,9 +621,7 @@ void ESPUIClass::beginSPIFFS(const char* _title, const char* username,
if (!SPIFFS.exists("/index.htm")) {
if (ESPUI.verbosity) {
Serial.println(
"Please read the README!!!!!!!, Make sure to "
"ESPUI.prepareFileSystem() once in an empty sketch");
Serial.println("Please read the README!!!!!!!, Make sure to ESPUI.prepareFileSystem() once in an empty sketch");
}
return;
@ -675,27 +635,21 @@ void ESPUIClass::beginSPIFFS(const char* _title, const char* username,
ws->setAuthentication(ESPUI.basicAuthUsername, ESPUI.basicAuthPassword);
}
server->serveStatic("/", SPIFFS, "/")
.setDefaultFile("index.htm")
.setAuthentication(username, password);
server->serveStatic("/", SPIFFS, "/").setDefaultFile("index.htm").setAuthentication(username, password);
} else {
server->serveStatic("/", SPIFFS, "/").setDefaultFile("index.htm");
}
// Heap for general Servertest
server->on("/heap", HTTP_GET, [](AsyncWebServerRequest *request) {
if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername,
ESPUI.basicAuthPassword)) {
if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername, ESPUI.basicAuthPassword)) {
return request->requestAuthentication();
}
request->send(200, "text/plain",
String(ESP.getFreeHeap()) + " In SPIFFSmode");
request->send(200, "text/plain", String(ESP.getFreeHeap()) + " In SPIFFSmode");
});
server->onNotFound(
[](AsyncWebServerRequest* request) { request->send(404); });
server->onNotFound([](AsyncWebServerRequest *request) { request->send(404); });
server->begin();
@ -704,8 +658,7 @@ void ESPUIClass::beginSPIFFS(const char* _title, const char* username,
}
}
void ESPUIClass::begin(const char* _title, const char* username,
const char* password) {
void ESPUIClass::begin(const char *_title, const char *username, const char *password) {
basicAuthUsername = username;
basicAuthPassword = password;
@ -723,69 +676,56 @@ void ESPUIClass::begin(const char* _title, const char* username,
ws->onEvent(onWsEvent);
server->addHandler(ws);
if (basicAuth && WS_AUTHENTICATION) ws->setAuthentication(username, password);
if (basicAuth && WS_AUTHENTICATION)
ws->setAuthentication(username, password);
server->on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername,
ESPUI.basicAuthPassword)) {
if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername, ESPUI.basicAuthPassword)) {
return request->requestAuthentication();
}
AsyncWebServerResponse* response =
request->beginResponse_P(200, "text/html", HTML_INDEX);
AsyncWebServerResponse *response = request->beginResponse_P(200, "text/html", HTML_INDEX);
request->send(response);
});
// Javascript files
server->on("/js/zepto.min.js", HTTP_GET, [](AsyncWebServerRequest *request) {
if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername,
ESPUI.basicAuthPassword)) {
if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername, ESPUI.basicAuthPassword)) {
return request->requestAuthentication();
}
AsyncWebServerResponse* response = request->beginResponse_P(
200, "application/javascript", JS_ZEPTO_GZIP, sizeof(JS_ZEPTO_GZIP));
AsyncWebServerResponse *response = request->beginResponse_P(200, "application/javascript", JS_ZEPTO_GZIP, sizeof(JS_ZEPTO_GZIP));
response->addHeader("Content-Encoding", "gzip");
request->send(response);
});
server->on("/js/controls.js", HTTP_GET, [](AsyncWebServerRequest *request) {
if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername,
ESPUI.basicAuthPassword)) {
if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername, ESPUI.basicAuthPassword)) {
return request->requestAuthentication();
}
AsyncWebServerResponse* response =
request->beginResponse_P(200, "application/javascript",
JS_CONTROLS_GZIP, sizeof(JS_CONTROLS_GZIP));
AsyncWebServerResponse *response = request->beginResponse_P(200, "application/javascript", JS_CONTROLS_GZIP, sizeof(JS_CONTROLS_GZIP));
response->addHeader("Content-Encoding", "gzip");
request->send(response);
});
server->on("/js/slider.js", HTTP_GET, [](AsyncWebServerRequest *request) {
if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername,
ESPUI.basicAuthPassword)) {
if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername, ESPUI.basicAuthPassword)) {
return request->requestAuthentication();
}
AsyncWebServerResponse* response = request->beginResponse_P(
200, "application/javascript", JS_SLIDER_GZIP, sizeof(JS_SLIDER_GZIP));
AsyncWebServerResponse *response = request->beginResponse_P(200, "application/javascript", JS_SLIDER_GZIP, sizeof(JS_SLIDER_GZIP));
response->addHeader("Content-Encoding", "gzip");
request->send(response);
});
server->on("/js/tabbedcontent.js", HTTP_GET,
[](AsyncWebServerRequest* request) {
if (ESPUI.basicAuth &&
!request->authenticate(ESPUI.basicAuthUsername,
ESPUI.basicAuthPassword)) {
server->on("/js/tabbedcontent.js", HTTP_GET, [](AsyncWebServerRequest *request) {
if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername, ESPUI.basicAuthPassword)) {
return request->requestAuthentication();
}
AsyncWebServerResponse* response = request->beginResponse_P(
200, "application/javascript", JS_TABBEDCONTENT_GZIP,
sizeof(JS_TABBEDCONTENT_GZIP));
AsyncWebServerResponse *response = request->beginResponse_P(200, "application/javascript", JS_TABBEDCONTENT_GZIP, sizeof(JS_TABBEDCONTENT_GZIP));
response->addHeader("Content-Encoding", "gzip");
request->send(response);
});
@ -793,44 +733,35 @@ void ESPUIClass::begin(const char* _title, const char* username,
// Stylesheets
server->on("/css/style.css", HTTP_GET, [](AsyncWebServerRequest *request) {
if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername,
ESPUI.basicAuthPassword)) {
if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername, ESPUI.basicAuthPassword)) {
return request->requestAuthentication();
}
AsyncWebServerResponse* response = request->beginResponse_P(
200, "text/css", CSS_STYLE_GZIP, sizeof(CSS_STYLE_GZIP));
AsyncWebServerResponse *response = request->beginResponse_P(200, "text/css", CSS_STYLE_GZIP, sizeof(CSS_STYLE_GZIP));
response->addHeader("Content-Encoding", "gzip");
request->send(response);
});
server->on(
"/css/normalize.css", HTTP_GET, [](AsyncWebServerRequest* request) {
if (ESPUI.basicAuth &&
!request->authenticate(ESPUI.basicAuthUsername,
ESPUI.basicAuthPassword)) {
server->on("/css/normalize.css", HTTP_GET, [](AsyncWebServerRequest *request) {
if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername, ESPUI.basicAuthPassword)) {
return request->requestAuthentication();
}
AsyncWebServerResponse* response = request->beginResponse_P(
200, "text/css", CSS_NORMALIZE_GZIP, sizeof(CSS_NORMALIZE_GZIP));
AsyncWebServerResponse *response = request->beginResponse_P(200, "text/css", CSS_NORMALIZE_GZIP, sizeof(CSS_NORMALIZE_GZIP));
response->addHeader("Content-Encoding", "gzip");
request->send(response);
});
// Heap for general Servertest
server->on("/heap", HTTP_GET, [](AsyncWebServerRequest *request) {
if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername,
ESPUI.basicAuthPassword)) {
if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername, ESPUI.basicAuthPassword)) {
return request->requestAuthentication();
}
request->send(200, "text/plain",
String(ESP.getFreeHeap()) + " In Memorymode");
request->send(200, "text/plain", String(ESP.getFreeHeap()) + " In Memorymode");
});
server->onNotFound(
[](AsyncWebServerRequest* request) { request->send(404); });
server->onNotFound([](AsyncWebServerRequest *request) { request->send(404); });
server->begin();