Hi @Wenike in your MMM-Carousel config it looks like you have
mode: global,
which might need to be quoted? i.e.
mode: 'global',
Hi @Wenike in your MMM-Carousel config it looks like you have
mode: global,
which might need to be quoted? i.e.
mode: 'global',
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:
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
<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 @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:
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"
MMM-WeatherOrNot.js
to refer to the parameter - where it shows/ Insert config options
iframe.srcdoc = `<a 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.
@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:
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:
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
<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:
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"
MMM-WeatherOrNot.js
to refer to the parameter - where it shows/ Insert config options
iframe.srcdoc = `<a 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.