I used an iterative command for this because there are so many photos:

cd ~MagicMirror
find < path to images >/* -exec node_modules/.bin/electron file:///{} \;

For each file in that directory, it would launch the electron browser and open the image. Because electron continues to run until it is terminated, this puts one image at a time on the screen. After each one loaded, I would simply click “X” to close the browser and it would move on to the next image.

While I -did- see one specific image file appear to load but not actually show any content (initially), I believe this may have been an issue with the fact that I walked away from the process for about ten minutes. Expanding the browser window caused it to re-render and it displayed fine. Additionally, this is an image that I have personally seen on the screen many times with no apparent link to any crashes.

It seems that any image-specific issues are possibly cumulative since loading each one in turn starts with a fresh memory allocation as the browser exits after each image.

What would I be looking for?

Turns out I’m wrong on two counts…

1. I -have- been testing the caching disable extensively as it’s currently disabled. :)

2. There is not a slow-paint issue for images with caching disabled.

Unfortunately, I can now say that I’m pretty comfortable with the assessment of this NOT being a caching issue. With caching disabled for electron, the issue has now occurred multiple times in just the last 4-5 hours.

I’m not sure that this is a caching error as it seems related very directly to the displaying of images but “rears up” differently based on the module. In the prior module I was using, displaying ANY graphical content lead to a quick demise of the system (within 15 minutes or so, typically). With the current module, everything was 100% fine until I cropped some of the images. The current module is one you are using with zero images, so there has to be something about the crop method I used that threw things out of whack.

Even if it IS a straight-up caching issue, I can’t disable caching because the image display process looks poor. I’ve tried with caching disabled and it is not at all smooth, and I also haven’t tested that anywhere near enough to actually validate that it corrects anything.

Is there a way for me to be able to at least understand the process in effect when this error gets thrown? The entry in the error log seems super generic with no real information along with it.

Up until yesterday, my MM had been running reliably over a period of days without blanking the screen or locking up.

I have a few default modules (calendar, currentweather, and weatherforecast) enabled and only one third-party (MMM-ImagesPhotos). After correcting some CSS and config.js mistakes over the last couple of days so that it displays what I want, and how I want it, I decided to move on to tinkering with the images themselves.

I have a lot of photos that I am using in the background. Many were shot on my DSLR (24MP) and some came from other DSLR’s (Disney’s Photo Pass) and some smart phones. Using the default image size (3:2 ration) for landscape left gray letterbox bars on the sides of the screen. I began cropping the photos from 3:2 to 16:9 and replacing the original files.

While the photos display mostly “perfect” (for some reason, I am still seeing what looks like a 1-2 pixel “frame” around many images that should be full screen), the RPi (Model 3 v1.2) is back to blanking the screen after some period of run time and the logs show “Out of memory.” I don’t know if it’s related, but I was using a different module to display photos in the background (MMM-BackgroundSlideshow) and was using the exact same set of photos. With that module, I had not cropped ANY of the photos but was getting the same sort of “Out of memory” behavior.

I’ve seen some other possibly anecdotal ‘reports’ of certain image-related details causing this sort of error, so I’m wondering if it’s at all related. I also read through a thread from not-that-long-ago where various bugs in the notification module were being fixed (and the fixes being tested), but there wasn’t any follow-up in that thread as to the status.

I’ve also tried increasing swap space on the MM, but that has not made any difference.

Any tips on how to go about starting to troubleshoot this? The device itself remains 100% responsive and network access is fine. I can send signals to turn the display on and off and that works as well. The only way to “fix” the solid black screen is to restart MM or the entire device.

@sdetweil said in Calendar Doesn't Honor custom.css for Background:

@ember1205 said in Calendar Doesn't Honor custom.css for Background:

the Developer options with a real browser

electron is a real browser, so you can do this ON the mirror,
or from your desktop if the config parms allow remote system access.

I always forget that I can use local browser to view developer window

Now that you mention it, I have used the developer options directly on the appliance and should have remembered that. Thanks for the reminder!

@sdetweil

I found and fixed it (sort of). I had added content to my custom.css file to create a blurred background image as I was experimenting with some display options. I commented that content out (or so I thought) and placed all of these controls “after” that section in the custom.css file.

Through a variety of changes that I was making to try and track this down, I noticed through viewing the Developer options with a real browser and looking at the elements that whatever section came first after my blurred background section wasn’t being picked up. As I rolled the changes down to the bottom, I was seeing different sections stop working.

Seems to be all fixed now, and is clearly not a bug in the product but was a bug in my custom.css content. After deleting the content, all is displaying properly.

@sdetweil

Calendar still does not pick up any CSS controls from the main custom.css file. Here is a snippet of what I added:

.calendar {
  background-color:rgba(32,32,32,0.6);
  border-radius:8px;
  padding:8px;
}

I modified the other sections to look like this:

.module.clock {
  background-color:rgba(32,32,32,0.6);
  border-radius:8px;
  padding:8px;
}

.module.currentweather {
  background-color:rgba(32,32,32,0.6);
  border-radius:8px;
  padding:8px;
}

.module.weatherforecast {
  background-color:rgba(32,32,32,0.6);
  border-radius:8px;
  padding:8px;
}

They work fine “either way”. Calendar refuses to pick up the formatting from the custom.css file it seems and I have to put the controls into the calendar.css file in the module’s directory.

@sdetweil

Ok. I will look into making those changes and see if I can get it working the way that I want.

Why does “module.currentweather” work fine, though (along with the others that I mentioned)? CSS has always been a weak spot for me…

@sdetweil What does “not the world module” mean? Just seeing that now, and not following…