botts85

botts85

@sdetweil said in Contrasting text on changing background:

@mwm341 I want that too. text over photos. haven’t figured out a way yet.

I kludged something together today with the MMM-Wallpaper module. It’s not elegant, but it’s been working for me so far.

What I’m doing is having the module draw the image onto an off-screen canvas and compute its average brightness using the luminance formula. Based on whether this brightness exceeds a defined threshold (115 has been working for me), the module then updates a global CSS variable with either a light or dark text color.

I’m using color: var(--dynamic-text-color); as the variable. Since it’s determining global brightness, it can still “miss” picking a good color for each module.

Depending on compute load, I’m thinking an update would be to determine that brightness value for each quadrant of an image then creating a variable for each quadrant and setting the text style in those areas to that color. A downside to this approach is that it won’t work perfectly with different display aspect ratios, but if you’re only ever using a 16:9 display that would be mitigated.

Brightness function:

  // Helper function to compute average brightness of an image.
  getAverageBrightness: function(image, callback) {
    var canvas = document.createElement("canvas");
    var width = image.naturalWidth;
    var height = image.naturalHeight;
    canvas.width = width;
    canvas.height = height;
    var context = canvas.getContext("2d");

    context.drawImage(image, 0, 0, width, height);

    try {
      var imageData = context.getImageData(0, 0, width, height);
    } catch (error) {
      console.error("Error accessing image data:", error);
      callback(255);  // Assume bright background if error.
      return;
    }
    
    var data = imageData.data;
    var colorSum = 0;
    var pixels = data.length / 4;

    for (var i = 0; i < data.length; i += 4) {
      var r = data[i];
      var g = data[i + 1];
      var b = data[i + 2];
      // Calculate brightness using the luminance formula.
      var brightness = 0.299 * r + 0.587 * g + 0.114 * b;
      colorSum += brightness;
    }

    var averageBrightness = colorSum / pixels;
    callback(averageBrightness);
  },

Updated onImageLoaded function:

  onImageLoaded: function(imageData, element) {
    var self = this;
    return () => {
      self.resetLoadImageTimer();

      element.className = `wallpaper ${self.config.crossfade ? "crossfade-image" : ""}`;
      element.style.opacity = 1;
      
      // Analyze the image brightness and adjust text color accordingly.
      // This will update both the module's caption and a global CSS variable.
      self.getAverageBrightness(element, function(brightness) {
        var threshold = 128; // Adjust this threshold as needed.
        var textColor = brightness > threshold ? "black" : "white";
        self.title.style.color = textColor;
        // Set a global CSS variable for dynamic text color.
        document.documentElement.style.setProperty('--dynamic-text-color', textColor);
      });

      self.title.style.display = "none";

      setTimeout(() => {
        var caption = imageData.caption;
        if (self.config.caption && caption) {
          self.title.innerHTML = caption;
          self.title.style.display = "initial";
        }

        if (self.imageElement !== null) {
          self.content.removeChild(self.imageElement);
        }
        self.imageElement = self.nextImageElement;
        self.nextImageElement = null;
      }, self.config.crossfade ? 1000 : 0);
    };
  },

botts85

@C-son what format should the ignoredRegion field be in?

I can’t seem to get it to ignore regions. I’m trying this, but it’s still moving my background:

                {
                        module: "MMM-MagicMover",
                                config: {
                                    updateInterval: 10 * 60 * 1000,
                                    ignoredRegions: ["fullscreen_below"],
                                    maxMove: 15,
                                    moveWholescreen: false,
                                }
                },

I tried it with:

ignoredRegions: [".region.top.bar"],

and still no luck.

botts85

@blank2014 Are you hoping to retain touch through the mirror? Or is the issue that the mirror film is giving spurious inputs to the touch screen?

botts85