Navigation

    MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord

    MagicMirror on a 4k TV

    General Discussion
    3
    9
    129
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • T
      thad last edited by

      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

      S Mykle1 3 Replies Last reply Reply Quote 0
      • S
        sdetweil @thad last edited by

        @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

        1 Reply Last reply Reply Quote 1
        • Mykle1
          Mykle1 Project Sponsor Module Developer @thad last edited by 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.

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

          1 Reply Last reply Reply Quote 1
          • Mykle1
            Mykle1 Project Sponsor Module Developer @thad last edited by 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.

            1 Reply Last reply Reply Quote 0
            • T
              thad last edited by

              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

              S 1 Reply Last reply Reply Quote 0
              • S
                sdetweil @thad last edited by 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

                1 Reply Last reply Reply Quote 0
                • T
                  thad last edited by

                  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 1 Reply Last reply Reply Quote 0
                  • Mykle1
                    Mykle1 Project Sponsor Module Developer @thad last edited by 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.

                    S 1 Reply Last reply Reply Quote 0
                    • S
                      sdetweil @Mykle1 last edited by

                      @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

                      1 Reply Last reply Reply Quote 0
                      • 1 / 1
                      • First post
                        Last post
                      Enjoying MagicMirror? Please consider a donation!
                      MagicMirror created by Michael Teeuw.
                      Forum managed by Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
                      This forum is using NodeBB as its core | Contributors
                      Contact | Privacy Policy