@sdetweil That does work. Looking back, I did try that, but I wonder if maybe I had a typo in the region name or something.
Makes things side-by-side as you say (for my usage with upper_third region):
.region.upper.third .container {
flex-direction: row;
}
Thanks, as always, for all the hard work and all the kind help!
I am working on a project where I want to have 7-9 modules stacked either horizontally or vertically.
By default, modules stack vertically. So, if you have three “weather” modules for London, New York, and Toronto, they will look like this:
London Weather
New York Weather
Toronto Weather
This would make sense on a vertical/portrait screen, where stacked makes sense. However, if you have a horizontal/landscape screen, you might run out of space, and it might look weird. Having them side by side might make more sense, like this:
London Weather | New York Weather | Toronto Weather
I spent a non-trivial amount of time trying to override the main.css file’s “flex-drection” settings using the custom.css, but I was unable to do so. I ended up breaking the cardinal rule and modified a file that could be overwritten by future updates.
Would it be possible to have somewhere that could be changed in the config.js? Or, is there an easy way to override using custom.css that I was just too brain-fogged to see?
Thank you.
I feel like I am a fairly non-standard person when it comes to SBCs/mini PCs/cheap platforms, but I have run MM on a variety of hardware without issues (other than common things like issues with SD cards, OSes, etc).
It might also be useful to ask the inverse question: has anyone run across any SBCs that do NOT work with MM? For example, I believe that it will not run on the original Pi, and I think it takes heroic efforts to run MM on the Pi Zero I cannot recall if I ever tried to run MM on my Pi 2. Apart from those, I am not aware of any specific SBCs it will not run on.
I have to say, a traditional Pi 3/4/5 is a good choice for power-limited or space-limited installs. For me, I often get cheap or free old laptops with broken screens, decade-old mini PCs, etc. I take an old laptop, plug it into an old monitor, and set it on a shelf (with the laptop attached to the back of the monitor). A bit of trim around the monitor to make it look a little like a picture frame, and it passes muster. Or, an old thin client that cannot run modern windows can often be found with a behind-monitor mount (like they have at banks and such).
Still, it would be good to have people mention if they have had success with alternatives. Knowing that the LePotato, 35% cheaper than a Pi 4, works is great for example. If I ever wanted to build an MM for a family member, buying a new SBC would probably be a safer choice than what I do for my own stuff…
(I enjoy the beautiful pictures of people who get 50-inch televisions and wood frames with proper 1-way mirror glass, but my projects tend to have a budget of “how many coins did I find in the couch?”)
@sdetweil said in MMM-config with modules that have sub-configs (MMM-TouchButton):
@joey make sure you backup, backup , backup
my backup/restore scripts on top of install/update
can give you a lot of security and safety
I should probably look into that. Currently, I just copy the entire directory to another place on the MM system (in case of an issue with upgrade or messing up the config), and I copy the config.js file to another system (in case of an OS/hardware issue – I use a LOT of old hardware). Up until now, I have mainly taken an OS/hardware failure as an opportunity to try a new flavor of Linux and investigate new modules while setting up MM from scratch again!
I am setting up a new one (brand new laptop with a manufacture date of only 12 years ago!) and it is a great opportunity to look into a proper backup with your scripts.
Wow, that is great! I was just hoping for it to not reset the module settings. Being able to add the module-specific details is definitely useful. That you and Tom worked the rest of it out between my first post and now is even more amazing!
I set up my MagicMirror, but then leave it alone for a long time. I typically only touch it when an OS or MM update causes an issue. Looking back now, the entire setup process is so much better than it has ever been before!
Thank you for all the ways that MM has become easier and easier. (And thanks to Tom for adding the schema file!)
I meant to add a link to the module that started this discussion, since it has been useful to me: https://github.com/Tom-Hirschberger/MMM-TouchButton I mainly use it for shutdown/sleep/reboot functions, but it is a great way to be able to run an arbitrary command for an MM running on a touchscreen (or by opening the MM page from a different device and clicking the TouchButton).
I have recently started using MMM-config. I was unable to determine how to use it with modules that have sub-configs or that it is unaware of, such as MMM-TouchButton.
MMM-TouchButton requires buttons to be defined in the config, but each button has a sub-config with the information about the individual button (such as icon, command/action, etc). By itself, this would not be a huge problem since I have been using MM for years prior to cool new tools like MMM-config. The problem happens when it appears that MMM-config clobbers configs that it did not create, or maybe just configs that it is not aware of (such as these MMM-TouchButton sub-configs).
Since I am new to MMM-config, I may have done something wrong somewhere along the way.
Example of MMM-TouchButton config (entered manually):
module: "MMM-TouchButton",
position: "top_left",
config: {
buttons: [
{
name: "Suspend",
icon: "fa fa-pause",
command: "/usr/bin/systemctl",
args: "suspend",
},
]
},
Config for MMM-TouchButton after going into MMM-config to change an unrelated setting (such as switching the default clock module from 12-hour time to 24-hour time) without even touching/expanding the MMM-TouchButton settings:
{
module: "MMM-TouchButton",
position: "top_left",
config: {
buttons: [
"[object Object]"
]
},
disabled: false,
hiddenOnStartup: false,
configDeepMerge: false,
order: "*",
animateIn: "None",
animateOut: "None"
},
@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!
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?
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.
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?
I am not sure this is the problem, but why are you using “apikKey”? My working OpenWeather module uses “appid”. Also, should it be “apiKey” (with only one “K”)?
I am using a config based off an old version, so I looked at the latest config.js.sample from the repo (https://github.com/MichMich/MagicMirror/blob/master/config/config.js.sample ), and it uses apiKey (with only one “K”).
{
module: "weather",
position: "top_right",
config: {
weatherProvider: "openweathermap",
type: "current",
location: "New York",
locationID: "5128581", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
apiKey: "YOUR_OPENWEATHER_API_KEY"
}
},
Lastly, if you have just generated your OpenWeather api key, it takes some amount of time (24 hours?) before it will start working. Hope this helps.
@BKeyport said in MMM-SystemStats (cpu temp/load, fre ram ...):
@v4r23 If you followed the install completely, reboot the system. It’s the one step that fixed it for me.
I was having the same issue, and rebooting fixed it for me. That surprised me, since I have been able to add modules on the fly (ie., without rebooting) so far. However, since MMM-SystemStats has system calls, I guess that is the difference.
I just donated as well. Hopefully, others are donating without posting, and continue to donate! Thanks to MichMich for MagicMirror, and thanks to the community for all the support, modules, and other contributions. I was amazed when I found MagicMirror and it met my needs exactly.