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

majdzik84 · Feb 25, 2021, 9:01 PM

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?

BKeyport · Feb 25, 2021, 9:07 PM

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)

majdzik84 · Feb 26, 2021, 8:52 AM

@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;}

BKeyport · Feb 26, 2021, 7:59 PM

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

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