refactor: fix some ui bugs and remove not needed cache

Author: ph1p

frontend/src/app.tsx

@@ -24,7 +24,8 @@ export const App: Component = () => {
       | "led"
       | "persist-plugin"
       | "artnet"
-      | "brightness",
+      | "brightness"
+      | "goldelay",
     data?: Record<string, string | number> | { data: number[] },
   ) =>
     actions.send(
@@ -119,23 +120,18 @@ export const App: Component = () => {
           </Show>
         }
       >
-        <div
-          style={{
-            opacity: (store.brightness || 255) / 255,
+        <LedMatrix
+          disabled={store.plugin !== 1}
+          data={store.leds || []}
+          indexData={rotatedMatrix()}
+          brightness={store.brightness ?? 255}
+          onSetLed={(data) => {
+            wsMessage("led", data);
           }}
-        >
-          <LedMatrix
-            disabled={store.plugin !== 1}
-            data={store.leds || []}
-            indexData={rotatedMatrix()}
-            onSetLed={(data) => {
-              wsMessage("led", data);
-            }}
-            onSetMatrix={(data) => {
-              actions?.setLeds([...data]);
-            }}
-          />
-        </div>
+          onSetMatrix={(data) => {
+            actions?.setLeds([...data]);
+          }}
+        />
       </Show>
     </div>
   );

frontend/src/components/layout/sidebar.tsx

@@ -102,10 +102,10 @@ export const Sidebar: Component<SidebarProps> = (props) => {
             value={store?.brightness}
             class="w-full"
             onInput={(e) => props.onBrightnessChange(parseInt(e.currentTarget.value, 10))}
-            onPointerUp={() => props.onBrightnessChange(store.brightness, true)}
+            onPointerUp={(e) => props.onBrightnessChange(parseInt(e.currentTarget.value, 10), true)}
           />
           <div class="text-sm text-gray-600 text-right">
-            {Math.round(((store?.brightness || 255) / 255) * 100)}%
+            {Math.round(((store?.brightness ?? 255) / 255) * 100)}%
           </div>
         </div>
       </SidebarSection>
@@ -122,7 +122,7 @@ export const Sidebar: Component<SidebarProps> = (props) => {
               value={store?.artnetUniverse}
               class="w-full"
               onInput={(e) => props.onArtnetChange(parseInt(e.currentTarget.value, 10))}
-              onPointerUp={() => props.onArtnetChange(store.artnetUniverse, true)}
+              onPointerUp={(e) => props.onArtnetChange(parseInt(e.currentTarget.value, 10), true)}
             />
             <div class="text-sm text-gray-600 text-right">{store?.artnetUniverse}</div>
           </div>
@@ -141,7 +141,7 @@ export const Sidebar: Component<SidebarProps> = (props) => {
               value={store?.GOLDelay}
               class="w-full"
               onInput={(e) => props.onGOLDelayChange(parseInt(e.currentTarget.value, 10))}
-              onPointerUp={() => props.onGOLDelayChange(store.GOLDelay, true)}
+              onPointerUp={(e) => props.onGOLDelayChange(parseInt(e.currentTarget.value, 10), true)}
             />
             <div class="text-sm text-gray-600 text-right">{store?.GOLDelay}</div>
           </div>

frontend/src/components/led-matrix.tsx

@@ -7,6 +7,7 @@ interface Props {
   onSetMatrix?: (data: number[]) => void;
   data: number[];
   indexData: number[];
+  brightness: number;
 }
 
 export const LedMatrix: Component<Props> = (props) => {
@@ -17,18 +18,18 @@ export const LedMatrix: Component<Props> = (props) => {
 
   const MATRIX_SIZE = 16;
   const LED_COLORS = {
-    OFF: "#333333",
+    OFF: "#000000",
     BACKGROUND: "#111111",
   };
 
   const useVisibilityObserver = createVisibilityObserver({ threshold: 0.9 });
   const visible = useVisibilityObserver(() => containerRef);
 
-  const getLedColor = (brightness: number) => {
-    if (brightness <= 0) return LED_COLORS.OFF;
-
-    const intensity = Math.min(255, Math.max(0, brightness));
-    return `rgb(${intensity}, ${intensity}, ${intensity})`;
+  const getLedColor = (ledBrightness: number) => {
+    const brightnessFactor = props.brightness / 255;
+    const intensity = Math.round(Math.min(255, Math.max(0, ledBrightness * brightnessFactor)));
+    const displayIntensity = Math.round(51 + (intensity * 204) / 255);
+    return `rgb(${displayIntensity}, ${displayIntensity}, ${displayIntensity})`;
   };
 
   const drawMatrix = (data: number[], indexData: number[]) => {
@@ -151,6 +152,7 @@ export const LedMatrix: Component<Props> = (props) => {
   createEffect(() => {
     const data = props.data;
     const indexData = props.indexData;
+    const brightness = props.brightness;
 
     if (canvasRef && data.length && indexData.length) {
       drawMatrix(data, indexData);

frontend/src/creator.tsx

@@ -383,7 +383,11 @@ export const Creator: Component = () => {
                   when={!isPlaying()}
                   fallback={
                     <div class="animate-fade-in">
-                      <LedMatrix data={currentFrame()} indexData={store.indexMatrix} />
+                      <LedMatrix
+                        data={currentFrame()}
+                        indexData={store.indexMatrix}
+                        brightness={store.brightness || 255}
+                      />
                     </div>
                   }
                 >
@@ -403,6 +407,7 @@ export const Creator: Component = () => {
                           <LedMatrix
                             data={frameSignals()[0]()}
                             indexData={store.indexMatrix}
+                            brightness={store.brightness || 255}
                             onSetLed={(data) => {
                               const [screen, setScreen] = frameSignals();
                               const currentScreen = [...screen()];

include/plugins/DrawPlugin.h

@@ -6,7 +6,6 @@ class DrawPlugin : public Plugin
 {
 public:
   void setup() override;
-  void teardown() override;
   const char *getName() const override;
   void websocketHook(DynamicJsonDocument &request) override;
 };

include/screen.h

@@ -14,7 +14,6 @@ class Screen_
   uint8_t brightness_ = 255;
   uint8_t renderBuffer_[ROWS * COLS];
   uint8_t rotatedRenderBuffer_[ROWS * COLS];
-  uint8_t cache_[ROWS * COLS];
   uint8_t positions[ROWS * COLS] = {
       0x0f, 0x0e, 0x0d, 0x0c, 0x0b, 0x0a, 0x09, 0x08, 0x18, 0x19, 0x1a, 0x1b, 0x1c, 0x1d, 0x1e, 0x1f,
       0x07, 0x06, 0x05, 0x04, 0x03, 0x02, 0x01, 0x00, 0x10, 0x11, 0x12, 0x13, 0x14, 0x15, 0x16, 0x17,
@@ -63,9 +62,6 @@ class Screen_
 
   void loadFromStorage();
   void persist();
-  bool isCacheEmpty() const;
-  void cacheCurrent();
-  void restoreCache();
   uint8_t getBufferIndex(int index);
 
   void drawLine(int x1, int y1, int x2, int y2, int ledStatus, uint8_t brightness = 255);

src/screen.cpp

@@ -86,44 +86,14 @@ void Screen_::clearRect(int x, int y, int width, int height)
   }
 }
 
-// CACHE START
-bool Screen_::isCacheEmpty() const
-{
-  for (int i = 0; i < ROWS * COLS; i++)
-  {
-    if (cache_[i] != 0)
-      return false;
-  }
-  return true;
-}
-
-void Screen_::cacheCurrent()
-{
-  memcpy(cache_, renderBuffer_, ROWS * COLS);
-}
-
-void Screen_::restoreCache()
-{
-  setRenderBuffer(cache_, true);
-}
-// CACHE END
-
 // STORAGE START
 void Screen_::loadFromStorage()
 {
 #ifdef ENABLE_STORAGE
   storage.begin("led-wall", true);
-  setBrightness(255);
 
-  if (currentStatus == NONE)
-  {
-    clear();
-    storage.getBytes("data", renderBuffer_, ROWS * COLS);
-  }
-  else
-  {
-    storage.getBytes("data", cache_, ROWS * COLS);
-  }
+  clear();
+  storage.getBytes("data", renderBuffer_, ROWS * COLS);
 
   setBrightness(storage.getUInt("brightness", 255));
   setCurrentRotation(storage.getUInt("rotation", 0));