From e52798d4acf76b80d150efedea60d23bf1efe394 Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Sat, 1 Aug 2026 15:28:48 +0100
Subject: [PATCH] Enhance printer panels to handle offline state more
 effectively

- Added an `offline` prop to PrinterTemperaturePanel, PrinterMiscPanel, and PrinterPositionPanel components to manage state when printers are offline.
- Implemented useEffect hooks in each panel to reset relevant data when offline, ensuring accurate display of printer status.
- Updated ControlPrinter component to pass the `offline` state based on the printer's online status, improving user experience during offline scenarios.
---
 .../Production/Printers/ControlPrinter.jsx    |  2 ++
 .../Dashboard/common/PrinterMiscPanel.jsx     | 22 +++++++++++++--
 .../Dashboard/common/PrinterPositionPanel.jsx | 27 +++++++++++++++++--
 .../common/PrinterTemperaturePanel.jsx        | 17 ++++++++++--
 4 files changed, 62 insertions(+), 6 deletions(-)

diff --git a/src/components/Dashboard/Production/Printers/ControlPrinter.jsx b/src/components/Dashboard/Production/Printers/ControlPrinter.jsx
index 4c80fcc..00ae6ec 100644
--- a/src/components/Dashboard/Production/Printers/ControlPrinter.jsx
+++ b/src/components/Dashboard/Production/Printers/ControlPrinter.jsx
@@ -182,6 +182,7 @@ const ControlPrinter = ({ slicerIntegration = false }) => {
         >
           <PrinterTemperaturePanel
             id={printerId}
+            offline={!objectFormState.objectData?.online}
             disabled={
               !objectFormState.objectData?.online || objectFormState.loading
             }
@@ -243,6 +244,7 @@ const ControlPrinter = ({ slicerIntegration = false }) => {
         >
           <PrinterMiscPanel
             id={printerId}
+            offline={!objectFormState.objectData?.online}
             disabled={
               !objectFormState.objectData?.online || objectFormState.loading
             }
diff --git a/src/components/Dashboard/common/PrinterMiscPanel.jsx b/src/components/Dashboard/common/PrinterMiscPanel.jsx
index 0c49131..ca8311e 100644
--- a/src/components/Dashboard/common/PrinterMiscPanel.jsx
+++ b/src/components/Dashboard/common/PrinterMiscPanel.jsx
@@ -7,7 +7,12 @@ import merge from 'lodash/merge'
 
 const { Text } = Typography
 
-const PrinterMiscPanel = ({ id, showControls = true, disabled = false }) => {
+const PrinterMiscPanel = ({
+  id,
+  showControls = true,
+  disabled = false,
+  offline = true
+}) => {
   const { subscribeToObjectEvent, connected, sendObjectAction } =
     useContext(ApiServerContext)
   const controlsDisabled = disabled || !connected
@@ -35,6 +40,18 @@ const PrinterMiscPanel = ({ id, showControls = true, disabled = false }) => {
   const [lcdBrightness, setLcdBrightness] = useState(0)
   const [beeperValue, setBeeperValue] = useState(0)
 
+  useEffect(() => {
+    if (offline) {
+      setMiscData({
+        fan: { speed: 0, target: 0 },
+        lcdBacklight: { brightness: 0 },
+        beeper: { value: 0 },
+        filamentSensor: { enabled: false, filamentDetected: false },
+        coolingFan: { speed: 0 }
+      })
+    }
+  }, [offline])
+
   useEffect(() => {
     if (id && connected == true) {
       const miscEventUnsubscribe = subscribeToObjectEvent(
@@ -193,7 +210,8 @@ const PrinterMiscPanel = ({ id, showControls = true, disabled = false }) => {
 PrinterMiscPanel.propTypes = {
   id: PropTypes.string.isRequired,
   showControls: PropTypes.bool,
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  offline: PropTypes.bool
 }
 
 export default PrinterMiscPanel
diff --git a/src/components/Dashboard/common/PrinterPositionPanel.jsx b/src/components/Dashboard/common/PrinterPositionPanel.jsx
index f46c61b..1233754 100644
--- a/src/components/Dashboard/common/PrinterPositionPanel.jsx
+++ b/src/components/Dashboard/common/PrinterPositionPanel.jsx
@@ -34,7 +34,8 @@ const PrinterPositionPanel = ({
   id,
   showControls = true,
   showMoreInfo = true,
-  disabled = false
+  disabled = false,
+  offline = true
 }) => {
   const { subscribeToObjectEvent, connected, sendObjectAction } =
     useContext(ApiServerContext)
@@ -55,6 +56,26 @@ const PrinterPositionPanel = ({
     minCruiseRatio: 0
   })
 
+  useEffect(() => {
+    if (offline) {
+      setPositionData({
+        speedFactor: 1.0,
+        speed: 100,
+        extrudeFactor: 1.0,
+        absoluteCoordinates: true,
+        absoluteExtrude: false,
+        homingOrigin: [0.0, 0.0, 0.0, 0.0],
+        toolheadPosition: [0.0, 0.0, 0.0, 0.0],
+        gcodePosition: [0.0, 0.0, 0.0, 0.0],
+        livePosition: [0.0, 0.0, 0.0, 0.0],
+        maxVelocity: 1000,
+        maxAcceleration: 1000,
+        squareCornerVelocity: 100,
+        minCruiseRatio: 0
+      })
+    }
+  }, [offline])
+
   useEffect(() => {
     if (id && connected == true) {
       const motionEventUnsubscribe = subscribeToObjectEvent(
@@ -73,6 +94,7 @@ const PrinterPositionPanel = ({
       }
     }
   }, [id, connected, subscribeToObjectEvent])
+
   const [speedFactor, setSpeedFactor] = useState(positionData.speedFactor)
   const [extrudeFactor, setExtrudeFactor] = useState(positionData.extrudeFactor)
   const [maxVelocity, setMaxVelocity] = useState(positionData.maxVelocity)
@@ -509,7 +531,8 @@ PrinterPositionPanel.propTypes = {
   id: PropTypes.string.isRequired,
   showControls: PropTypes.bool,
   showMoreInfo: PropTypes.bool,
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  offline: PropTypes.bool
 }
 
 export default PrinterPositionPanel
diff --git a/src/components/Dashboard/common/PrinterTemperaturePanel.jsx b/src/components/Dashboard/common/PrinterTemperaturePanel.jsx
index 2cb38e0..646d8d6 100644
--- a/src/components/Dashboard/common/PrinterTemperaturePanel.jsx
+++ b/src/components/Dashboard/common/PrinterTemperaturePanel.jsx
@@ -38,7 +38,8 @@ const PrinterTemperaturePanel = ({
   showExtruder = true,
   showBed = true,
   showMoreInfo = true,
-  disabled = false
+  disabled = false,
+  offline = true
 }) => {
   const [temperatureData, setTemperatureData] = useState({
     extruder: {
@@ -55,6 +56,17 @@ const PrinterTemperaturePanel = ({
     ambiant: 0
   })
 
+  useEffect(() => {
+    if (offline) {
+      setTemperatureData({
+        extruder: { current: 0, target: 0, power: 0 },
+        bed: { current: 0, target: 0, power: 0 },
+        pinda: 0,
+        ambiant: 0
+      })
+    }
+  }, [offline])
+
   const { subscribeToObjectEvent, connected, sendObjectAction } =
     useContext(ApiServerContext)
   const controlsDisabled = disabled || !connected
@@ -309,7 +321,8 @@ PrinterTemperaturePanel.propTypes = {
   showBed: PropTypes.bool,
   showMoreInfo: PropTypes.bool,
   shouldUnsubscribe: PropTypes.bool,
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  offline: PropTypes.bool
 }
 
 export default PrinterTemperaturePanel