Right, I think this is the only way too. It’s kind of annoying though because the value can change so I would need to send it to send node helper every single time it change to keep it up to date.
Oh well.

@shbatm I could but then It would be asynchronus. I can"t have a function doing stuff, get the variable I want, continue to do stuff.
I would have to do stuff, send a socket notification to request the variable, receive the notificataion, send back the variable with another notification then get the notification and only then I would be able to continue what I was doing. This is a very slow process just to get a variable value. Also I would have to store a lot of variable so I can use them in two different function.

What I want is similair to a function call you know ? doing stuff in the row. I don’t want to do stuff in two different fonction asynchronusly.
It can be usefull to do it like this in some cases don’t get me wrong, but’s it’s create somes issue as well in some other cases

Is there a way to have a synchronus socket notification or something similar ?
Let me explain, I have a module, that module have a node helper. I can send thing directly to the node_helper with a third party software. And I do it by making a GET. As an example, One of the get is about retreving a variable in previously set in config map. But to get that I have to send a socket notification and wait until I have the answer. But this is asynchronus so it doesn’t wait so I can’t send the answer back.
I though about sending the config to the node_helper in the start function but it’s kind of a pain because I would have to update it every so often if the value change.

So is there a way to do some sort of synchronus request from the node_helper to the associate js file ?

Scratch that, the first example is working. It’s just that, because of the body black background, the text inside the iframe wasn’t visible. Justed needed to to change the css for the iframe to overide the background of the body

Hello, I try to put my own html code into an iframe but it doesn’t work. How shoudl I that ?
I tryed :

getDom: function() {
  var wrapper = document.createElement("div");
  var iframe = document.createElement("iframe")

  iframe.src = this.file("biblop.html")

  wrapper.appendChild(iframe)
  return wrapper
}

No error, (I can see the border of the iframe) yet nothing happen in it

I tryed to “write” the html into the iframe as well, thinking that I could use the node helper to read my html file to get the content eventually.

getDom: function() {
  var wrapper = document.createElement("div");
  var iframe = document.createElement("iframe")

  var myContent = ''
     + 'My dynamic document' 
     + '<p>Hello world</p>';

  iframe.contentWindow.document.open('text/htmlreplace'); 
  iframe.contentWindow.document.write(myContent);
  iframe.contentWindow.document.close();
 
  wrapper.appendChild(iframe)
  return wrapper
}

But content.Window is null every time so it can’t be open.
I tryed to tweak those two solution in different ways (like using absolute path) but the end result was the same.
How can I do that ?

(PS: I tryed the first code I wrote above outside of the magic mirror first on my ubuntu and it was working just fine. Soemhow it’s the magic mirror itself that don’t like it)

@bminer1 That’s normal, there is multiple type of user in linux with different level of permission, it’s for safety (that you or a virus doesn’t destroy your operating system). When you are connected to your regular user (pi if you are using raspbian) you have only access in writing to your home folder. However, the pi user is also a “sudo” user, which mean that you can get higher permission in exchange of providing the right password (which is your regular password in raspbian).
To do that you write sudo your_command , for example sudo nano /etc/opt/AlexaPi/config.yaml . you’ll be ask to enter a password and then you can edit your file.
It’s like being administrator on windows, but with a password instead of a window that ask you if you want to run as administrator

I sometime receive the same notification multiple time, like if the mirror run my module twice or something. It’s not happening every time.
As an example, I have a module that send a socket notification in the start function to the node helper to initialise something. let’s call it Notif_A.
l catch it the notification, make sure it’s Notif_A with an if statement, and When the node helper did it’s job it send back the data he got. still with a send socket notification Let’s call it Notif_B.
The odd thing is that I sometime got into the if that check if it received Notif_B twice in a row. Like if I got the notif twice.
The thing is, I only send Notif_A in the start function And I only send Notif_B if I received Notif_A.

I also noticed that the getDom function on some modules are callde 2 or 3 time in the raw at the begining (I checked with console.log)

So… what’s happening here ? Why is the notification is catched twice ? Is the start function runned twice for some reason ?

@RE_Magic_Mirror Nice pun ;)

@RE_Magic_Mirror Not that I know of but I am not an expert in linux configuration.

But if your issue is about “seeing” the desktop, I might have some tricks for you.
Maybe you could change you desktop wallpaper to be a black screen for started and take away the trash icon so the desktop part is black and empty.
Then you could right click on the panel barr above your screen and enter the panel settings and play around with them to make the barre itself invisible and then take away the unnecessary icons on it.
It will not make your mirror start quicker but you won’t see the default wallpaper and menu as much

@opensky727 did you put the sudo at the begining of the command ?
It should loook like this
sudo env PATH=$PATH:/usr/bin /usr/lib/node_modules/pm2/bin/pm2 startup systemd -u pi --hp /home/pi

You should have the permission as sudo

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

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.

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

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

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.

@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

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

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

@Marko Can you copy past what you did exactly ?

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