MagicMirror: Installing on windows

Hi,

short post about installing MagicMirror on Windows.

First of all install git and node.js.

Clone the repository and start basic installions

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

"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

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

Copy initial config file

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

PS D:\MagicMirror> npm start

The server can also started without UI

PS D:\MagicMirror> npm run server

You can connect by any browser with

http://localhost:8080

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

 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.

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

{
	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

{
	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 🙂

{
	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

{
	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

{
	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.

{
	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