@opalkelly/frontpanel-react-components 0.1.2 → 0.2.0

package/src/components/FrontPanelNumberEntry/FrontPanelNumberEntry.tsx

@@ -56,7 +56,7 @@ const FrontPanelNumberEntry = React.forwardRef<
 
     const { device, workQueue } = React.useContext(FrontPanelContext);
 
-    const { maximumValue, minimumValue, fpEndpoint, ...rootProps } = props;
+    const { maximumValue, minimumValue, fpEndpoint, disabled, ...rootProps } = props;
 
     const clampedMinimumValue = React.useMemo(() => {
         return typeof minimumValue !== "undefined"
@@ -72,10 +72,10 @@ const FrontPanelNumberEntry = React.forwardRef<
         ((1n << BigInt(targetBitLength)) - 1n) << BigInt(fpEndpoint.bitOffset);
 
     const onUpdateWireValue = React.useCallback(
-        async (sender: IFrontPanel): Promise<void> => {
-            await workQueue.Post(async () => {
+        (sender?: IFrontPanel): void => {
+            if (sender != null && workQueue != null) {
                 // Get the wire value for the endpoint
-                let sourceWireValue = await sender.getWireInValue(fpEndpoint.epAddress);
+                let sourceWireValue = sender.getWireInValue(fpEndpoint.epAddress);
                 let targetWireBitMask = targetWireSpanBitMask & 0xffffffffn;
                 let sourceSpanValue =
                     (BigInt(sourceWireValue) & targetWireBitMask) >> BigInt(fpEndpoint.bitOffset);
@@ -92,7 +92,7 @@ const FrontPanelNumberEntry = React.forwardRef<
                         sourceWireAddress++
                     ) {
                         // Get the wire value for the next endpoint
-                        sourceWireValue = await sender.getWireInValue(sourceWireAddress);
+                        sourceWireValue = sender.getWireInValue(sourceWireAddress);
                         targetWireBitMask = currentWireSpanBitMask & 0xffffffffn;
                         sourceSpanValue |=
                             (BigInt(sourceWireValue) & targetWireBitMask) <<
@@ -104,9 +104,11 @@ const FrontPanelNumberEntry = React.forwardRef<
                 }
 
                 setValue(sourceSpanValue);
-            });
+            } else {
+                setValue(0n);
+            }
         },
-        [fpEndpoint, targetWireSpanBitMask]
+        [workQueue, fpEndpoint, targetWireSpanBitMask]
     );
 
     React.useEffect(() => {
@@ -115,49 +117,51 @@ const FrontPanelNumberEntry = React.forwardRef<
 
     const onNumberEntryValueChange = React.useCallback(
         async (value: bigint): Promise<void> => {
-            await workQueue.Post(async () => {
-                let targetWireBitMask = targetWireSpanBitMask & 0xffffffffn;
-                let targetWireValue = Number(
-                    (value << BigInt(fpEndpoint.bitOffset)) & targetWireBitMask
-                );
-
-                // Set the wire value for the endpoint
-                await device.setWireInValue(
-                    fpEndpoint.epAddress,
-                    targetWireValue,
-                    Number(targetWireBitMask)
-                );
-
-                if (targetWireSpanBitMask > 0xffffffffn) {
-                    // The operations spans multiple endpoints
-                    let currentWireSpanBitOffset = 32n - BigInt(fpEndpoint.bitOffset);
-                    let currentWireSpanBitMask = targetWireSpanBitMask >> 32n;
-
-                    for (
-                        let targetWireAddress = fpEndpoint.epAddress + 1;
-                        targetWireAddress <= WIREIN_ADDRESS_RANGE.Maximum &&
-                        currentWireSpanBitMask > 0n;
-                        targetWireAddress++
-                    ) {
-                        targetWireBitMask = currentWireSpanBitMask & 0xffffffffn;
-                        targetWireValue = Number(
-                            (value >> currentWireSpanBitOffset) & targetWireBitMask
-                        );
-
-                        // Set the wire value for the next endpoint
-                        await device.setWireInValue(
-                            targetWireAddress,
-                            targetWireValue,
-                            Number(targetWireBitMask)
-                        );
-
-                        currentWireSpanBitOffset += 32n;
-                        currentWireSpanBitMask >>= 32n;
+            if (device != null && workQueue != null) {
+                await workQueue.Post(async () => {
+                    let targetWireBitMask = targetWireSpanBitMask & 0xffffffffn;
+                    let targetWireValue = Number(
+                        (value << BigInt(fpEndpoint.bitOffset)) & targetWireBitMask
+                    );
+
+                    // Set the wire value for the endpoint
+                    device.setWireInValue(
+                        fpEndpoint.epAddress,
+                        targetWireValue,
+                        Number(targetWireBitMask)
+                    );
+
+                    if (targetWireSpanBitMask > 0xffffffffn) {
+                        // The operations spans multiple endpoints
+                        let currentWireSpanBitOffset = 32n - BigInt(fpEndpoint.bitOffset);
+                        let currentWireSpanBitMask = targetWireSpanBitMask >> 32n;
+
+                        for (
+                            let targetWireAddress = fpEndpoint.epAddress + 1;
+                            targetWireAddress <= WIREIN_ADDRESS_RANGE.Maximum &&
+                            currentWireSpanBitMask > 0n;
+                            targetWireAddress++
+                        ) {
+                            targetWireBitMask = currentWireSpanBitMask & 0xffffffffn;
+                            targetWireValue = Number(
+                                (value >> currentWireSpanBitOffset) & targetWireBitMask
+                            );
+
+                            // Set the wire value for the next endpoint
+                            device.setWireInValue(
+                                targetWireAddress,
+                                targetWireValue,
+                                Number(targetWireBitMask)
+                            );
+
+                            currentWireSpanBitOffset += 32n;
+                            currentWireSpanBitMask >>= 32n;
+                        }
                     }
-                }
 
-                await device.updateWireIns();
-            });
+                    await device.updateWireIns();
+                });
+            }
 
             onUpdateWireValue(device);
         },
@@ -168,6 +172,7 @@ const FrontPanelNumberEntry = React.forwardRef<
         <NumberEntry
             {...rootProps}
             ref={forwardedRef}
+            disabled={disabled || device === null}
             maximumValue={maximumValue}
             minimumValue={clampedMinimumValue}
             value={value}

package/src/components/FrontPanelPushButton/FrontPanelPushButton.tsx

@@ -47,28 +47,33 @@ const FrontPanelPushButton = React.forwardRef<
 >((props, forwardedRef) => {
     const { device, workQueue } = React.useContext(FrontPanelContext);
 
-    const { fpEndpoint, ...buttonProps } = props;
+    const { fpEndpoint, disabled, ...buttonProps } = props;
 
     const targetWireBitMask = 1 << fpEndpoint.bitOffset;
 
     const onButtonUp = React.useCallback(async (): Promise<void> => {
-        await workQueue.Post(async () => {
-            await device.setWireInValue(fpEndpoint.epAddress, 0, targetWireBitMask);
-            await device.updateWireIns();
-        });
-    }, [device, fpEndpoint, targetWireBitMask, workQueue]);
+        if (device != null && workQueue != null) {
+            await workQueue.Post(async () => {
+                device.setWireInValue(fpEndpoint.epAddress, 0, targetWireBitMask);
+                await device.updateWireIns();
+            });
+        }
+    }, [device, workQueue, fpEndpoint, targetWireBitMask, workQueue]);
 
     const onButtonDown = React.useCallback(async (): Promise<void> => {
-        await workQueue.Post(async () => {
-            await device.setWireInValue(fpEndpoint.epAddress, 0xffffffff, targetWireBitMask);
-            await device.updateWireIns();
-        });
-    }, [device, fpEndpoint, targetWireBitMask, workQueue]);
+        if (device != null && workQueue != null) {
+            await workQueue.Post(async () => {
+                device.setWireInValue(fpEndpoint.epAddress, 0xffffffff, targetWireBitMask);
+                await device.updateWireIns();
+            });
+        }
+    }, [device, workQueue, fpEndpoint, targetWireBitMask, workQueue]);
 
     return (
         <Button
             {...buttonProps}
             ref={forwardedRef}
+            disabled={disabled || device == null}
             onButtonUp={onButtonUp}
             onButtonDown={onButtonDown}
         />

package/src/components/FrontPanelRangeSlider/FrontPanelRangeSlider.tsx

@@ -53,7 +53,7 @@ const FrontPanelRangeSlider = React.forwardRef<
 
     const { device, workQueue } = React.useContext(FrontPanelContext);
 
-    const { fpEndpoint, maximumValue, ...rootProps } = props;
+    const { fpEndpoint, maximumValue, disabled, ...rootProps } = props;
 
     const targetBitLength: number = React.useMemo(() => {
         return CalculateBitLength(BigInt(maximumValue));
@@ -63,29 +63,33 @@ const FrontPanelRangeSlider = React.forwardRef<
         ((1n << BigInt(targetBitLength)) - 1n) << BigInt(fpEndpoint.bitOffset);
 
     const onUpdateWireValue = React.useCallback(
-        async (sender: IFrontPanel): Promise<void> => {
-            await workQueue.Post(async () => {
-                const sourceWireValue = await sender.getWireInValue(fpEndpoint.epAddress);
+        (sender?: IFrontPanel): void => {
+            if (sender != null && workQueue != null) {
+                const sourceWireValue = sender.getWireInValue(fpEndpoint.epAddress);
                 const sourceValue =
                     (BigInt(sourceWireValue) & targetWireBitMask) >> BigInt(fpEndpoint.bitOffset);
                 setValue(sourceValue);
-            });
+            } else {
+                setValue(0n);
+            }
         },
-        [fpEndpoint, targetWireBitMask]
+        [workQueue, fpEndpoint, targetWireBitMask]
     );
 
     const onSelectedValueChangeHandler = React.useCallback(
         (value: number) => {
-            workQueue.Post(async () => {
-                await device.setWireInValue(
-                    fpEndpoint.epAddress,
-                    value << fpEndpoint.bitOffset,
-                    Number(targetWireBitMask)
-                );
-                await device.updateWireIns();
-            });
+            if (device != null && workQueue != null) {
+                workQueue.Post(async () => {
+                    device.setWireInValue(
+                        fpEndpoint.epAddress,
+                        value << fpEndpoint.bitOffset,
+                        Number(targetWireBitMask)
+                    );
+                    await device.updateWireIns();
+                });
+            }
         },
-        [device, fpEndpoint, workQueue, targetWireBitMask]
+        [device, workQueue, fpEndpoint, workQueue, targetWireBitMask]
     );
 
     React.useEffect(() => {
@@ -96,6 +100,7 @@ const FrontPanelRangeSlider = React.forwardRef<
         <RangeSlider
             {...rootProps}
             ref={forwardedRef}
+            disabled={disabled || device == null}
             defaultValue={Number(value)}
             maximumValue={maximumValue}
             onValueChange={onSelectedValueChangeHandler}

package/src/components/FrontPanelSelectEntry/FrontPanelSelectEntryRoot.tsx

@@ -57,7 +57,7 @@ const FrontPanelSelectEntryRoot: React.FC<FrontPanelSelectEntryRootCombinedProps
 
     const { device, workQueue } = React.useContext(FrontPanelContext);
 
-    const { fpEndpoint, maximumValue, ...rootProps } = props;
+    const { fpEndpoint, maximumValue, disabled, ...rootProps } = props;
 
     const targetBitLength: number = React.useMemo(() => {
         return CalculateBitLength(maximumValue);
@@ -67,10 +67,10 @@ const FrontPanelSelectEntryRoot: React.FC<FrontPanelSelectEntryRootCombinedProps
         ((1n << BigInt(targetBitLength)) - 1n) << BigInt(fpEndpoint.bitOffset);
 
     const onUpdateWireValue = React.useCallback(
-        async (sender: IFrontPanel): Promise<void> => {
-            await workQueue.Post(async () => {
+        (sender?: IFrontPanel): void => {
+            if (sender != null && workQueue != null) {
                 // Get the wire value for the endpoint
-                let sourceWireValue = await sender.getWireInValue(fpEndpoint.epAddress);
+                let sourceWireValue = sender.getWireInValue(fpEndpoint.epAddress);
                 let targetWireBitMask = targetWireSpanBitMask & 0xffffffffn;
                 let sourceSpanValue =
                     (BigInt(sourceWireValue) & targetWireBitMask) >> BigInt(fpEndpoint.bitOffset);
@@ -87,7 +87,7 @@ const FrontPanelSelectEntryRoot: React.FC<FrontPanelSelectEntryRootCombinedProps
                         sourceWireAddress++
                     ) {
                         // Get the wire value for the next endpoint
-                        sourceWireValue = await sender.getWireInValue(sourceWireAddress);
+                        sourceWireValue = sender.getWireInValue(sourceWireAddress);
                         targetWireBitMask = currentWireSpanBitMask & 0xffffffffn;
                         sourceSpanValue |=
                             (BigInt(sourceWireValue) & targetWireBitMask) <<
@@ -99,62 +99,67 @@ const FrontPanelSelectEntryRoot: React.FC<FrontPanelSelectEntryRootCombinedProps
                 }
 
                 setValue(sourceSpanValue);
-            });
+            } else {
+                setValue(0n);
+            }
         },
-        [fpEndpoint, targetWireSpanBitMask]
+        [workQueue, fpEndpoint, targetWireSpanBitMask]
     );
 
     const onSelectedValueChangeHandler = React.useCallback(
         (value: string) => {
-            const targetWireSpanValue = BigInt(value);
-            workQueue.Post(async () => {
-                let targetWireBitMask = targetWireSpanBitMask & 0xffffffffn;
-                let targetWireValue = Number(
-                    (targetWireSpanValue << BigInt(fpEndpoint.bitOffset)) & targetWireBitMask
-                );
-
-                // Set the wire value for the endpoint
-                await device.setWireInValue(
-                    fpEndpoint.epAddress,
-                    targetWireValue,
-                    Number(targetWireBitMask)
-                );
-
-                if (targetWireSpanBitMask > 0xffffffffn) {
-                    // The operations spans multiple endpoints
-                    let currentWireSpanBitOffset = 32n - BigInt(fpEndpoint.bitOffset);
-                    let currentWireSpanBitMask = targetWireSpanBitMask >> 32n;
-
-                    const maxWireCount = 0x20 - fpEndpoint.epAddress;
-
-                    for (
-                        let wireIndex = 1;
-                        wireIndex < maxWireCount && currentWireSpanBitMask > 0n;
-                        wireIndex++
-                    ) {
-                        targetWireBitMask = currentWireSpanBitMask & 0xffffffffn;
-                        targetWireValue = Number(
-                            (targetWireSpanValue >> currentWireSpanBitOffset) & targetWireBitMask
-                        );
-
-                        // Set the wire value for the next endpoint
-                        await device.setWireInValue(
-                            fpEndpoint.epAddress + wireIndex,
-                            targetWireValue,
-                            Number(targetWireBitMask)
-                        );
-
-                        currentWireSpanBitOffset += 32n;
-                        currentWireSpanBitMask >>= 32n;
+            if (device != null && workQueue != null) {
+                const targetWireSpanValue = BigInt(value);
+                workQueue.Post(async () => {
+                    let targetWireBitMask = targetWireSpanBitMask & 0xffffffffn;
+                    let targetWireValue = Number(
+                        (targetWireSpanValue << BigInt(fpEndpoint.bitOffset)) & targetWireBitMask
+                    );
+
+                    // Set the wire value for the endpoint
+                    device.setWireInValue(
+                        fpEndpoint.epAddress,
+                        targetWireValue,
+                        Number(targetWireBitMask)
+                    );
+
+                    if (targetWireSpanBitMask > 0xffffffffn) {
+                        // The operations spans multiple endpoints
+                        let currentWireSpanBitOffset = 32n - BigInt(fpEndpoint.bitOffset);
+                        let currentWireSpanBitMask = targetWireSpanBitMask >> 32n;
+
+                        const maxWireCount = 0x20 - fpEndpoint.epAddress;
+
+                        for (
+                            let wireIndex = 1;
+                            wireIndex < maxWireCount && currentWireSpanBitMask > 0n;
+                            wireIndex++
+                        ) {
+                            targetWireBitMask = currentWireSpanBitMask & 0xffffffffn;
+                            targetWireValue = Number(
+                                (targetWireSpanValue >> currentWireSpanBitOffset) &
+                                    targetWireBitMask
+                            );
+
+                            // Set the wire value for the next endpoint
+                            device.setWireInValue(
+                                fpEndpoint.epAddress + wireIndex,
+                                targetWireValue,
+                                Number(targetWireBitMask)
+                            );
+
+                            currentWireSpanBitOffset += 32n;
+                            currentWireSpanBitMask >>= 32n;
+                        }
                     }
-                }
 
-                await device.updateWireIns();
-            });
+                    await device.updateWireIns();
+                });
+            }
 
             onUpdateWireValue(device);
         },
-        [device, fpEndpoint, workQueue, onUpdateWireValue]
+        [device, workQueue, fpEndpoint, onUpdateWireValue]
     );
 
     React.useEffect(() => {
@@ -164,6 +169,7 @@ const FrontPanelSelectEntryRoot: React.FC<FrontPanelSelectEntryRootCombinedProps
     return (
         <SelectEntry.Root
             {...rootProps}
+            disabled={disabled || device == null}
             value={value.toString()}
             onValueChange={onSelectedValueChangeHandler}
         />

package/src/components/FrontPanelToggleSwitch/FrontPanelToggleSwitch.tsx

@@ -53,40 +53,41 @@ const FrontPanelToggleSwitch = React.forwardRef<
 
     const { device, workQueue } = React.useContext(FrontPanelContext);
 
-    const { fpEndpoint, ...buttonProps } = props;
+    const { fpEndpoint, disabled, ...buttonProps } = props;
 
     const targetWireBitMask = 1 << fpEndpoint.bitOffset;
 
     const onUpdateWireValue = React.useCallback(
-        async (sender: IFrontPanel): Promise<void> => {
-            await workQueue.Post(async () => {
+        (sender?: IFrontPanel): void => {
+            if (sender != null && workQueue != null) {
                 // Set the toggle state based on the value of the target bit of the Wire endpoint
-                const sourceWireValue = await sender.getWireInValue(fpEndpoint.epAddress);
+                const sourceWireValue = sender.getWireInValue(fpEndpoint.epAddress);
                 const sourceBitValue = (sourceWireValue & targetWireBitMask) === targetWireBitMask;
                 const newToggleState = sourceBitValue ? ToggleState.On : ToggleState.Off;
                 setState(newToggleState);
-            });
+            } else {
+                setState(ToggleState.Off);
+            }
         },
-        [fpEndpoint, targetWireBitMask]
+        [workQueue, fpEndpoint, targetWireBitMask]
     );
 
     const onToggleStateChanged = React.useCallback(
         async (state: ToggleState): Promise<void> => {
-            await workQueue.Post(async () => {
-                // Set the value of the target bit of the Wire endpoint based on the toggle state
-                const targetWireValue: WireValue = state === ToggleState.On ? 0xffffffff : 0;
-
-                await device.setWireInValue(
-                    fpEndpoint.epAddress,
-                    targetWireValue,
-                    targetWireBitMask
-                );
-                await device.updateWireIns();
-            });
+            if (device != null && workQueue != null) {
+                await workQueue.Post(async () => {
+                    // Set the value of the target bit of the Wire endpoint based on the toggle state
+                    const targetWireValue: WireValue = state === ToggleState.On ? 0xffffffff : 0;
+
+                    device.setWireInValue(fpEndpoint.epAddress, targetWireValue, targetWireBitMask);
+
+                    await device.updateWireIns();
+                });
+            }
 
             onUpdateWireValue(device);
         },
-        [device, fpEndpoint, targetWireBitMask, workQueue]
+        [device, workQueue, fpEndpoint, targetWireBitMask]
     );
 
     React.useEffect(() => {
@@ -97,6 +98,7 @@ const FrontPanelToggleSwitch = React.forwardRef<
         <ToggleSwitch
             ref={forwardedRef}
             {...buttonProps}
+            disabled={disabled || device == null}
             state={state}
             onToggleStateChanged={onToggleStateChanged}
         />

package/src/components/FrontPanelTriggerButton/FrontPanelTriggerButton.tsx

@@ -49,15 +49,24 @@ const FrontPanelTriggerButton = React.forwardRef<
 >((props, forwardedRef) => {
     const { device, workQueue } = React.useContext(FrontPanelContext);
 
-    const { fpEndpoint, ...buttonProps } = props;
+    const { fpEndpoint, disabled, ...buttonProps } = props;
 
     const onButtonDown = React.useCallback(async (): Promise<void> => {
-        await workQueue.Post(async () => {
-            await device.activateTriggerIn(fpEndpoint.epAddress, fpEndpoint.bitOffset);
-        });
-    }, [device, fpEndpoint]);
+        if (device != null && workQueue != null) {
+            await workQueue.Post(async () => {
+                await device.activateTriggerIn(fpEndpoint.epAddress, fpEndpoint.bitOffset);
+            });
+        }
+    }, [device, workQueue, fpEndpoint]);
 
-    return <Button {...buttonProps} ref={forwardedRef} onButtonDown={onButtonDown} />;
+    return (
+        <Button
+            {...buttonProps}
+            ref={forwardedRef}
+            disabled={disabled || device == null}
+            onButtonDown={onButtonDown}
+        />
+    );
 });
 
 FrontPanelTriggerButton.displayName = "FrontPanelTriggerButton";

package/src/contexts/FrontPanelContext.ts

@@ -10,14 +10,11 @@ import React from "react";
 import { IFrontPanel, IFrontPanelEventSource, WorkQueue } from "@opalkelly/frontpanel-alloy-core";
 
 export type FrontPanelContextValue = {
-    device: IFrontPanel;
-    workQueue: WorkQueue;
+    device?: IFrontPanel;
+    workQueue?: WorkQueue;
     eventSource?: IFrontPanelEventSource;
 };
 
-const FrontPanelContext = React.createContext<FrontPanelContextValue>({
-    device: window.FrontPanel,
-    workQueue: new WorkQueue()
-});
+const FrontPanelContext = React.createContext<FrontPanelContextValue>({});
 
 export default FrontPanelContext;