mobile: fix mobile view

This uses `dvh` and `dvw` rather than `vh` and `vw`, which excludes
things like the address bar and the keyboard.

Signed-off-by: Sean Cross <sean@xobs.io>

mock/webpack.farpatch.ts

@@ -48,11 +48,11 @@ function getTasks(_request: Request, response: Response) {
 
 function getVoltages(_request: Request, response: Response) {
   var voltages: { [key: string]: number } = {
-    '3.3V': 3.3,
-    'Target': 1.8,
-    'USB': 5.02,
-    'Debug': 5.01,
-    'EXT': 3.7,
+    'system': 3.3 + Math.random() * 0.1 - 0.05,
+    'target': 1.8 + Math.random() * 0.1 - 0.05,
+    'usb': 5.0 + Math.random() * 0.1 - 0.05,
+    'debug': 5.0 + Math.random() * 0.1 - 0.05,
+    'ext': 3.7 + Math.random() * 0.1 - 0.05,
   };
   response.send(voltages);
 }

src/index.ts

@@ -53,6 +53,15 @@ function setupNavItem(widget: FarpatchWidget) {
     }, false);
 }
 
+// export function resizeViewport() {
+//     // First we get the viewport height and we multiple it by 1% to get a value for a vh unit
+//     let vh = window.innerHeight * 0.01;
+//     // Then we set the value in the --vh custom property to the root of the document
+//     document.documentElement.style.setProperty('--vh', `${vh}px`);
+// }
+
+// document.addEventListener('resize', resizeViewport, false);
+
 document.addEventListener('DOMContentLoaded', function () {
     // Populate the page
     var body = document.getElementsByTagName("body")[0];
@@ -108,4 +117,6 @@ document.addEventListener('DOMContentLoaded', function () {
 
     currentWidget = farpatchWidgets[0];
     activateWidget(farpatchWidgets[0]);
+
+    // resizeViewport();
 }, false);

src/interface/dashboard.ts

@@ -1,5 +1,7 @@
 import { FarpatchWidget, makeNavView as makeNavItem } from "../interfaces";
 
+var DASHBOARD_UPDATE_TIMER: number | null = null;
+
 class DashboardItem {
   id: string;
   name: string;
@@ -19,6 +21,7 @@ class DashboardItem {
 
     var itemValue: HTMLElement = document.createElement("span");
     itemValue.classList.add("dashboard-item-value");
+    itemValue.id = 'dashboard-item-value-' + this.id;
     itemValue.innerHTML = this.value;
 
     field.appendChild(itemTitle);
@@ -80,7 +83,7 @@ export class DashboardWidget implements FarpatchWidget {
         new DashboardItem("system-voltage", "System", "3.3V"),
         new DashboardItem("target-voltage", "Target", "1.8V"),
         new DashboardItem("usb-voltage", "USB", "5.0V"),
-        new DashboardItem("extra-voltage", "Extra", "3.8V"),
+        new DashboardItem("ext-voltage", "Extra", "3.8V"),
       ]),
       new DashboardSection("network", "Network", [
         new DashboardItem("ip-address", "IP Address", "10.0.0.5"),
@@ -115,10 +118,44 @@ export class DashboardWidget implements FarpatchWidget {
   onFocus(element: HTMLElement): void {
     console.log("Displaying Dashboard Widget");
     element.appendChild(this.view);
+
+    DASHBOARD_UPDATE_TIMER = window.setInterval(() => {
+      console.log("Updating Dashboard Widget");
+      fetch("/fp/voltages").then((response) => {
+        if (!response.ok) {
+          throw new Error("Network response was not ok");
+        }
+        response.json().then((json) => {
+          if (!json) {
+            throw new Error("Response was not JSON");
+          }
+
+          var voltage_fields = [
+            "system",
+            "target",
+            "usb",
+            "debug",
+            "ext",
+          ];
+          for (var i = 0; i < voltage_fields.length; i++) {
+            var field = document.getElementById("dashboard-item-value-" + voltage_fields[i] + "-voltage");
+            var voltage = json[voltage_fields[i]];
+            if (field && typeof voltage === "number") {
+              field.innerText = voltage.toPrecision(3) + "V";
+            }
+          }
+        });
+      })
+    }, 1000);
   }
 
   onBlur(element: HTMLElement): void {
     console.log("Archiving Dashboard Widget");
     element.removeChild(this.view);
+
+    if (DASHBOARD_UPDATE_TIMER !== null) {
+      window.clearInterval(DASHBOARD_UPDATE_TIMER);
+      DASHBOARD_UPDATE_TIMER = null;
+    }
   }
 }

static/css/desktop.css

@@ -51,7 +51,7 @@ main {
 	padding: 0rem;
 	/* SIDEBAR WIDTH  */
 	margin-left: 10rem;
-	height: 100vh;
+	height: 100dvh;
 	transition: margin-left 500ms ease;
 
 }
@@ -63,7 +63,7 @@ main {
 
 .main-content {
 	display: none;
-	height: 100vh;
+	height: 100dvh;
 }
 
 .main-content-active {
@@ -76,7 +76,7 @@ main {
 	width: 10rem;
 	left: 0;
 	background-color: white;
-	height: 100vh;
+	height: 100dvh;
 	transition: width 500ms ease;
 	overflow: overlay;
 }
@@ -92,7 +92,7 @@ main {
 	margin: 0;
 	display: flex;
 	flex-direction: column;
-	height: 100vh;
+	height: 100dvh;
 }
 
 .sidenav-item {
@@ -144,7 +144,7 @@ main {
 }
 
 .dashboard-view {
-	max-width: 89vw;
+	max-width: 89dvw;
 	padding-left: 1rem;
 	padding-right: 1rem;
 	display: grid;

static/css/mobile.css

@@ -1,23 +1,28 @@
 /* Small screen  */
 @media only screen and (max-width: 600px) {
     main {
-        /* BOTTOM BAR HEIGHT */
-        height: calc(100vh - 5rem);
+        height: calc(100dvh - 5rem);
+        /* height: calc(calc(var(--vh, 1dvh) * 100) - 5rem); */
         margin: 0;
         padding: 0;
     }
 
     .main-content {
-        height: calc(100vh - 5rem);
+        height: calc(100dvh - 5rem);
+        /* height: calc(calc(var(--vh, 1dvh) * 100) - 5rem); */
     }
 
     .main-sidebar-rail {
         margin-left: 0;
     }
 
+    .dashboard-view {
+        padding-top: 1rem;
+    }
+
     .sidenav {
         bottom: 0;
-        width: 100vw;
+        width: 100dvw;
         /* BOTTOM BAR HEIGHT */
         height: 5rem;
         align-items: flex-start;
@@ -26,7 +31,7 @@
     }
 
     .sidenav-rail {
-        width: 100vw;
+        width: 100dvw;
         transition: none;
     }
 

webpack.config.ts

@@ -35,6 +35,7 @@ module.exports = {
         path: path.resolve(__dirname, OUTPUT),
     },
     devServer: {
+        allowedHosts: 'all',
         static: {
             directory: path.resolve(__dirname, OUTPUT),
         },