fix: preserve backdrop-filter during brightness transitions

Fixes #373

Switched from CSS filter to overlay-based brightness/temperature
control to fix backdrop-filter effects being removed during
transitions.

This also simplifies the implementation significantly. Brightness
range is now 0-100% (can only darken, not brighten). Values >100%
generally looked poor anyway.

Author: KristjanESPERANTO

MMM-Remote-Control.css

@@ -1,4 +1,6 @@
-#remote-control-overlay-temp {
+/* Overlays for temperature and brightness visualization - allow interaction through them */
+#remote-control-overlay-temp,
+#remote-control-overlay-brightness {
   position: fixed;
   top: 0;
   left: 0;
@@ -9,11 +11,6 @@
   pointer-events: none;
 }
 
-/* Class for elements that receive brightness filter animation */
-.brightness-filtered {
-  transition: filter 1.5s ease-in-out;
-}
-
 /* QR Code Styling */
 .qrcode-container {
   display: flex;

MMM-Remote-Control.js

@@ -135,25 +135,18 @@ Module.register("MMM-Remote-Control", {
   },
 
   setBrightness (newBrightnessValue) {
-    if (newBrightnessValue < 10) {
-      newBrightnessValue = 0; // Setting Brightness to 0 turns off some displays backlight, it's neat for power saving
-    } else if (newBrightnessValue > 200) {
-      newBrightnessValue = 200;
-    }
-    const filterValue = `brightness(${newBrightnessValue}%)`;
+    newBrightnessValue = Math.max(0, Math.min(100, newBrightnessValue));
     Log.debug("BRIGHTNESS", newBrightnessValue);
-    const childNodesList = document.body.childNodes;
-    for (const node of childNodesList) {
-      // Only process Element nodes, skip scripts and text nodes
-      if (node.nodeType === Node.ELEMENT_NODE && node.nodeName !== "SCRIPT") {
-        node.style.filter = filterValue;
-        // Only add animation class to elements without backdrop-filter
-        const computed = globalThis.getComputedStyle(node);
-        if (computed.backdropFilter === "none" && this.brightness !== newBrightnessValue) {
-          node.classList.add("brightness-filtered");
-        }
-      }
+
+    let overlay = document.getElementById("remote-control-overlay-brightness");
+    if (!overlay) {
+      overlay = document.createElement("div");
+      overlay.id = "remote-control-overlay-brightness";
+      document.body.insertBefore(overlay, document.body.firstChild);
     }
+
+    const opacity = (100 - newBrightnessValue) / 100;
+    overlay.style.backgroundColor = `rgba(0, 0, 0, ${opacity})`;
     this.brightness = newBrightnessValue;
   },
 

README.md

@@ -192,13 +192,13 @@ See the [Examples Guide](docs/guide/examples.md) for more integration examples w
 
 #### MagicMirror² Control
 
-|   Action   | Description                                                                                                                            |
-| :--------: | -------------------------------------------------------------------------------------------------------------------------------------- |
-|  RESTART   | Restart your MagicMirror²                                                                                                              |
-|  REFRESH   | Refresh mirror page                                                                                                                    |
-|   UPDATE   | Update MagicMirror² and any of it's modules                                                                                            |
-|    SAVE    | Save the current configuration (show and hide status of modules, and brightness), will be applied after the mirror starts              |
-| BRIGHTNESS | Change mirror brightness, with the new value specified by `value`. `100` equals the default, possible range is between `10` and `200`. |
+|   Action   | Description                                                                                                                                                     |
+| :--------: | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+|  RESTART   | Restart your MagicMirror²                                                                                                                                       |
+|  REFRESH   | Refresh mirror page                                                                                                                                             |
+|   UPDATE   | Update MagicMirror² and any of it's modules                                                                                                                     |
+|    SAVE    | Save the current configuration (show and hide status of modules, and brightness), will be applied after the mirror starts                                       |
+| BRIGHTNESS | Change mirror brightness, with the new value specified by `value`. `100` equals the default (full brightness), possible range is between `0` (black) and `100`. |
 
 #### MagicMirror² Electron Browser Window Control
 

docs/guide/examples.md

@@ -77,7 +77,7 @@ Action: [
   },
   {
     notification: "REMOTE_ACTION",
-    payload: { action: "BRIGHTNESS", value: 200 }
+    payload: { action: "BRIGHTNESS", value: 100 }
   },
   { notification: "REMOTE_ACTION", payload: { action: "REFRESH" } },
   { notification: "REMOTE_ACTION", payload: { action: "RESTART" } }

remote.html

@@ -323,8 +323,8 @@
                     id="brightness-slider"
                     type="range"
                     min="0"
-                    max="200"
-                    step="10"
+                    max="100"
+                    step="5"
                     value="100"
                     class="slider"
                     aria-label="%%TRANSLATE:BRIGHTNESS%%"