added an overlay to the WebUI and some ConnectionHandling
This commit is contained in:
parent
94e407208e
commit
f1defa98f2
@ -20,7 +20,14 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- Connection-Overlay -->
|
||||
<div id="overlay">
|
||||
<div class="overlay-content">
|
||||
<p>Verbinde...</p>
|
||||
<!-- Hier können Sie eine einfache Animation hinzufügen -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- Connection-Overlay -->
|
||||
<nav class="navbar fixed-top navbar-dark bg-primary" id="navbar1">
|
||||
<a class="navbar-brand" href="#">
|
||||
<img src="static/img/logo.png" width="30" height="30" class="d-inline-block align-top mr-1" alt="">
|
||||
|
@ -25,3 +25,20 @@ hr {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.8); /* Dunkler Hintergrund mit Transparenz */
|
||||
color: white; /* Textfarbe */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 9999; /* Stellen Sie sicher, dass es über anderen Elementen liegt */
|
||||
}
|
||||
|
||||
.overlay-content {
|
||||
text-align: center;
|
||||
}
|
@ -3,8 +3,13 @@ var websocket;
|
||||
|
||||
var statusMapping;
|
||||
var staticMapping;
|
||||
var overlay;
|
||||
|
||||
window.addEventListener("load", onLoad);
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
// Ihr JavaScript-Code hier, einschließlich der onLoad-Funktion
|
||||
overlay = document.getElementById("overlay");
|
||||
onLoad();
|
||||
});
|
||||
|
||||
function initWebSocket() {
|
||||
console.log("Trying to open a WebSocket connection...");
|
||||
@ -46,7 +51,8 @@ function onOpen(event) {
|
||||
|
||||
function onClose(event) {
|
||||
console.log("Connection closed");
|
||||
setTimeout(initWebSocket, 2000);
|
||||
setTimeout(initWebSocket, 1000);
|
||||
overlay.style.display = "flex";
|
||||
}
|
||||
|
||||
function onMessage(event) {
|
||||
@ -98,6 +104,7 @@ function onMessage(event) {
|
||||
console.log("STATIC:");
|
||||
console.log(JSON.stringify(result, null, 2));
|
||||
fillValuesToHTML(result);
|
||||
overlay.style.display = "none";
|
||||
return;
|
||||
}
|
||||
}
|
||||
@ -130,6 +137,7 @@ function onLoad(event) {
|
||||
initWebSocket();
|
||||
initButtons();
|
||||
initSettingInputs();
|
||||
overlay.style.display = "flex";
|
||||
}
|
||||
|
||||
function websocket_sendevent(element_id, element_value) {
|
||||
|
@ -117,7 +117,7 @@ typedef enum CANSource_e
|
||||
extern const char *CANSourceString[];
|
||||
extern const size_t CANSourceString_Elements;
|
||||
|
||||
#define STARTUP_DELAY 5000
|
||||
#define SHUTDOWN_DELAY_MS 5000
|
||||
#define STARTUP_DELAY 2500
|
||||
#define SHUTDOWN_DELAY_MS 2500
|
||||
|
||||
#endif
|
||||
|
@ -33,6 +33,7 @@
|
||||
|
||||
void initWebUI();
|
||||
void Webserver_Process();
|
||||
void Webserver_Shutdown();
|
||||
|
||||
void Websocket_PushLiveDebug(String Message);
|
||||
|
||||
|
@ -797,8 +797,9 @@ void SystemShutdown(bool restart)
|
||||
// Check if the shutdown delay has elapsed
|
||||
if (shutdown_delay < millis())
|
||||
{
|
||||
// Store configuration and persistence data to EEPROM
|
||||
StoreConfig_EEPROM();
|
||||
Webserver_Shutdown();
|
||||
|
||||
// Store persistence data to EEPROM
|
||||
StorePersistence_EEPROM();
|
||||
|
||||
// Perform restart if requested, otherwise enter an indefinite loop
|
||||
|
@ -118,6 +118,26 @@ void Webserver_Process()
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @brief Shuts down the web server functionality for the ChainLube application.
|
||||
*
|
||||
* This function closes all WebSocket connections and terminates the web server. It is intended
|
||||
* to be called when the application is being shut down or when there is a need to deactivate the
|
||||
* web server.
|
||||
*
|
||||
* @details This function ensures a graceful shutdown of the web server by closing all active
|
||||
* WebSocket connections and ending the web server instance.
|
||||
*
|
||||
* @note This function should be called before shutting down the application to properly
|
||||
* deactivate the web server.
|
||||
*/
|
||||
void Webserver_Shutdown()
|
||||
{
|
||||
if (webSocket.count() > 0)
|
||||
webSocket.closeAll();
|
||||
webServer.end();
|
||||
}
|
||||
|
||||
/**
|
||||
* @brief Callback function for handling HTTP 404 (Not Found) errors on the web server.
|
||||
*
|
||||
|
Loading…
x
Reference in New Issue
Block a user