asterics · ChrisVeigl · Nov 4, 2024 · Jan 30, 2024 · Jan 30, 2024 · Jan 30, 2024
diff --git a/webgui/css/bootstrap-grid.css b/webgui/css/bootstrap-grid.css
diff --git a/webgui/css/bootstrap.css b/webgui/css/bootstrap.css
diff --git a/webgui/css/custom.css b/webgui/css/custom.css
@@ -39,7 +39,8 @@ a[data-tab] {
     font-size: 1em;
 }
 
-button, .button {
+button,
+.button {
     font-size: 1em;
     width: 100%;
     white-space: normal;
@@ -48,18 +49,22 @@ button, .button {
     background-color: #ebf2f5;
 }
 
-button:disabled, button:disabled div, label.disabled{
+button:disabled,
+button:disabled div,
+label.disabled {
     border-color: lightgray;
     color: gray;
     background-color: whitesmoke;
 }
 
-button:active, .button:active {
+button:active,
+.button:active {
     filter: brightness(1.5);
     box-shadow: 0 0 10px 2px #004562 !important;
 }
 
-button:disabled img, label.disabled img {
+button:disabled img,
+label.disabled img {
     filter: invert(0.5);
 }
 
@@ -99,7 +104,7 @@ br {
     color: red;
 }
 
-.text-center{
+.text-center {
     text-align: center;
 }
 
@@ -122,8 +127,8 @@ br {
 }
 
 .full-height {
-     height: 100%;
- }
+    height: 100%;
+}
 
 .full-width {
     width: 100%;
@@ -147,7 +152,7 @@ br {
     position: relative;
 }
 
-.float-left{
+.float-left {
     float: left;
 }
 
@@ -163,13 +168,14 @@ br {
     border-right: medium dotted darkgray;
 }
 
-#tab-puff-container span, #tab-puff-container label {
+#tab-puff-container span,
+#tab-puff-container label {
     background-color: white;
     white-space: normal;
 }
 
 label {
-    display:inline-block;
+    display: inline-block;
 }
 
 .cursorPosWrapper {
@@ -187,9 +193,32 @@ label {
     max-height: 350px;
 }
 
+@media (prefers-color-scheme: dark) {
+
+    /* This makes it so that within posVis it is inverted. */
+    /* ASK: Whether the colour is okay, in both modes (used to be blue). 1% is the best option for both, but the back-layer is not really visible then.*/
+    #posVis {
+        filter: invert(30%);
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    #tab-puff-container {
+        filter: invert(1%);
+    }
+
+    #tabVisBtnSipVis {
+        filter: invert(1%);
+    }
+
+    #fabi-logo {}
+
+}
+
 .color-lightcyan {
     background-color: #9be7ff;
 }
+
 .color-lightred {
     background-color: #FF7B61;
 }
@@ -198,8 +227,7 @@ label {
     background-color: #cceff9;
 }
 
-.center-div
-{
+.center-div {
     margin-right: auto;
     margin-left: auto;
 }
@@ -208,7 +236,8 @@ label {
     display: none;
 }
 
-button.selected, .custom-radio:checked ~ label {
+button.selected,
+.custom-radio:checked~label {
     border-width: 0.2em;
     border-color: #33C3F0;
     background-color: #cceff9;
@@ -218,7 +247,7 @@ button.selected, .custom-radio:checked ~ label {
     border-width: 0.25em;
     border-color: #33C3F0;
     background-color: #0D5F77;
-    box-shadow: black ;
+    box-shadow: black;
 }
 
 .custom-radio {
@@ -230,10 +259,10 @@ button.selected, .custom-radio:checked ~ label {
 .onlyscreenreader {
     display: block !important;
     position: absolute;
-    left:-9999px;
+    left: -9999px;
 }
 
 .btnTransparent {
     background-color: transparent;
     border: 1px solid #bbb;
-}
+}
diff --git a/webgui/index.html b/webgui/index.html
@@ -7,8 +7,10 @@
 <script>
     if (window.location.hostname.indexOf('fabi') > -1) {
         window.location.replace("./index_fabi.htm");
+
     } else if (window.location.hostname.indexOf('pad') > -1) {
         window.location.replace("./index_pad.htm");
+
     } else {
         window.location.replace("./index_fm.htm");
     }

diff --git a/webgui/index_fabi.htm b/webgui/index_fabi.htm
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <title>FABI Configuration</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -38,6 +39,7 @@
     <script src="js/adapter/wscomm.js"></script>
     <script src="js/adapter/mockcomm.js"></script>
 </head>
+
 <body>
     <div id="content">
     </div>
@@ -50,8 +52,10 @@
                 }
             });
         }
-        import {MainView} from "./js/ui/views/MainView.js";
+        import { MainView } from "./js/ui/views/MainView.js";
         MainView.init();
     </script>
+
 </body>
-</html>
+
+</html>
diff --git a/webgui/init.html b/webgui/init.html
@@ -25,20 +25,25 @@
         if (C.DEVICE_IS_FM) {
             constantsPath = './js_fm/constantsFM.js';
             C.CURRENT_DEVICE = "FLipMouse";
+
         } else if (C.DEVICE_IS_FABI) {
             constantsPath = './js_fabi/constantsFabi.js';
             C.CURRENT_DEVICE = "FABI";
+
         } else if (C.DEVICE_IS_FLIPPAD) {
             constantsPath = './js_pad/constantsPad.js';
             C.CURRENT_DEVICE = "FLipPad";
         }
 
         import('./js/constantsGeneric.js').then(() => {
-            return Promise.resolve();
-        }).then(() => {
+            return Promise.resolve(); // The Promise is returned once the module has been loaded. 
+
+        }).then(() => { // then acts like if, except that all get execeuted, as long as the promise is valid. Otherwise it would go in the catch block.
            return import(constantsPath);
+
         }).then(() => {
             return import('./js/ui/views/InitDeviceView.js');
+
         }).then(module => {
             document.title = C.CURRENT_DEVICE + L.translate(" Initialization //  Initialisierung");
             module.InitDeviceView.init();

diff --git a/webgui/js/adapter/mockcomm.js b/webgui/js/adapter/mockcomm.js
@@ -3,7 +3,7 @@ mock.deviceSlotNr = 0;
 mock.slotNames = ['mouse', 'test'];
 
 function MockCommunicator() {
-    let DEFAULT_CONFIGURATION = ['AT SC 0x00ffff','AT SB 2', 'AT AX 60', 'AT AY 60', 'AT DX 20', 'AT DY 20', 'AT MS 50', 'AT AC 50', 'AT TS 500', 'AT TP 525', 'AT WS 3', 'AT SP 700', 'AT SS 300', 'AT MM 1', 'AT GU 50', 'AT GD 50', 'AT GL 50', 'AT GR 50', 'AT RO 0', 'AT BT 1', 'AT BM 01', 'AT NE', 'AT BM 02', 'AT KP KEY_ESC', 'AT BM 03', 'AT NC', 'AT BM 04', 'AT KP KEY_UP', 'AT BM 05', 'AT KP KEY_DOWN', 'AT BM 06', 'AT KP KEY_LEFT', 'AT BM 07', 'AT KP KEY_RIGHT', 'AT BM 08', 'AT PL', 'AT BM 09', 'AT NC', 'AT BM 10', 'AT CR', 'AT BM 11', 'AT CA', 'AT BM 12', 'AT NC', 'AT BM 13', 'AT NC', 'AT BM 14', 'AT NC', 'AT BM 15', 'AT NC', 'AT BM 16', 'AT NC', 'AT BM 17', 'AT NC', 'AT BM 18', 'AT NC', 'AT BM 19', 'AT NC'];
+    let DEFAULT_CONFIGURATION = ['AT SC 0x00ffff', 'AT SB 2', 'AT AX 60', 'AT AY 60', 'AT DX 20', 'AT DY 20', 'AT MS 50', 'AT AC 50', 'AT TS 500', 'AT TP 525', 'AT WS 3', 'AT SP 700', 'AT SS 300', 'AT MM 1', 'AT GU 50', 'AT GD 50', 'AT GL 50', 'AT GR 50', 'AT RO 0', 'AT BT 1', 'AT BM 01', 'AT NE', 'AT BM 02', 'AT KP KEY_ESC', 'AT BM 03', 'AT NC', 'AT BM 04', 'AT KP KEY_UP', 'AT BM 05', 'AT KP KEY_DOWN', 'AT BM 06', 'AT KP KEY_LEFT', 'AT BM 07', 'AT KP KEY_RIGHT', 'AT BM 08', 'AT PL', 'AT BM 09', 'AT NC', 'AT BM 10', 'AT CR', 'AT BM 11', 'AT CA', 'AT BM 12', 'AT NC', 'AT BM 13', 'AT NC', 'AT BM 14', 'AT NC', 'AT BM 15', 'AT NC', 'AT BM 16', 'AT NC', 'AT BM 17', 'AT NC', 'AT BM 18', 'AT NC', 'AT BM 19', 'AT NC', 'AT BM 20', 'AT NC', 'AT BM 21', 'AT NC', 'AT BM 22', 'AT NC'];
     var VALUE_CONSTANT = 'VALUES:';
     var _valueHandler = null;
     var _invervalHandler = null;
@@ -28,35 +28,42 @@ function MockCommunicator() {
                 _invervalHandler = setInterval(function () {
                     if (L.isFunction(_valueHandler)) {
                         thiz.pressure += thiz.incrementP;
-                        thiz.x += thiz.incrementXY*getRandomInt(-5,5);
-                        thiz.y += thiz.incrementXY*(-1)*getRandomInt(-5,5);
-                        if(thiz.pressure > 550 || thiz.pressure < 450) {
+                        thiz.x += thiz.incrementXY * getRandomInt(-5, 5);
+                        thiz.y += thiz.incrementXY * (-1) * getRandomInt(-5, 5);
+                        if (thiz.pressure > 550 || thiz.pressure < 450) {
                             thiz.incrementP *= -1;
                         }
-                        if(thiz.y > 100 || thiz.y < -100 || thiz.x > 100 || thiz.x < -100) {
+                        if (thiz.y > 100 || thiz.y < -100 || thiz.x > 100 || thiz.x < -100) {
                             thiz.incrementXY *= -1;
                         }
-                        _valueHandler(`${VALUE_CONSTANT}${thiz.pressure},${getRandomInt(500,600)},${getRandomInt(500,600)},${getRandomInt(500,600)},${getRandomInt(500,600)},${thiz.x},${thiz.y},111,${mock.deviceSlotNr},10,10`);
+                        _valueHandler(`${VALUE_CONSTANT}${thiz.pressure},${getRandomInt(500, 600)},${getRandomInt(500, 600)},${getRandomInt(500, 600)},${getRandomInt(500, 600)},${thiz.x},${thiz.y},111,${mock.deviceSlotNr},10,10`);
                     }
                 }, 200);
+
             } else if (value.indexOf('AT ER') > -1) {
                 clearInterval(_invervalHandler);
-            } else if (value.indexOf('AT LA') > -1) {
+
+            } else if (value.indexOf('AT LA') > -1) { // LA = Load All. 
                 let defaultCmds = DEFAULT_CONFIGURATION.join('\n');
                 let cmds = 'Slot:mouse\n' + defaultCmds + '\n';
                 cmds = cmds + 'Slot:test\n' + defaultCmds + '\nEND';
                 resolve(cmds);
+
             } else if (value.indexOf('AT CA') > -1) {
                 thiz.x = 0;
                 thiz.y = 0;
+
             } else if (value.indexOf('AT LO') > -1) {
                 let slotName = value.replace('AT LO ', '');
                 mock.deviceSlotNr = mock.slotNames.indexOf(slotName);
                 resolve('OK');
-            } else if (value.indexOf('AT IL') > -1) {
+
+            } else if (value.indexOf('AT IL') > -1) { // IL = Lists all stored infrared command names.
                 resolve('IRCommand0:play\nIRCommand1:pause\nIRCommand2:stop');
+
             } else if (value.indexOf('AT ID') > -1) {
                 resolve('VERSION 3.14');
+
             } else if (value.indexOf('AT SA') > -1) {
                 resolve('OK');
             }
@@ -72,5 +79,5 @@ function getRandomInt(min, max) {
 }
 
 function getRandomInt2(factor) {
-    return Math.floor((Math.random() - Math.random())*factor);
+    return Math.floor((Math.random() - Math.random()) * factor);
 }