MMM-MyHomeWizard is a MagicMirror module that shows the information from the HomeWizard P1 meter and/or the HomeWizard WaterMeter.
The HomeWizard P1 Meter gives you detailed insight into your gas consumption, electricity consumption and solar surplus.
The HomeWizard Watermeter gives you live insight into your water consumption.

Homepage: MMM-MyHomeWizard

aee9f9cb-1285-4eea-a266-af54a0e06b66-image.png

834e222c-910a-4639-91e7-ef53675a5c52-image.png

Hi together,
since this afternoon, after updated Calendar and MM, Calendar looks like this no text in the colored appointments.
Any idea? thanks
IIMG_3716.JPG

In the script it will assume you have 2 different IP addresses to query an URL.
1 IP for the HomeWizard P1 meter
1 IP for the HomeWizard Water Meter
This is because I like to show the information of both in 1 script. Everything works fine if both are used, but when someone only has the P1 meter, the IP for the Water Meter is not used and results in a console fetch error (normal behavior)

[ERROR] Error: TypeError: fetch failed at node:internal/deps/undici/undici:13178:13 at process.processTicksAndRejections (node:internal/process/task_queues:95:5) { [cause]: Error: getaddrinfo ENOTFOUND null at GetAddrInfoReqWrap.onlookupall [as oncomplete] (node:dns:120:26) { errno: -3008, code: 'ENOTFOUND', syscall: 'getaddrinfo', hostname: 'null' } }

Is there a way to switch URL in case one of both URL are NULL? I’ve tried, but it doesn’t work with if-else

start: function () { Log.info("Starting module: " + this.name); requiresVersion: "2.9.0", // Set locales if (this.config.P1_IP != null) { this.urlP1 = "http://" + this.config.P1_IP + "/api/v1/data/"; } else { this.urlP1 = "https://dummyjson.com/c/7e24-36ab-48e0-a96d"; } if (this.config.WM_IP != null) { this.urlWM = "http://" + this.config.WM_IP + "/api/v1/data/"; } else { this.urlWM = "https://dummyjson.com/c/704a-9a96-4845-bc72"; } this.MHW_P1 = []; // <-- Create empty MHW_P1 array this.MHW_WM = []; // <-- Create empty MHW_WM array this.scheduleUpdate(); // <-- When the module updates (see below) },

“sh 1 ./node_modules/.bin/electron not found”

This is what I get when I attempt “npm run start” on my Pi3 b with Raspi OS and following the instructions from the documentation.
Initially had issues with the npm and node.js versions. I had to start from scratch with the SD card and update/upgrade then some “global” installation to get lates version of node.js.
Now this is and issue and I did global install electron but it was after the magicmirror install script…

Do I need to install electron before the magicmirror install script? I was under the impression electron was installed as a part of that process.

I hope I describe it correct and you understand what I mean.
I’m writing a new module which has to display the information from 2 different URL’s.
When I query them seperate than everythink works OK.
But I want to do query from URL-1 to JSON (MHW-P1) and URL-2 to JSON (MHW-WM).

Is this possible and how?
This is what I’ve came up with, but it doesn’t work.

node_helper.js

// P1 Meter section // getMHW_P1: function(urlP1) { // Make a GET request using the Fetch API for the P1 Meter fetch(urlP1) .then(response_P1 => { if (!response_P1.ok) { console.error('MMM-MyHomeWizard: Network response was not ok'); } return response_P1.json(); }) .then(result_P1 => { // Process the retrieved user data console.log(result_P1); // Remove trailing slashes to display data in Console for testing this.sendSocketNotification('MHWP1_RESULT', result_P1); }) .catch(error => { console.error('Error:', error); }); }, socketNotificationReceived: function(notification, payload_P1) { if (notification === 'GET_MHWP1') { this.getMHW_P1(payload_P1); } }, // Water Meter Section // getMHW_WM: function(urlWM) { // Make a GET request using the Fetch API for the Water Meter fetch(urlWM) .then(response_WM => { if (!response_WM.ok) { console.error('MMM-MyHomeWizard: Network response was not ok'); } return response_WM.json(); }) .then(result_WM => { // Process the retrieved user data console.log(result_WM); // Remove trailing slashes to display data in Console for testing this.sendSocketNotification('MHWWM_RESULT', result_WM); }) .catch(error => { console.error('Error:', error); }); }, socketNotificationReceived: function(notification, payload_WM) { if (notification === 'GET_MHWWM') { this.getMHW_WM(payload_WM); } },

MMM-MyModules.js

// <-- P1 Meter Section --> // This processes your data P1 Meter processMHW_P1: function(data_P1) { this.MHW_P1 = data_P1; console.log(JSON.stringify(this.MHW_P1)); // uncomment to see if you're getting data (in dev console) this.loaded = true; }, // this tells module when to update scheduleUpdate: function() { setInterval(() => { this.getMHW_P1(); this.getMHW_WM(); }, this.config.updateInterval); this.getMHW_P1(); this.getMHW_WM(); var self = this; }, // this asks node_helper for data getMHW_P1: function() { this.sendSocketNotification('GET_MHWP1', this.urlP1); }, // this gets data from node_helper socketNotificationReceived: function(notification_P1, payload_P1) { if (notification_P1 === "MHWP1_RESULT") { // this notification doesn't come back on error.. this.processMHW_P1(payload_P1); this.updateDom(this.config.initialLoadDelay); } }, //<-- Water Meter Section --> // This processes your data Water Meter processMHW_WM: function(data_WM) { this.MHW_WM = data_WM; console.log(JSON.stringify(this.MHW_WM)); // uncomment to see if you're getting data (in dev console) this.loaded = true; }, /* // this tells module when to update scheduleUpdate: function() { setInterval(() => { this.getMHW_WM(); }, this.config.updateInterval); this.getMHW_WM(); var self = this; }, */ // this asks node_helper for data getMHW_WM: function() { this.sendSocketNotification('GET_MHWWM', this.urlWM); }, // this gets data from node_helper socketNotificationReceived: function(notification_WM, payload_WM) { if (notification_WM === "MHWWM_RESULT") { // this notification doesn't come back on error.. this.processMHW_WM(payload_WM); this.updateDom(this.config.initialLoadDelay); } }, I hope somebody can help me with this. I'm not a programmer, but I try to do my best ;-)

And this is my second module, again for the entertainment of my daughters. This one just adds a nice snow fall across the screen - for the winter festivities.

I made it on a Linux computer, but realised when testing it on my Raspberry Pi 3B, that the Pi really struggled with it. So it now has two settings: light and “rich” - the latter for more powerful platforms.

This is a part of me trying to learn how to make modules, so any input is welcome.

Next: Im thinking of connecting it to one of the providers from the Weather module, to maybe make it snow when the temperature is freezing, or if the forcast warns of snow.

But for now, just a simple snowfall on your MagicMirror.

https://github.com/cgillinger/MMM-SnowEffect

Description:

This MagicMirror² module fetches sea conditions from an API and displays them on the mirror. The module displays a bar graph for a week, including 3 days forecast.

I am developing this module , because I am diving in the North Sea every week of the year, and I like to know the conditions out there :-)…
There have been other modules for Surf conditions, but that is all outdated.

The current version (v1.0) returns sea surface temperatures for a given LatLon location, In the future I may include other conditions like waves, air temperature and wind. I also want to include yearly averages etc…

screenshots

image.png

Download

You can download the module files at https://github.com/HarrieV8/MMM-SeaConditions, and find more information about the module itself and the API.

Remarks

Please test it out and let me know how it works. I use plotly.js to draw a bar graph and I don’t know how it performs on older RPi’s for instance.

Hey there,

i try to start up MM for the first time and i am getting this message:

> magicmirror@2.29.0 start > DISPLAY="${DISPLAY:=:0}" ./node_modules/.bin/electron js/electron.js [2024-12-10 18:24:50.095] [LOG] Starting MagicMirror: v2.29.0 [2024-12-10 18:24:50.176] [LOG] Loading config ... [2024-12-10 18:24:50.187] [LOG] config template file not exists, no envsubst [2024-12-10 18:24:52.233] [INFO] Checking config file /home/paul/MagicMirror/config/config.js ... [2024-12-10 18:24:52.478] [INFO] Your configuration file doesn't contain syntax errors :) [2024-12-10 18:24:52.482] [INFO] Checking modules structure configuration ... [2024-12-10 18:24:52.488] [ERROR] EACCES: permission denied, open 'js/positions.js'

the weird thing is, that the positions.js file doesnt exist.

anyone can help?

Re: MMM-AccuWeatherForecastDeluxe stuck loading.

I installed the BigBot89 MMM-AccuWeatherForecastDeluxe and it is not loading and the console shows below error.

MMM-AccuWeatherForecastDeluxe.js:338 MMM-AccuWeatherForecastDeluxe in notification === ACCUWEATHER_ONE_CALL_FORECAST_DATA Object
MMM-AccuWeatherForecastDeluxe.js:386 MMM-AccuWeatherForecastDeluxe processWeatherData Partly sunny this weekend
MMM-AccuWeatherForecastDeluxe.js:407 MMM-AccuWeatherForecastDeluxe about to create dailies
MMM-AccuWeatherForecastDeluxe.js:420 MMM-AccuWeatherForecastDeluxe daily Object
MMM-AccuWeatherForecastDeluxe.js:420 MMM-AccuWeatherForecastDeluxe daily Object
MMM-AccuWeatherForecastDeluxe.js:420 MMM-AccuWeatherForecastDeluxe daily Object
MMM-AccuWeatherForecastDeluxe.js:499 MMM-AccuWeatherForecastDeluxe forecastItemFactory Object 1 12.6 29.3
MMM-AccuWeatherForecastDeluxe.js:766 icons/4c/partly-cloudy-day.svg
MMM-AccuWeatherForecastDeluxe.js:517 Object
MMM-AccuWeatherForecastDeluxe.js:499 MMM-AccuWeatherForecastDeluxe forecastItemFactory Object 2 12.6 29.3
MMM-AccuWeatherForecastDeluxe.js:766 icons/4c/clear-day.svg
MMM-AccuWeatherForecastDeluxe.js:517 Object
MMM-AccuWeatherForecastDeluxe.js:499 MMM-AccuWeatherForecastDeluxe forecastItemFactory Object 3 12.6 29.3
MMM-AccuWeatherForecastDeluxe.js:766 icons/4c/clear-day.svg
MMM-AccuWeatherForecastDeluxe.js:517 Object
MMM-AccuWeatherForecastDeluxe.js:435 [MMM-AccuWeatherForecastDeluxe] 10-Dec-24 01:33 unitsFormatted: Metric
MMM-AccuWeatherForecastDeluxe.js:439 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘Temperature’)
at Class.processWeatherData (MMM-AccuWeatherForecastDeluxe.js:439:76)
at Class.socketNotificationReceived (MMM-AccuWeatherForecastDeluxe.js:348:46)
at module.js:240:9
at Socket. (socketclient.js:32:4)
at Emitter.emit (index.js:136:20)
at Socket.emitEvent (socket.js:553:20)
at Socket.onevent (socket.js:540:18)
at MMSocket.socket.onevent (socketclient.js:26:11)
at Socket.onpacket (socket.js:508:22)
at Emitter.emit (index.js:136:20)
weather.js:164

Could someone help me figure out why the OpenWeather won’t work after doing a MM update.

When I log into the MM all I get is the words "Loading image" where my current weather and forecast should be. I have tried reentering my Location, Location ID and apiKey, and that didn't fix it.

I don’t know what else to try . Any help would be appreciated.
Below is a copy of my config.js

},
{
module: “weather”,
position: “top_right”,
config: {
weatherProvider: “openweathermap”,
type: “current”,
location: “XXXXX”,
locationID: “XXXXXXX”, //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
apiKey: “XXXXXXXX”
}
},
{
module: “weather”,
position: “top_right”,
header: “Weather Forecast”,
config: {
weatherProvider: “openweathermap”,
type: “forecast”,
location: “XXXX”,
locationID: “XXXXXX”, //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
apiKey: “XXXXXXXX”
}
},

I couldnt get the EXT-FreeboxTV module to work on my magic mirror so i gave up, and used chatgpt to help me write a module.

Its called MMM-MPlayer, and using MPlayer it will open either 1 or 2 Mplayer windows and play whatever files or rtsp streams you like. If you define multiple it will cycle through them, determined by the streamInterval. I am using it to stream 3 Unifi Cameras so that i can keep an eye on the front yard in one window, and an eye on my kids via the cameras we use as nanny cams while they nap/sleep, cycling through those two rooms every 30 seconds.

Reasons for using MPlayer over something else is that the version of raspbian that I am running on my pi3 has a broken version of VLC, which doesnt respond to command line position arguments, and also cant run OMXplayer. Its the most recent distro, i dont remember the name for it. mplayer works well, and plays on my pi3 just fine, along with all the other stuff i have running.

Obviously your use case could be for anything, cameras around your house, livestreams you like to watch. Essentially anything that mplayer can play. The module natively responds to the MMM-Pir notification so that it kills and restarts the streams when the PIR module tells the screen to turn off and on, so that the screen acts as it should.

I don’t feel like actually uploading it to github, but here is the source code, and an example config.

--------------- CONFIG.js

{ module: 'MMM-MPlayer', // Update the module name here position: 'top_left', // Magic Mirror position config: { useTwoWindows: true, // Use two windows layout: 'row', // Can be 'row' or 'column' windowSize: { width: 525, height: 295 }, // Window size for both windows windowPosition: { x: 12, y: 575 }, // Position of the first window (window1) [window2 is either 5px below or to the right of this window, depending on layout] streamInterval: 30000, streams: { window1: [ 'somthing_else.mp4', 'something.mp4' ], window2: [ 'rtsp://foo', 'rtsp://bar', ] } } },

---------------MMM-MPlayer.js

/* MagicMirror Module: MMM-MPlayer.js * This script communicates with the backend (node_helper.js) to control mplayer window streaming * It starts the stream cycle process only after the DOM is fully loaded. */ Module.register('MMM-MPlayer', { // Define the module's defaults defaults: { useTwoWindows: true, layout: 'column', // Can be 'row' or 'column' windowSize: { width: 640, height: 480 }, windowPosition: { x: 0, y: 0 }, // Position of the first window streamInterval:30000, streams: { window1: [ 'http://stream1.example.com/video1', 'http://stream2.example.com/video1' ], window2: [ 'http://stream1.example.com/video2', 'http://stream2.example.com/video2' ] } }, // Start the module start: function() { console.log('MMM-MPlayer module starting...'); // Send the configuration to the backend this.sendSocketNotification('SET_CONFIG', this.config); // Notify the backend to start the stream cycle (backend will handle stream cycling) //this.sendSocketNotification('START_STREAM_CYCLE'); }, // Define socket notification handlers socketNotificationReceived: function(notification, payload) { switch(notification) { case 'STREAM_CYCLE_STARTED': console.log('Stream cycle process started.'); break; } }, // This function listens to the DOM_CREATED event and starts the stream cycle process notificationReceived: function(notification, payload, sender) { switch(notification) { case 'DOM_OBJECTS_CREATED': console.log('DOM created. Starting the stream cycle process...'); // Send the notification to the backend to initiate the stream cycle this.sendSocketNotification('START_STREAM_CYCLE'); break; case 'MMM_PIR-SCREEN_POWERSTATUS': console.log(`Received PIR Screen Show Notification ${payload}`); if (payload == true) { this.sendSocketNotification('START_STREAM_CYCLE'); } else { this.sendSocketNotification('STOP_STREAM_CYCLE'); } break; } }, getDom: function() { var wrapper = document.createElement("div"); wrapper.innerHTML = ''; return wrapper; } });

------------------ NODE HELPER

const NodeHelper = require('node_helper'); const { spawn } = require('child_process'); const { os } = require('os'); const Log = require('logger'); // Import the Log module from MagicMirror module.exports = NodeHelper.create({ start: function() { Log.info('Starting MMM-MPlayer module...'); this.streams = {}; this.currentStreamIndex = { window1: -1, window2: -1 }; this.mplayerProcesses = { window1: null, window2: null }; // Track mplayer processes for each window this.streamInterval = 30000; this.streamSwitcher = null; }, // Handle socket notifications from the frontend socketNotificationReceived: function(notification, payload) { switch(notification) { case 'SET_CONFIG': Log.info('Received configuration for MMM-MPlayer module'); // Save the configuration this.config = payload; // Adjust layout and start the stream cycle this.adjustLayout(); break; case 'START_STREAM_CYCLE': Log.info('Stream cycle process started.'); this.cycleStreams(); // Start the stream cycle after receiving the notification break; case 'STOP_STREAM_CYCLE': Log.info('Stream cycle process stopped.'); this.stopStreams(); } }, // Start or refresh the streams cycleStreams: function() { //fire up the streams immediately this.switchStream('window1'); this.switchStream('window2'); if (this.streamSwitcher == null) { this.streamSwitcher = setInterval(() => { this.switchStream('window1'); this.switchStream('window2'); }, this.config.streamInterval); // cycle based on the config this.sendSocketNotification('STREAM_CYCLE_STARTED'); } }, stopStreams: function() { if (this.streamSwitcher != null) { clearInterval(this.streamSwitcher); this.killMPlayer('window1'); this.killMPlayer('window2'); this.streamSwitcher = null; this.currentStreamIndex = { window1: -1, window2: -1 }; } }, // Switch the stream for the given window switchStream: function(window) { const windowStreams = this.config.streams[window]; Log.info(`Switching stream for ${window}`); const currentIndex = this.currentStreamIndex[window]; const nextIndex = (currentIndex + 1) % windowStreams.length; // Update stream index this.currentStreamIndex[window] = nextIndex; if (currentIndex != nextIndex) { // Kill the old mplayer process for the window using SIGTERM this.killMPlayer(window); // Launch new mplayer process for the window this.launchMPlayer(windowStreams[nextIndex], window); } }, // Kill any existing mplayer process for a window using SIGTERM killMPlayer: function(window) { const mplayerProcess = this.mplayerProcesses[window]; if (mplayerProcess) { Log.info(`Killing mplayer process for ${window}...${mplayerProcess.pid}`); const killer = spawn(`kill`, [`${mplayerProcess.pid}`]); // Handle standard output and error killer.stdout.on('data', (data) => { Log.debug(`killer [${window}] stdout: ${data}`); }); killer.stderr.on('data', (data) => { Log.error(`killer [${window}] stderr: ${data}`); }); killer.on('close', (code) => { Log.info(`killer process for ${window} exited with code ${code}`); }); } }, // Launch a new mplayer process for the window using spawn launchMPlayer: function(stream, window) { const size = this.config.windowSize; const position = this.config[`${window}Position`] || this.config.windowPosition; // Use specific or general window position // Spawn a new mplayer process const env = { ...process.env, DISPLAY: ':0' }; const mplayerProcess = spawn(`mplayer`, ['-noborder', '-geometry', `${position.x}:${position.y}`, `-xy`, `${size.width}`, `${size.height}`, `${stream}`], {env: env}); //C, Log.info(`Launched mplayer process for ${window} with PID ${mplayerProcess.pid}`); // Track the process for future termination this.mplayerProcesses[window] = mplayerProcess; // Handle standard output and error mplayerProcess.stdout.on('data', (data) => { Log.debug(`mplayer [${window}] stdout: ${data}`); }); mplayerProcess.stderr.on('data', (data) => { //Log.error(`mplayer [${window}] stderr: ${data}`); }); mplayerProcess.on('close', (code) => { Log.info(`mplayer process for ${window} exited with code ${code}`); }); }, // Adjust stream positions and size based on layout adjustLayout: function() { const windowPosition = this.config.windowPosition; // General window position for window1 const windowSize = this.config.windowSize; const layout = this.config.layout; // Calculate position for second window automatically based on layout if (layout === 'column') { // If layout is column, position window 2 below window 1 this.config.window2Position = { x: windowPosition.x, // Same x position y: windowPosition.y + windowSize.height + 5 // y position of window2 is below window1 }; } else if (layout === 'row') { // If layout is row, position window 2 to the right of window 1 this.config.window2Position = { x: windowPosition.x + windowSize.width + 5, // x position of window2 is to the right of window1 y: windowPosition.y // Same y position }; } } });

I have CalendarExt3Journal (working well, awesome module) in middle_center, and another module after it in my config.js, also in middle_center. The second module is a simple helloworld module with a div and some spans inside it, not very tall. Just using text has the same issue.

The second module is NOT being rendered all the way below the calendar, but rather inside/behind it - near the lower quarter of it, the calendar is fairly high.
For every other module I tested, including CalendarExt3, if I put two modules in the same position they are rendered one below the other. Is this a bug with CalendarExt3Journal or do I need to do something to the second module to force it down below the calendar?

Re: Will MM finally work on Pi zero 2 W?

Let me know if anybody has still MM2 working on Pi Zero 2W with latest versions.

To be sure, I need to know all details like, Raspberry Pi os version (32 or 64 bit)?
and all other details.

I am trying with latest OS 2024-11-19-raspios-bookworm-arm64-full.img

Thanks.

Hi,

Besides the calendar module, this module is the most used module in our household. Especially my wife has become quite dependent on it.
Thank you to the developer and the maintainer.

But, since a couple weeks I get this “Loading - undefined” message, which is quite annoying.
It ‘restores’ itself automatically, so that is a good thing.

I opened an issue for it:
https://github.com/KristjanESPERANTO/MMM-PublicTransportHafas/issues/185

My used end-point is db (Deutsche Bahn).

What I would like to know is, if there are more users of this module and if they experience the same ??

Thanks in advance,

E.J.

Hello dear MagicMirror 2 Community,

i have a problem with the gmailfeed modul when i put my correect password an my corerct email adress in it and then start it it comes an error it say this :

[2024-12-08 15:12:17.483] [ERROR] Error fetching feed: Error fetching feed: 401

can you please help my to fix that or do it have better modules?

sorry for my bad englisch i am from germany

thank you for your answers

I’ve been working with MMM-CalendarExt3 for a couple weeks now and have managed to get almost everything setup how I would like. (Great module btw!)

One thing I’d like to be able to do is add some text into the header for each weekday. Backstory - school schedule is on a rotating 5 day timetable but it skips holidays meaning it doesn’t line up with the regular 5 day school week. I’d like to be able to insert “Day 1” though “Day 5” on the correct day of the calendar. (No worries about the algorithm - I can figure that part out).

Since I want to add something that is not related to any calendar event, I think I need to intercept the makeCellDom but I don’t see a way to do this. I’m pretty rusty on javascript so I feel like I’m missing something or is this actually not possible without modifying MMM-CalendarExt3 itself?

npm error code EBADENGINE npm error engine Unsupported engine npm error engine Not compatible with your version of node/npm: magicmirror@2.29.0 npm error notsup Not compatible with your version of node/npm: magicmirror@2.29.0 npm error notsup Required: {"node":">=20.9.0 <21 || 22"} npm error notsup Actual: {"npm":"10.9.0","node":"v23.3.0"} npm error A complete log of this run can be found in: /home/xavierprince/.npm/_logs/2024-12-07T21_55_00_339Z-debug-0.log

Hello everyone!

I’m currently working on a project to modify an Android-based “magic mirror” device, which connects to my desktop via USB. My goal is to run MagicMirror on the Android device by setting up a Linux environment. I plan to use tools like UserLAnd to simulate a Linux system on the Android device and then run MagicMirror, but I have a few questions and would appreciate some advice from the community:

USB Connection Issue: My device has a USB port that is identical to the USB port on my desktop. Once I connect the device to my desktop via a USB cable, will I be able to directly interact with the device (such as using ADB or other debugging tools) and install a Linux environment on it?

Using UserLAnd: I plan to use the UserLAnd app on the Android device to run a Linux distribution (like Ubuntu) and then install MagicMirror in that environment. Has anyone tried this approach? Are there any performance or compatibility issues I should be aware of?

Running the Linux Environment: Once I have Linux running via UserLAnd and MagicMirror installed, will I need to make any special adjustments (like screen resolution or MagicMirror configuration) to ensure it displays properly on my mirror screen?

I would appreciate any insights or advice from experienced developers in the community. Thanks in advance for your help!

Hello,

I would like to increase the cell height of my calendar, mainly when it’s in full-screen mode. I’ve tried messing with the cell-body, cell height, and tried getting chatGPT to help me but I cannot figure out how to do it.

Here’s my CSS:

/* Global Settings */ body { margin: 0; height: 100%; width: 100%; background: rgb(0 0 0 / 100%); color: white; } .dimmed, .normal, .bright { color: white; } /* Region Definitions */ .region.top.right, .region.bottom.right { position: absolute; width: 79%; } .region.top.left, .region.bottom.left, .region.middle.center { position: absolute; width: 20.5%; } .region.fullscreen.below { position: absolute; width: 24.25%; } /* Clock Options */ .clock { float: right; text-align: right; } .clock .time { font-size: 90px; } /* MMM-GoogleTrafficTimes - Horizontal Layout */ .MMM-GoogleTrafficTimes { position: absolute; /* Prevents it from affecting layout */ top: 50px; /* Adjust this value to align with MMM-CoinMarketCap */ left: 50%; transform: translateX(-50%); /* Centers horizontally */ display: flex; justify-content: center; /* Center horizontally */ align-items: center; flex-wrap: wrap; margin: 0; /* Remove any margins */ padding: 0; width: auto; /* Prevents it from taking unnecessary width */ height: auto; /* Ensures no vertical overflow */ z-index: 10; /* Makes it appear above other modules if needed */ } .MMM-GoogleTrafficTimes .destination { margin: 0 10px; text-align: center; font-size: 16px; } .MMM-GoogleTrafficTimes .destination .label { font-weight: bold; font-size: 14px; } /* MMM-CoinMarketCap Adjustments */ .MMM-CoinMarketCap { position: absolute; /* Prevents it from being pushed */ top: 50px; /* Matches the vertical position of MMM-GoogleTrafficTimes */ right: 0; padding: 0; margin: 0; } .MMM-CoinMarketCap .graphWithChanges { display: inline-block; /* Ensures proper alignment */ } /* MMM-CalendarExt3 Options */ .CX3 { --celllinecolor: #333; --cellbgcolor: rgba(0, 0, 0, 0.2); --cellheaderheight: 25px; --cellfooterheight: 2px; --defaultcolor: #FFF; --eventheight: calc(var(--fontsize) + 4px); --totalheight: calc(var(--eventheight) * var(--maxeventlines)); font-size: var(--fontsize); color: var(--defaultcolor); line-height: calc(var(--eventheight)); } .MMM-CalendarExt3 { margin-top: 100px; height: calc(100% - 100px); } .CX3 .cellContainer { display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(5, var(--cellheight)); gap: 2px; } .CX3 .cell { height: var(--cellheight); overflow: hidden; } .CX3 .weekGridRow { margin-bottom: 0; } .CX3 .event { height: var(--eventheight); } .CX3 .event .headline { display: flex; align-items: center; } .CX3 .event .symbol { margin-right: 4px; } .CX3 .event .time { margin-right: 4px; } .CX3 .cellHeader { height: var(--cellheaderheight); display: flex; justify-content: space-between; align-items: center; } .CX3 .cellHeader .cellDate { font-weight: bold; } .CX3 .cellFooter { height: var(--cellfooterheight); } .CX3 .weekend { background-color: rgba(255, 255, 255, 0.1); } .CX3 .today { background-color: rgba(255, 255, 255, 0.2); } .CX3 .passed { opacity: 0.6; } .CX3 .multiday { border-radius: 4px; } .CX3 .fullday { background-color: rgba(255, 255, 255, 0.1); border-radius: 4px; } .CX3 .legends { display: flex; justify-content: flex-end; margin-top: 8px; } .CX3 .legends .legend { margin-left: 8px; display: flex; align-items: center; } .CX3 .legends .legend .symbol { margin-right: 4px; } /* MMM-OpenWeatherForecast */ .MMM-OpenWeatherForecast { display: flex; flex-direction: column; align-items: center; text-align: center; } .MMM-OpenWeatherForecast .weather-icon { margin: 0 auto; } /* MMM-Todoist Centering */ .MMM-Todoist { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; margin: 0 auto; width: 100%; max-width: 95%; overflow: hidden; box-sizing: border-box; }

Here is my fullscreen view:
alt text

Here is my view when it is not full screen:
alt text

I would like if the full screen view had the same gap as it does when its not in full screen, just have the module / cells stretched up so more events can be displayed.

I got this after i installed some modules and updated packs.

magicmirror@2.29.0 start
DISPLAY=“${DISPLAY:=:0}” ./node_modules/.bin/electron js/electron.js

[2024-12-04 21:05:31.188] [ERROR] App threw an error during load
[2024-12-04 21:05:31.196] [ERROR] TypeError: Log.log is not a function
at Object. (/home/mt/MagicMirror/js/app.js:16:5)
at Module._compile (node:internal/modules/cjs/loader:1484:14)
at Module._extensions…js (node:internal/modules/cjs/loader:1564:10)
at Module.load (node:internal/modules/cjs/loader:1295:32)
at Module._load (node:internal/modules/cjs/loader:1111:12)
at c._load (node:electron/js2c/node_init:2:17025)
at Module.require (node:internal/modules/cjs/loader:1318:19)
at require (node:internal/modules/helpers:179:18)
at Object. (/home/mt/MagicMirror/js/electron.js:4:14)
at Module._compile (node:internal/modules/cjs/loader:1484:14)
at Module._extensions…js (node:internal/modules/cjs/loader:1564:10)
at Module.load (node:internal/modules/cjs/loader:1295:32)
at Module._load (node:internal/modules/cjs/loader:1111:12)
at c._load (node:electron/js2c/node_init:2:17025)
at cjsLoader (node:internal/modules/esm/translators:350:17)
at ModuleWrap. (node:internal/modules/esm/translators:286:7)
A JavaScript error occurred in the main process
Uncaught Exception:
TypeError: Log.log is not a function
at Object. (/home/mt/MagicMirror/js/app.js:16:5)
at Module._compile (node:internal/modules/cjs/loader:1484:14)
at Module._extensions…js (node:internal/modules/cjs/loader:1564:10)
at Module.load (node:internal/modules/cjs/loader:1295:32)
at Module._load (node:internal/modules/cjs/loader:1111:12)
at c._load (node:electron/js2c/node_init:2:17025)
at Module.require (node:internal/modules/cjs/loader:1318:19)
at require (node:internal/modules/helpers:179:18)
at Object. (/home/mt/MagicMirror/js/electron.js:4:14)
at Module._compile (node:internal/modules/cjs/loader:1484:14)
at Module._extensions…js (node:internal/modules/cjs/loader:1564:10)
at Module.load (node:internal/modules/cjs/loader:1295:32)
at Module._load (node:internal/modules/cjs/loader:1111:12)
at c._load (node:electron/js2c/node_init:2:17025)
at cjsLoader (node:internal/modules/esm/translators:350:17)
at ModuleWrap. (node:internal/modules/esm/translators:286:7)

How can i solve this?