NEW pixelData-transmission; increase allowed frontend_pixel to 4096

YeonV · Dec 13, 2023 · 496bb6b · 496bb6b
1 parent 76d4e51
commit 496bb6b
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 8 deletions.
diff --git a/src/components/PixelGraph.tsx b/src/components/PixelGraph.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-bitwise */
 /* eslint-disable prettier/prettier */
 /* eslint-disable react/require-default-props */
 import { useEffect, useState } from 'react';
@@ -24,6 +25,19 @@ const PixelGraph = ({
   const devices = useStore((state) => state.devices);
   const graphs = useStore((state) => state.graphs);
   const rows = virtuals[virtId].is_device ? devices[virtuals[virtId].is_device]?.config?.rows || virtuals[virtId].config.rows || 1 : virtuals[virtId].config.rows || 1;
+
+  function hexColor(encodedString: string) {
+    const binaryString = atob(encodedString.padEnd(4, '='))
+    let pixelColor = 0
+    for (let i = 0; i < binaryString.length; i += 1) {
+      // eslint-disable-next-line no-bitwise
+      pixelColor |= (binaryString.charCodeAt(i) << (8 * i))
+    }
+    const r = (pixelColor >> 16) & 0xFF
+    const g = (pixelColor >> 8) & 0xFF
+    const b = pixelColor & 0xFF
+    return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`
+  }
 
   useEffect(() => {
     const handleWebsockets = (e: any) => {
@@ -63,7 +77,7 @@ const PixelGraph = ({
         }}
       />
     </div>
-  ) : pixels && pixels[0] && pixels[0].length && rows > 1 && showMatrix ? <div
+  ) : pixels && pixels.length && rows > 1 && showMatrix ? <div
     style={{
       maxWidth: '520px',
       display: 'flex',
@@ -87,7 +101,7 @@ const PixelGraph = ({
         }}
         className={`${className}  ${active ? 'active' : ''}`}
       >
-        {pixels[0].slice(row * pixels[0].length / rows, (row + 1) * pixels[0].length / rows).map((_p: any, i: number) => (
+        {pixels && pixels.length > 0 && pixels.slice(row * pixels.length / rows, (row + 1) * pixels.length / rows).map((_p: any, i: number) => (
           <div
             key={i}
             style={{
@@ -97,13 +111,13 @@ const PixelGraph = ({
               margin: '2px',
               borderRadius: '5px',
               backgroundColor: active
-                ? `rgb(${pixels[0][row * pixels[0].length / rows + i]},${pixels[1][row * pixels[0].length / rows + i]},${pixels[2][row * pixels[0].length / rows + i]})`
+                ? hexColor(pixels[row * pixels.length / rows + i])
                 : '#0002',
             }}
           />
         ))}
       </div>
-    ))}</div> : pixels && pixels[0] && pixels[0].length ? (
+    ))}</div> : pixels && pixels.length ? (
     <div
       style={{
         maxWidth: '520px',
@@ -115,15 +129,15 @@ const PixelGraph = ({
       }}
       className={`${className}  ${active ? 'active' : ''}`}
     >
-      {pixels[0].map((_p: any, i: number) => (
+      {pixels && pixels.length > 0 && pixels.map((_p: any, i: number) => (
         <div
           key={i}
           style={{
             height: '20px',
             flex: 1,
             borderRadius: '0',
             backgroundColor: active
-              ? `rgb(${pixels[0][i]},${pixels[1][i]},${pixels[2][i]})`
+              ? hexColor(pixels[i])
               : '#0002',
           }}
         />

diff --git a/src/pages/Settings/UICard.tsx b/src/pages/Settings/UICard.tsx
@@ -87,7 +87,8 @@ const UICard = () => {
           step={1}
           valueLabelDisplay="auto"
           min={1}
-          max={300}
+          max={4096}
+          marks={[{ value: 300, label: null }]}
           onChangeCommitted={(_e: any, val: any) =>
             setSystemSetting('visualisation_maxlen', val)
           }
@@ -115,7 +116,7 @@ const UICard = () => {
           }}
           inputProps={{
             min: 1,
-            max: 300,
+            max: 4096,
             type: 'number',
             'aria-labelledby': 'input-slider'
           }}