Add clearer spaces to binary display

Author: aceagles

frontend/src/components/ReadTable.tsx

@@ -46,7 +46,9 @@ export function ReadTable() {
         {
           const val = rawDataCopy.shift();
           // Convert to binary showing leading zeros
-          return { address: val!.Address, value: val!.Value.toString(2).padStart(16, '0') };
+          const stringVal = val!.Value.toString(2).padStart(16, '0')
+          const strings = stringVal.match(/.{1,4}/g)
+          return { address: val!.Address, value: strings?.join(' ') };
         }
       case dataTypes.U16:
         {

frontend/src/components/ResultDisplay.tsx

@@ -16,7 +16,7 @@ export function ResultDisplay({ typedData, typeArray, type, setType }: { typedDa
           <Stack gap="xs"
           >
             <strong>{v!.address} </strong>
-            <div><Text size="lg">{JSON.stringify(v!.value)}</Text>
+            <div><Text size="lg">{v!.value}</Text>
               {(type == "Holding Register" || type == "Input Register") &&
                 <TypeSelector v={typeArray[i]} updateType={(s) => setType(i, s)}>
                   <Text size="xs" c="gray.5" style={{ cursor: "pointer" }}>{typeArray[i]}</Text>