Posts made by romain

romain

I choose your first idea to hide all other module at startup. It worked good enough

romain

Hello guys, I have an issue. I want to controle the visibility and the module’s position at run time without edition the config file.
I made a module (well, I edited an existing module to fit my needs but that doesn’t matter) to do that.
Show and hide module is easy enough.
as for moving them, my methode is to get div of the module on the screen, get the div of the region I want to put it in (it’s inside container actually) then appendChild.
That’s works fine.

BUT, my end goal is to have lot’s of module (more than the screen can show at one time) and control where I put them and if I need to show them or not at run time. Obviously I don’t want to have them all at screen at startup. I would like to have most of them hidden. but if I don’t set a position, the dev of the module is never created and therefor I can’t move it.

How can I do that ? How can I create the div of the module if no position was given ? (I noticed the divs have different value for the style depending on the modules, and I don’t know where to find those information so I can’t really create a generic function to create the div). if every module had the same style it would be no problem but that’s not the case

I would like to avoid editing the index.html if possible.

romain

@DongerZone True, but far as I can tell, html/css isn’t very modular by itself. Unless you use something else like javascript to generate your html/css as you go. (or change it anyway)

romain

I’m not entirerly sure about that but if you check the index.html within the mirror you can see

https://pastebin.com/CJFZ3pub

then in the main.css of the css folder we can see

.region {
  position: absolute;
}

.region.fullscreen {
  position: absolute;
  top: -60px;
  left: -60px;
  right: -60px;
  bottom: -60px;
  pointer-events: none;
}

.region.fullscreen * {
  pointer-events: auto;
}

.region.right {
  right: 0;
}

.region.top {
  top: 0;
}

.region.top .container {
  margin-bottom: 25px;
}

.region.top .container:empty {
  margin-bottom: 0;
}

.region.top.center,                                                                                                                                                                                                                          
.region.bottom.center {
  left: 50%;
  -moz-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

.region.top.right,                                                                                                                                                                                                                           
.region.top.left,                                                                                                                                                                                                                            
.region.top.center {
  top: 100%;
}

.region.bottom {
  bottom: 0;
}

.region.bottom .container {
  margin-top: 25px;
}

.region.bottom .container:empty {
  margin-top: 0;
}

.region.bottom.right,
.region.bottom.center,
.region.bottom.left {
  bottom: 100%;
}

.region.bar {
  width: 100%;
  text-align: center;
}

.region.third,                                                                                                                                                                                                                               
.region.middle.center {
  width: 100%;
  text-align: center;
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.region.upper.third {
  top: 33%;
}

.region.middle.center {
  top: 50%;
}

.region.lower.third {
  top: 66%;
}

.region.left {
  text-align: left;
}

.region.right {
  text-align: right;
}

.region table {
  width: 100%;
  border-spacing: 0;
  border-collapse: separate;
}

First you can see that the module side to side (top left, top center, top right and the bottom counter part) are not at the same level that other places they are inside the container of the top bar.
Also when you watch the css you see that all class except for those have width: 100% .

You can see that for the class left and right, they do a text-align: left and a text-align: right and for the class center they do a left: 50% and all sort of translation.

So I am guessing that if you wanted to replicate that behaviour for the upper third, middle center and lower third, you could add new region under their container and make sure to choose a class name including left, center and right respectively.
class=“region left” as an example so it apply the . It might be enough (you can see that the class “upper third” have a top:33% but the class third itself have a width:100% so you don’t want to include third in the class name yet you want the top:30% so maybe creat a new class that do the top:33% . let’s call it custom_upper_third as an example:

.region.custom_upper_third {
  top: 33%;
}

so your html could look like

https://pastebin.com/mdzSipzH

Then you do the same for the other sides.

Keep in mind that I didn’t test this and that I’m quite new in html / css / javascript so I might be wrong about this

romain

You could also allow any ip to connect to the mirror by emptying the ipWhitelist array. I won’t recomand it because it mean that anybody on your network could manipulate your mirror but it’s easy.

romain

@claudia copy past the entire file so I can see If I know what to do here. Maybe do it as private message since it’s begin to not be about voicecontrol anymore

romain

@claudia It sure does look like the issue came from the IframeReload module indid. It seem that the “this.media” wasn’t initialized since it say that it’s “undefined”.
Where did you initialized that variable ?

romain

@claudia To run it in dev mode first close the current mirror. If you followed the autostart thing, it will be pm2 stop mm. Then, you need to go in the MagicMirror folder. cd ~/MagicMirror/.
If you are directly on the raspberry, you need to write the following command npm start dev
If you accessing your raspberry from a remote location through ssh (or vnc), you’ll need to run DISPLAY=:0 npm start dev . the display thing is to told your raspberry the visual should be run on the raspberry screen.
The mirror should open allongside a browser. within the brower you’ll have few tab. One of the tab should be “console”. If it’s not selected, click on it.

every "console.log(“message”) will appear on the console. and every Log.log(“message”) will appear directly on the terminal if I’m not mistaking.

when you finished with debug mode, you can close the mirror by sending the kill signal (press ctrl + c on your keyboard. If you are using a mac, I guess it would be command + c . Not sure about that). Or you can close the terminal window.

romain

@Marko Can you copy past what you did exactly ?

romain

@asquelo You probably did it wrong. I did that a lot few weeks ago.
you need to run pm2 startup as non sudo. then it display a command you have to run. On my pi it’s the following :

pi@raspberrypi:~ $ pm2 startup
[PM2] Init System found: systemd
[PM2] You have to run this command as root. Execute the following command:
sudo env PATH=$PATH:/usr/bin /usr/lib/node_modules/pm2/bin/pm2 startup systemd -u pi --hp /home/pi

so you run the command that was display. For me it’s sudo env PATH=$PATH:/usr/bin /usr/lib/node_modules/pm2/bin/pm2 startup systemd -u pi --hp /home/pi

Then you pm2 start mm.sh , then you wait until it’s open (not sure if it’s necessary to actually wait). Then while it’s open, you run pm2 save. They you can reboot and see your mirror open.

I used to run sudo pm2 startup and don’t understand why it wasn’t working back in the day even though the autostart guide didn’t ask to do it…