From 365a3883ecf4a1b679c9f6ea0c69fec09e0cfe43 Mon Sep 17 00:00:00 2001
From: YeonV <trusted.yeon@gmail.com>
Date: Mon, 17 Apr 2023 03:42:52 +0200
Subject: [PATCH] Support Matrix Rendering

---
 src/components/PixelGraph.tsx                  |  9 ++++++---
 src/pages/Device/Effects.tsx                   | 18 +++++++++++++++++-
 .../DeviceCard/DeviceCard.interface.tsx        |  5 +++++
 src/pages/Devices/DeviceCard/DeviceCard.tsx    |  2 ++
 .../Devices/DeviceCard/DeviceCard.wrapper.tsx  |  2 ++
 src/pages/Settings/UICard.tsx                  |  9 ++++++++-
 src/store/ui/storeGeneral.tsx                  | 10 ++++++++++
 7 files changed, 50 insertions(+), 5 deletions(-)

diff --git a/src/components/PixelGraph.tsx b/src/components/PixelGraph.tsx
index 075375ee..26f3f8b0 100644
--- a/src/components/PixelGraph.tsx
+++ b/src/components/PixelGraph.tsx
@@ -9,12 +9,14 @@ const PixelGraph = ({
   className = '',
   active = false,
   intGraphs = false,
+  showMatrix = false,
 }: {
   virtId: string;
   dummy?: boolean;
   className?: string;
   active?: boolean;
   intGraphs?: boolean;
+  showMatrix?: boolean;
 }) => {
   const [pixels, setPixels] = useState<any>([]);
   const pixelGraphs = useStore((state) => state.pixelGraphs);
@@ -23,7 +25,8 @@ const PixelGraph = ({
   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;
   
-  
+  console.log(rows, pixels[0]?.length)
+
   useEffect(() => {
     const handleWebsockets = (e: any) => {
       if (e.detail.id === virtId) {
@@ -62,7 +65,7 @@ const PixelGraph = ({
         }}
       />
     </div>
-  ) : pixels && pixels[0] && pixels[0].length && rows > 1 ? <div
+  ) : pixels && pixels[0] && pixels[0].length && rows > 1 && showMatrix ? <div
     style={{
       maxWidth: '520px',
       display: 'flex',
@@ -73,7 +76,7 @@ const PixelGraph = ({
       margin: '0.5rem 0 0 0',
     }}
     className={`${className}  ${active ? 'active' : ''}`}
-  >{[0,1,2,3,4,5,6,7,8].map((row) => (
+  >{Array.from(Array(rows).keys()).map((row) => (
   
       <div
         key={`row-${row}`}
diff --git a/src/pages/Device/Effects.tsx b/src/pages/Device/Effects.tsx
index 8c922ff6..18d5cf09 100644
--- a/src/pages/Device/Effects.tsx
+++ b/src/pages/Device/Effects.tsx
@@ -12,7 +12,14 @@ import {
   Typography,
   Box,
 } from '@mui/material';
-import { Clear, ExpandMore, Pause, PlayArrow } from '@mui/icons-material';
+import {
+  Clear,
+  ExpandMore,
+  Pause,
+  PlayArrow,
+  GridOn,
+  GridOff,
+} from '@mui/icons-material';
 import useStore from '../../store/useStore';
 import EffectDropDown from '../../components/SchemaForm/components/DropDown/DropDown.wrapper';
 import BladeEffectSchemaForm from '../../components/SchemaForm/EffectsSchemaForm/EffectSchemaForm';
@@ -63,6 +70,7 @@ const orderEffectProperties = (
 
 const EffectsCard = ({ virtId }: { virtId: string }) => {
   const [fade, setFade] = useState(false);
+  const [matrix, setMatrix] = useState(false);
   const getVirtuals = useStore((state) => state.getVirtuals);
   const getSchemas = useStore((state) => state.getSchemas);
   const clearVirtualEffect = useStore((state) => state.clearVirtualEffect);
@@ -171,6 +179,13 @@ const EffectsCard = ({ virtId }: { virtId: string }) => {
                     >
                     <Casino />
                   </Button> */}
+                  <Button
+                    style={{ marginRight: '.5rem' }}
+                    className="step-device-six"
+                    onClick={() => setMatrix(!matrix)}
+                  >
+                    {matrix ? <GridOff /> : <GridOn />}
+                  </Button>
                   <Button
                     style={{ marginRight: '.5rem' }}
                     className="step-device-six"
@@ -206,6 +221,7 @@ const EffectsCard = ({ virtId }: { virtId: string }) => {
             }}
           >
             <PixelGraph
+              showMatrix={matrix}
               virtId={virtId}
               active={
                 virtuals &&
diff --git a/src/pages/Devices/DeviceCard/DeviceCard.interface.tsx b/src/pages/Devices/DeviceCard/DeviceCard.interface.tsx
index 03dd2946..4630f330 100644
--- a/src/pages/Devices/DeviceCard/DeviceCard.interface.tsx
+++ b/src/pages/Devices/DeviceCard/DeviceCard.interface.tsx
@@ -47,6 +47,10 @@ export interface DeviceCardProps {
    * Do not send to leds
    */
   graphsMulti?: boolean;
+  /**
+   * Show Matrix
+   */
+  showMatrix?: boolean;
   /**
    * Colorize?
    */
@@ -117,4 +121,5 @@ export const DeviceCardDefaults: DeviceCardProps = {
   transitionTime: 5,
   isDevice: 'yz-quad',
   graphsActive: true,
+  showMatrix: false,
 };
diff --git a/src/pages/Devices/DeviceCard/DeviceCard.tsx b/src/pages/Devices/DeviceCard/DeviceCard.tsx
index 8301d428..ad52421e 100644
--- a/src/pages/Devices/DeviceCard/DeviceCard.tsx
+++ b/src/pages/Devices/DeviceCard/DeviceCard.tsx
@@ -52,6 +52,7 @@ const DeviceCard = ({
   transitionTime,
   isDevice,
   graphsMulti,
+  showMatrix,
   activateDevice,
 }: DeviceCardProps) => {
   const classes = useStyle();
@@ -259,6 +260,7 @@ const DeviceCard = ({
             }}
           >
             <PixelGraph
+              showMatrix={showMatrix}
               intGraphs={graphsActive}
               active={isActive}
               virtId={virtId || ''}
diff --git a/src/pages/Devices/DeviceCard/DeviceCard.wrapper.tsx b/src/pages/Devices/DeviceCard/DeviceCard.wrapper.tsx
index ac6e9fb1..e7165684 100644
--- a/src/pages/Devices/DeviceCard/DeviceCard.wrapper.tsx
+++ b/src/pages/Devices/DeviceCard/DeviceCard.wrapper.tsx
@@ -31,6 +31,7 @@ const DeviceCardWrapper = ({
   const clearVirtualEffect = useStore((state) => state.clearVirtualEffect);
   const updateVirtual = useStore((state) => state.updateVirtual);
   const activateDevice = useStore((state) => state.activateDevice);
+  const showMatrix = useStore((state) => state.showMatrix);
 
   const [_fade, setFade] = useState(false);
   const [_isActive, setIsActive] = useState(
@@ -114,6 +115,7 @@ const DeviceCardWrapper = ({
       effectName={virtuals[virtual]?.effect.name}
       graphsActive={graphs && graphsMulti}
       graphsMulti={graphsMulti}
+      showMatrix={showMatrix}
       isDevice={virtuals[virtual]?.is_device}
       activateDevice={handleActivateDevice}
       colorIndicator={false}
diff --git a/src/pages/Settings/UICard.tsx b/src/pages/Settings/UICard.tsx
index 141df5b7..f5da4a09 100644
--- a/src/pages/Settings/UICard.tsx
+++ b/src/pages/Settings/UICard.tsx
@@ -16,6 +16,8 @@ const UICard = () => {
   const toggleGraphs = useStore((state) => state.toggleGraphs);
   const graphsMulti = useStore((state) => state.graphsMulti);
   const toggleGraphsMulti = useStore((state) => state.toggleGraphsMulti);
+  const showMatrix = useStore((state) => state.showMatrix);
+  const toggleShowMatrix = useStore((state) => state.toggleShowMatrix);
   const setFeatures = useStore((state) => state.setFeatures);
   const showFeatures = useStore((state) => state.showFeatures);
   const features = useStore((state) => state.features);
@@ -56,12 +58,17 @@ const UICard = () => {
       />
       {config.visualisation_fps && graphs && (
         <>
-          <Divider sx={{ m: '0.25rem 0 0.5rem 0' }} />
           <SettingsRow
             title="Also on Devices page"
             checked={graphsMulti}
             onChange={() => toggleGraphsMulti()}
           />
+          <SettingsRow
+            title="Show Matrix on Devices page"
+            checked={showMatrix}
+            onChange={() => toggleShowMatrix()}
+          />
+          <Divider sx={{ m: '0.25rem 0 0.5rem 0' }} />
           <SettingsRow title="Frontend FPS" step="two">
             <SettingsSlider
               value={fps}
diff --git a/src/store/ui/storeGeneral.tsx b/src/store/ui/storeGeneral.tsx
index 59d76bb5..868c0af4 100644
--- a/src/store/ui/storeGeneral.tsx
+++ b/src/store/ui/storeGeneral.tsx
@@ -86,6 +86,16 @@ const storeGeneral = (set: any) => ({
       'general/toggleGraphsMulti'
     );
   },
+  showMatrix: false,
+  toggleShowMatrix: () => {
+    set(
+      produce((state: IStore) => {
+        state.showMatrix = !state.showMatrix;
+      }),
+      false,
+      'general/toggleShowMatrix'
+    );
+  },
 
   pixelGraphs: [] as string[],
   setPixelGraphs: (virtuals: string[]): void =>