Associating module output with custom.css

j.e.f.f

@dwburger One thing I forgot to mention… MagicMirror has the mouse cursor hidden by default. When you are working locally, you’ll want to make the cursor visible in your custom.css file, like so:

html {
  cursor: auto;
}

You can also modify main.css directly if you want to keep this change out of your custom css file (assuming you’ll eventually want to upload it to your mirror). It’s in the very first rule:

html {
  cursor: none;
  overflow: hidden;
  background: #000;
}

You can simply comment out the line, like so:

html {
  /* cursor: none; */
  overflow: hidden;
  background: #000;
}

Otherwise you will have a hard time right-clicking anything with a hidden cursor :D

lavolp3

One small remark the @j-e-f-f 's great explanations:
You don’t need to run serveronly mode to access the mirror in your browser with dev console.
The standard running mode already has the server on port 8080 running as well. So with the standard MM running (e.g. with pm2) you can already access the mirror with your browser as well.

A Former User

Adding one more.
You can access your front-end dev console with Ctrl+Alt+i(or in MacOSX, Alt+Command+i) on MM screen.(with Keyboard connected)

j.e.f.f

@lavolp3 said in Associating module output with custom.css:

One small remark the @j-e-f-f 's great explanations:
You don’t need to run serveronly mode to access the mirror in your browser with dev console.
The standard running mode already has the server on port 8080 running as well. So with the standard MM running (e.g. with pm2) you can already access the mirror with your browser as well.

This is certainly true, but for local CSS work (i.e.: running a second copy on your laptop so that you can immediately see your CSS changes), you need to take an extra step in order to be efficient. Electron will start in full-screen mode by default. So you’ll need to switch to windowed mode (From electron’s menu: View -> Toggle Full Screen. Also it should be noted that the only way to close Electron is to stop Magic Mirror (CTRL-C in the console window). If you close Electron a new window will immediately re-open in full-screen mode.

Since I almost always already have Chrome open, I find it more efficient to run MagicMirror in server only mode and use Chrome to do my dev work. Similarly, you can use another browser if you prefer its dev tools.

My instructions above all assume you’d want to run a second copy of MagicMirror locally. If you want to make changes directly to your instance running on a Raspberry Pi, you’ll need to jump through a few extra hoops.

By default, Magic Mirror will refuse connections from external sources. You need to modify the config to allow this.
When you make a CSS change you either need to work directly through an SSH session and modify the CSS file using Nano or another CLI text editor, or you need to make the changes locally and the upload them each time to your Pi.
In order to see your changes, you need to refresh Electron. So far I haven’t found a quick way to to do this through SSH. The only way I’ve been able to do so is to restart MagicMirror altogether, which on the Pi is slow.

So it’s a bit of a hassle up front to install a local copy of MagicMirror on your laptop, as you’ll need to do a manual install, and reinstall all of the applicable modules, but once you’re up and running it’s the best way to make code or CSS changes.

lavolp3

@j-e-f-f I currently don’t see the advantage in having a local duplicate for the mirror.
I have a smb share on the mirror open to access the files directly with a programming tool from my laptop. (I’m using notepad++ or atom)
Then I access the mirror from my laptop via chrome.

A reload of the MM homepage in Chrome is automatically a reload of all the program code I have updated. Better than doing pm2 reload mm, which takes far longer.
And I have it all on one screen at one machine.

dwburger

Thanks for all the helpful and informative replies! Lots of information for this relative beginner to digest. I’ll work on the suggestions offered and see how I progress. Thanks again!

dwburger

@j-e-f-f Your suggestions worked well…thanks! It took me a while to get the localhost access working, but I can now view my MM2.5 using my Chrome web browser and then using the inspector to find displayed items I want to change. Thanks again!