I'm new. Trying to understand and have a few questions....

sdetweil

also, MagicMirror is shown via a web page
web design is to wrap content when the width is not enough…
as it appears is happening here…

noviceuser

@sdetweil
Ok first off thank you for the reply. I have read through and will answer all that I can here.

My installation was a docker compose:

services:
  magicmirror:
    image: bastilimbach/docker-magicmirror

    container_name: magicmirror
    restart: unless-stopped
    ports:
      - "2222:8080"
    volumes:
      - ./config:/opt/magic_mirror/config
      - ./modules:/opt/magic_mirror/modules
      - ./css:/opt/magic_mirror/css
    environment:
      - TZ=America/New_York  # Change to your timezone
      - MM_PORT=8080

That is how I installed. I am running off of an Ubuntu 22.04 VM. My display is currently just my current computer display. 1920x1080 resolution, nothing fancy.

Thank you for the piece with the regions. I also found an image somewhere since posting that showed them and how they are/work basically.

I will look at the MMM-Config module and add that.

Since originally posting I found some css examples that I created custom.css in the css folder. It cleared up some of the things I was having an issue with. I’m not sure why still that it was only shoving everything to the top left.

I have made so many changes to the config.js trying to figure it out that I’ve gone from completely breaking it to at least having stuff up there even if it is formatted silly because of the css.

Again, I’m not sure why it was either not realizing my web browser is 1920x1080. I would understand if I had a crazy resolution or scaling or something else. I’m not sure honestly what the deal was.

If there is anything you wish me to provide I will do so. I am going to start messing with the things you gave me.

I wonder if it is possible that the docker container main.css is broken with the docker container and that is why the strange smushing.

noviceuser

@sdetweil Also, I am using Ubuntu Server so no GUI.

The MMM-Config module does not work, I’m guessing because it is a docker installation and maybe permissions are a thing?

 [11.03.2025 11:44.21.236] [ERROR] (node:1) UnhandledPromiseRejectionWarning: ReferenceError: fetch is not defined
magicmirror  |     at buildFormData (/opt/magic_mirror/modules/MMM-Config/module_installer/runserver.js:135:20)
magicmirror  |     at module.exports (/opt/magic_mirror/modules/MMM-Config/module_installer/runserver.js:73:3)
magicmirror  |     at Class.startit (/opt/magic_mirror/modules/MMM-Config/node_helper.js:329:5)
magicmirror  |     at Class.setConfig (/opt/magic_mirror/modules/MMM-Config/node_helper.js:163:10)
magicmirror  |     at Class.start (/opt/magic_mirror/modules/MMM-Config/node_helper.js:169:10)
magicmirror  |     at /opt/magic_mirror/js/app.js:232:18
magicmirror  |     at new Server (/opt/magic_mirror/js/server.js:93:3)
magicmirror  |     at /opt/magic_mirror/js/app.js:226:20
magicmirror  |     at loadNextModule (/opt/magic_mirror/js/app.js:171:5)
magicmirror  |     at /opt/magic_mirror/js/app.js:166:6
magicmirror  | [11.03.2025 11:44.21.236] [ERROR] (node:1) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
magicmirror  | [11.03.2025 11:44.21.237] [ERROR] (node:1) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
magicmirror  | [11.03.2025 11:44.22.054] [ERROR] stderr 2: grep: ../../js/animateCSS.js: No such file or directory
magicmirror  | cp: cannot stat '../../js/animateCSS.js': No such file or directory

That is from the docker compose up command.

Then when I hit: http://ip:2222/configure I am greeted with this:
2025-03-11 11_46_04-Window.png

Also to prove I’m not doing anything, crazy… I removed the custom.css file I had that I was looking at and here is what it looks like (this is what it looked like default:

2025-03-11 11_47_07-Window.png

As you can see, lots of room to breathe for those modules. Here is what the config.js looks like:

/* Magic Mirror Config Sample
 *
 * By Michael Teeuw http://michaelteeuw.nl
 * MIT Licensed.
 *
 * For more information how you can configurate this file
 * See https://github.com/MichMich/MagicMirror#configuration
 *
 */

var config = {
  address: "0.0.0.0", // Address to listen on, can be:
  // - "localhost", "127.0.0.1", "::1" to listen on loopback interface
  // - another specific IPv4/6 to listen on a specific interface
  // - "0.0.0.0" to listen on any interface
  // Default, when address config is left out, is "localhost"
  port: 8080,
  ipWhitelist: [], // Set [] to allow all IP addresses
  // or add a specific IPv4 of 192.168.1.5 :
  // ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.1.5"],
  // or IPv4 range of 192.168.3.0 --> 192.168.3.15 use CIDR format :
  // ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.3.0/28"],

  language: "en",
  timeFormat: 12,
  units: "imperial",

  modules: [
    {
      module: "alert",
    },
    {
      module: "updatenotification",
      position: "top_bar"
    },
    {
      module: "clock",
      position: "top_center"
    },
    {
      module: "calendar",
      header: "US Holidays",
      position: "bottom_left",
      config: {
        calendars: [
          {
            symbol: "calendar-check",
            url: "webcal://www.calendarlabs.com/ical-calendar/ics/76/US_Holidays.ics"
          }
        ]
      }
    },
    {
      module: "compliments",
      position: "middle_center"
    },
    {
      module: "currentweather",
      position: "top_right",
      config: {
        location: "Lutz",
        locationID: "4163033",  //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
        appid: "YOUR_OPENWEATHER_API_KEY"
      }
    },
    {
      module: "weatherforecast",
      position: "top_right",
      header: "Weather Forecast",
      config: {
        location: "Lutz",
        locationID: "4163033",  //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
        appid: "YOUR_OPENWEATHER_API_KEY"
      }
    },
    {
      module:"MMM-Config",
      position:"top_right",
            // the QR code (if requested) will appear here
      showQR:"True",
      config:{

      }
    },
    {
      module: "newsfeed",
      position: "bottom_bar",
      config: {
        feeds: [
          {
            title: "New York Times",
            url: "http://www.nytimes.com/services/xml/rss/nyt/HomePage.xml"
          }
        ],
        showSourceTitle: true,
        showPublishDate: true,
        broadcastNewsFeeds: true,
        broadcastNewsUpdates: true
      }
    },
  ]

};

/*************** DO NOT EDIT THE LINE BELOW ***************/
if (typeof module !== "undefined") { module.exports = config; }

This is the config that comes with the docker-compose that I posted earlier. I’m guessing someone made this and there is issues and really I need to do a default install and try from there.

sdetweil

@noviceuser that docker container is quite old

see the doc for the link to the current one

https://docs.magicmirror.builders/getting-started/installation.html#automatic-installation-scripts

i strongly suggest NOT using docker til you know what it all takes

sdetweil

@noviceuser

Then when I hit: http://ip:2222/configure I am greeted with this:

yes, a module problem I guess…

see the output of npm start (harder to see in docker)

there are no module standards, and no program checking, so MMM-Config tries to discover everything… in config and out… and sometimes it encounters something that is unable to be worked around

sdetweil

@noviceuser yes, latest MagicMirror requires nodejs v20.18.1

and node 18+ has fetch built in

noviceuser

@sdetweil Yes, looking at this, I’ve never built my own container like that. If it was a simple pull and then run it then that is one thing. I haven’t gone that far with Docker yet.

I’ll just have to find a machine that I can run this on. That is one good thing about docker is that I don’t have to dedicate an entire VM to the software on it.

sdetweil

@noviceuser MagicMirror will run anywhere…

windows, linux, mac,

my automated installed handles linux and mac

sdetweil

@noviceuser I just updated MMM-Config to depend on a certain version or higher to stop the fetch failure

sdetweil

@noviceuser

note for native running, including windows

in 2.30 we added start commands for the different mgrs
see

https://forum.magicmirror.builders/topic/19269/new-magicmirror-start-options-in-version-2-30-0