z-index in CSS and what happens when modules are "on top" of each other

joey

My old MagicMirror system died, and I decided to start over (mostly) with a new one. After I got the main MM set up (as usual, huge props to sdetweil for making setup easy, as well as Bee-Mar for making module installation easy), I started experimenting with MMM-TouchButton and MMM-AutoDimmer. My thought was to have AutoDimmer on a schedule, but also add Reboot, Shutdown, enable AutoDimmer, and disable AutoDimmer.

It took me a little while, but I eventually learned about CSS’s “z-index”. We all know X (up/down) and Y (left/right) coordinates, so it should be no surprise that Z is closer to front/closer to the back. (The surprise for me was discovering the Z index itself!) My problem with MMM-TouchButton and MMM-AutoDimmer was that TouchButton was set for “999” Z height, but AutoDimmer was set for “9999” Z height. In other words, since the AutoDimmer module covered the whole screen (so it could “dim” the whole screen) and was on top of the TouchButton buttons, and so all of my touches/clicks were hitting AutoDimmer, and not getting through to TouchButton. (Imagine a sheet of glass on top of your keyboard!)

Once I figured that out, I was able to set AutoDimmer to a lower Z-index/height, and my TouchButtons started working.

Ultimately, I gave up on AutoDimmer. My MM is not a mirror, it is just an old monitor. Even though AutoDimmer was able to reduce the contrast of the screen, which darkened the whites and lighter colors, the monitor’s backlight was still full-blast. It might work better for AMOLED or “dark zone” screens.

While troubleshooting this, it was helpful to be able to access the MM “server” by default on port 8080. I also appreciated that the pm2 script automatically restarts the MM when it detects a config change.

Lastly, I appreciated uxigene’s MMM-Cursor module, which allows the cursor to show on the MM screen (or when over the webpage remotely) then hides it after a delay. Definitely saved me some work and some guess-work on what I was clicking on.

Hopefully, this will help others find a solution for touch-based problems or other overlapping-module issues.

Cheers!

sdetweil

@joey you got pm2 restart on config change?
hardly ever works

joey

@sdetweil Yeah, I did not know I was special! I did not know to expect it, but I noticed it was doing it after the second or third config change. This is on Debian 12 on an Intel system, if that matters. If I can provide any information from my system to help it work better, let me know. I do not have much time to code, but I am happy to debug and fiddle with scripts and configs.

sdetweil

@joey well my script sets it up to watch config.js

but they changed the code to watch a folder change, but folders don’t change except when files or folders are added or removed

i opened an issue a couple tears ago, no response

joey

@sdetweil I wonder if it is something specific to Debian 12 then. I thought maybe it was twigging off the folder timestamp change (which does change if I change a file in the folder), but editing config.js.sample does not cause MM to restart.

I ran “pm2 log mm”, and when I edited config.js, this was the first log line as MM restarted;

0|mm  | /home/user/MagicMirror/node_modules/electron/dist/electron exited with signal SIGINT

That makes it look like MM’s node.js/electron is watching the config.js file, rather than pm2, maybe? I do not know enough about node.js/electron to check its logs…

sdetweil

@joey MagicMirror is not watching,

pn2 killed electron to restart

my MMM-Config checks folder change timestamp, and they don’t change except when new files/folders are added to a folder.

used to work all the time, freaks people out when it does!!!

joey

@sdetweil used to work all the time, freaks people out when it does!!! In my copy of The Tao of Programming, there is “The Law of Least Astonishment” (which may be a rephrasing of the decades earlier Principle of least astonishment. Either way, software should not freak people out. On the other hand, predictable behaviour is overrated, and I would rather be surprised by an unexpected good interaction than an expected bad one.

Let me know if I can do anything to test if there is a chance my system can help. Otherwise, I will just be happy to have an extra facet on my gem!