Format-Tweaks on WebUI

changed FlashVersion and incereased Buffer-Size
DTC-Icon-fix
2022-08-23 00:48:42 +02:00 · 2022-08-23 00:48:00 +02:00 · 2022-08-23 00:12:03 +02:00 · 2022-08-23 00:11:44 +02:00
8 changed files with 80 additions and 75 deletions
--- a/Software/data_src/index.htm
+++ b/Software/data_src/index.htm
@ -20,7 +20,7 @@

  <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" alt="">
+      <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"
@ -51,7 +51,7 @@
        <div class="col text-center">
          <div class="jumbotron">
            <img src="static/img/logo.png" width="120" height="120" class="img-fluid" alt="">
-            <h3>KTM CAN Chain Lube</h3>
+            <h3 class="pt-3">KTM CAN Chain Lube</h3>
          </div>
        </div>
        <hr />
@ -85,8 +85,8 @@
            </tbody>
          </table>
          <p>
-            <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseDTCDescription"
-              aria-expanded="false" aria-controls="collapseDTCDescription">
+            <button class="btn btn-outline-primary" type="button" data-toggle="collapse"
+              data-target="#collapseDTCDescription" aria-expanded="false" aria-controls="collapseDTCDescription">
              DTC Beschreibung
            </button>
          </p>
@ -102,37 +102,40 @@
      <!-- Div Tab Home-->
      <!-- Div Tab Source Settings-->
      <div id="tab_source" class="tab-pane fade" role="tabpanel">
-        <h3>Erfassung Wegstrecke</h3>
+        <h3>Wegstreckenerfassung</h3>
        <hr />
        <p>
        <h4>Signalquelle</h4>
-        <form action="\post.htm" method="POST" class="form-horizontal">
+        <form action="post.htm" method="POST" class="form-horizontal">
          <div class="form-group row">
-            <label for="sourceselect" class="control-label col-4">Wegstrecke Quelle</label>
+            <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>
            </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="offset-4 col-8">
-              <button name="sourcesave" type="submit" class="btn btn-primary">&Uuml;bernehmen</button>
+              <button name="sourcesave" type="submit" class="btn btn-outline-primary">&Uuml;bernehmen</button>
            </div>
          </div>
        </form>
-        <div class="alert alert-warning">
-          <strong>Achtung!</strong><br>
-          Bei Änderung der Wegstrecken-Quelle wird der CAN-Oiler neu gestartet.
-          Dadurch wird die WiFi-Verbindung getrennt und muss neu aufgebaut werden.
-        </div>
        </p>
        <!-- Div Source:Impulse Settings-->
        <div %SHOW_IMPULSE_SETTINGS%>
          <hr />
          <p>
-          <h4>Einstellungen Impuls</h4>
-          <form action="\post.htm" method="POST" class="form-horizontal">
+          <h4>Einstellungen Impulseingang</h4>
+          <form action="post.htm" method="POST" class="form-horizontal">

            <div class="form-group row">
              <label for="tirewidth" class="control-label col-4">Reifenbreite</label>
@ -153,9 +156,9 @@
                <div class="input-group">
                  <input id="tireratio" name="tireratio" type="text" required="required" class="form-control"
                    value="%TIRE_RATIO%">
-                    <div class="input-group-append">
-                      <span class="input-group-text">mm</span>
-                    </div>
+                  <div class="input-group-append">
+                    <span class="input-group-text">mm</span>
+                  </div>
                </div>
              </div>
            </div>
@ -165,9 +168,9 @@
                <div class="input-group">
                  <input id="tiredia" name="tiredia" type="text" required="required" class="form-control"
                    value="%RIM_DIAMETER%">
-                    <div class="input-group-append">
-                      <span class="input-group-text">"</span>
-                    </div>
+                  <div class="input-group-append">
+                    <span class="input-group-text">"</span>
+                  </div>
                </div>
              </div>
            </div>
@ -183,7 +186,7 @@
            </div>
            <div class="form-group row">
              <div class="offset-4 col-8">
-                <button name="pulsesave" type="submit" class="btn btn-primary">Speichern</button>
+                <button name="pulsesave" type="submit" class="btn btn-outline-primary">Speichern</button>
              </div>
            </div>
          </form>
@ -195,7 +198,7 @@
          <hr />
          <p>
          <h4>Einstellungen CAN-Bus</h4>
-          <form action="\post.htm" method="POST" class="form-horizontal">
+          <form action="post.htm" method="POST" class="form-horizontal">
            <div class="form-group row">
              <label for="cansource" class="control-label col-4">Model</label>
              <div class="col-8">
@ -206,7 +209,7 @@
            </div>
            <div class="form-group row">
              <div class="offset-4 col-8">
-                <button name="cansave" type="submit" class="btn btn-primary">Speichern</button>
+                <button name="cansave" type="submit" class="btn btn-outline-primary">Speichern</button>
              </div>
            </div>
          </form>
@ -218,7 +221,7 @@
          <hr />
          <p>
          <h4>Einstellungen GPS</h4>
-          <form action="\post.htm" method="POST" class="form-horizontal">
+          <form action="post.htm" method="POST" class="form-horizontal">
            <div class="form-group row">
              <label for="gpsbaud" class="control-label col-4">Baudrate</label>
              <div class="col-8">
@ -229,7 +232,7 @@
            </div>
            <div class="form-group row">
              <div class="offset-4 col-8">
-                <button name="gpssave" type="submit" class="btn btn-primary">Speichern</button>
+                <button name="gpssave" type="submit" class="btn btn-outline-primary">Speichern</button>
              </div>
            </div>
          </form>
@ -246,32 +249,32 @@
        <p>
        <form action="post.htm" method="POST" class="form-horizontal">
          <div class="form-group row">
-            <label for="lubedistancenormal" class="control-label col-4">Modus:normal</label>
+            <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"
                  class="form-control" required="required">
-                  <div class="input-group-append">
-                    <span class="input-group-text">m</span>
-                  </div>
+                <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">Modus:rain</label>
+            <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"
                  class="form-control" required="required">
-                  <div class="input-group-append">
-                    <span class="input-group-text">m</span>
-                  </div>
+                <div class="input-group-append">
+                  <span class="input-group-text">m</span>
+                </div>
              </div>
            </div>
          </div>
          <div class="form-group row">
            <div class="offset-4 col-8">
-              <button name="oilsave" type="submit" class="btn btn-primary">Speichern</button>
+              <button name="oilsave" type="submit" class="btn btn-outline-primary">Speichern</button>
            </div>
          </div>
        </form>
@ -285,16 +288,16 @@
        <hr />
        <p>
        <h4>&Ouml;lvorrat</h4>
-        <form action="\post.htm" method="POST" class="form-horizontal">
+        <form action="post.htm" method="POST" class="form-horizontal">
          <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" name="tankcap" value="%TANK_CAPACITY%" type="text" class="form-control"
                  required="required">
-                  <div class="input-group-append">
-                    <span class="input-group-text">ml</span>
-                  </div>
+                <div class="input-group-append">
+                  <span class="input-group-text">ml</span>
+                </div>
              </div>
            </div>
          </div>
@ -304,9 +307,9 @@
              <div class="input-group">
                <input id="tankwarn" name="tankwarn" value="%TANK_REMIND%" type="text" class="form-control"
                  required="required">
-                  <div class="input-group-append">
-                    <span class="input-group-text">&#37;</span>
-                  </div>
+                <div class="input-group-append">
+                  <span class="input-group-text">&#37;</span>
+                </div>
              </div>
            </div>
          </div>
@ -316,9 +319,9 @@
              <div class="input-group">
                <input id="pumppulse" name="pumppulse" value="%AMOUNT_PER_DOSE%" type="text" class="form-control"
                  required="required">
-                  <div class="input-group-append">
-                    <span class="input-group-text">µl</span>
-                  </div>
+                <div class="input-group-append">
+                  <span class="input-group-text">µl</span>
+                </div>
              </div>
            </div>
          </div>
@ -336,8 +339,8 @@
          </div>
          <div class="form-group row">
            <div class="offset-4 col-8 row">
-              <button name="oilsave" type="submit" class="btn btn-primary">Speichern</button>
-              <button name="resettank" type="submit" class="btn btn-primary">Tank zurücksetzen</button>
+              <button name="oilsave" type="submit" class="btn btn-outline-primary">Speichern</button>
+              <button name="resettank" type="submit" class="btn btn-outline-primary ml-2">Tank zurücksetzen</button>
            </div>
          </div>
        </form>
@ -345,7 +348,7 @@
        <hr />
        <p>
        <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">
            <label for="purgepulse" class="control-label col-4">Entl&uuml;ftung Dosierung</label>
            <div class="col-8">
@ -359,8 +362,8 @@
          </div>
          <div class="form-group row">
            <div class="offset-4 col-8 row">
-              <button name="maintsave" type="submit" class="btn btn-primary">Speichern</button>
-              <button name="purgenow" type="submit" class="btn btn-primary">Entlüftung starten</button>
+              <button name="maintsave" type="submit" class="btn btn-outline-primary">Speichern</button>
+              <button name="purgenow" type="submit" class="btn btn-outline-primary ml-2">Entlüftung starten</button>
            </div>
          </div>
        </form>
@ -368,7 +371,10 @@
        <hr />
        <h4>EEPROM formatieren</h4>
        <p>
-        <div class="alert alert-warning">
+        <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>
          Das Formatieren der EEPROM-Bereiche sollte nur ausgeführt werden wenn es unbedingt erforderlich ist!
          Hierdurch werden alle Einstellungen zurück gesetzt bzw. alle Betriebsdaten gehen verloren.
@ -395,7 +401,7 @@
          </div>
          <div class="form-group row">
            <div class="offset-4 col-8">
-              <button name="reset_ee_btn" type="submit" class="btn btn-primary">EEPROM formatieren</button>
+              <button name="reset_ee_btn" type="submit" class="btn btn-outline-primary">EEPROM formatieren</button>
            </div>
          </div>
        </form>
@ -536,10 +542,6 @@
        <p>
        <h4>Firmware-Update</h4>
        <form method='POST' action='/doUpdate' enctype='multipart/form-data'>
-
-
-
-
          <div class="input-group">
            <div class="input-group-prepend">
              <span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
@ -549,12 +551,6 @@
              <label class="custom-file-label" for="fw-update-file">Choose file</label>
            </div>
          </div>
-
-
-
-
-
-
        </form>
        </p>
      </div>
@ -564,16 +560,16 @@
  </main>

  <!-- Footer -->
-  <footer class="navbar-default navbar-fixed-bottom">
-    <div class="container-fluid">
-      <!-- Copyright -->
-      <div class="col text-center">
-        © 2022 Copyright:
-        <a class="text-reset fw-bold" href="https://eventronics.de/">Marcel Peterkau</a>
+
+  <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">© 2022 - 
+          <a class="text-reset fw-bold" href="https://eventronics.de/">Marcel Peterkau</a></span>
      </div>
-      <!-- Copyright -->
    </div>
  </footer>
+
  <!-- Footer -->

  <script>
--- a/Software/data_src/static/css/custom.css
+++ b/Software/data_src/static/css/custom.css
@ -1,5 +1,4 @@
 /*! Themestr.app `Darkster` Bootstrap 4.3.1 theme */
-@import url(https://fonts.googleapis.com/css?family=Comfortaa:200,300,400,700);

 /*! Import Bootstrap 4 variables */
 /*!
--- a/Software/data_src/static/css/tweaks.css
+++ b/Software/data_src/static/css/tweaks.css
@ -1,5 +1,14 @@
+@font-face {
+    font-family: 'Comfortaa';
+    font-style: normal;
+    font-weight: 300;
+    src: url(../fonts/comfortaa.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+
 body {
    padding-top: 70px;
+    margin-bottom: 56px;
 }

 hr {
@ -7,4 +16,5 @@ hr {
    border-width: 0;
    color: gray;
    background-color: gray
-}
+}
+
--- a/Software/data_src/static/fonts/comfortaa.woff2
+++ b/Software/data_src/static/fonts/comfortaa.woff2
--- a/Software/data_src/version
+++ b/Software/data_src/version
@ -1 +1 @@
-1
+1.01
--- a/Software/prepare_littlefs.py
+++ b/Software/prepare_littlefs.py
@ -44,7 +44,7 @@ def remove_prefix(text, prefix):

 def gzip_webfiles(source, target, env):
    # Filetypes to compress
-    filetypes_to_gzip = ['.css', '.png', '.js', '.ico']
+    filetypes_to_gzip = ['.css', '.png', '.js', '.ico', '.woff2']
    print('\nGZIP: Starting gzip-Process for LittleFS-Image...\n')
    data_src_dir_path = os.path.join(env.get('PROJECT_DIR'), 'data_src')
    data_dir_path = env.get('PROJECT_DATA_DIR')
--- a/Software/src/globals.h
+++ b/Software/src/globals.h
@ -35,7 +35,7 @@ typedef struct Globals_s
  uint16_t purgePulses = 0;
  eEERequest requestEEAction = EE_IDLE;
  char DeviceName[33];
-  char FlashVersion[5];
+  char FlashVersion[10];
  uint16_t eePersistanceAdress;
  uint8_t TankPercentage;
  bool hasDTC;
--- a/Software/src/webui.cpp
+++ b/Software/src/webui.cpp
@ -155,7 +155,7 @@ String processor(const String &var)
          temp = temp + "info";
          break;
        }
-        temp = temp + "_black.png></td><td>";
+        temp = temp + ".png></td><td>";

        if (DTCStorage[i].active == DTC_ACTIVE)
          temp = temp + "active";
Author	SHA1	Message	Date
Marcel Peterkau	e04351931b	Format-Tweaks on WebUI	2022-08-23 00:48:42 +02:00
Marcel Peterkau	da19ebcc09	changed FlashVersion and incereased Buffer-Size	2022-08-23 00:48:00 +02:00
Marcel Peterkau	eaf2c9d8a8	DTC-Icon-fix	2022-08-23 00:12:03 +02:00
Marcel Peterkau	9072f2b3e2	added Google-Based Font locally	2022-08-23 00:11:44 +02:00
 @ -1 +1 @@
 
 .01