souko/Kettenoeler
souko/Kettenoeler
1
0
Fork 0
Code Issues Pull Requests Releases 2 Wiki Activity

added an overlay to the WebUI and some ConnectionHandling

Browse Source
This commit is contained in:
Marcel Peterkau 2024-01-12 13:29:22 +01:00
parent 94e407208e
commit f1defa98f2
7 changed files with 62 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
Software/data_src/index.htm
View File

@ -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="">

17
Software/data_src/static/css/tweaks.css
View File

@ -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;
}

12
Software/data_src/static/js/websocket.js
View File

@ -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) {

4
Software/include/common.h
View File

@ -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

1
Software/include/webui.h
View File

@ -33,6 +33,7 @@
void initWebUI();
void Webserver_Process();
void Webserver_Shutdown();
void Websocket_PushLiveDebug(String Message);

5
Software/src/main.cpp
View File

@ -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

20
Software/src/webui.cpp
View File

@ -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.
*