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.

    Problem with the positioning of the mirror modules. Cut from the top

    Scheduled Pinned Locked Moved Troubleshooting
    4 Posts 2 Posters 859 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.
    • M Offline
      majdzik84
      last edited by

      Hi. please help.
      I lost my SD card and moved the installation to the SSD. Everything is ok except one thing.
      In the lower part of the mirror I have the MMM-iFrame module, I throw off the dasboard from Home assistant.
      Unfortunately, when starting / restarting the mirror, as you can see in the screenshot, the whole thing moves up and the upper modules are cut off.
      Interestingly, it sometimes loads correctly.
      When I remove the iframe module it loads as it should.

      Any suggestions on how I can fix this?
      e098450f-6aaf-4c52-9e96-94715e102697-image.png

      BKeyportB 1 Reply Last reply Reply Quote 0
      • BKeyportB Offline
        BKeyport Module Developer @majdzik84
        last edited by

        Couple of things you can do.

        1- Check where your modules are positioned, they should bounce out of the way if they are in a different position than the iFrame module. (iframe should be bottom_something, and other modules be top_something)

        2- Add css to custom.css to use the entire monitor space to give you a bit more room:

        body {
        	margin: 0px;
        	height: 100vh;
        	width: 100vw;
         }
        

        3- it does appear your iframe module is a bit too tall - if you’re using MMM-iFrame - change your “height” to be a few less pixels to lower it’s chances. (30 or so should do it)

        The "E" in "Javascript" stands for "Easy"

        M 1 Reply Last reply Reply Quote 0
        • M Offline
          majdzik84 @BKeyport
          last edited by

          @BKeyport Thank you for your willingness to help.
          Unfortunately, I tried all the advice but nothing has changed :(
          It loads ok once in a few tries, but in most cases the whole screen is moved up.
          https://www.dropbox.com/s/ftc0abrnntcz9i0/VID_20210226_095022.mp4?dl=0

          modules: [
          {
            module: 'MMM-iFrame',
            position: 'bottom_center', 	// This can be any of the regions. 
            disabled: false,
            config: {
          	// See 'Configuration options' for more information.
               url: ["http://192.168.2.98:8123/magic-mirror/kamera?kiosk"], // as many URLs you want or you can just ["ENTER IN URL"] if single URL. 
               autoRefresh: false,
          	//	updateInterval: 0.5 * 60 * 1000, // rotate URLs every 30 seconds
               width: "1440", // width of iframe 
               height: "425", // height of iframe 
               frameWidth: "1440", // width of embedded iframe, height is beeing calculated by aspect ratio of iframe
            }
          },
          		{
          			module: "alert",
          			config: {
          				effect: "genie",} 
          		},
          		{
          			module: "updatenotification",
          			position: "top_bar"
          		},
          		{
          			module: "clock",
          			position: "top_left"
          		},
          		{
          			module: "calendar",
          			header: "KALENDARZ",
          			position: "top_left",
          			config: {
                          maximumEntries: 7,
                          maximumNumberOfDays: 365,
                          showLocation: false,
                          maxTitleLength: 25,
                          maxLocationTitleLength: 25,
                          wrapEvents: true,
                          wrapLocationEvents: false,
                          maxTitleLines: 3,
                          maxEventTitleLines: 3,
                          animationSpeed: 2000,
                          fade: false,
                          fadePoint: 0.25,
                          displayRepeatingCountTitle: true,
                          dateFormat: "MMM Do HH:mm",
                          dateEndFormat: "MMM Do HH:mm",
                          //showEnd: true,
                          fullyDayEventDateFormat: "MMM D",
                          timeFormat: "absolute",
                          getRelative: 6,
                          urgency: 1,
                          broadcastEvents: true,
                          hidePrivate: false,
                          sliceMultiDayEvents: false,
                          nextDaysRelative: true,
          				colored: true,
          				calendars: [{
          						symbol: "calendar-check-o",
          						url: "https:/basic.ics"
          					},
          {
          						symbol: "birthday-cake",
          						color: '#27b7e3',
          						url: "https://calendar.google.com/"
          					},
          {
          						symbol: "trash-alt",
          						color: '#ebd234',
          						url: "https://calendar.google.com/.ics"
          					},
          					
          {						
          						symbol: "calendar-times",
          						color: "#ff3b29",
          						url: "https://www.thunderbird.net/media/caldata/PolishHolidays.ics"
          					}]
          			}
          		},
          {
          	module: "MMM-Currentweather-MQTT",
          	disabled: false,
          	position: "top_right",
          	config: {
          				location: "Potępa",
          				locationID: "3094597", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
          				appid: "xxxx",
          		roundTemp: false,
          		degreeLabel: true,
          		showWindDirection: true,
          		showWindDirectionAsArrow: true,
          		showHumidity: true,
          		showFeelsLike: true,
          		useBeaufort: false,
          		useKMPHwind: true,
          		logging: true,
          		useWildcards: false,
          		showTempMax: true,
          		showTempMin: true,
          		mqttServers: [
          			{
          				address: '192.168.2.98',  // Server address or IP address
          				port: '1883',                // Port number if other than default
          				user: 'xxx',
          				password: 'xxx!',
          				subscriptions: [             // for now, all seven values must be 
          				                             // specified in the config, 
          							     // even if they are not delivered and not displayed.
          					{
          						topic: 'mirror/pogoda/temperatura', // Topic to look for
          						suffix: '°C',             // Displayed after the value
          						decimals: 1,              // Round numbers to this number of decimals
          						sortOrder: 10,            // sortOrder 10 has to contain the temperature 
          						maxAgeSeconds: 18000,     // take Openweather value if older than 5 hours
          					},
          					{
          						topic: 'mirror/pogoda/wilgotnosc',
          						suffix: '%',
          						decimals: 0,
          						sortOrder: 20,            // sortOrder 210 has to contain the humidity
          						maxAgeSeconds: 18000,
          					},
          					{
          						topic: 'mirror/pogoda/temp_piec',
          						suffix: '°C',
          						decimals: 1,
          						sortOrder: 30,            // sortOrder 30 has to contain the illumination
          						maxAgeSeconds: 18000,
          					},
          					{
          						topic: 'mirror/pogoda/wiatr',
          						suffix: '°C',
          						decimals: 1,
          						sortOrder: 40,            // sortOrder 40 has to contain the wind speed
          						maxAgeSeconds: 18000,
          					},
          					{
          						topic: 'wetter/act-wind-dir',
          						suffix: '°',
          						decimals: 0,
          						sortOrder: 50,            // sortOrder 50 has to contain the wind direction
          						maxAgeSeconds: 18000,
          					},
          					{
          						topic: 'wetter/raining',
          						suffix: '',
          						decimals: 0,
          						sortOrder: 60,            // sortOrder 60 has to contain the boolean if its just raining
          						maxAgeSeconds: 18000,
          						conversions: [
          							{ from: "true", to: "tak" },
          							{ from: "false", to: "nie" }
          						]
          					},
          					{
          						topic: 'wetter/rain-today',
          						suffix: '',
          						decimals: 1,
          						sortOrder: 70,            // sortOrder 70 has to contain the amount of rain today
          						maxAgeSeconds: 18000,
          					},
          					{
          						topic: 'mirror/pogoda/max',
          						label: 'c',
          						suffix: '',
          						decimals: 0,
          						sortOrder: 80,
          						maxAgeSeconds: 180000,
          					},
          					{
          						topic: 'mirror/pogoda/min',
          						label: 'c',
          						suffix: '',
          						decimals: 0,
          						sortOrder: 90,
          						maxAgeSeconds: 180000,
          					},
          				]
          			}
                  ],
          	}
          },
          		{
          			module: "weatherforecast",
          			disabled: false,
          			position: "top_right",
          			header: "Prognoza pogody",
          			config: {
          				lang: "pl",
          				locationID: "xxx", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
          				appid: "xxxx",
          				maxNumberOfDays: 4,
                                          //colored: "false",
                                          fade: false,
                                          //fadePoint: 1,
                                          showRainAmount: true,
                                          scale: false,
          								
          			}
          		}, 
          {
              module: 'MMM-MQTT',
              position: 'top_right',
              header: '',
              config: {
                  logging: false,
                  useWildcards: false,
                  mqttServers: [
                      {
                          address: '192.168.2.98',  // Server address or IP address
                          port: '1883',          // Port number if other than default
                          user: 'xxxx',          // Leave out for no user
                          password: 'xxxx!',  // Leave out for no password
                          subscriptions: [
                              {
                                  topic: 'mirror/pogoda/powietrze', // Topic to look for
                                  label: 'Powietrze jest', // Displayed in front of value
                                  suffix: '',         // Displayed after the value
                                  maxAgeSeconds: 350,    // Reduce intensity if value is older 
                              },
                              {
                                  topic: 'mirror/pogoda/temp_piec', // Topic to look for
                                  label: 'Temp.ogród: ', // Displayed in front of value
                                  suffix: '°C',         // Displayed after the value
                                  maxAgeSeconds: 350,    // Reduce intensity if value is older
          
                              },
          
                              {
                                  topic: 'mirror/pogoda/co2', // Topic to look for
                                  label: 'CO2 w salonie: ', // Displayed in front of value
                                  suffix: 'ppm',         // Displayed after the value
                                  maxAgeSeconds: 350,    // Reduce intensity if value is older
                                   colors: [             // Value dependent colors
                                      { upTo: 500, value: "green", label: "green", suffix: "green" },
                                      { upTo: 600, label: "yellow", value: "yellow", suffix: "yellow" },
                                      { upTo: 900, label: "#ff4d00", value: "#ff4d00", suffix: "#ff4d00" },
                                      { upTo: 2000, label: "red", value: "red", suffix: "red"  }, // The last one is used for higher values too
                                  ],
                              },
                          ]
                      }
                  ],
              }
          },
          
          {
            module: "MMM-NowPlayingOnSpotify",
            position: "center", 
            disabled: false,
            config: {
          	showCoverArt: true,
              clientID: "xxx",
              clientSecret: "xxx",
              accessToken: "xxxxx",
              refreshToken: "xxxx-xxxx"
          
            }
          },
          
          {
              module: 'MMM-Remote-Control'
              // uncomment the following line to show the URL of the remote control on the mirror
              //, position: 'bottom_left'
              // you can hide this module afterwards from the remote control itself
          
          },
          	]
          };
          
          /*************** DO NOT EDIT THE LINE BELOW ***************/
          if (typeof module !== "undefined") {module.exports = config;}
          
          BKeyportB 1 Reply Last reply Reply Quote 0
          • BKeyportB Offline
            BKeyport Module Developer @majdzik84
            last edited by

            @majdzik84 Let’s invoke the CSS gods around here… Hey, @cowboysdude ? You got advice?

            @alberttwong if you’re still around, can you help?

            The "E" in "Javascript" stands for "Easy"

            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 Sam, technical setup by Karsten.
            This forum is using NodeBB as its core | Contributors
            Contact | Privacy Policy