diff --git a/mock/webpack.farpatch.ts b/mock/webpack.farpatch.ts index fe146ff..370a01b 100644 --- a/mock/webpack.farpatch.ts +++ b/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); } diff --git a/src/index.ts b/src/index.ts index 6f598ec..f348ba8 100644 --- a/src/index.ts +++ b/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); diff --git a/src/interface/dashboard.ts b/src/interface/dashboard.ts index 74fe21c..cace109 100644 --- a/src/interface/dashboard.ts +++ b/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; + } } } diff --git a/static/css/desktop.css b/static/css/desktop.css index 44c590b..3cd9d0f 100644 --- a/static/css/desktop.css +++ b/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; diff --git a/static/css/mobile.css b/static/css/mobile.css index 24f8c52..981d0b9 100644 --- a/static/css/mobile.css +++ b/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; } diff --git a/webpack.config.ts b/webpack.config.ts index f7d87c0..d96a38b 100644 --- a/webpack.config.ts +++ b/webpack.config.ts @@ -35,6 +35,7 @@ module.exports = { path: path.resolve(__dirname, OUTPUT), }, devServer: { + allowedHosts: 'all', static: { directory: path.resolve(__dirname, OUTPUT), },