souko/Kettenoeler
1
0
Fork 0
Code Issues Pull Requests Releases 4 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
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) {