@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!

@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 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 I just re-set up my MagicMirror, and I had to change it back to 2.5. I was trying to change to the 3.0 API, but I did not want to give my credit card number. I tried to use two different pre-paid gift cards (two different types from two different sources), but OpenWeather’s system would not accept either. (Both said “this credit card cannot be used for this purchase” or something similar.) It makes me wonder if maybe OpenWeather had too much push-back on the 3.0 API (either the API change itself or issues or complaints about billing).

I do expect the 2.5 API to stop working at some point. Do you know if there is a way for the default weather module to detect an API failure and have it display an error, as opposed to the eternal “Loading…” message? It might help jog the memory for people like me, and give a better toehold for others when they come to the forums seeking help.

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!

This looks great. As mumblebaj said, I too was concerned about the thickness but more about how far out the screen would stick out from the wall, but showing it next to a wall-mounted television shows that the Magic Mirror sticks out about the same.

It also took me far too long to realize that GA is Google Assistant. Some acronyms/abbreviations just never stick in my brain!

@lu-need

Just to make sure, do you have the opening curly bracket before your first line above? Also, why do you have “code_text” after the comma at the end?

I also notice that you use single quote marks instead of double-quotes in the config: block. I am not sure that matters, but all of the examples use double-quotes. (Single quotes should work, but there is always the chance that npm, MM, or some other component is expecting double-quotes.)

When you say you cannot get it working, does having that block of code in your config.js cause MM not to launch correctly at all? (Ie., do you get a black screen or the “create a config or check the existng one for errors” message?) Or does MM launch correctly, and the module does not show up? Or it shows up, but just has a “Loading” message instead of the expected calendar?

@sdetweil

Thank you for that. I learned a number of things I did not know, including the pointer for the Inspector window!

I also learned that I needed to put the font-size in rem instead of px. (I especially did not think about this, since the :root defines font-size in px units.)

On the little-closer-to-expected size, I also discovered that I had to specify both the module and the class. For clock, this meant doing “.clock .time” and “.clock .date”, as follows:

.clock   .time {
   font-size: 10rem;
}
.clock   .date {
   font-size: 4rem;
}

Again, thanks for the link to the lesson on how to use the Inspector to find this information. I would personally still see the value in including this in the custom.css.sample (or something similar) to demonstrate the need to call both the module and class, and the terminology to use.

Please ignore the ugliness. This is using the default config, and was just for the sake of demoing the effect of the custom.css addition.

@sdetweil

I did find the custom.css.sample (https://github.com/MichMich/MagicMirror/blob/master/css/custom.css.sample), which was where I found the :root and --font-size to edit. However, changing anything in :root seems to affect all modules. I was unable to determine how to edit the custom.css to only affect one module.

Can you help me determine what to add/change in custom.css.sample so that I can affect individual modules in my own custom.css (which itself is just a copy of custom.css.sample)?

Thank you.

In the past, I edited the modules directly to get them the right size. When I upgraded MM to 2.16, I decided my best bet was to remove what I had, and build a new config.js from scratch. The main thing I wanted was to only edit the files that would not be changed from GIT (config.js and custom.css).

I started out with a basic config.js. and I wanted to increase the size of the time. I was editing custom.css, but nothing I did seemed to change the clock. I found that I could edit the “–font-size” under the :root section of the custom.css and make everything bigger or smaller, but I am looking for a way to change the size of individual modules.

In custom.css, I tried the following:

  .clock {
   --width: 400px;
   --font-size: 48px;
   }

I also tried putting it in the :root section, and tried creating a body section as well. After looking at the clock_styles.css in the clock module directory, I also tried similar things with .clockHour and other sections. Really, after I tried everything I thought should work, I then just started trying random things, with continued non-success.

Part of my problem is that I know a little CSS, but I am much better at editing (or adding/changing deleting) existing samples rather than trying to figure out how to start from scratch. In fact, at this point, I do not even know if .clock is the right thing to do and I am just doing it wrong, or if it needs to be :clock, or just clock with no punctuation.

If someone can help me, I would appreciate it. Additionally, if MichMich would not mind, would it be possible to include a couple of examples in custom.css for a couple of the default modules?