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> </head>
<body> <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"> <nav class="navbar fixed-top navbar-dark bg-primary" id="navbar1">
<a class="navbar-brand" href="#"> <a class="navbar-brand" href="#">
<img src="static/img/logo.png" width="30" height="30" class="d-inline-block align-top mr-1" alt=""> <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; 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 statusMapping;
var staticMapping; 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() { function initWebSocket() {
console.log("Trying to open a WebSocket connection..."); console.log("Trying to open a WebSocket connection...");
@ -46,7 +51,8 @@ function onOpen(event) {
function onClose(event) { function onClose(event) {
console.log("Connection closed"); console.log("Connection closed");
setTimeout(initWebSocket, 2000); setTimeout(initWebSocket, 1000);
overlay.style.display = "flex";
} }
function onMessage(event) { function onMessage(event) {
@ -98,6 +104,7 @@ function onMessage(event) {
console.log("STATIC:"); console.log("STATIC:");
console.log(JSON.stringify(result, null, 2)); console.log(JSON.stringify(result, null, 2));
fillValuesToHTML(result); fillValuesToHTML(result);
overlay.style.display = "none";
return; return;
} }
} }
@ -130,6 +137,7 @@ function onLoad(event) {
initWebSocket(); initWebSocket();
initButtons(); initButtons();
initSettingInputs(); initSettingInputs();
overlay.style.display = "flex";
} }
function websocket_sendevent(element_id, element_value) { 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 char *CANSourceString[];
extern const size_t CANSourceString_Elements; extern const size_t CANSourceString_Elements;
#define STARTUP_DELAY 5000 #define STARTUP_DELAY 2500
#define SHUTDOWN_DELAY_MS 5000 #define SHUTDOWN_DELAY_MS 2500
#endif #endif

1
Software/include/webui.h
View File

@ -33,6 +33,7 @@
void initWebUI(); void initWebUI();
void Webserver_Process(); void Webserver_Process();
void Webserver_Shutdown();
void Websocket_PushLiveDebug(String Message); 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 // Check if the shutdown delay has elapsed
if (shutdown_delay < millis()) if (shutdown_delay < millis())
{ {
// Store configuration and persistence data to EEPROM Webserver_Shutdown();
StoreConfig_EEPROM();
// Store persistence data to EEPROM
StorePersistence_EEPROM(); StorePersistence_EEPROM();
// Perform restart if requested, otherwise enter an indefinite loop // Perform restart if requested, otherwise enter an indefinite loop

22
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. * @brief Callback function for handling HTTP 404 (Not Found) errors on the web server.
* *
@ -757,7 +777,7 @@ void parseWebsocketString(char *data, char *identifierBuffer, size_t identifierB
* @param searchString The string to search for in the array. * @param searchString The string to search for in the array.
* @param array The array of strings to search within. * @param array The array of strings to search within.
* @param arraySize The size of the array. * @param arraySize The size of the array.
* *
* @return The index of the first occurrence of the string in the array, * @return The index of the first occurrence of the string in the array,
* or -1 if the string is not found. * or -1 if the string is not found.
*/ */