• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
MagicMirror Forum
  • Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
A New Chapter for MagicMirror: The Community Takes the Lead
Read the statement by Michael Teeuw here.

Is it possible to have CSS for normal screens and a custom CSS for 7in screen?

Scheduled Pinned Locked Moved Custom CSS
32 Posts 3 Posters 7.6k Views 3 Watching
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.
  • R Offline
    Radnor
    last edited by Apr 26, 2020, 10:06 PM

    Currently I do not have a custom CSS defined. Only using default CSS.

    What I would like to do is determine screen size and if large screen use my existing CSS.
    If 7" screen (or smaller) I only want to display clock, current weather, and forecast vertically.

    S 2 Replies Last reply Apr 26, 2020, 10:48 PM Reply Quote 0
    • S Offline
      sdetweil @Radnor
      last edited by sdetweil Apr 26, 2020, 10:51 PM Apr 26, 2020, 10:48 PM

      @Radnor you could write a script to start magic mirror (in place of the script we use today)… and have two css and two config.js, renaming/copying per the requirements (I would copy over every time, then i can’t get out of synch)

      you could add code to config.js and make variables u set for small/large and use those to turn on/off the disabled value for selected modules.

      nothing exists out of the box,

      I think the xrandr command will tell you the size of the display

      xrandr  -q| grep  connected
      

      returns (for my dual monitor system)

      DVI-I-1 connected primary 1920x1080+0+0 (normal left inverted right x axis y axis) 598mm x 336mm
      DVI-D-1 connected 1920x1080+1920+0 (normal left inverted right x axis y axis) 521mm x 293mm
      

      on my pi4 with 4k tv

      xrandr --display :0 -q | connected is 
      HDMI-1 connected primary 3840x2160+0+0 (normal left inverted right x axis y axis) 708mm x 398mm
      

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      1 Reply Last reply Reply Quote 0
      • R Offline
        Radnor
        last edited by Apr 27, 2020, 12:21 PM

        @sdetweil thank you for the reply. But I think I lead you down the wrong path looking for my solution…

        I have MM running on a RPI it’s started by a small script running “npm start”. There it displays all of the info I am looking for. Works GREAT!!!

        When I connect to it from a DIFFERENT machine is where I want to detect the screen size and adjust accordingly.
        Typing the address in as xxx.xxx.xxx.xxx:8080 from my laptop display all info (same as RPI). But, if I connect and the screen is small (phone, kindle fire, 7" screen, etc) just show time, date, weather, and forecast.

        I started down the path of (window.size in js) but made my config file very angry. Did not try @media in css yet.

        With the COVID and the stay at home thing, have lots of time to explore…

        Thank you again and be safe!

        S 1 Reply Last reply Apr 27, 2020, 12:50 PM Reply Quote 0
        • S Offline
          sdetweil @Radnor
          last edited by sdetweil Apr 27, 2020, 6:04 PM Apr 27, 2020, 12:50 PM

          @Radnor ah well, THAT is a completely different kind of problem.

          config is loaded for each browser, just once for the node_helpers

          u can turn off modules by setting their disabled property to true
          and config.js is code, SO you could do this

          there is a variable available at config load time outerWidth (and outerHeight)

          so you could use them to programatically set disabled true and change positions

          var small_size=800   // this in front of config=  
                                             // rather than coding 800 in all the spots, only one place to change it
          

          for example

          {
             module: calendar,
             position: outerWidth == small_size ? 'upper_right':'upper_left',
             disabled: outerWidth == small_size ? false:true,
             config:{
                ...
                ...
             }
          }
          

          if u change the main.css to use view size instead of fixed pixels the screen can shrink to fit…
          (i have a view based main.css if u want to try it)
          every module may have to be modified for view size

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          1 Reply Last reply Reply Quote 0
          • R Offline
            Radnor
            last edited by Apr 27, 2020, 2:28 PM

            @sdetweil I will try that little later today. Yes, I like the idea of setting a var too.

            1 Reply Last reply Reply Quote 0
            • R Offline
              Radnor
              last edited by Apr 27, 2020, 6:40 PM

              @sdetweil In my config.js file I tried screen.width outerWidth with no luck. Would you mind some code from your main.css?

              Tried window.xxxxx too without luck.

              S 2 Replies Last reply Apr 27, 2020, 6:42 PM Reply Quote 0
              • S Offline
                sdetweil @Radnor
                last edited by Apr 27, 2020, 6:42 PM

                @Radnor exactly as my sample shows… no screen, no window

                just outerWidth (case sensitive)

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                1 Reply Last reply Reply Quote 0
                • S Offline
                  sdetweil @Radnor
                  last edited by sdetweil Apr 27, 2020, 6:51 PM Apr 27, 2020, 6:46 PM

                  @Radnor to debug, npm start dev
                  in the developer window, select the sources tab, select config.js on the left
                  find the 1st line, click on the number on the left column, it will turn blue, now have a program stop
                  hit f5 to refresh the page, it will stop at that line… you can hover over variables and it will tell u the values.
                  you can explore the variable on the right, global, scroll down

                  I assume u are running electron browser (its the default)
                  this is firefox.
                  Screenshot at 2020-04-27 13-47-36.png
                  and electron (with the hover)
                  Screenshot at 2020-04-27 13-50-56.png

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  S 1 Reply Last reply Apr 27, 2020, 7:13 PM Reply Quote 0
                  • S Offline
                    sdetweil @sdetweil
                    last edited by sdetweil Apr 27, 2020, 7:19 PM Apr 27, 2020, 7:13 PM

                    @sdetweil hang on… I see the bug on loading at node_helper time…

                    change it like this to capture the undefined error at startup

                    var width = 0
                    try {
                    width=outerWidth
                    }
                    catch(error){
                    }

                    var config={ etc

                    Sam

                    How to add modules

                    learning how to use browser developers window for css changes

                    1 Reply Last reply Reply Quote 0
                    • R Offline
                      Radnor
                      last edited by Apr 27, 2020, 7:18 PM

                      in the config.js it does not like outerWidth. shows errors as loading up. It DOES get the correct value though…

                      I have at the top of my config file:

                      var small_size = 800;
                      var ss = outerWidth;
                      

                      In debug mode I can see both vars getting their respective values.

                      S 1 Reply Last reply Apr 27, 2020, 7:21 PM Reply Quote 0
                      • 1
                      • 2
                      • 3
                      • 4
                      • 1 / 4
                      1 / 4
                      • First post
                        1/32
                        Last post
                      Enjoying MagicMirror? Please consider a donation!
                      MagicMirror created by Michael Teeuw.
                      Forum managed by Sam, technical setup by Karsten.
                      This forum is using NodeBB as its core | Contributors
                      Contact | Privacy Policy