MagicMirror on a 4k TV

thad

I’m new to MagicMirror. My use case is to have an informational display on the 4k TV I have in my office. I’ve installed MagicMirror (latest version 2.11) on a Pi 4 and modified the config.js for imperial units, weather location, etc. Things are working fine. But, the text is way too small on.

I thought the simple answer would be to add the ‘zoom’ variable in the config.js file. It’s not working as I would expect. Once added, the font is way to large. Even after removing the the variable the font remains huge. I need to be able to reset it.

Another factor here is my only access to the Pi is through SSH. I don’t have a keyboard or mouse connected.

So, what’s the best way to increase the size of the text? I really don’t want to run the screen at a lower resolution. I can’t easily increase/decrease the zoom factor of the browser. If there’s a way to do that through SSH, I’m willing to try. Is a custom.css file the answer? Is there an simple way to adjust the overall size of things there?

Thanks for any advice you can offer.

Thad

sdetweil

@thad yeh, the main.css is in pixels, and the size of the screen changed

I have a main.css that is view height/width , so the ‘look’ is the same on different sized displays…

do this

cd ~/MagicMirror/css
curl -sL https://www.dropbox.com/s/o07lc85wnn1hcsm/mainvh.css?dl=0 >mainvh.css
mv main.css mainpx.css
mv mainvh.css main.css

then restart MM

Mykle1

@thad said in MagicMirror on a 4k TV:

Is a custom.css file the answer?

It is if you want to increase the size of JUST the text. You’d have to target the font classes in each module and set a css rule for each.

However, there are two ways to increase the size of all the modules, in their entirety, that requires less work.

zoom at the beginning of your config. Adjust accordingly:

var config = {
    address: "0.0.0.0",
    port: 8080,
    ipWhitelist: [], 
    language: "en",
    timeFormat: 12,
    units: "imperial",
    zoom: 2.2, //  adjust this value to your liking

    modules: [
...

Or take a look at this page for some key commands that allow you to change the size of the modules on the fly.
https://forum.magicmirror.builders/topic/5619/how-to-find-and-use-key-commands-in-mm-for-absolute-beginners?_=1587086042827

Just another option to @sdetweil’s suggestion.

Mykle1

@thad said in MagicMirror on a 4k TV:

Even after removing the the variable the font remains huge. I need to be able to reset it.

That’s because that change survives restarting MM, even when you remove the variable. It needs to be set back with the variable zoom: 1, or zoom: 0,. I can’t remember which. Then you can remove the variable. You can also reset it with the key commands from the link I posted above.

thad

Thanks @Mykle and @sdetweil. So far my experience with the zoom option, you can zoom in, but you can never zoom out. I tried both 1 and 0 as zoom settings and it never went down. I was able to connect a keyboard and adjust it that way.

I’ve downloaded the css file @sdetweil linked that’s based on screen percentage. I’ll play with it this weekend. I understand this only adjusts the text fonts and not icons. I assume I can adjusts the icons in the module itself. The only modules I’m using that have icons are the weather ones.

One unrelated observation, I can’t restart mm with the command I’ve seen: ‘pm2 restart mm’. What I’ve found is mm restarts when save changes to the config.js file. So, in order to simulate this I created an alias for the command ‘touch $HOME/MagicMirror/config/config.js’. That seems to work for me. Let me know if there’s a better way to restart mm. Again, my only access is through SSH.

Thanks again for the help.
Thad

sdetweil

@thad pm2 status should tell u the name. U can also use the number

pm2 restart 0

If you used my installer, it is called (wait for it… ) MagicMirror

u must be lucky, not ONE of my systems updates when I change config.js

thad

Thanks @sdetweil that’s exactly what I needed to know about pm2. I did use your installer.

I’m now using the view height/width css file you created. That works great. Since I’m using a TV instead of a mirror, I want to reduce the outside margins. Currently there’s about an inch and a half of unused space around the border. I’m going to start playing with the main.css file to use all the monitor real estate.

Thad

Mykle1

@thad said in MagicMirror on a 4k TV:

I’m going to start playing with the main.css file to use all the monitor real estate.

It’s not recommended that you make any changes to the main.css file.

You can accomplish what you want in the custom.css file. For example, “to use all the monitor real estate.”

body {
   margin: 10px;
   height: calc(100% - 20px);
   width: calc(100% - 20px);
}

Adjust to your liking. Above creates a 10px border.

sdetweil

@Mykle1 DON’T USE PX in the view height file… calculate the view height/width and use the tiny number

the default is 120/1920
so the new is 240/3840 (width)
or 240/2160 (height)

so, if u want half that 120/2160, and 120/3840