Hi @Wenike in your MMM-Carousel config it looks like you have

mode: global,

which might need to be quoted? i.e.

mode: 'global',

@lucallmon

hi - you mean where it’s showing the date in the heading at the top? - the “TODAY IN HISTORY 02/19/2017” in the module picture (sorry, not familiar with this module)

in MMM-History.js it looks like the header is generated with

header.innerHTML = "Today in History  " + moment().format('L');

and format('L') would give you a date as shown.

You could try updating this line in MMM-History.js and specifying a different format?

e.g.
header.innerHTML = "Today in History " + moment().format('ll');

looks like it should give you a “ShortMonth dd, yyyy” date instead. (Haven’t tried this to confirm, give it a go)

Hi @bjoern - so I think this should be possible (although there doesn’t seem to be a way to configure it in the module’s config.js entry just now)

The MMM-WeatherOrNot readme says that the information it displays is pulled from https://weatherwidget.io/. If you go there and try adjusting the sample widget shown on the site, there’s an option for Current / Forecast, which you can set to Current, Forecast or Both. It looks like it defaults to Both, which I guess is what you’re seeing.

By trying the different options and clicking on the GET CODE button, I get a code block including either

data-mode="Forecast"

data-mode="Current"

or a block with no data-mode in at all, if I select Both.

If you look in the MMM-WeatherOrNot.js file you can see at the bottom where this codeblock to pull the correctly-configured information is sort of constructed, based on the values you’ve given in your config.js.

So it looks like you could theoretically:

• add a new parameter to your config.js, e.g.

{
    disabled: false,
    module: 'MMM-WeatherOrNot',
    position: 'middle center',
    config: {
      location: "staten-island",
      dataMode: "Forecast",   // valid options are "Both", "Forecast" or "Current"

• update MMM-WeatherOrNot.js to refer to the parameter - where it shows

/ Insert config options
		iframe.srcdoc = `&lta class="weatherwidget-io"

you could maybe include data-mode="${this.config.dataMode}"

Something like that anyway. And then it might allow you to control whether the Current weather is shown or just the Forecast using the config.

hi @SecretEUAgent

last time you were working on your Mirror had you got any of the modules you wanted up and going? (i.e. is there anything you want to keep from what you’ve done so far, or are you ok making a fresh start by reinstalling?)

If you’re ok reinstalling it might be easier to work though adding the modules you want to a fresh install, is all.

Hard to know what hasn’t worked out since I can’t see what you’ve done so far! Adding modules to the mirror isn’t usually too difficult, but needs 2 steps:

• installing the module (e.g. cloning the module’s code from github into the MagicMirror/modules directory on your RaspberryPi, and (maybe) installing dependencies

• updating the config.js file at MagicMirror/config so that the module is displayed on your mirror and behaves the way you want

Updating config.js is not hard but does need doing with care as even small errors (typos, missing punctuation) can make the file contents invalid. Your Mirror will likely start but just show a blank screen with a default “Please create a config file or check the existing one for errors” message.

(It should also show a note about running the config check as Sam has suggested, which might show if there are errors in your config file that you can correct.)

While updating the config file if you save a last-known-good-file and then make small changes between re-running the mirror it’ll help to pin down any typing errors. If you jump in and change heaps at once and then your Mirror suddenly won’t show any modules then it’s harder to work out which of your edits caused it and where the config needs correcting.

Post back if you get your Pi to a solid (re)starting position (e.g. reinstalled with a new config.js, or a config.js you’ve run through the config checker) and we’ll try adding a module and see how it goes

Hi - there haven’t been any updates on this lately but I thought I’d add some notes from when I tried out Grafana recently.

I’ve been using Grafana v8.4.6 installed on Ubuntu (so this might not help if your trouble is related to running it in a Docker container). I wanted to show a grafana-gauge on my Magicmirror. After changing some configuration and making some adjustments to the MMM-GrafanaGauges module I can confirm I’ve got it to show my gauge on the mirror, although I still have a couple of issues with it.

Anyway, notes on how I got to this point:

1. Logged into my Ubuntu machine (the Grafana-host) and made some updates to the grafana.ini file (as noted in one of the guides linked above)

In v8.4.6 the grafana.ini file is at /etc/grafana so in a terminal I could go

sudo nano /etc/grafana/grafana.ini

in order to edit the file. I needed to allow anonymous viewing of shared dashboards (i.e. without needing to log in as a Grafana user) and allow embedding. I set

[auth.anonymous]
enabled = true

[security]
allow_embedding = true

Note that I think the ; character shows a comment in the .ini file, so I needed to uncomment these entries as well as update them to = true

I needed to restart the grafana-server for these changes to take effect.

sudo system-ctl restart grafana-server

2. Logged into Grafana on the grafana-host, and viewed the graph that I wanted to show on my mirror. There’s a Share option, with an Embed tab available. It provides some HTML to use to embed the graph in another page. In my case this looked like

<iframe src="http://localhost:3000/d-solo/kJ03KuhMk/power-gauge?orgId=1&panelId=5" width="450" height="200" frameborder="0"></iframe>

I’d updated the parameters for the module in my MagicMirror config.js but when I checked the dev console on my MagicMirror I could see that MMM-GrafanaGauges was writing the URL it was trying to use to the log, and it looked like

<iframe src="http://grafanahost:3000/dashboard-solo/db/power-gauge?orgId=1&panelId=5" ...

The log also included a 404 Not found message just after. So possibly the URL-format has changed since the module was written, or my grafana configuration is different.

I updated the MMMGrafana-Gauges.js file to build the URL to match the one provided on the Share/Embed page anyway, i.e. using /d-solo/kJ03KuhMk instead of the dashboard-solo/db literal, and now I can see the graph on my mirror.

Issues I still have with it:

• When the graph is refreshed, it fades out (which is neat) but then fades back before the graph is ready to be displayed. It shows a bouncing grafana logo followed by some white text (Loading and initializing dashboard, or something) which looks pretty ugly. It would be neater if it would fade back in only once the graph has finished loading.

• I haven’t been able to get the background-transparency on the graph to work. There is a Transparent background setting when editing graphs in grafana, but the frame still shows up as a dark-grey rectangle around the graph on my mirror, which doesn’t look so good.

Hope this is helpful to someone anyway

hi @nateb827

You might’ve just mangled the config.js file a bit is all - perhaps the sample config entry includes some brackets that you didn’t need in your case?

If you take a look in your config.js file in your text editor -ideally something like Notepad++ if you can but there are many options - you just want an editor that will be more helpful than plain Windows Notepad. Scroll down to the modules: [ section.

Here’s an example from the top of mine (just an edited chunk, to illustrate …

modules: [
		{
			module: "alert",
		},
		{
			module: "updatenotification",
			position: "top_bar"
		},
		{
			module: "clock",
			position: "top_left"
		}
]

So the modules: section as a whole is contained between square brackets [ and ] as you can hopefully see - the opening [ comes immediately after modules: and the closing one ] comes at the end of the list.
Inbetween those, the modules themselves are specified between curly brackets { and }. Entries for the modules have commas between them. Modules with detailed configuration options have those specified within further pairs of { and } nested inside the entry for the module - MMM-Cursor includes a config {} entry as an example of this.

To add your new module to the config.js file you just need to make sure you follow this pattern when pasting the entry in.
I’m assuming you’re adding the entry into the existing modules: section in your config.js, so you don’t need the

modules: [

or the last ] provided in the Using the module example on the github page, just the entry for the module itself:

		{
			module: "MMM-Cursor",
			config: {
				// See 'Configuration options' for more information.
			}			
		},

It’s easy to drag in unwanted or unpaired brackets when you copy/paste though, and this might break your config. Some text editors will flag unpaired brackets that have made the overall .js file invalid, which can be helpful as you’re making changes.

Using the example above, I’ve pasted an entry for the MMM-Cursor module in between the entries for the updatenotification and clock modules so you can see what it looks like.

modules: [
		{
			module: "alert",
		},
		{
			module: "updatenotification",
			position: "top_bar"
		},
		{
			module: "MMM-Cursor",
			config: {
				// See 'Configuration options' for more information.
			}			
		},
		{
			module: "clock",
			position: "top_left"
		}
]

If you wanted to paste your new entry at the end of the modules: list (after clock in this example) the only difference would be to add a comma at the closing } for the clock module (and remove any trailing comma at the closing } of your new entry) i.e.

{
			module: "clock",
			position: "top_left"
		},
		{
			module: "MMM-Cursor",
			config: {
				// See 'Configuration options' for more information.
			}			
		}
]

Hope this helps, apologies if I’ve gone into too much detail about stuff you already know. If you still don’t have any luck maybe try pasting your whole modules section from your config.js and someone can take a look?

@lucallmon

hi - you mean where it’s showing the date in the heading at the top? - the “TODAY IN HISTORY 02/19/2017” in the module picture (sorry, not familiar with this module)

in MMM-History.js it looks like the header is generated with

header.innerHTML = "Today in History  " + moment().format('L');

and format('L') would give you a date as shown.

You could try updating this line in MMM-History.js and specifying a different format?

e.g.
header.innerHTML = "Today in History " + moment().format('ll');

looks like it should give you a “ShortMonth dd, yyyy” date instead. (Haven’t tried this to confirm, give it a go)

@sharmstr said in [MMM-ApexCharts] ApexCharts.js for your mirror.:

There are several working examples in the wiki

https://github.com/sharmstr/MMM-ApexCharts/wiki/JSON

Hi - thankyou very much - and apologies for somehow not finding your great documentation! I’ve been able to get sample charts working now.

Just some notes on where I’ve got to with my mirror - I’ve been trying MMM-ApexCharts out using a mini power monitor called an IotaWatt as a datasource. It sits on my home network and collects power readings from my mains connection using a current transformer. You can then query this data back and possibly use it to draw graphs.

Queries are just done with an http request and look like:

http://MyIotaWatt.local/query?select=[time.local,InstPower_W.wh.d2]&begin=s-24h&end=s&group=1h&format=json&header=no

returning (in this case) json with readings for total power usage (kWatt hours) for each of the previous 24 hours.
Responses look like (e.g.)

0	
	0	"2024-09-21T14:05:00"
	1	0.76
1	
	0	"2024-09-21T13:05:00"
	1	0.75
2	
	0	"2024-09-21T12:05:00"
	1	0.73
etc

so this has worked well with the paired chartJsonFormat config.

Things I found useful so far:

1. if I put the http://iotawatt.local/query?.… in the chartJsonUrl config then the log showed that the call failed with a CORS error. I’ve got it to return data if I add the local CORS server prefix though i.e.

http://localhost:8080/cors?url=http://MyIotaWatt.local/query?...

2. Times returned in the response match NZ local time, but the labels on my chart’s x-axis originally displayed times 12 hours earlier. I’ve included a datetimeUTC entry in my xaxis.labels config to leave it in local time

xaxis: {
  		type: "datetime",
  		tickPlacement: "off",
  		labels: {
  				datetimeUTC: false,
  				format: "HH:mm",
  				}
  		},

@sharmstr I’ve also been trying out showing more than one chart on the mirror, following your sample config. Is there a way to show two charts when both make their own call to a datasource (i.e. with separate chartJsonUrls?)
This would be useful in my case to show a chart for Detailed power usage (over last 30 mins) and a separate chart for Overview (usage in last 24 hours).

I’ve configured these charts to work individually, but when I add both to my config at the same time (with different chartIDs) the 2nd chart doesn’t show on the mirror. The log shows json responses to both calls, but also an error
Uncaught (in promise) TypeError: Cannot read properties of null (reading '1')
following the 2nd response. Is there a neat way to allow both charts, or have I just messed it up? Thanks very much

hi @sharmstr your module looks great and I was just trying it out.

Would you be able to provide a sample config.js entry for it (e.g. for showing one of your example charts)?

I’ve installed the module and had a go at updating my config.js following the instructions at https://github.com/sharmstr/MMM-ApexCharts, and given it a URL to your test data, hoping to show a bar chart to get started with.

I’m unsure how to add the chartConfig options though and don’t think I have the format correct.

The mirror currently starts but doesn’t show a chart, and the Console shows several errors like Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘forEach’)

hopefully I’ve just forgotten something stupid/obvious!

My config.js entry for the module so far looks like

{
  			module: 'MMM-ApexCharts',
  			position: "middle_center",
			config: {
	    			chartBackground: "transparent",
	    			chartDataLabels: false,
	    			chartJsonFormat: "paired",
	    			chartJsonInterval: "",
	    			chartJsonUrl: "http://my-json-server.typicode.com/sharmstr/MMM-ApexCharts/paired",
	    			chartMonochrome: true,
	    			chartMonochromeColor: "#534F4F",
	    			chartThemeMode: "dark",
	    			chartThemePalette: "palette1",
	    			chartWidth: 400,
	    			chartConfig: {
	    					chart: {
						    type: 'bar'
  							},
						}
				}
		},

thanks for any assistance in the meantime : )

hi @SecretEUAgent

last time you were working on your Mirror had you got any of the modules you wanted up and going? (i.e. is there anything you want to keep from what you’ve done so far, or are you ok making a fresh start by reinstalling?)

If you’re ok reinstalling it might be easier to work though adding the modules you want to a fresh install, is all.

Hard to know what hasn’t worked out since I can’t see what you’ve done so far! Adding modules to the mirror isn’t usually too difficult, but needs 2 steps:

• installing the module (e.g. cloning the module’s code from github into the MagicMirror/modules directory on your RaspberryPi, and (maybe) installing dependencies

• updating the config.js file at MagicMirror/config so that the module is displayed on your mirror and behaves the way you want

Updating config.js is not hard but does need doing with care as even small errors (typos, missing punctuation) can make the file contents invalid. Your Mirror will likely start but just show a blank screen with a default “Please create a config file or check the existing one for errors” message.

(It should also show a note about running the config check as Sam has suggested, which might show if there are errors in your config file that you can correct.)

While updating the config file if you save a last-known-good-file and then make small changes between re-running the mirror it’ll help to pin down any typing errors. If you jump in and change heaps at once and then your Mirror suddenly won’t show any modules then it’s harder to work out which of your edits caused it and where the config needs correcting.

Post back if you get your Pi to a solid (re)starting position (e.g. reinstalled with a new config.js, or a config.js you’ve run through the config checker) and we’ll try adding a module and see how it goes

@MMRIZE thanks for the suggestion - I’m not sure it even got as far as having a version of node that was too old.

node -v

just gives me a No such file or directory error

@sdetweil thanks for taking a look! I’ll try ubuntu + install script and see how I get on.

Hi, I’ve run into trouble trying to install MagicMirror on an old intel NUC, on top of an installation of Debian with Raspberry Pi Desktop for PC/Mac from

https://www.raspberrypi.com/software/raspberry-pi-desktop/

It looks like Raspberry Pi Desktop is based on Debian Bullseye:

Debian Bullseye with Raspberry Pi Desktop
Release date: July 1st 2022
System: 32-bit
Kernel version: 5.10
Debian version: 11 (bullseye)

Installation of Raspberry Pi Desktop from the image on USB seemed successful and the machine boots to a desktop OK.

I’ve then tried running the MagicMirror install script from https://github.com/sdetweil/MagicMirror_scripts

but this gets to the section installing correct version of node and npm, please wait and fails with error messages at the terminal

ERROR: npm v10.1.0 is known not to run on Node.js v12.22.12.  This version of npm supports the following node versions: `^18.17.0 || >=20.5.0`. You can find the latest version at https://nodejs.org/.

ERROR:
/usr/local/lib/node_modules/npm/lib/utils/exit-handler.js:19
  const hasLoadedNpm = npm?.config.loaded

followed a bit later by

node failed to install, exiting

The RPi desktop installation instructions included allowing updates as part of the install process, so just in case that was causing issues I’ve tried:

• MM install via script on a fresh RPi Desktop install (allowed updates during install)
• MM install via script on a fresh RPi Desktop install (skipped updates during install this time)

but I’m seeing the same npm error during the MagicMirror installation on both.

Thanks for reading this far and any suggestions! - let me know if there’s anything else I should try : )

hi @alphabeta77

I haven’t come across any end-to-end solutions that sound like what you’re looking for. But maybe you could duct-tape some existing building blocks together and get to where you wanted?

For instance a google search shows up some details for Raspberry Pi Photo Booth projects that you could follow. Like

https://github.com/pibooth/pibooth

(no affiliation, just has a link to a wiki so maybe the documentation is helpful). You might be able to learn enough from what’s there to integrate PhotoBooth functionality into your Magic Mirror (and include some hardware in your mirror build - at least a PiCam and a button I guess - to trigger taking a photo and perhaps save it to a local directory)?

Then there must be some MagicMirror Modules you could try out that would display random images from your local directory - at a configurable delay - maybe like

https://github.com/miccl/MMM-Random-local-image

and then you’d have images from your gallery of outfits shown on your mirror. (again no affiliation to this one either, just another google result)

Hope this helps, if you try it let us know how you get on : )

hi @joshcsepegi - don’t know if this helps exactly, but you could get mostly the same effect using something like MMM-BackgroundSlideshow, as long as you pre-downloaded a set of poster images from the movieposter website and loaded them to your MagicMirror somewhere the module can see them.

I do something similar with this module and a curated set of desktop-wallpaper-style images, shuffled on a configurable delay.

It does mean you don’t get the newest additions to the website until you’ve downloaded and added them to your local copy, but you also don’t need to worry about the module needing to handle a loss of connectivity gracefully, the poster website going down, the api changing etc.

@nateb827 hiya, thanks for the note to say you’d got it sorted! No worries, best wishes for your future configurating : )

hi @nateb827

You might’ve just mangled the config.js file a bit is all - perhaps the sample config entry includes some brackets that you didn’t need in your case?

If you take a look in your config.js file in your text editor -ideally something like Notepad++ if you can but there are many options - you just want an editor that will be more helpful than plain Windows Notepad. Scroll down to the modules: [ section.

Here’s an example from the top of mine (just an edited chunk, to illustrate …

modules: [
		{
			module: "alert",
		},
		{
			module: "updatenotification",
			position: "top_bar"
		},
		{
			module: "clock",
			position: "top_left"
		}
]

So the modules: section as a whole is contained between square brackets [ and ] as you can hopefully see - the opening [ comes immediately after modules: and the closing one ] comes at the end of the list.
Inbetween those, the modules themselves are specified between curly brackets { and }. Entries for the modules have commas between them. Modules with detailed configuration options have those specified within further pairs of { and } nested inside the entry for the module - MMM-Cursor includes a config {} entry as an example of this.

To add your new module to the config.js file you just need to make sure you follow this pattern when pasting the entry in.
I’m assuming you’re adding the entry into the existing modules: section in your config.js, so you don’t need the

modules: [

or the last ] provided in the Using the module example on the github page, just the entry for the module itself:

		{
			module: "MMM-Cursor",
			config: {
				// See 'Configuration options' for more information.
			}			
		},

It’s easy to drag in unwanted or unpaired brackets when you copy/paste though, and this might break your config. Some text editors will flag unpaired brackets that have made the overall .js file invalid, which can be helpful as you’re making changes.

Using the example above, I’ve pasted an entry for the MMM-Cursor module in between the entries for the updatenotification and clock modules so you can see what it looks like.

modules: [
		{
			module: "alert",
		},
		{
			module: "updatenotification",
			position: "top_bar"
		},
		{
			module: "MMM-Cursor",
			config: {
				// See 'Configuration options' for more information.
			}			
		},
		{
			module: "clock",
			position: "top_left"
		}
]

If you wanted to paste your new entry at the end of the modules: list (after clock in this example) the only difference would be to add a comma at the closing } for the clock module (and remove any trailing comma at the closing } of your new entry) i.e.

{
			module: "clock",
			position: "top_left"
		},
		{
			module: "MMM-Cursor",
			config: {
				// See 'Configuration options' for more information.
			}			
		}
]

Hope this helps, apologies if I’ve gone into too much detail about stuff you already know. If you still don’t have any luck maybe try pasting your whole modules section from your config.js and someone can take a look?