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

made index.html static - websocket everywhere

Browse Source
This commit is contained in:
Marcel Peterkau
2024-01-09 12:17:13 +01:00
parent e375fab048
commit 62cc2bf982
3 changed files with 107 additions and 384 deletions
Download Patch File Download Diff File Expand all files Collapse all files

232
Software/data_src/index.htm
View File

@@ -12,7 +12,7 @@
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/websocket.js"></script>
<script src="static/js/dtc_table.js"></script>
<script src="static/js/script.js" type="text/javascript"></script>
<script src="static/js/script.js"></script>
<link rel="apple-touch-icon" sizes="180x180" href="static/img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="static/img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="static/img/favicon-16x16.png">
@@ -37,7 +37,6 @@
<li class="nav-item"><a class="nav-link active" role="tab" data-toggle="tab" href="#tab_home">Home</a></li>
<li class="nav-item"><a class="nav-link" role="tab" data-toggle="tab" href="#tab_maintenance">Wartung</a></li>
<li class="nav-item"><a class="nav-link" role="tab" data-toggle="tab" href="#tab_source">Einstellungen</a></li>
<li class="nav-item"><a class="nav-link" role="tab" data-toggle="tab" href="#tab_sysinfo">Systeminfo</a></li>
<li class="nav-item"><a class="nav-link" role="tab" data-toggle="tab" href="#tab_fwupdate">Update</a></li>
</ul>
@@ -61,9 +60,9 @@
<p>
<h4>Tankinhalt verbleibend</h4>
<div class="progress">
<div class="progress-bar text-light" role="progressbar" aria-valuenow="%TANK_REMAIN_CAPACITY%"
aria-valuemin="0" aria-valuemax="100" style="width: %TANK_REMAIN_CAPACITY%&#37;">
%TANK_REMAIN_CAPACITY%&#37;
<div id="tankremain" class="progress-bar text-light" role="progressbar" aria-valuenow="0"
aria-valuemin="0" aria-valuemax="100" style="width: 0%">
0
</div>
</div>
</p>
@@ -159,7 +158,7 @@
<label for="measuredpulses" class="control-label col-4">erfasste Pulse</label>
<div class="col-8">
<div class="input-group">
<input id="measuredpulses" name="measuredpulses" value="%MEASURED_PULSES%" type="text" readonly
<input id="measuredpulses" name="measuredpulses" value="0" type="text" readonly
class="form-control">
<div class="input-group-append">
<span class="input-group-text">Pulse</span>
@@ -169,7 +168,7 @@
</div>
<div class="form-group row">
<div class="col text-center">
<button name="measurestartstop" type="submit" class="btn btn-outline-primary">%MEASURE_BTN%</button>
<button name="measurestartstop" type="submit" class="btn btn-outline-primary">Start</button>
<button name="measurereset" type="submit" class="btn btn-outline-primary ml-2">Reset</button>
</div>
</div>
@@ -217,6 +216,21 @@
</form>
</p>
<!-- Div Group EEPROM formatting -->
<!-- Div Group LiveDebug -->
<hr />
<p>
<h4>Live Debug</h4>
<div class="form-group row">
<textarea class="form-control" spellcheck="false" id="livedebug-out" rows="3" readonly></textarea>
</div>
<div class="form-group row">
<div class="col text-center">
<button id="btn-ws-start" class="btn btn-outline-primary">Start</button>
<button id="btn-ws-stop" class="btn btn-outline-primary ml-2">Stop</button>
</div>
</div>
</p>
<!-- Div Group LiveDebug -->
<!-- Div Group Device Reboot -->
<hr />
<p>
@@ -244,8 +258,7 @@
<div class="form-group row">
<label for="sourceselect" class="control-label col-4">Schnittstelle</label>
<div class="col-8">
<select id="sourceselect" name="sourceselect" class="select form-control">
%SOURCE_SELECT_OPTIONS%
<select id="sourceselect" name="sourceselect" class="select form-control">
</select>
</div>
</div>
@@ -266,7 +279,7 @@
</p>
<!-- Div Group Signal Source -->
<!-- Div Group Source:Impulse Settings-->
<div %SHOW_IMPULSE_SETTINGS%>
<div id="showimpulse" class="removeable">
<hr />
<p>
<h4>Einstellungen Impulseingang</h4>
@@ -276,8 +289,7 @@
<label for="tirewidth" class="control-label col-4">Reifenbreite</label>
<div class="col-8">
<div class="input-group">
<input id="tirewidth" name="tirewidth" type="text" required="required" class="form-control"
value="%TIRE_WIDTH_MM%">
<input id="tirewidth" name="tirewidth" type="text" required="required" class="form-control">
<div class="input-group-append">
<span class="input-group-text">mm</span>
</div>
@@ -289,8 +301,7 @@
<label for="tireratio" class="control-label col-4">Höhe/Breite-Verhältniss</label>
<div class="col-8">
<div class="input-group">
<input id="tireratio" name="tireratio" type="text" required="required" class="form-control"
value="%TIRE_RATIO%">
<input id="tireratio" name="tireratio" type="text" required="required" class="form-control">
<div class="input-group-append">
<span class="input-group-text">mm</span>
</div>
@@ -301,8 +312,7 @@
<label for="tiredia" class="control-label col-4">Felgendurchmesser</label>
<div class="col-8">
<div class="input-group">
<input id="tiredia" name="tiredia" type="text" required="required" class="form-control"
value="%RIM_DIAMETER%">
<input id="tiredia" name="tiredia" type="text" required="required" class="form-control">
<div class="input-group-append">
<span class="input-group-text">"</span>
</div>
@@ -313,8 +323,7 @@
<label for="pulserev" class="control-label col-4">Pulse pro Umdrehung</label>
<div class="col-8">
<div class="input-group">
<input id="pulserev" name="pulserev" type="text" required="required" class="form-control"
value="%PULSE_PER_REV%">
<input id="pulserev" name="pulserev" type="text" required="required" class="form-control">
<div class="input-group-addon"></div>
</div>
</div>
@@ -329,7 +338,7 @@
</div>
<!-- Div Group Source:Impulse Settings-->
<!-- Div Group Source:CAN Settings-->
<div %SHOW_CAN_SETTINGS%>
<div id="showcan" class="removeable">
<hr />
<p>
<h4>Einstellungen CAN-Bus</h4>
@@ -338,7 +347,6 @@
<label for="cansource" class="control-label col-4">Model</label>
<div class="col-8">
<select id="cansource" name="cansource" class="select form-control">
%CANSOURCE_SELECT_OPTIONS%
</select>
</div>
</div>
@@ -352,7 +360,7 @@
</div>
<!-- Div Group Source:CAN Settings-->
<!-- Div Group Source:GPS Settings-->
<div %SHOW_GPS_SETTINGS%>
<div id="showgps" class="removeable">
<hr />
<p>
<h4>Einstellungen GPS</h4>
@@ -361,7 +369,6 @@
<label for="gpsbaud" class="control-label col-4">Baudrate</label>
<div class="col-8">
<select id="gpsbaud" name="gpsbaud" class="select form-control">
%GPSBAUD_SELECT_OPTIONS%
</select>
</div>
</div>
@@ -383,7 +390,7 @@
<label for="lubedistancenormal" class="control-label col-4">Normal (gr&uuml;n)</label>
<div class="col-8">
<div class="input-group">
<input id="lubedistancenormal" name="lubedistancenormal" value="%LUBE_DISTANCE_NORMAL%" type="text"
<input id="lubedistancenormal" name="lubedistancenormal" type="text"
class="form-control" required="required">
<div class="input-group-append">
<span class="input-group-text">m</span>
@@ -395,7 +402,7 @@
<label for="lubedistancerain" class="control-label col-4">Regen (blau)</label>
<div class="col-8">
<div class="input-group">
<input id="lubedistancerain" name="lubedistancerain" value="%LUBE_DISTANCE_RAIN%" type="text"
<input id="lubedistancerain" name="lubedistancerain" type="text"
class="form-control" required="required">
<div class="input-group-append">
<span class="input-group-text">m</span>
@@ -420,7 +427,7 @@
<label for="tankcap" class="control-label col-4">Tankkapazität</label>
<div class="col-8">
<div class="input-group">
<input id="tankcap" name="tankcap" value="%TANK_CAPACITY%" type="text" class="form-control"
<input id="tankcap" name="tankcap" type="text" class="form-control"
required="required">
<div class="input-group-append">
<span class="input-group-text">ml</span>
@@ -432,7 +439,7 @@
<label for="tankwarn" class="control-label col-4">Leer-Warnung</label>
<div class="col-8">
<div class="input-group">
<input id="tankwarn" name="tankwarn" value="%TANK_REMIND%" type="text" class="form-control"
<input id="tankwarn" name="tankwarn" type="text" class="form-control"
required="required">
<div class="input-group-append">
<span class="input-group-text">&#37;</span>
@@ -444,7 +451,7 @@
<label for="pumppulse" class="control-label col-4">Menge pro Puls</label>
<div class="col-8">
<div class="input-group">
<input id="pumppulse" name="pumppulse" value="%AMOUNT_PER_DOSE%" type="text" class="form-control"
<input id="pumppulse" name="pumppulse" type="text" class="form-control"
required="required">
<div class="input-group-append">
<span class="input-group-text">µl</span>
@@ -469,7 +476,7 @@
<label for="ledmodeflash" class="control-label col-4">LED Modus blinken</label>
<div class="col-8">
<div class="form-check">
<input class="form-check-input" type="checkbox" name="ledmodeflash" id="ledmodeflash" %LEDFLASHCHECKED%>
<input class="form-check-input" type="checkbox" name="ledmodeflash" id="ledmodeflash">
<label class="form-check-label" for="ledmodeflash">
LED blinken
</label>
@@ -480,7 +487,7 @@
<label for="ledmaxbrightness" class="control-label col-4">Max Helligkeit</label>
<div class="col-8">
<div class="input-group">
<input id="ledmaxbrightness" name="ledmaxbrightness" value="%LED_MAX_BRIGHTNESS%" type="text"
<input id="ledmaxbrightness" name="ledmaxbrightness" type="text"
class="form-control" required="required">
</div>
</div>
@@ -489,7 +496,7 @@
<label for="ledminbrightness" class="control-label col-4">Min Helligkeit</label>
<div class="col-8">
<div class="input-group">
<input id="ledminbrightness" name="ledminbrightness" value="%LED_MIN_BRIGHTNESS%" type="text"
<input id="ledminbrightness" name="ledminbrightness" type="text"
class="form-control" required="required">
</div>
</div>
@@ -505,171 +512,6 @@
</div>
<!-- Div Tab Settings -->
<!-- Div Tab SystemInfo -->
<div id="tab_sysinfo" class="tab-pane fade" role="tabpanel">
<h3>Systeminfo</h3>
<!-- Div Group Sysinfo:Geraeteinfo -->
<hr />
<p>
<h4>Ger&auml;t</h4>
<table class="table">
<tbody>
<tr>
<th class="col-7" scope="col">Parameter</td>
<th class="col-5" scope="col">Value</td>
</tr>
<tr>
<td>Hostname</td>
<td>%HOSTNAME%</td>
</tr>
</table>
</p>
<!-- Div Group Sysinfo:Geraeteinfo -->
<!-- Div Group Sysinfo:Settings -->
<hr />
<p>
<h4>Einstellungen</h4>
<table class="table">
<tbody>
<tr>
<th class="col-7" scope="col">Parameter</td>
<th class="col-5" scope="col">Value</td>
</tr>
<tr>
<td>DistancePerLube_Default</td>
<td>%LUBE_DISTANCE_NORMAL%</td>
</tr>
<tr>
<td>DistancePerLube_Rain</td>
<td>%LUBE_DISTANCE_RAIN%</td>
</tr>
<tr>
<td>tankCapacity_ml</td>
<td>%TANK_CAPACITY%</td>
</tr>
<tr>
<td>amountPerDose_&micro;l</td>
<td>%AMOUNT_PER_DOSE%</td>
</tr>
<tr>
<td>TankRemindAtPercentage</td>
<td>%TANK_REMIND%</td>
</tr>
<tr>
<td>PulsePerRevolution</td>
<td>%PULSE_PER_REV%</td>
</tr>
<tr>
<td>TireWidth_mm</td>
<td>%TIRE_WIDTH_MM%</td>
</tr>
<tr>
<td>TireWidthHeight_Ratio</td>
<td>%TIRE_RATIO%</td>
</tr>
<tr>
<td>RimDiameter_Inch</td>
<td>%RIM_DIAMETER%</td>
</tr>
<tr>
<td>DistancePerRevolution_mm</td>
<td>%DISTANCE_PER_REV%</td>
</tr>
<tr>
<td>BleedingPulses</td>
<td>%BLEEDING_PULSES%</td>
</tr>
<tr>
<td>SpeedSource</td>
<td>%SPEED_SOURCE%</td>
</tr>
<tr>
<td>GPSBaudRate</td>
<td>%GPS_BAUD%</td>
</tr>
<tr>
<td>CANSource</td>
<td>%CAN_SOURCE%</td>
</tr>
<tr>
<td>LED Mode Flash</td>
<td>%LED_MODE_FLASH%</td>
</tr>
<tr>
<td>LED Max Brightness</td>
<td>%LED_MAX_BRIGHTNESS%</td>
</tr>
<tr>
<td>LED Min Brightness</td>
<td>%LED_MIN_BRIGHTNESS%</td>
</tr>
<tr>
<td>EEPROM Version</td>
<td>%EEPROM_VERSION%</td>
</tr>
<tr>
<td>Checksum</td>
<td>%CONFIG_CHECKSUM%</td>
</tr>
</tbody>
</table>
</p>
<!-- Div Group Sysinfo:Settings -->
<!-- Div Group Sysinfo:Persistance -->
<hr />
<p>
<h4>Betriebsdaten</h4>
<table class="table">
<tbody>
<tr>
<th class="col-7" scope="col">Parameter</td>
<th class="col-5" scope="col">Value</td>
</tr>
<tr>
<td>writeCycleCounter</td>
<td>%WRITE_CYCLE_COUNT%</td>
</tr>
<tr>
<td>PersistenceMarker</td>
<td>%PERSISTENCE_MARKER%</td>
</tr>
<tr>
<td>tankRemain_µl</td>
<td>%TANK_REMAIN_UL%</td>
</tr>
<tr>
<td>TravelDistance_highRes</td>
<td>%TRAVEL_DISTANCE_HIGHRES%</td>
</tr>
<tr>
<td>Odometer</td>
<td>%ODOMETER%,%ODOMETER_M%</td>
</tr>
<tr>
<td>checksum</td>
<td>%PERSISTANCE_CHECKSUM%</td>
</tr>
</table>
</p>
<!-- Div Group Sysinfo:Persistance -->
<!-- Div Group LiveDebug -->
<hr />
<p>
<h4>Live Debug</h4>
<div class="form-group row">
<textarea class="form-control" spellcheck="false" id="livedebug-out" rows="3" readonly></textarea>
</div>
<div class="form-group row">
<div class="col text-center">
<button id="btn-ws-start" class="btn btn-outline-primary">Start</button>
<button id="btn-ws-stop" class="btn btn-outline-primary ml-2">Stop</button>
</div>
</div>
</p>
<!-- Div Group LiveDebug -->
</div>
<!-- Div Tab SystemInfo -->
<!-- Div Tab Firmware Update-->
<div id="tab_fwupdate" class="tab-pane fade" role="tabpanel">
<h3>Firmware</h3>

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

@@ -71,7 +71,7 @@ function onMessage(event) {
const result = processDataString(data_sliced, statusMapping);
console.log("STATUS:");
console.log(JSON.stringify(result, null, 2));
fillValuestoHTML(result);
fillValuesToHTML(result);
return;
}
@@ -80,7 +80,7 @@ function onMessage(event) {
const result = processDataString(data_sliced, staticMapping);
console.log("STATIC:");
console.log(JSON.stringify(result, null, 2));
fillValuestoHTML(result);
fillValuesToHTML(result);
return;
}
}
@@ -139,11 +139,47 @@ function do_resize(textbox) {
else textbox.rows = rows;
}
function fillValuestoHTML(dataset) {
function fillValuesToHTML(dataset) {
for (var key in dataset) {
var inputElement = document.getElementById(key);
if (inputElement) {
inputElement.value = dataset[key];
var element = document.getElementById(key);
if (element) {
if (element.type === "checkbox") {
// Wenn das Element ein Kontrollkästchen ist
element.checked = dataset[key] == 1 ? true : false;
} else if (element.tagName === "SELECT") {
// Wenn das Element ein Dropdown ist
setDropdownValue(element, dataset[key]);
} else if (element.classList.contains("progress-bar")) {
// Wenn das Element eine Fortschrittsleiste ist
updateProgressBar(element, dataset[key]);
} else if (element.classList.contains("removeable")) {
// Wenn das Element ein Settingsabschnitt-div ist
if (dataset[key] == 0) element.remove();
} else {
// Standardmäßig für Textfelder und andere Elemente
element.value = dataset[key];
}
}
}
}
// Funktion zum Setzen des ausgewählten Werts für Dropdowns
function setDropdownValue(selectElement, value) {
for (var i = 0; i < selectElement.options.length; i++) {
if (selectElement.options[i].value === value) {
selectElement.selectedIndex = i;
break;
}
}
}
// Funktion zum Aktualisieren der Fortschrittsleiste
function updateProgressBar(progressBar, value) {
// Wert in das aria-valuenow-Attribut einfügen
progressBar.setAttribute("aria-valuenow", value);
// Breite des Fortschrittsbalkens und inneren Text aktualisieren
progressBar.style.width = value + "%";
progressBar.textContent = value + "%";
}