feat: add QR code display and menu header icons

Author: KristjanESPERANTO

MMM-Remote-Control.css

@@ -13,3 +13,23 @@
 .brightness-filtered {
   transition: filter 1.5s ease-in-out;
 }
+
+/* QR Code Styling */
+.qrcode-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5em;
+}
+
+.qrcode-image {
+  border-radius: 0.5em;
+  padding: 0.5em;
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+}
+
+.url-text {
+  text-align: center;
+  margin: 0.3em 0;
+}

MMM-Remote-Control.js

@@ -10,11 +10,12 @@
 
 Module.register("MMM-Remote-Control", {
 
-  requiresVersion: "2.12.0",
-
   // Default module config.
   defaults: {
-    customCommand: {}
+    customCommand: {},
+    showQRCode: true,
+    qrCodeSize: 150,
+    qrCodePosition: "above" // "below", "above", or "replace"
   },
 
   // Define start sequence.
@@ -28,6 +29,8 @@ Module.register("MMM-Remote-Control", {
 
     this.brightness = 100;
     this.temp = 327;
+
+    this.qrCodeDataUrl = null;
   },
 
   getStyles () {
@@ -72,6 +75,17 @@ Module.register("MMM-Remote-Control", {
         }
         break;
 
+      case "QR_CODE_GENERATED":
+        this.qrCodeDataUrl = payload;
+        if (this.data.position) {
+          this.updateDom();
+        }
+        break;
+
+      case "QR_CODE_ERROR":
+        Log.error(`QR Code generation error: ${payload}`);
+        break;
+
       case "USER_PRESENCE":
         this.sendNotification(notification, payload);
         break;
@@ -247,8 +261,56 @@ Module.register("MMM-Remote-Control", {
       case "80": portToShow = ""; break;
       default: portToShow = `:${this.port}`; break;
     }
-    wrapper.innerHTML = `http://${this.addresses[0]}${portToShow}/remote.html`;
-    wrapper.className = "normal xsmall";
+
+    const url = `http://${this.addresses[0]}${portToShow}/remote.html`;
+
+    // Show QR code if enabled
+    if (this.config.showQRCode) {
+      const container = document.createElement("div");
+      container.className = "qrcode-container";
+
+      // Add URL text above QR code (unless position is "replace")
+      if (this.config.qrCodePosition !== "replace") {
+        const urlText = document.createElement("div");
+        urlText.innerHTML = url;
+        urlText.className = "normal xsmall url-text";
+        if (this.config.qrCodePosition === "below") {
+          container.append(urlText);
+        }
+      }
+
+      // Request QR code generation if not already done
+      if (!this.qrCodeDataUrl) {
+        this.sendSocketNotification("GENERATE_QR_CODE", {
+          url,
+          size: this.config.qrCodeSize
+        });
+      }
+
+      // Display QR code if available
+      if (this.qrCodeDataUrl) {
+        const qrImage = document.createElement("img");
+        qrImage.src = this.qrCodeDataUrl;
+        qrImage.className = "qrcode-image";
+        qrImage.alt = "QR Code for Remote Control";
+        container.append(qrImage);
+      }
+
+      // Add URL text below QR code
+      if (this.config.qrCodePosition === "above") {
+        const urlText = document.createElement("div");
+        urlText.innerHTML = url;
+        urlText.className = "normal xsmall url-text";
+        container.append(urlText);
+      }
+
+      wrapper.append(container);
+    } else {
+      // Just show URL text
+      wrapper.innerHTML = url;
+      wrapper.className = "normal xsmall";
+    }
+
     return wrapper;
   },
 

README.md

@@ -10,6 +10,8 @@ Since we all want our [SD cards to live a long and prosper life](http://raspberr
 
 The module also includes a **RESTful API** for controlling all aspects of your mirror from other network-enabled devices and controllers--anything that can open a URL. See the [API README](API/README.md) for more info!
 
+**New:** The module can now display a QR code on your mirror for easy mobile access - simply scan and connect!
+
 ## Screenshots
 
 ### Main menu
@@ -51,13 +53,12 @@ cd MMM-Remote-Control
 npm ci --omit=dev
 ```
 
-- (2) Add the module to your `config.js` file, if you add a `position`, it will display the URL to the remote on the mirror.
+- (2) Add the module to your `config.js` file. **Note:** You must set a `position` to display the URL/QR code on the mirror.
 
 ```js
     {
         module: 'MMM-Remote-Control',
-        // uncomment the following line to show the URL of the remote control on the mirror
-        // position: 'bottom_left',
+        position: 'bottom_left', // Required to show URL/QR code on mirror
         // you can hide this module afterwards from the remote control itself
         config: {
             customCommand: {},  // Optional, See "Using Custom Commands" below
@@ -66,7 +67,15 @@ npm ci --omit=dev
             // uncomment any of the lines below if you're gonna use it
             // customMenu: "custom_menu.json", // Optional, See "Custom Menu Items" below
             // apiKey: "", // Optional, See API/README.md for details
-            // classes: {} // Optional, See "Custom Classes" below
+            // classes: {}, // Optional, See "Custom Classes" below
+
+            // QR Code options (new!)
+            // showQRCode: true, // Optional, display QR code for easy mobile access (default: true)
+            // qrCodeSize: 150, // Optional, size of QR code in pixels (default: 150)
+            // qrCodePosition: "below" // Optional:
+            //   "below" - Show URL above, QR code below (default)
+            //   "above" - Show QR code above, URL below
+            //   "replace" - Show only QR code, no URL text
         }
     },
 ```

cspell.config.json

@@ -52,6 +52,7 @@
     "newsfeed",
     "newsitems",
     "Norsk",
+    "openmeteo",
     "passwordless",
     "plusplus",
     "poweroff",

demo.config.js

@@ -89,6 +89,7 @@ let config = {
     },
     {
       module: "MMM-Remote-Control",
+      position: "bottom_right",
       config: {
         secureEndpoints: false,
         classes: {

node_helper.js

@@ -1325,6 +1325,9 @@ module.exports = NodeHelper.create({
       // check if we have got saved default settings
       this.loadDefaultSettings();
     }
+    if (notification === "GENERATE_QR_CODE") {
+      this.generateQRCode(payload);
+    }
     if (notification === "REMOTE_ACTION") {
       if ("action" in payload) {
         this.executeQuery(payload, {isSocket: true});
@@ -1386,5 +1389,27 @@ module.exports = NodeHelper.create({
       this.updateModuleApiMenu();
     }
   },
+
+  /**
+   * Generate QR code as data URL
+   * @param {object} payload - Object with url and size properties
+   */
+  async generateQRCode (payload) {
+    try {
+      const QRCode = require("qrcode");
+      const dataUrl = await QRCode.toDataURL(payload.url, {
+        width: payload.size,
+        margin: 1,
+        color: {
+          dark: "#FFFFFF",
+          light: "#00000000"
+        }
+      });
+      this.sendSocketNotification("QR_CODE_GENERATED", dataUrl);
+    } catch (error) {
+      Log.error(`QR Code generation failed: ${error}`);
+      this.sendSocketNotification("QR_CODE_ERROR", error.message);
+    }
+  },
   ...require("./API/api.js")
 });