made video widget and esc widget the same size on 8, also made sure it scales for > 4 esc's

Author: Matthew-Dobson

gcs/electron/main.ts

@@ -39,7 +39,6 @@ import registerVibeStatusIPC, {
   destroyVibeStatusWindow,
 } from "./modules/vibeStatusWindow"
 import registerVideoIPC, { destroyVideoWindow } from "./modules/videoWindow"
-import registerEscIPC, { destroyEscWindow } from "./modules/escWindow"
 import { readParamsFile } from "./utils/paramsFile"
 import registerGraphWindowIPC, {
   destroyAllGraphWindows,
@@ -274,7 +273,6 @@ function createWindow() {
   })
 
   registerVideoIPC(win)
-  registerEscIPC(win)
   registerAboutIPC()
   registerLinkStatsIPC()
   registerEkfStatusIPC()
@@ -465,7 +463,6 @@ function startBackend() {
 
 function closeWindows() {
   destroyVideoWindow()
-  destroyEscWindow()
   destroyAboutWindow()
   destroyLinkStatsWindow()
   destroyEkfStatusWindow()

gcs/src/components/dashboard/EscTelemetryWidget.jsx

@@ -1,14 +1,9 @@
 /*
-  Floating ESC telemetry widget (same positioning + UI pattern as VideoWidget)
+  Floating ESC telemetry widget (row-positioned like VideoWidget)
 */
 import { useMemo, useState } from "react"
 import { ActionIcon, Text } from "@mantine/core"
-import {
-  IconBolt,
-  IconMaximize,
-  IconMinus,
-  IconResize,
-} from "@tabler/icons-react"
+import { IconBolt, IconMaximize, IconMinus, IconResize } from "@tabler/icons-react"
 import { useSelector } from "react-redux"
 import GetOutsideVisibilityColor from "../../helpers/outsideVisibility"
 import { selectEscTelemetry } from "../../redux/slices/droneInfoSlice"
@@ -32,12 +27,7 @@ function EscTile({ esc }) {
   return (
     <div className="rounded-md border border-falcongrey-700 bg-falcongrey-900 p-2">
       <div className="flex flex-row items-center justify-between mb-1">
-        <div className="text-slate-200 text-xs font-semibold">
-          ESC {esc.escId}
-        </div>
-        <div className="text-slate-500 text-[10px]">
-          {esc.timestamp ? new Date(esc.timestamp).toLocaleTimeString() : "—"}
-        </div>
+        <div className="text-slate-200 text-xs font-semibold">ESC {esc.escId}</div>
       </div>
 
       <div className="flex flex-col gap-y-0.5">
@@ -49,10 +39,6 @@ function EscTile({ esc }) {
           <div className="text-slate-500 text-[10px]">A</div>
           <div className="text-slate-200 text-xs">{fmt(esc.current, 2)}</div>
         </div>
-        <div className="flex flex-row items-center justify-between">
-          <div className="text-slate-500 text-[10px]">V</div>
-          <div className="text-slate-200 text-xs">{fmt(esc.voltage, 2)}</div>
-        </div>
         <div className="flex flex-row items-center justify-between">
           <div className="text-slate-500 text-[10px]">°C</div>
           <div className="text-slate-200 text-xs">{fmtTemp(esc.temperature)}</div>
@@ -62,31 +48,54 @@ function EscTile({ esc }) {
   )
 }
 
-export default function EscTelemetryWidget({ telemetryPanelWidth }) {
-  const escs = useSelector(selectEscTelemetry)
+export default function EscTelemetryWidget({
+  telemetryPanelWidth, // unused now, kept so your callsites don’t break
+  onMaximizedChange,
+}) {
+  //const escs = useSelector(selectEscTelemetry)
+  const realEscs = useSelector(selectEscTelemetry)
+
+  const escs = Array.from({ length: 8 }).map((_, i) => ({
+    escId: i + 1,
+    rpm: Math.floor(Math.random() * 6000),
+    current: (Math.random() * 20).toFixed(2),
+    temperature: Math.floor(30 + Math.random() * 20)
+  }))
 
   const [isMaximized, setIsMaximized] = useState(false)
   const [scale, setScale] = useState(1)
 
-  const dimensions = useMemo(() => {
-    const baseWidth = 350
-    const width = baseWidth * scale
-    // make it a bit taller than video default so 2 rows of tiles fit nicely
-    const height = Math.round((197 * 1.15) * scale)
-    return { width, height }
-  }, [scale])
+  const setMaximized = (next) => {
+    setIsMaximized(next)
+    onMaximizedChange?.(next)
+  }
 
   const hasAnyData =
     Array.isArray(escs) &&
     escs.some(
       (e) =>
         e &&
-        (e.rpm != null ||
-          e.current != null ||
-          e.voltage != null ||
-          e.temperature != null),
+        (e.rpm != null || e.current != null || e.temperature != null),
     )
 
+  const dimensions = useMemo(() => {
+    const baseWidth = 350
+    const width = baseWidth * scale
+
+    const cols = 4
+    const count = Array.isArray(escs) ? escs.length : 0
+    const rows = Math.max(1, Math.ceil(count / cols))
+
+    const tileH = 74 * scale
+    const gapH = 8 * scale
+    const paddingH = 32 * scale
+
+    const height = Math.round(rows * tileH + (rows - 1) * gapH + paddingH)
+    const clampedHeight = Math.max(180 * scale, Math.min(420 * scale, height))
+
+    return { width, height: clampedHeight }
+  }, [scale, escs])
+
   function handleResizeStart(e) {
     const startX = e.clientX
     const startScale = scale
@@ -111,17 +120,23 @@ export default function EscTelemetryWidget({ telemetryPanelWidth }) {
   // Minimized view
   if (!isMaximized) {
     return (
-      <div className="rounded-md" style={{ background: GetOutsideVisibilityColor() }}>
+      <div
+        className="rounded-md"
+        style={{ background: GetOutsideVisibilityColor() }}
+      >
         <div className="p-2 flex items-center gap-2">
-          <IconBolt size={16} className={hasAnyData ? "text-slate-200" : "text-slate-500"} />
+          <IconBolt
+            size={16}
+            className={hasAnyData ? "text-slate-200" : "text-slate-500"}
+          />
           <Text size="sm" className="truncate max-w-[150px]">
             {hasAnyData ? "ESC telemetry" : "No ESC telemetry"}
           </Text>
 
           <ActionIcon
             size="sm"
             variant="subtle"
-            onClick={() => setIsMaximized(true)}
+            onClick={() => setMaximized(true)}
             className="text-slate-400 hover:text-slate-200"
             title="Maximize ESC widget"
           >
@@ -132,21 +147,18 @@ export default function EscTelemetryWidget({ telemetryPanelWidth }) {
     )
   }
 
-  // Full view
+  // Full view (make it stretch nicely when parent uses items-stretch)
   return (
-    <div
-        className="min-w-[350px] rounded-md"
-        style={{ background: GetOutsideVisibilityColor() }}
-    >
-      <div className="p-2">
+    <div className="min-w-[350px] min-h-[225px] rounded-md flex flex-col" style={{ background: GetOutsideVisibilityColor() }}>
+      <div className="p-2 h-full flex flex-col">
         <div className="flex items-center justify-between mb-2">
           <Text>ESC telemetry</Text>
 
           <div className="flex items-center gap-1">
             <ActionIcon
               size="sm"
               variant="subtle"
-              onClick={() => setIsMaximized(false)}
+              onClick={() => setMaximized(false)}
               className="text-slate-400 hover:text-slate-200"
               title="Minimize ESC widget"
             >
@@ -166,7 +178,7 @@ export default function EscTelemetryWidget({ telemetryPanelWidth }) {
         </div>
 
         <div
-          className="rounded overflow-hidden mx-auto"
+          className="rounded overflow-hidden mx-auto flex-1"
           style={{
             width: `${dimensions.width}px`,
             height: `${dimensions.height}px`,

gcs/src/components/dashboard/videoWidget.jsx

@@ -396,10 +396,7 @@ export default function VideoWidget({ telemetryPanelWidth }) {
 
       {/* Full view */}
       {isMaximized && (
-        <div
-          className={`min-w-[350px] rounded-md ${isPoppedOut ? "hidden" : ""}`}
-          style={{ background: GetOutsideVisibilityColor() }}
-        >
+        <div className="min-w-[350px] min-h-[253px] rounded-md flex flex-col" style={{ background: GetOutsideVisibilityColor() }}>
           <div className="p-2">
             <div className="flex items-center justify-between mb-2">
               <Text>{videoSource?.name || "No video selected"}</Text>

gcs/src/dashboard.jsx

@@ -29,7 +29,8 @@ import { ResizableBox } from "react-resizable"
 
 // Redux
 import { useDispatch, useSelector } from "react-redux"
-import { selectConnectedToDrone } from "./redux/slices/droneConnectionSlice"
+import { selectConnectedToDrone,
+        selectVideoMaximized } from "./redux/slices/droneConnectionSlice"
 import {
   selectAircraftTypeString,
   selectBatteryData,
@@ -105,6 +106,11 @@ export default function Dashboard() {
 
   const secondaryGpsFixLabel = GPS_FIX_TYPES[gps2.fixType]
 
+  const videoMaximized = useSelector(selectVideoMaximized)
+  const [escMaximized, setEscMaximized] = useState(false)
+
+  const stretchWidgets = videoMaximized || escMaximized
+
   // Telemetry panel sizing
   const [telemetryPanelSize, setTelemetryPanelSize] = useLocalStorage({
     key: "telemetryPanelSize",
@@ -342,6 +348,7 @@ export default function Dashboard() {
           <EscTelemetryWidget telemetryPanelWidth={telemetryPanelSize.width} />
         </div>
 
+
         <div className="absolute bottom-0 right-0 z-20">
           <ResizableBox
             height={messagesPanelSize.height}

gcs/src/redux/slices/droneInfoSlice.js

@@ -432,6 +432,44 @@ export const selectAttitudeDeg = createSelector(
   },
 )
 
+export const selectEscTelemetry = createSelector(
+  [
+    droneInfoSlice.selectors.selectEscTelemetry1To4,
+    droneInfoSlice.selectors.selectEscTelemetry5To8,
+  ],
+  (esc1To4, esc5To8) => {
+    const escs = []
+
+    function pushEscPacket(packet, baseIndex) {
+      if (!packet) return
+
+      // Most fields are arrays of length 4, but guard anyway
+      const rpm = packet.rpm ?? []
+      const count = Math.min(4, rpm.length)
+
+      for (let i = 0; i < count; i++) {
+        escs.push({
+          escId: baseIndex + i + 1,
+          rpm: packet.rpm?.[i] ?? null,
+          current: packet.current?.[i] ?? null,
+          voltage: packet.voltage?.[i] ?? null,
+          temperature: packet.temperature?.[i] ?? null,
+          totalcurrent: packet.totalcurrent?.[i] ?? null,
+          timestamp: packet.timestamp ?? null,
+        })
+      }
+    }
+
+    // ESC 1-4
+    pushEscPacket(esc1To4, 0)
+
+    // ESC 5-8
+    pushEscPacket(esc5To8, 4)
+
+    return escs
+  },
+)
+
 export const selectAlt = createSelector(
   [droneInfoSlice.selectors.selectGPS],
   ({ alt, relativeAlt }) => {
@@ -501,44 +539,6 @@ export const calculateGpsTrackHeadingThunk = () => (dispatch, getState) => {
   }
 }
 
-export const selectEscTelemetry = createSelector(
-  [
-    droneInfoSlice.selectors.selectEscTelemetry1To4,
-    droneInfoSlice.selectors.selectEscTelemetry5To8,
-  ],
-  (esc1To4, esc5To8) => {
-    const escs = []
-
-    function pushEscPacket(packet, baseIndex) {
-      if (!packet) return
-
-      // Most fields are arrays of length 4, but guard anyway
-      const rpm = packet.rpm ?? []
-      const count = Math.min(4, rpm.length)
-
-      for (let i = 0; i < count; i++) {
-        escs.push({
-          escId: baseIndex + i + 1,
-          rpm: packet.rpm?.[i] ?? null,
-          current: packet.current?.[i] ?? null,
-          voltage: packet.voltage?.[i] ?? null,
-          temperature: packet.temperature?.[i] ?? null,
-          totalcurrent: packet.totalcurrent?.[i] ?? null,
-          timestamp: packet.timestamp ?? null,
-        })
-      }
-    }
-
-    // ESC 1-4
-    pushEscPacket(esc1To4, 0)
-
-    // ESC 5-8
-    pushEscPacket(esc5To8, 4)
-
-    return escs
-  },
-)
-
 export const {
   selectFlightSwVersion,
   selectAttitude,

node_modules/.yarn-integrity

@@ -0,0 +1,2 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1