Read the statement by Michael Teeuw here.
Problem with the positioning of the mirror modules. Cut from the top
-
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?
-
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)
-
@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=0modules: [ { 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;}
-
@majdzik84 Let’s invoke the CSS gods around here… Hey, @cowboysdude ? You got advice?
@alberttwong if you’re still around, can you help?