@Sdetweil Thank you for your service and dedication to keeping this forum alive. Your posts have consistently been invaluable to me, arriving just when I needed them most.

After years of using MagicMirror (MM), I decided to breathe some new life into it by adding voice modules. However, I initially struggled to figure out how I could best utilize them.

I eventually chose the following components:

• Microphone: TONOR USB Microphone
• Speaker: Kanto SYD Bluetooth Speaker

Both devices work seamlessly right out of the box, without requiring any additional drivers or configuration. The microphone is particularly impressive—it’s both powerful and sensitive, allowing me to pick up voice commands from up to 15 feet away from my MM.

There are several voice-based modules available for MagicMirror, but which one is the most popular? I was considering installing MMM-Lucy, especially since I already have Alexa in every room

The ReSpeaker 4-Mic Array is currently out of stock everywhere. Spent quite a while researching on the forum and elsewhere, before posting this. I believe it’s one of the best microphones for MM integration with voice control. Are there any similar or better alternatives available?

Look at the calendar items on the left hand side of the screenshot for reminders and appointments, and national holidays, also ecobee module. I just added the glassy effect on the items that are hard to read

I will further tweak the look of the layer so to make it look smart and classy

@sdetweil said in nhancing Text Readability on Bright Wallpapers: Adding Background Textures or Boxes with CSS?:

@Socrates maybe invert
https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/invert

i dont know if its live or at draw time assuming a stable background

mixed blend mode sounds better
https://css-tricks.com/reverse-text-color-mix-blend-mode/

Hello and Good Evening Sam, thanks for looking into my posts and helping with your valuable tips as always.
I found something that might interest you too.
Check out
MMM-Glassy module.
https://github.com/bugsounet/MMM-Glassy

I was able to achieve this. In this module u dont need to add css layers for each module, they will automatically show up in all the modules u have. Infact you can add exceptions to which u dont want the mmm-glassy module wrap around the module.

This is how i did it.

{
  module: "MMM-Glassy",
  disabled: false,
  config: {
    debug: false,
    ignoreModules: ["MMM-Worldclock","MMM-Remote-Control","MMM-OpenmapWeather","MMM-OpenWeatherMapForecast","MMM-Mov>
    modulePadding: "10px",
    moduleRadius: "10px",
    moduleShadow: "5px",
    moduleBackgroundRGB: "0,0,0",
    moduleBackgroundOpacity: "15%",
    moduleBorderRGB: "255,255,255",
    moduleBorderOpacity: "10%",
    moduleShadowOffsetX: "-5px",
    moduleShadowOffsetY: "-5px",
    moduleShadowBlur: "8px",
    moduleShadowColor: "black",
    moduleBlur: "5px",
    moduleSpacing: "15px",
    mirrorMargin: "10px",
    mirrorBackground: false,
    mirrorBackgroundOnSuspend: true
  }
},

Hopefully its ok to necro bump this topic instead of opening a new thread, as this is the official module page?
The module was working fine until few days back since seeral years, but now it has stopped working. I have regenerated a new api key from tmdb, yet no luck.

How can I add a texture behind the module to ensure readability against bright wallpapers? I’m using the Unsplash module, which offers many attractive wallpapers, but I often have to choose the darkest ones for the white text to be visible. Can this be achieved through CSS? Do I need to write CSS for each module individually, or is there a way to automatically add a texture or box behind every module?

@bhepler
Thanks for this tip. Came looking for this, and found your post.

I love the idea of this module, not sure why i missed it out before. Anywho now that i am trying to set it up, i have installed the module (did not use sudo).
Inserted this much code with no modification.

        {
                module:"MMM-Config",
                position:"bottom_right",  // the QR code (if requested) will appear here
                config:{

                }

And when i go to the URL i see a blank page.