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

reworked the WebUI-Websocket-Comm

Browse Source
This commit is contained in:
Marcel Peterkau 2024-01-09 22:51:45 +01:00
parent 157d59963c
commit c236322667
3 changed files with 55 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
Software/data_src/index.htm
View File

@ -60,7 +60,7 @@
<p> <p>
<h4>Tankinhalt verbleibend</h4> <h4>Tankinhalt verbleibend</h4>
<div class="progress"> <div class="progress">
<div id="tankremain" class="progress-bar text-light" role="progressbar" aria-valuenow="0" <div id="tankremain" class="data-tankremain progress-bar text-light" role="progressbar" aria-valuenow="0"
aria-valuemin="0" aria-valuemax="100" style="width: 0%"> aria-valuemin="0" aria-valuemax="100" style="width: 0%">
0 0
</div> </div>
@ -71,7 +71,7 @@
<hr /> <hr />
<p> <p>
<h4>aktueller Modus</h4> <h4>aktueller Modus</h4>
<input class="form-control" type="text" id="SystemStatus" readonly> <input class="data-systemstatus form-control" type="text" id="sysstatus" readonly>
</p> </p>
<!-- Div Group current Mode --> <!-- Div Group current Mode -->
<!-- Div Group DTC Table --> <!-- Div Group DTC Table -->
@ -107,9 +107,9 @@
<label for="tankremain_maint" class="control-label col-4">Tankinhalt verbleibend</label> <label for="tankremain_maint" class="control-label col-4">Tankinhalt verbleibend</label>
<div class="col-8"> <div class="col-8">
<div class="progress"> <div class="progress">
<div id="tankremain_maint" class="progress-bar text-light" role="progressbar" <div id="tankremain_maint" class="data-tankremain progress-bar text-light" role="progressbar"
aria-valuenow="%TANK_REMAIN_CAPACITY%" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"
style="width: %TANK_REMAIN_CAPACITY%&#37;"> style="width: 0%">
%TANK_REMAIN_CAPACITY%&#37; %TANK_REMAIN_CAPACITY%&#37;
</div> </div>
</div> </div>
@ -129,10 +129,10 @@
<h4>Entl&uuml;ftung</h4> <h4>Entl&uuml;ftung</h4>
<form action="post.htm" method="POST" class="form-horizontal"> <form action="post.htm" method="POST" class="form-horizontal">
<div class="form-group row"> <div class="form-group row">
<label for="BleedingPulses" class="control-label col-4">Entl&uuml;ftung Dosierung</label> <label for="bleedingpulses" class="control-label col-4">Entl&uuml;ftung Dosierung</label>
<div class="col-8"> <div class="col-8">
<div class="input-group"> <div class="input-group">
<input id="BleedingPulses" name="BleedingPulses" value="0" type="text" class="form-control"> <input id="bleedingpulses" name="bleedingpulses" value="0" type="text" class="data-bleedingpulses form-control">
<div class="input-group-append"> <div class="input-group-append">
<span class="input-group-text">Pulse</span> <span class="input-group-text">Pulse</span>
</div> </div>
@ -258,7 +258,10 @@
<div class="form-group row"> <div class="form-group row">
<label for="sourceselect" class="control-label col-4">Schnittstelle</label> <label for="sourceselect" class="control-label col-4">Schnittstelle</label>
<div class="col-8"> <div class="col-8">
<select id="sourceselect" name="sourceselect" class="select form-control"> <select id="sourceselect" name="sourceselect" class="data-sourceselect select form-control">
<option value="Impuls">Impuls</option>
<option value="GPS">GPS</option>
<option value="CAN-Bus">CAN-Bus</option>
</select> </select>
</div> </div>
</div> </div>
@ -279,7 +282,7 @@
</p> </p>
<!-- Div Group Signal Source --> <!-- Div Group Signal Source -->
<!-- Div Group Source:Impulse Settings--> <!-- Div Group Source:Impulse Settings-->
<div id="showimpulse" class="removeable"> <div id="showimpulse" class="data-showimpulse removeable">
<hr /> <hr />
<p> <p>
<h4>Einstellungen Impulseingang</h4> <h4>Einstellungen Impulseingang</h4>
@ -289,7 +292,7 @@
<label for="tirewidth" class="control-label col-4">Reifenbreite</label> <label for="tirewidth" class="control-label col-4">Reifenbreite</label>
<div class="col-8"> <div class="col-8">
<div class="input-group"> <div class="input-group">
<input id="tirewidth" name="tirewidth" type="text" required="required" class="form-control"> <input id="tirewidth" name="tirewidth" type="text" required="required" class="data-tirewidth form-control">
<div class="input-group-append"> <div class="input-group-append">
<span class="input-group-text">mm</span> <span class="input-group-text">mm</span>
</div> </div>
@ -301,7 +304,7 @@
<label for="tireratio" class="control-label col-4">Höhe/Breite-Verhältniss</label> <label for="tireratio" class="control-label col-4">Höhe/Breite-Verhältniss</label>
<div class="col-8"> <div class="col-8">
<div class="input-group"> <div class="input-group">
<input id="tireratio" name="tireratio" type="text" required="required" class="form-control"> <input id="tireratio" name="tireratio" type="text" required="required" class="data-tireratio form-control">
<div class="input-group-append"> <div class="input-group-append">
<span class="input-group-text">mm</span> <span class="input-group-text">mm</span>
</div> </div>
@ -312,7 +315,7 @@
<label for="tiredia" class="control-label col-4">Felgendurchmesser</label> <label for="tiredia" class="control-label col-4">Felgendurchmesser</label>
<div class="col-8"> <div class="col-8">
<div class="input-group"> <div class="input-group">
<input id="tiredia" name="tiredia" type="text" required="required" class="form-control"> <input id="tiredia" name="tiredia" type="text" required="required" class="data-tiredia form-control">
<div class="input-group-append"> <div class="input-group-append">
<span class="input-group-text">"</span> <span class="input-group-text">"</span>
</div> </div>
@ -323,7 +326,7 @@
<label for="pulserev" class="control-label col-4">Pulse pro Umdrehung</label> <label for="pulserev" class="control-label col-4">Pulse pro Umdrehung</label>
<div class="col-8"> <div class="col-8">
<div class="input-group"> <div class="input-group">
<input id="pulserev" name="pulserev" type="text" required="required" class="form-control"> <input id="pulserev" name="pulserev" type="text" required="required" class="data-pulserev form-control">
<div class="input-group-addon"></div> <div class="input-group-addon"></div>
</div> </div>
</div> </div>
@ -338,7 +341,7 @@
</div> </div>
<!-- Div Group Source:Impulse Settings--> <!-- Div Group Source:Impulse Settings-->
<!-- Div Group Source:CAN Settings--> <!-- Div Group Source:CAN Settings-->
<div id="showcan" class="removeable"> <div id="showcan" class="data-showcan removeable">
<hr /> <hr />
<p> <p>
<h4>Einstellungen CAN-Bus</h4> <h4>Einstellungen CAN-Bus</h4>
@ -346,7 +349,9 @@
<div class="form-group row"> <div class="form-group row">
<label for="cansource" class="control-label col-4">Model</label> <label for="cansource" class="control-label col-4">Model</label>
<div class="col-8"> <div class="col-8">
<select id="cansource" name="cansource" class="select form-control"> <select id="cansource" name="cansource" class="data-cansource select form-control">
<option value="KTM 890 Adventure R (2021)">KTM 890 Adventure R (2021)</option>
<option value="KTM 1290 Superduke R (2023)">KTM 1290 Superduke R (2023)</option>
</select> </select>
</div> </div>
</div> </div>
@ -360,7 +365,7 @@
</div> </div>
<!-- Div Group Source:CAN Settings--> <!-- Div Group Source:CAN Settings-->
<!-- Div Group Source:GPS Settings--> <!-- Div Group Source:GPS Settings-->
<div id="showgps" class="removeable"> <div id="showgps" class="data-showgps removeable">
<hr /> <hr />
<p> <p>
<h4>Einstellungen GPS</h4> <h4>Einstellungen GPS</h4>
@ -368,7 +373,7 @@
<div class="form-group row"> <div class="form-group row">
<label for="gpsbaud" class="control-label col-4">Baudrate</label> <label for="gpsbaud" class="control-label col-4">Baudrate</label>
<div class="col-8"> <div class="col-8">
<select id="gpsbaud" name="gpsbaud" class="select form-control"> <select id="gpsbaud" name="gpsbaud" class="data-gpsbaud select form-control">
</select> </select>
</div> </div>
</div> </div>
@ -391,7 +396,7 @@
<div class="col-8"> <div class="col-8">
<div class="input-group"> <div class="input-group">
<input id="lubedistancenormal" name="lubedistancenormal" type="text" <input id="lubedistancenormal" name="lubedistancenormal" type="text"
class="form-control" required="required"> class="data-lubedistancenormal form-control" required="required">
<div class="input-group-append"> <div class="input-group-append">
<span class="input-group-text">m</span> <span class="input-group-text">m</span>
</div> </div>
@ -403,7 +408,7 @@
<div class="col-8"> <div class="col-8">
<div class="input-group"> <div class="input-group">
<input id="lubedistancerain" name="lubedistancerain" type="text" <input id="lubedistancerain" name="lubedistancerain" type="text"
class="form-control" required="required"> class="data-lubedistancerain form-control" required="required">
<div class="input-group-append"> <div class="input-group-append">
<span class="input-group-text">m</span> <span class="input-group-text">m</span>
</div> </div>
@ -427,7 +432,7 @@
<label for="tankcap" class="control-label col-4">Tankkapazität</label> <label for="tankcap" class="control-label col-4">Tankkapazität</label>
<div class="col-8"> <div class="col-8">
<div class="input-group"> <div class="input-group">
<input id="tankcap" name="tankcap" type="text" class="form-control" <input id="tankcap" name="tankcap" type="text" class="data-tankcap form-control"
required="required"> required="required">
<div class="input-group-append"> <div class="input-group-append">
<span class="input-group-text">ml</span> <span class="input-group-text">ml</span>
@ -439,7 +444,7 @@
<label for="tankwarn" class="control-label col-4">Leer-Warnung</label> <label for="tankwarn" class="control-label col-4">Leer-Warnung</label>
<div class="col-8"> <div class="col-8">
<div class="input-group"> <div class="input-group">
<input id="tankwarn" name="tankwarn" type="text" class="form-control" <input id="tankwarn" name="tankwarn" type="text" class="data-tankwarn form-control"
required="required"> required="required">
<div class="input-group-append"> <div class="input-group-append">
<span class="input-group-text">&#37;</span> <span class="input-group-text">&#37;</span>
@ -451,7 +456,7 @@
<label for="pumppulse" class="control-label col-4">Menge pro Puls</label> <label for="pumppulse" class="control-label col-4">Menge pro Puls</label>
<div class="col-8"> <div class="col-8">
<div class="input-group"> <div class="input-group">
<input id="pumppulse" name="pumppulse" type="text" class="form-control" <input id="pumppulse" name="pumppulse" type="text" class="data-pumppulse form-control"
required="required"> required="required">
<div class="input-group-append"> <div class="input-group-append">
<span class="input-group-text">µl</span> <span class="input-group-text">µl</span>
@ -476,7 +481,7 @@
<label for="ledmodeflash" class="control-label col-4">LED Modus blinken</label> <label for="ledmodeflash" class="control-label col-4">LED Modus blinken</label>
<div class="col-8"> <div class="col-8">
<div class="form-check"> <div class="form-check">
<input class="form-check-input" type="checkbox" name="ledmodeflash" id="ledmodeflash"> <input class="data-ledmodeflash form-check-input" type="checkbox" name="ledmodeflash" id="ledmodeflash">
<label class="form-check-label" for="ledmodeflash"> <label class="form-check-label" for="ledmodeflash">
LED blinken LED blinken
</label> </label>
@ -488,7 +493,7 @@
<div class="col-8"> <div class="col-8">
<div class="input-group"> <div class="input-group">
<input id="ledmaxbrightness" name="ledmaxbrightness" type="text" <input id="ledmaxbrightness" name="ledmaxbrightness" type="text"
class="form-control" required="required"> class="data-ledmaxbrightness form-control" required="required">
</div> </div>
</div> </div>
</div> </div>
@ -497,7 +502,7 @@
<div class="col-8"> <div class="col-8">
<div class="input-group"> <div class="input-group">
<input id="ledminbrightness" name="ledminbrightness" type="text" <input id="ledminbrightness" name="ledminbrightness" type="text"
class="form-control" required="required"> class="data-ledminbrightness form-control" required="required">
</div> </div>
</div> </div>
</div> </div>

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

@ -141,24 +141,29 @@ function do_resize(textbox) {
function fillValuesToHTML(dataset) { function fillValuesToHTML(dataset) {
for (var key in dataset) { for (var key in dataset) {
var element = document.getElementById(key); var key_prefixed = "data-" + key;
var elements = document.getElementsByClassName(key_prefixed);
if (element) { if (elements.length > 0) {
if (element.type === "checkbox") { for (var i = 0; i < elements.length; i++) {
// Wenn das Element ein Kontrollkästchen ist var element = elements[i];
element.checked = dataset[key] == 1 ? true : false;
} else if (element.tagName === "SELECT") { if (element.type === "checkbox") {
// Wenn das Element ein Dropdown ist // Wenn das Element ein Kontrollkästchen ist
setDropdownValue(element, dataset[key]); element.checked = dataset[key] == 1 ? true : false;
} else if (element.classList.contains("progress-bar")) { } else if (element.tagName === "SELECT") {
// Wenn das Element eine Fortschrittsleiste ist // Wenn das Element ein Dropdown ist
updateProgressBar(element, dataset[key]); setDropdownValue(element, dataset[key]);
} else if (element.classList.contains("removeable")) { } else if (element.classList.contains("progress-bar")) {
// Wenn das Element ein Settingsabschnitt-div ist // Wenn das Element eine Fortschrittsleiste ist
if (dataset[key] == 0) element.remove(); updateProgressBar(element, dataset[key]);
} else { } else if (element.classList.contains("removeable")) {
// Standardmäßig für Textfelder und andere Elemente // Wenn das Element ein Settingsabschnitt-div ist
element.value = dataset[key]; if (dataset[key] == 0) element.remove();
} else {
// Standardmäßig für Textfelder und andere Elemente
element.value = dataset[key];
}
} }
} }
} }

8
Software/src/webui.cpp
View File

@ -617,9 +617,9 @@ void Websocket_RefreshClientData_Status(uint32_t client_id, bool send_mapping)
if (send_mapping) if (send_mapping)
{ {
const char mapping[] = "MAPPING_STATUS:" const char mapping[] = "MAPPING_STATUS:"
"SystemStatus;" "systemstatus;"
"tankremain;" "tankremain;"
"Odometer;"; "odometer;";
if (client_id > 0) if (client_id > 0)
webSocket.text(client_id, mapping); webSocket.text(client_id, mapping);
@ -668,7 +668,6 @@ void Websocket_RefreshClientData_Static(uint32_t client_id, bool send_mapping)
"tirewidth;" "tirewidth;"
"tireratio;" "tireratio;"
"tiredia;" "tiredia;"
"DistancePerRevolution_mm;"
"sourceselect;" "sourceselect;"
"gpsbaud;" "gpsbaud;"
"cansource;" "cansource;"
@ -678,7 +677,7 @@ void Websocket_RefreshClientData_Static(uint32_t client_id, bool send_mapping)
"showimpulse;" "showimpulse;"
"showgps;" "showgps;"
"showcan;" "showcan;"
"BleedingPulses;"; "bleedingpulses;";
if (client_id > 0) if (client_id > 0)
webSocket.text(client_id, mapping); webSocket.text(client_id, mapping);
@ -697,7 +696,6 @@ void Websocket_RefreshClientData_Static(uint32_t client_id, bool send_mapping)
temp.concat(String(LubeConfig.TireWidth_mm) + ";"); temp.concat(String(LubeConfig.TireWidth_mm) + ";");
temp.concat(String(LubeConfig.TireWidthHeight_Ratio) + ";"); temp.concat(String(LubeConfig.TireWidthHeight_Ratio) + ";");
temp.concat(String(LubeConfig.RimDiameter_Inch) + ";"); temp.concat(String(LubeConfig.RimDiameter_Inch) + ";");
temp.concat(String(LubeConfig.DistancePerRevolution_mm) + ";");
temp.concat(String(SpeedSourceString[LubeConfig.SpeedSource]) + ";"); temp.concat(String(SpeedSourceString[LubeConfig.SpeedSource]) + ";");
temp.concat(String(GPSBaudRateString[LubeConfig.GPSBaudRate]) + ";"); temp.concat(String(GPSBaudRateString[LubeConfig.GPSBaudRate]) + ";");
temp.concat(String(CANSourceString[LubeConfig.CANSource]) + ";"); temp.concat(String(CANSourceString[LubeConfig.CANSource]) + ";");