@bendonahue It looks like he’s using the MMM-OnScreenMenu module. I don’t know how he’s using it, but he’s probably hiding/showing Home Assistant as some sort of embedded module or webpage.

Possibly his Home Assistant page is inside an iFrame using the MMM-iFrame module and he’s using a toggle to show/hide the iFrame (as per the show/hide clock example in the MMM-OnScreenMenu module). This might explain the white ‘border’ that appears on the right & bottom of his HA controls page.

There will be some HA dashboard cards don’t like being inside an iFrame so may not work correctly.

@karsten13 Excellent - I think that’s what I was expecting to happen. Thank you so much for all your help & advice.

I hope this thread proves useful to other MagicMirror ‘newbies’ like me.

Sorry - one more question:

If there is a MagicMirror2 update, and I remove my MagicMirror docker container and re-add it in order to get the latest version of MagicMirror2, do I then have to repeat the ‘npm install’ command inside the new docker container to get dependencies and MaterialDesignIcons installed? Or are the existing files & directories kept on the host OS and the MagicMirror2 container simply has links to the already existing directories on the host and so everything should just work?

Hoorah! I got it working - thanks to your help :)

As you had said “The module from Snille already includes the https://materialdesignicons.com/” i decided to remove the leinich version of the module and instead installed the Snille version.

And now that I know how to run ‘npm install’ INSIDE the docker container, i did that and noticed that a directory called “node_modules” was created inside the MMM-homeassistant-sensors directory. I also noticed a “node_modules” directory inside the docker container at the ‘/opt/magic_mirror/’ level - i’ve no idea if thats meant to be there or its the result of me running ‘npm install’ whilst in the wrong directory - either way, it doesn’t seem to affect anything, so I stayed well clear of it.

After installing the Snille module and running ‘npm install’ INSIDE the docker container, i still couldn’t get my icons appearing, until i realised that the config.js for leinich’s version is subtly different to Snilles:

leinch’s says:

icons: [{
  "state_off": "lightbulb-outline",
  "state_on": "lightbulb-on-outline"
}]

whereas Snille’s says:

icons: [{
  "off": "lightbulb-outline",
  "on": "lightbulb-on-outline"
}]

so the difference being “state_off” and just “off”.

Anyway, i now have it working - so a big thank you for your help!

Hopefully my struggles will help anyone else reading this thread (in particular the bit on how to run ‘npm install’ INSIDE the docker container). Thank you.

Incidentally, your post said that the module from Snille “included” the Material Design Icons - where? Does the npm install command somehow download them?

Snille’s instructions say: “Install Node-Modules (The MaterialDesignIcons webfont icon names can be used.).”

What exactly does “Install Node-Modules” mean?? I haven’t done anything more than git clone his module, then ran npm install inside the docker container as you explained.

Hi, thanks again for assisting.

Yes, I updated my config.js with some sensor entries using some of the icons as listed in the leinich module example. So my config.js module looks like this:

module: 'MMM-homeassistant-sensors',
    position: 'top_right',
    config: {
      host: "MY IP",
      port: "MY PORT",
      https: false,
      token: "MY TOKEN",
      values: [
      {
        sensor: "sensor.load_1m",
      },
      {
        sensor: "sensor.load_5m",
      },
      {
        sensor: "sensor.wifi_level",
      },
      {
        sensor: "sensor.kittytemp_temp",
      },
      {
        sensor: "switch.diningroom_lamp",
	icons: [{
	  "state_off": "lightbulb-outline",
	  "state_on": "lightbulb-on-outline"
	}]
      },
      {
        sensor: "switch.heat_mats",
	icons: [{
	  "state_off": "lightbulb-outline",
	  "state_on": "lightbulb-on-outline"
	}]
      },
      {
        sensor: "switch.kitty_mat",
	icons: [{
	  "state_off": "lightbulb-outline",
	  "state_on": "lightbulb-on-outline"
	}]
      },
      {
        sensor: "switch.satellite",
	icons: [{
	  "state_off": "lightbulb-outline",
	  "state_on": "lightbulb-on-outline"
	}]
      }
      ]
    }
  },

So, as best I could tell, “lightbulb-outline” and “lightbulb-on-outline” are included in the Material Design Icons.

Obviously I’m being a bit dumb somehow, but I’m not currently seeing where.

Well the Snille/MMM-homeassistant-sensors module just says:

Installation
In your terminal, go to your MagicMirror's Module folder:

cd ~/MagicMirror/modules
Clone this repository:

git clone https://github.com/Snille/MMM-homeassistant-sensors
Enter the folder:

cd MMM-homeassistant-sensors
Install Node-Modules (The MaterialDesignIcons webfont icon names can be used.).

npm install

and the leinich/MMM-homeassistant-sensors module just says:

Navigate into your MagicMirror's modules folder and clone this repository: cd ~/MagicMirror/modules && git clone https://github.com/leinich/MMM-homeassistant-sensors.git

If you want to use icons for the sensors download the MaterialDesignIcons webfont from https://github.com/Templarian/MaterialDesign-Webfont/archive/master.zip and unzip the folder: cd ~/MagicMirror/modules/MMM-homeassistant-sensors && wget https://github.com/Templarian/MaterialDesign-Webfont/archive/master.zip && unzip master.zip

I tried downloading and unzipping the master.zip file and running the npm install command in the directory (in the docker container) as you suggested. After restarting my MagicMirror2 container, nothing was any different.

Clearly there is some ‘piece of the jigsaw’ that i’m missing.

Firstly - apologies for the late reply. I had rather expected to get a “Someone replied to your posting…” email, but perhaps that setting isn’t ‘on’ in my forum profile (i’ll check).

Thank you everyone for the explanation and the details of how to use npm INSIDE the docker container. I did as @karsten13 had suggested (docker exec -it mm bash) and that seemed to work fine. I could run npm install inside the container. I then exited from that session and restarted my docker container.

However, i didn’t quite get working what I was attempting to do:

1. I have Home Assistant running on my rpi4b (in a docker container)
2. I have Magic Mirror2 also running (in a docker container) on the same rpi4b
3. I installed module Snille/MMM-homeassistant-sensors and its working fine
4. I wanted to use the MaterialDesignIcons as documented in Snille’s module - so I ran the ‘npm install’ command in the module directory inside the docker container as explained by @sdetweil and @karsten13 but, even after restarting my MagicMirror2 container, it made no difference to the icons.
5. I tried following the instructions in the alternative MMM-homeassistant-sensors by leinich by downloading the documented ‘master.zip’ of MaterialDesignIcons and unzipping that and running the ‘npm install’ command inside the docker container (and i tried inside the MaterialDesign-Webfont-master directory) but i still cant seem to use any of the icons in my Home Assistant sensor display.

Is there something obvious i’m doing wrong (or not doing)? Its not a big problem - i can live without the icons if necessary. I’m happy that I can display Home Assistant sensor data in MagicMirror2 as it is.

Perhaps i’m trying to install fonts in a docker container when in fact the fonts need to go in the relevant directories on the host? and without ‘npm’ being installed on the host, i can’t do that??

Would I be better ditching MagicMirror2 in a docker container, and instead install it natively on the host? (i was trying to keep my rpi4b as a clean host with HomeAssistant and MagicMirror2 neatly bundled into their own containers).

(incidentally, i do have 40+ years in IT, but just not in ‘hands-on’ stuff. I date from the days of FORTRAN, COBOL and Pascal - you’re probably all too young to even know what those were) :)

I’ve installed MagicMirror2 in a Docker container running on my Raspberry Pi 4b (alongside my Home Assistant setup also running in a docker container).

MagicMirror (in docker) is running fine and I can add some modules to config.js no problem. However, i notice quite a few modules say to “install dependencies” using npm. I’m assuming ‘npm’ is something to do with node.js which is installed as part of the normal MagicMirror install process, but how can I use npm when my MagicMirror is in a docker container? When i try npm, it just gives me the expected ‘command not found’ error.

Do i need to install the whole of node.js just to get npm working? Will this have a significant impact on my rpi4b? (I mainly use it for Home Assistant to control all my Smart Plugs, cameras etc., so don’t want to impact it too much by installing node.js if I don’t have to).