MMM-ModuleScheduler: need help

[sdetweil]

@anagallis the MMM-RandomPhoto module doesn’t support multiple instances
the html ID and Classes are hard coded

[sdetweil]

@anagallis delete the MMM-RandomPhoto folder

cd modules
rm -rf MMM-RandomPhoto

and git clone my repo

cd modules
git clone https://github.com/sdetweil/MMM-RandomPhoto

this supports multiple instances
restart MagicMirror

[anagallis]

@sdetweil aaaah ok, it’s not multiple instances! I understand the problem now.

The second version you give of the Random-Photo module can’t display local images, it’s only for images via the net. But thank you.

l have to find a new image module, witch can be multiple instances and with picture in local directories.

[sdetweil]

@anagallis ah, I see. I found the original. Not the other fork. Same problem

Working on it

[sdetweil]

@anagallis I have redone my fork of the MMM-RandomPhoto module using the correct source, to support multiple instances.

to test this do

cd ~/MagicMirror/modules
rm -rf MMM-RandomPhoto
git clone https://github.com/sdetweil/MMM-RandomPhoto.git
cd MMM-RandomPhoto
git checkout multi-instance
npm install

see the readme for the doc on how to use the new id property to create multiple instances and what you MUST do for css to support each instance… easy, but required.

[anagallis]

Waowww! You did a fork for us, marvelous!
Many thanks @sdetweil

I’ll test it, and i’ll say you later if if works here.

[anagallis]

It’s great!
But I have a problem with the css.
css is applied only if I set the id=“_”, and if I have only one id with this value.

When I replace

id='L2_'

by

id='_'

See bellow if I done a mistake.

here is my custom.css:

#L1_randomPhoto, #L2_randomPhoto, #Ma1_randomPhoto, #Ma2_randomPhoto, #Me1_randomPhoto, #Me2_randomPhoto, #J1_randomPhoto, #J2_randomPhoto, #V1_randomPhoto, #V2_randomPhoto img {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

#L1_randomPhoto, #L2_randomPhoto, #Ma1_randomPhoto, #Ma2_randomPhoto, #Me1_randomPhoto, #Me2_randomPhoto, #J1_randomPhoto, #J2_randomPhoto, #V1_randomPhoto, #V2_randomPhoto img.grayscale {
    filter: grayscale(100%);
}
....etc

.
and a part of the config.json :

	modules: [
        {
            module: 'MMM-ModuleScheduler',
            config: {
                // SHOW MODULES WITH THE CLASS 'lundimatin' AT 09:00 AND HIDE AT 13:00 EVERY LUNDI
                //global_schedule: {from: '0 9 * * *', to: '0 13 * * *', groupClass: 'lundimatin'},
                // SHOW MODULES WITH THE CLASS 'lundiaprem' AT 14:00 AND HIDE AT 17:00 EVERY LUNDI
                //global_schedule: {from: '0 9 * * *', to: '0 17 * * *', groupClass: 'lundiaprem'},         
            }
        },
        {
            module: 'MMM-RandomPhoto',
            position: 'fullscreen_below',
        	classes: 'scheduler',
            config: {
				module_schedule: {from: '0 9 * * 1', to: '0 13 * * 1' },
                imageRepository: "localdirectory",
                repositoryConfig: {
                    path: "/home/pi/MagicMirror/modules/Images/lundimatin/",
                    recursive: true,
                    exclude: ["tmp", "#recycle"],
                },
                updateInterval: 5,
                opacity: "1",
                id: 'L1_',
            }
        },
        {
            module: 'MMM-RandomPhoto',
            position: 'fullscreen_below',
        	classes: 'scheduler',
            config: {
				module_schedule: {from: '0 13 * * 1', to: '0 17 * * 1' },
                imageRepository: "localdirectory",
                repositoryConfig: {
                    path: "/home/pi/MagicMirror/modules/Images/lundiaprem/",
                    recursive: true,
                    exclude: ["tmp", "#recycle"],
                },
                updateInterval: 5,
                opacity: "1",
                id: 'L2_',
            }
        },

[sdetweil]

@anagallis said:

note you missed one _ (my fault in instructions) there is a root {} section that contains one too

:root {
    --_randomPhoto-blur-value: 0px;
}

#L1_randomPhoto, #L2_randomPhoto, #Ma1_randomPhoto, #Ma2_randomPhoto,

if you are going to use comma, then you need to replicate the actual tag too (I think)

#L1_randomPhoto img, #L2_randomPhoto img, #Ma1_randomPhoto img, #Ma2_randomPhoto img ,........

note the id can be anything, you were using a string for the global schedule classname, you could use the same string

here is what I did and verified it worked (without using commas)
config

{
        module: 'MMM-RandomPhoto',
        position: 'fullscreen_below',
        config: {
                opacity: 0.3,
                animationSpeed: 500,
                updateInterval: 60,
                imageRepository:'localdirectory',
                id:"foo",
                repositoryConfig :{
                        path: '/Users/sam/Pictures'
                }
        }
},      
{       
        module: 'MMM-RandomPhoto',
        position: 'fullscreen_below',
        config: {
                opacity: 0.3,
                animationSpeed: 500,
                updateInterval: 60,
                imageRepository:'localdirectory',
                id:"fribble",
                repositoryConfig :{
                        path: '/Users/sam/Pics'
                }
        }       
},

custom.css

:root {
    --foorandomPhoto-blur-value: 0px;
}

#foorandomPhoto img {
    opacity: 0;
    position: absolute;;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

#fooArandomPhoto img.grayscale {
    filter: grayscale(100%);
}

#foorandomPhoto img.blur {
    filter: blur(var(--randomphoto-blur-value));
}

#foorandomPhotoIcon {
    position: absolute;
}

#foorandomPhotoIcon.rpitop {
    top: 5px;
}

#foorandomPhotoIcon.rpibottom {
    bottom: 5px;
}

#foorandomPhotoIcon.rpiright {
    right: 10px;
}

#foorandomPhotoIcon.rpileft {
    left: 10px;
}

#foorandomPhotoIcon i {
    opacity: 1;
}

#foorandomPhotoIcon i.rpihidden {
    opacity: 0;
}
:root {
    --_=fribblerandomPhoto-blur-value: 0px;
}

#fribblerandomPhoto img {
    opacity: 0;
    position: absolute;;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

#fribblerandomPhoto img.grayscale {
    filter: grayscale(100%);
}

#fribblerandomPhoto img.blur {
    filter: blur(var(--randomphoto-blur-value));
}

#fribblerandomPhotoIcon {
    position: absolute;
}

#fribblerandomPhotoIcon.rpitop {
    top: 5px;
}

#fribblerandomPhotoIcon.rpibottom {
    bottom: 5px;
}

#fribblerandomPhotoIcon.rpiright {
    right: 10px;
}

#fribblerandomPhotoIcon.rpileft {
    left: 10px;
}

#fribblerandomPhotoIcon i {
    opacity: 1;
}

#fribblerandomPhotoIcon i.rpihidden {
    opacity: 0;
}

I updated the module README.md to document the change needed there too

[anagallis]

@sdetweil
I found my mistake!
I have copy the custom.css in the path /home/pi/MagicMirror/css and it works great!

You’ve just helped me make the schedule accessible to a group of people with disabilities who can’t read. I’m going to show them their half-day schedule using pictures.

It’s great that you took the time to help us—thanks again!

[sdetweil]

@anagallis yes, custom.css is in the MagicMirror/css folder

next release (April 1 it will move to the config folder (user files will all be in one place)