Added kiosk mode notes, switched to a better behaving bootswatch

software/docs/guides/Kiosk Mode.md

@@ -0,0 +1,47 @@
+# Kiosk Mode Setup
+
+Assuming coming from a relatively clean OS, and the base station is installed.
+
+## Raspberry Pi
+
+Assuming coming from a clean `raspbian-lite` install.
+
+Sources:
+ - https://reelyactive.github.io/diy/pi-kiosk/
+
+ 1. Install the X Window System (X11):
+    1. `sudo apt-get install --no-install-recommends xserver-xorg`
+    2. `sudo apt-get install --no-install-recommends xinit`
+    3. `sudo apt-get install --no-install-recommends x11-xserver-utils`
+ 2. Install Chromium & kiosk dependencies
+    1. `sudo apt-get install chromium-browser`
+    2. `sudo apt-get install matchbox-window-manager xautomation unclutter`
+    3. (optionally, for color emojis) `sudo apt-get install fonts-noto-color-emoji`
+ 3. Create the kiosk startup script (`~/kiosk.sh`):
+    ```bash
+    #!/bin/sh
+    xset -dpms     # disable DPMS (Energy Star) features.
+    xset s off     # disable screen saver
+    xset s noblank # don't blank the video device
+    matchbox-window-manager -use_titlebar no &
+    unclutter &    # hide X mouse cursor unless mouse activated
+    chromium-browser --display=:0 --kiosk --incognito --window-position=0,0 http://localhost
+    ```
+    (Ensure script is executable with following command: `chmod 755 ~/kiosk.sh`)
+ 4. Add the kiosk script to `.bashrc`:
+
+    Add the following:
+    `xinit /home/pi/kiosk -- vt$(fgconsole)`
+ 5. Misc setup in `raspi-config`:
+    - dssd
+
+
+
+
+## Ubuntu
+
+TODO
+
+## Fedora
+
+TODO

software/open-qm-base-station/src/main/resources/templates/webui/mainWebPageTemplate.html

@@ -26,7 +26,7 @@
 
     <!-- CSS -->
     <link rel="stylesheet" href="/res/css/bootstrap-adjust.css">
-    <link href="/lib/bootstrap/bootstrap-5.1.3-dist/bootswatch.litera.min.css" rel="stylesheet">
+    <link href="/lib/bootstrap/bootstrap-5.1.3-dist/bootswatch.yeti.min.css" rel="stylesheet">
     <link rel="stylesheet" href="/lib/fontawesome-free-5.15.4-web/css/all.css">
     <link rel="stylesheet" href="/lib/spin.js/spin.css">
     <link rel="stylesheet" href="/res/css/main.css">
@@ -106,7 +106,7 @@
                 <div class="input-group">
                     <input class="form-control" id="navSearchInput" type="text" placeholder="Search" name="name">
                     <button class="btn btn-secondary" type="submit">Search</button>
-                    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" id="navSearchSelectButton">Items</button>
+                    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" id="navSearchSelectButton">Items</button>
                     <ul class="dropdown-menu dropdown-menu-end">
                         <li><button type="button" class="dropdown-item btn btn-link" onclick="setNavSearch('/items', 'name', this);">Items</button></li>
                         <li><button type="button" class="dropdown-item btn btn-link" onclick="setNavSearch('/storage', 'label', this);">Storage Blocks</button></li>
@@ -161,7 +161,7 @@ <h1>{#if titleIcon??}<i class="fas fa-{titleIcon}"></i> {/if}{title}</h1>
             Version {config:['service.version']} <a href="{config:['service.gitLink']}" target="_blank">Github</a><br/>
             <small class="fw-lighter fst-italic text-muted">
                 <div class="d-grid gap-2">
-                    <button class="btn btn-outline-secondary btn-sm" type="button" data-bs-toggle="collapse" data-bs-target="#pageLoadInfoCollapse" aria-expanded="false" aria-controls="pageLoadInfoCollapse">
+                    <button class="btn btn-outline-success btn-sm" type="button" data-bs-toggle="collapse" data-bs-target="#pageLoadInfoCollapse" aria-expanded="false" aria-controls="pageLoadInfoCollapse">
                         Page Loaded: <span id="pageLoadTimestamp">{generateDatetime.format(dateTimeFormatter)}</span> (Server time)
                     </button>
                 </div>