miscellaneous, Windows

MagicMirror: Installing on windows

Leave a comment

Hi,

short post about installing MagicMirror on Windows.

First of all install git and node.js.

Clone the repository and start basic installions

1
2
3
4
5
6
7
8
9
10
PS D:\> npm install node-fetch@2
PS D:\> git clone https://github.com/MagicMirrorOrg/MagicMirror
PS D:\> cd MagicMirror
PS D:\MagicMirror> npm run install-mm
PS D:\MagicMirror> cd fonts
PS D:\MagicMirror\fonts> npm install
PS D:\MagicMirror\fonts> cd ..\vendor
PS D:\MagicMirror\vendor> npm install
PS D:\MagicMirror\vendor> cd D:\MagicMirror\
PS D:\MagicMirror>

Edit D:\MagicMirror\package.json and replace

1
2
"start": "DISPLAY=\"${DISPLAY:=:0}\" ./node_modules/.bin/electron js/electron.js",
"start:dev": "DISPLAY=\"${DISPLAY:=:0}\" ./node_modules/.bin/electron js/electron.js dev",

with

1
2
"start": ".\\node_modules\\.bin\\electron js\\electron.js",
"start:dev": ".\\node_modules\\.bin\\electron js\\electron.js dev",

Copy initial config file

1
PS D:\MagicMirror> copy config\config.js.sample config\config.js

And change your locale
[json]
language: “de”,
locale: “de-DE”,
[/json]
Then try start MagicMirror for the first time

1
PS D:\MagicMirror> npm start

The server can also started without UI

1
PS D:\MagicMirror> npm run server

You can connect by any browser with

Press Ctrl-M (minimize) to switch from MagicMirror to the Windows Desktop.
To rotate the screen create a file css\custom.css

1
2
3
4
5
6
7
8
9
10
11
body {
       margin: 0;
       position: absolute;
       transform: rotate(90deg);
       transform-origin: bottom left;
       width: 100vh;
       height: 100vw;
       object-fit: cover;
       top: -100vw;
       visibility: visible;
}

Installing additional (3rd party) modules. Navigate to the modules side . Find a module which fits our needs. For example the “Deutsche Wetter Dienst” module. Clone the module into the modules folder.

1
2
PS D:\MagicMirror> cd modules
PS D:\MagicMirror\modules> git clone https://github.com/LukeSkywalker92/MMM-DWD-WarnWeather

Adjust the config file config\config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
    module: 'MMM-DWD-WarnWeather',
    position: 'top_left',
    header: 'Wetterwarnungen',
    config: {
        region: 'Hetzles',
        changeColor: true,
        minutes: false,
        displayRegionName: true,
        displayInnerHeader: true,
        interval: 10 * 60 * 1000, // every 10 minutes
        loadingText: 'Warnungen werden geladen...',
        noWarningText: 'Keine Warnungen',
        severityThreshold: 2
    }
},

Some config examples for the builtin modules
Schulferien Bayern

1
2
3
4
5
6
7
8
9
10
11
12
13
{
    module: "calendar",
    header: "Schulferien Bayern",
    position: "top_left",
    config: {
        calendars: [
            {
                fetchInterval: 7 * 24 * 60 * 60 * 1000,
                symbol: "calendar-check",
                url: "https://www.schulferien-online.de/wp-content/uploads/2023/10/schulferien_by-24.ics"
            }
        ]
    }

Weather and forecast for Hetzles 🙂

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
    module: "weather",
    position: "top_right",
    config: {
        weatherProvider: "openmeteo",
        type: "current",
        lat: 49.632973589587586,
        lon: 11.127440815280186
    }
},
{
    module: "weather",
    position: "top_right",
    header: "Weather Forecast",
    config: {
        weatherProvider: "openmeteo",
        type: "forecast",
        lat: 49.632973589587586,
        lon: 11.127440815280186
    }
},

Tagesschau

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
    module: "newsfeed",
    position: "bottom_bar",
    config: {
        feeds: [
            {
                title: "Tagesschau",
                url: "https://www.tagesschau.de/infoservices/alle-meldungen-100~rss2.xml"
            }
        ],
        showSourceTitle: true,
        showPublishDate: true,
        broadcastNewsFeeds: true,
        broadcastNewsUpdates: true
    }
},

Warnwetter Deutscher Wetterdienst DWD

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
    module: 'MMM-DWD-WarnWeather',
    position: 'top_left',
    header: 'Wetterwarnungen',
    config: {
        region: 'Hetzles',
        changeColor: true,
        minutes: false,
        displayRegionName: true,
        displayInnerHeader: true,
        interval: 10 * 60 * 1000, // every 10 minutes
        loadingText: 'Warnungen werden geladen...',
        noWarningText: 'Keine Warnungen',
        severityThreshold: 2
    }
},     

Using the calender module with netxcloud. Get the URL: Open the WebGUI, open the Users properties, copy the internal link and append ?export to get an ICS file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
    module: "calendar",
    header: "Familie",
    position: "top_left",
    debug: true,
    config: {
        calendars: [
            {
                fetchInterval: 7 * 24 * 60 * 60 * 1000,
                symbol: "calendar-check",
                 
                url:"https://myNextCloud.host/nc/remote.php/dav/calendars/family/personal/?export",
                auth: {
                    user: 'family',
                    pass: 'MySecretPW',
                    method: 'basic'
                }
            }
        ]
    }
},     

Usefull modules

Stundenplan
Display Google Sheets
Display Carousel
Extended Calender with different views/modules: MMM-CalendarExt3, CalendarExt3Agenda
Scenes for Multiple Pages
Michael

Leave a Reply