@joey Hi how are things. Just from taking a quick look (am not the developer, don’t use this module, don’t have a test magicmirror to-hand) it looks like the API call the module’s making should work just fine.

Trying to access the website using the url of the resource you can see inside MMM-Pollen.js doesn’t look like it will work, as I think maybe you need to specify a Referer in the header? Am new to this.

If you want to test it out you could try: (this is what I did)

• Go to an online API call utility like https://reqbin.com/
• Add the base URL for the API call the module tries to make in the URL field (looks like it’s https://www.pollen.com/api/forecast/current/pollen/ )
• Specify a zipcode for the call by adding it to the end of your URL so you have (e.g.) https://www.pollen.com/api/forecast/current/pollen/90210
• Under Headers add a Key Referer and set its value to the same as the URL you have in the URL field
• Click the Send button

Mine came back with a json body that looks like it has pollen data in

    "Type": "pollen",
    "ForecastDate": "2026-05-25T00:00:00-04:00",
    "Location": {
        "ZIP": "90210",
        "City": "BEVERLY HILLS",
        "State": "CA",
        "periods": [{
            "Triggers": [{
                "LGID": 186, ...

so I’d’ve said the API the module depends on was ok at least. Maybe post a relevant chunk of your config.js you were using for the module and it’ll help with debugging it?

@clarkcrew32 hiya I’m not familiar with the MMM-Bitcoin module, but just taking a look at the github page for it at https://github.com/valmassoi/MMM-bitcoin it doesn’t look like the install instructions are complete (it only suggests adding the module config to your config.js)

AFAIK to install a module to your mirror, you’re going to need to clone the repository to your modules directory, as well as add its config.

(apologies, you might know to do this all already, but just to make sure …)

try going

cd ~/MagicMirror/modules
git clone https://github.com/valmassoi/MMM-bitcoin

and the module should be cloned to your modules directory

then add the config entry into your config.js file, save the changes and try running your MagicMirror again.

(I don’t see any obvious typos for the MMM-Bitcoin entry in your config.js screenshot at the top, it looks like you edited it with nano just fine the first time).

@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?

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

@rkvant maybe post the contents of the csv you’ve put together? Possibly if there’s just a typo like a comma out of place the module will fail to load it, might be helpful to see the data you’re feeding in : )

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 @grinly no worries : )

I agree, I think MMM-JsonTable doesn’t like the structure of the json message you’re getting back - it’s expecting to see information laid out in an array and isn’t set up to parse a different message structure.

Your investigations into Node-RED sound interesting - it’s not something I’ve tried but just from a quick look you might well be able to get it to act as an intermediary between your inverter and MagicMirror. If you’ve managed to get Node-RED to call the inverter endpoint for the energy data then that’s a good start. You’re right, if you go this route I think you’ll still have to clean up/reformat the message for consumption by MMM-JsonTable. But the Node-RED documentation might help - it does look like there are ways to get data back to the module too - you could perhaps get MMM-JsonTable to call a Node-RED endpoint instead of the inverter directly, and Node-RED could serve “cleaned-up” json back to MM?

https://cookbook.nodered.org/http/serve-json-content

Another option might be to see if there’s an alternative MagicMirror module that can handle (or be configured to handle) a wider range of json (or XML) messages? Though you might have to get hands-on with a module to adjust it exactly the way you wanted. If your json message always follows the same format it shouldn’t be too hard to extract the values you’re interested in - I think there are some fairly straightforward modules that would give you an outline of how to request and parse json (e.g. MMM-stocks maybe?). If you wanted the output shown in a table you could take a look inside MMM-JsonTable and see how it’s done there too. Just scrolling the 3rd-party modules list there’s also MMM-Tabulator? I’ve not used this one either but it mentions displaying data from XML or json sources, so it might be worth a try.

hi @grinly that’s good progress persuading it to respond with a json message anyway. It looks like what you’re getting is now more like

{
"overview":
  {
  "lastUpdateTime":"2020-09-30 10:35:31",
  "lifeTimeData":
	{
	  "energy":1162278.0,
	  "revenue":247.86499
	},
  "lastYearData":
	{
	  "energy":1126618.0
	},
  "lastMonthData":
	{
	  "energy":450237.0
	},
  "lastDayData":
	{
	  "energy":1600.0
	},
  "currentPower":
	{
	  "power":1234.6772
	},
"measuredBy":"INVERTER"
  }
}

which does look much more json-ish. Unfortunately your inverter’s not providing the power and energy data in an array[] format. In json an array would look more like the Example 1 message - it would be essentially a named list (called items in the example) and show a set of readings, each providing the same kind of datapoints, and contained in the message between [ and ]. I’m guessing that the error you’re seeing is because you’ve provided

arrayName: "overview"

in your config.js, so the module’s looking in the json for an array with that name, and there isn’t one (there’s a json element overview, but it’s not an array.)

I haven’t tried using the MMM-JsonTable module so I don’t know for sure - do you get anything displayed by the module if you request the inverter data in json format again but then leave the arrayName blank in your config.js (or comment-out the arrayName entry)?

Hi @grinly - so (apologies - just to make sure what you’re looking for …)

From your screenshot it looks like you’re receiving an XML message back from your inverter (hopefully this comes out ok - something like -

&ltoverview>
  &ltlastUpdateTime>2020-09-25 17:06:53&lt/lastUpdateTime>
  &ltlifeTimeData>
    &ltenergy>1109407.0&lt/energy>
    &ltrevenue>236.23314&lt/revenue>
  &lt/lifeTimeData>
  &ltlastYearData>
    &ltenergy>1073747.0&lt/energy>
  &lt/lastYearData>
etc.

Whereas I think the MMM-JsonTable module is looking for a json response to parse. Are you wanting to transform the XML message you have into json first, so that MMM-JsonTable can work with it? The raw json message in Example 1 on https://github.com/timdows/MMM-JsonTable shows a simple structure you could aim for, e.g.

{
    "items": [
        {
            "name": "Lifetime Energy",
            "value": "1109407"
        },
        {
            "name": "Lifetime Revenue",
            "value": "236.23314"
        },
        {
            "name": "Energy Last Year",
            "value": "1073747"
        },
        {
            "name": "Last item in my example array for now",
            "value": "3 or something"
        }
    ]
}

which gives MMM-JsonTable an array named “items” (hence arrayName : ‘items’ in the config.js for the module - so you can change the array name as long as the config entry changes to match) and each entry in the items array has 2 datalabel:datavalue pairs in. You can see the syntax - the array entries go between [ and ], and each entry gets its own { and } with a trailing comma between them.

Does this help any? Hopefully I haven’t misunderstood what you’re trying to achieve :)

updateInterval: 15 * 60 * 1000, //every 15 minutes or whatever you choose

that’s the original ^ and I updated the 15 to 60.

I guess I don’t understand what each number represents. Milliseconds, Seconds, Minutes? >

Hi @cotxwx - I think the updateInterval in the original is currently set to 15 minutes. The time will be based in milliseconds, so reading it right-to-left that gives you

1000 (milliseconds per second) x 60 (seconds per minute) x 15 = a 15 minute interval

which I think ends up being clearer than just giving a sort of anonymous/unit-free total (e.g. 900000 or something like that)

hope this helps anyway

Hi @C-son thanks very much for your update! I’ve updated my installation of the module and given it another try, and it’s definitely better:

• my mirror now shows the picture from MMM-BackgroundSlideshow ok (instead of just the black background with no picture under my other modules that I was getting before when MMM-MagicMover was enabled)

• watching carefully I can see my displayed modules (e.g. default Clock, weather modules) getting shifted slightly in the mirror display every now and again

• but my module at position: bottom_centernow gets displayed shifted to the right of the mirror. I have MMM-WeatherOrNot displayed at this position, configured to show a 7-day forecast as a horizontal row of icons, and the last 3 or so icons (perhaps 40% of the whole row) is shifted off the right hand side of the screen (if that helps give you an idea of how much it’s been moved across).

I do have a module configured to display above that (at position: lower_third) and below that too (at position: bottom_bar) and they both appear displayed on the mirror normally (i.e. centred like I’d expect)

I still have MMM-MagicMover configured at position: top_bar, just in case that makes a difference.
Let me know if there’s any more info I can help with anyway, happy to try it out.