reworked the WebUI-Websocket-Comm
This commit is contained in:
parent
157d59963c
commit
c236322667
@ -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%%">
|
style="width: 0%">
|
||||||
%TANK_REMAIN_CAPACITY%%
|
%TANK_REMAIN_CAPACITY%%
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -129,10 +129,10 @@
|
|||||||
<h4>Entlüftung</h4>
|
<h4>Entlü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üftung Dosierung</label>
|
<label for="bleedingpulses" class="control-label col-4">Entlü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">%</span>
|
<span class="input-group-text">%</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>
|
||||||
|
@ -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];
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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]) + ";");
|
||||||
|
Loading…
x
Reference in New Issue
Block a user