569 lines
22 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>KTM CAN Chain Oiler</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="static/css/bootstrap.min.css">
<link rel="stylesheet" href="static/css/custom.css">
<link rel="stylesheet" href="static/css/tweaks.css">
<script src="static/js/jquery.min.js"></script>
<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"></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">
<link rel="manifest" href="static/img/site.webmanifest">
</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="">
KTM CAN ChainLube
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar"
aria-controls="collapsingNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsingNavbar">
<ul class="navbar-nav nav mr-auto mt-2 mt-lg-0">
<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_fwupdate">Update</a></li>
</ul>
</div>
</nav>
<main class="container">
<!-- Tabs Content -->
<div class="tab-content">
<!-- Div Tab Home-->
<div id="tab_home" class="tab-pane fade show active" role="tabpanel">
<div class="col text-center">
<div class="jumbotron">
<img src="static/img/logo.png" width="120" height="120" class="img-fluid" alt="">
<h3 class="pt-3">KTM CAN Chain Lube</h3>
</div>
</div>
<!-- Div Group Tank remain -->
<hr />
<p>
<h4>Tankinhalt verbleibend</h4>
<div class="progress">
<div id="tankremain" class="data-tankremain progress-bar text-light" role="progressbar" aria-valuenow="0"
aria-valuemin="0" aria-valuemax="100" style="width: 0%">
0
</div>
</div>
</p>
<!-- Div Group Tank remain -->
<!-- Div Group current Mode -->
<hr />
<p>
<h4>aktueller Modus</h4>
<input class="data-systemstatus form-control" type="text" id="sysstatus" readonly>
</p>
<!-- Div Group current Mode -->
<!-- Div Group DTC Table -->
<div id="dtc_container" hidden>
<hr />
<p>
<h4>Fehlercodes</h4>
<table class="table" id="dtc_table">
<tbody>
<tr>
<th class="col-6" scope="col">Zeitstempel</th>
<th class="col-2" scope="col">Fehlercode</th>
<th class="col-2" scope="col">Schwere</th>
<th class="col-2" scope="col">Aktiv</th>
</tr>
</tbody>
</table>
</p>
</div>
<!-- Div Group DTC Table -->
</div>
<!-- Div Tab Home-->
<!-- Div Tab Maintenance -->
<div id="tab_maintenance" class="tab-pane fade" role="tabpanel">
<h3>Wartung</h3>
<!-- Div Group Tank remain -->
<hr />
<p>
<h4>&Ouml;lvorrat</h4>
<div class="form-group row">
<label for="tankremain_maint" class="control-label col-4">Tankinhalt verbleibend</label>
<div class="col-8">
<div class="progress">
<div id="tankremain_maint" class="data-tankremain progress-bar text-light" role="progressbar"
aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"
style="width: 0%">0%
</div>
</div>
</div>
</div>
<div class="form-group row">
<div class="col text-center">
<button id="resettank" class="btn-wsevent btn btn-outline-primary ml-2">Tank zurücksetzen</button>
</div>
</div>
</p>
<!-- Div Group Tank remain -->
<!-- Div Group Purging -->
<hr />
<p>
<h4>Entl&uuml;ftung</h4>
<div class="form-group row">
<label for="bleedingpulses" class="control-label col-4">Entl&uuml;ftung Dosierung</label>
<div class="col-8">
<div class="input-group">
<input id="bleedingpulses" value="0" type="text" class="set-wsevent data-bleedingpulses form-control">
<div class="input-group-append">
<span class="input-group-text">Pulse</span>
</div>
</div>
</div>
</div>
<div class="form-group row">
<div class="col text-center">
<button id="purgenow" class="btn-wsevent btn btn-outline-primary ml-2">Entlüftung starten</button>
</div>
</div>
</p>
<!-- Div Group Purging -->
<!-- Div Group Measure -->
<div %SHOW_IMPULSE_SETTINGS%>
<hr />
<p>
<h4>Einmessen</h4>
<div class="form-group row">
<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="0" type="text" readonly class="form-control">
<div class="input-group-append">
<span class="input-group-text">Pulse</span>
</div>
</div>
</div>
</div>
<div class="form-group row">
<div class="col text-center">
<button id="measurestartstop" class="btn-wsevent btn btn-outline-primary">Start</button>
<button id="measurereset" class="btn-wsevent btn btn-outline-primary ml-2">Reset</button>
</div>
</div>
</p>
</div>
<!-- Div Group Purging -->
<!-- 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="debugstart" class="btn-wsevent btn btn-outline-primary ml-2">Start</button>
<button id="debugstop" class="btn-wsevent btn btn-outline-primary ml-2">Stop</button>
</div>
</div>
</p>
<!-- Div Group LiveDebug -->
<!-- Div Group Device Reboot -->
<hr />
<p>
<h4>Ger&auml;t neustarten</h4>
<div class="form-group row">
<div class="col text-center">
<button id="reboot" class="btn-wsevent btn btn-outline-primary">Reboot</button>
</div>
</div>
</p>
<!-- Div Group Device Reboot -->
</div>
<!-- Div Tab Maintenance -->
<!-- Div Tab Settings-->
<div id="tab_source" class="tab-pane fade" role="tabpanel">
<h3>Einstellungen</h3>
<!-- Div Group Signal Source -->
<hr />
<p>
<h4>Signalquelle</h4>
<div class="form-group row">
<label for="speedsource" class="control-label col-4">Schnittstelle</label>
<div class="col-8">
<select id="speedsource" class="set-wsevent data-speedsource select form-control">
<option value="Impuls">Impuls</option>
<option value="GPS">GPS</option>
<option value="CAN-Bus">CAN-Bus</option>
</select>
</div>
</div>
<div class="alert alert-primary alert-dismissable show fade" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong>Achtung!</strong><br>
Bei Änderung der Signalquelle wird der CAN-Oiler neu gestartet.
Dadurch wird die WiFi-Verbindung getrennt und muss neu aufgebaut werden.
</div>
<div class="form-group row">
<div class="col text-center">
<button id="sourcesave" class="btn-wsevent btn btn-outline-primary">&Uuml;bernehmen</button>
</div>
</div>
</p>
<!-- Div Group Signal Source -->
<!-- Div Group Source:Impulse Settings-->
<div id="showimpulse" class="data-showimpulse hideable">
<hr />
<p>
<h4>Einstellungen Impulseingang</h4>
<div class="form-group row">
<label for="tirewidth" class="control-label col-4">Reifenbreite</label>
<div class="col-8">
<div class="input-group">
<input id="tirewidth" type="text" required="required" class="set-wsevent data-tirewidth form-control">
<div class="input-group-append">
<span class="input-group-text">mm</span>
</div>
</div>
</div>
</div>
<div class="form-group row">
<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" type="text" required="required" class="set-wsevent data-tireratio form-control">
<div class="input-group-append">
<span class="input-group-text">mm</span>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="tiredia" class="control-label col-4">Felgendurchmesser</label>
<div class="col-8">
<div class="input-group">
<input id="tiredia" type="text" required="required" class="set-wsevent data-tiredia form-control">
<div class="input-group-append">
<span class="input-group-text">"</span>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="pulserev" class="control-label col-4">Pulse pro Umdrehung</label>
<div class="col-8">
<div class="input-group">
<input id="pulserev" type="text" required="required" class="set-wsevent data-pulserev form-control">
<div class="input-group-addon"></div>
</div>
</div>
</div>
</p>
</div>
<!-- Div Group Source:Impulse Settings-->
<!-- Div Group Source:CAN Settings-->
<div id="showcan" class="data-showcan hideable">
<hr />
<p>
<h4>Einstellungen CAN-Bus</h4>
<div class="form-group row">
<label for="cansource" class="control-label col-4">Model</label>
<div class="col-8">
<select id="cansource" class="set-wsevent 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>
</div>
</div>
</p>
</div>
<!-- Div Group Source:CAN Settings-->
<!-- Div Group Source:GPS Settings-->
<div id="showgps" class="data-showgps hideable">
<hr />
<p>
<h4>Einstellungen GPS</h4>
<div class="form-group row">
<label for="gpsbaud" class="control-label col-4">Baudrate</label>
<div class="col-8">
<select id="gpsbaud" class="set-wsevent data-gpsbaud select form-control">
</select>
</div>
</div>
<div class="form-group row">
<div class="col text-center">
<button id="gpssave" class="btn-wsevent btn btn-outline-primary">Speichern</button>
</div>
</div>
</p>
</div>
<!-- Div Group Source:GPS Settings-->
<!-- Div Group Lube Settings-->
<hr />
<p>
<h4>Dosierung</h4>
<div class="form-group row">
<label for="lubedistancenormal" class="control-label col-4">Normal (gr&uuml;n)</label>
<div class="col-8">
<div class="input-group">
<input id="lubedistancenormal" type="text"
class="set-wsevent data-lubedistancenormal form-control" required="required">
<div class="input-group-append">
<span class="input-group-text">m</span>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="lubedistancerain" class="control-label col-4">Regen (blau)</label>
<div class="col-8">
<div class="input-group">
<input id="lubedistancerain" type="text"
class="set-wsevent data-lubedistancerain form-control" required="required">
<div class="input-group-append">
<span class="input-group-text">m</span>
</div>
</div>
</div>
</div>
</p>
<!-- Div Group Lube Settings-->
<!-- Div Group Oiltank Settings -->
<hr />
<p>
<h4>&Ouml;ltank</h4>
<div class="form-group row">
<label for="tankcap" class="control-label col-4">Tankkapazität</label>
<div class="col-8">
<div class="input-group">
<input id="tankcap" type="text" class="set-wsevent data-tankcap form-control"
required="required">
<div class="input-group-append">
<span class="input-group-text">ml</span>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="tankwarn" class="control-label col-4">Leer-Warnung</label>
<div class="col-8">
<div class="input-group">
<input id="tankwarn" type="text" class="set-wsevent data-tankwarn form-control"
required="required">
<div class="input-group-append">
<span class="input-group-text">&#37;</span>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="pumppulse" class="control-label col-4">Menge pro Puls</label>
<div class="col-8">
<div class="input-group">
<input id="pumppulse" type="text" class="set-wsevent data-pumppulse form-control"
required="required">
<div class="input-group-append">
<span class="input-group-text">µl</span>
</div>
</div>
</div>
</div>
</p>
<!-- Div Group Oiltank Settings -->
<!-- Div Group LED Settings-->
<hr />
<p>
<h4>LED Einstellungen</h4>
<div class="form-group row">
<label for="ledmodeflash" class="control-label col-4">LED Modus blinken</label>
<div class="col-8">
<div class="form-check">
<input class="set-wsevent data-ledmodeflash form-check-input" type="checkbox" id="ledmodeflash">
<label class="form-check-label" for="ledmodeflash">
LED blinken
</label>
</div>
</div>
</div>
<div class="form-group row">
<label for="ledmaxbrightness" class="control-label col-4">Max Helligkeit</label>
<div class="col-8">
<div class="input-group">
<input id="ledmaxbrightness" type="text" class="set-wsevent data-ledmaxbrightness form-control" required="required">
</div>
</div>
</div>
<div class="form-group row">
<label for="ledminbrightness" class="control-label col-4">Min Helligkeit</label>
<div class="col-8">
<div class="input-group">
<input id="ledminbrightness" type="text" class="set-wsevent data-ledminbrightness form-control" required="required">
</div>
</div>
</div>
</p>
<!-- Div Group Lube Settings-->
<!-- Div Group Save Button-->
<hr />
<p>
<div class="form-group row">
<div class="col text-center">
<button id="settingssave" class="btn-wsevent btn btn-outline-primary">Speichern</button>
</div>
</div>
</p>
</div>
<!-- Div Tab Settings -->
<!-- Div Tab Firmware Update-->
<div id="tab_fwupdate" class="tab-pane fade" role="tabpanel">
<h3>Firmware</h3>
<!-- Div Group VersionInfo -->
<hr />
<p>
<h4>Version-Info</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>Firmware Version</td>
<td>%SW_VERSION%</td>
</tr>
<tr>
<td>Flash Version</td>
<td>%FS_VERSION%</td>
</tr>
<tr>
<td>Git Revision</td>
<td>%GIT_REV%</td>
</tr>
</table>
</p>
<!-- Div Group VersionInfo -->
<!-- Div Group EEPROM Backup -->
<hr />
<p>
<h4>EEPROM-Backup</h4>
<div class="form-group row">
<div class="col text-center">
<a class="btn btn-outline-primary" href="eejson" role="button" id="ee-backup-download">Download</a>
</div>
</div>
</p>
<!-- Div Group EEPROM Backup -->
<!-- Div Group EEPROM Restore -->
<hr />
<p>
<h4>EEPROM-Restore</h4>
<form method='POST' action='eeRestore' enctype='multipart/form-data'>
<div class="form-group row">
<div class="custom-file">
<input type="file" name="ee-restore-file" class="custom-file-input" id="ee-restore-file" accept=".ee.json"
required />
<label class="custom-file-label" for="ee-restore-file">EEPROM-Backup ausw&auml;hlen</label>
</div>
</div>
<div class="form-group row">
<div class="col text-center">
<button name="submit" type="submit" class="btn btn-outline-primary">Restore starten</button>
</div>
</div>
</form>
</p>
<!-- Div Group EEPROM Restore -->
<!-- Div Group Firmware Update -->
<hr />
<p>
<h4>Firmware-Update</h4>
<form method='POST' action='doUpdate' enctype='multipart/form-data'>
<div class="form-group row">
<div class="custom-file">
<input type="file" name="fw-update-file" class="custom-file-input" id="fw-update-file"
accept=".fw.bin,.fs.gz" required />
<label class="custom-file-label" for="fw-update-file">Firmware-Update ausw&auml;hlen</label>
</div>
</div>
<div class="form-group row">
<div class="col text-center">
<button name="submit" type="submit" class="btn btn-outline-primary">Update starten</button>
</div>
</div>
</form>
</p>
<!-- Div Group Firmware Update -->
</div>
<!-- Div Tab Firmware Update-->
</div>
<!-- Tabs Content -->
</main>
<!-- Footer -->
<footer class="page-footer navbar-dark bg-primary font-small fixed-bottom">
<div class="container-fluid text-center">
<div class="footer-copyright text-center py-3">
<span class="text-muted">© 2023 -
<a class="text-reset fw-bold" href="https://eventronics.de/">Marcel Peterkau</a></span>
</div>
</div>
</footer>
<!-- Footer -->
<!-- Modal Dialog -->
<div class="modal fade" id="dtcModal" tabindex="-1" role="dialog" aria-labelledby="dtcModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="dtcModalLabel">DTC-Description</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p class="dtc-desc">DTC Description</p>
<p class="dtc-debugval">DTC DebugVal</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal Dialog -->
</body>
</html>