Edit: the glass has arrived, pls find details and pictures on the actual build here in part 2:
https://forum.magicmirror.builders/topic/12392/frameless-bathroom-mirror-part-2-hardware-and-build

---

I hope you guys don’t mind, I only got screengrabs so far. Here are the pics:

https://ibb.co/Np8dtsy
https://ibb.co/r6HDVtT

Materials used:
80x110cm metal frame from my current bathroom mirror
4mm Pilkington Mirropane from glas-star.de
Raspberry 2
Benq 24" monitor
DollaTek microwave sensor (as PIR replacement to work behind the glass)

Modules used:
clock
calendar
MMM-GoogleFit
currentwheather
wheatherforecast
MMM-WienerLinien
MMM-iFrameReload
MMM-GQuotes
newsfeed
MMM-network-signal
MMM-Screencast

I have done a bit fiddling and playing around with some modules settings, hope it’s ok to share a bit of my journey ;-)

For the calendars, I have created a family google-calendar, which I have made accessable to the family members. Every member can add events to this calendar, and they are then displayed in this first instance of the calendar module. The rest are 3 more instances for myself and the other family members (excluding my teenage daughter who doesn’t want to share her calender for whatever reason…)

For the GoogleFit modules, I have created 4 instances for all family members, bought a bluetooth scale, connected it up to each mobile (except for my wife who doesn’t want to show the weight for whatever reason…) and linked each instance to each google accounts. I modified the colors of the steps-rings (which display the percentage of the reached goal) to match each family member’s color.

For the WienerLinien module (public transport of Vienna), it turned out that the width was constantly changing depending on the name of the destination, taking with it the widths of the other modules on the right side. So I found the option to create a custom.css, where I set a fixed width (which is very likely very clear for the most of you, it did take me a bit searching though - I hadn’t registered to this nice forum at that time yet)

I’m a bit proud of the next module to be honest. I used the iFrameReload module to display a google maps frame showing the way from my home to my current workplace. It refreshes every 10 minutes and shows how long it currently takes me to get there by car (at the time of the screengrab it was 11 min.). To have it appear in a matching style I used filter:greyscale 100% plus invert 100% within the js of the module. This way I managed a quite decent google display without the need of an API key.

The rest is pretty standard. The screencast is showing a youtube video on the second screengrab.
Thanks for taking the time to read, very looking forward for the glass so I can hopefully soon show you the real thing!

This is part 2 of my bathroom mirror build, part 1 is here:
Frameless Bathroom Mirror - Part 1
I hope it is ok to use 2 threads.

First of all, here is me with the final product :-)
et voila

Last month, the glass has arrived from https://www.glas-star.de/

package

The basis of this project was my original bathroom mirror. It consisted of a 110 x 80 cm frame of 2 x 4 cm aluminium profiles and the mirror glass glued to the frame with double-sided mirror tape. In the next picture I freed the frame from the old mirror.

frame with shards
and here cleaned and tidied up for the fitting of the spy glass. For this I used a hot air gun and a untility knife blade.
clean frame
You can see here that the old mirror had some electric wiring (for an in-built neon tube lighting), which I salvaged for the magic mirror project.

After glueing the new glass to the frame with 2-K-epoxy-glue, I covered the parts of the mirror that would later not be covered by the monitor.
I used black window film for this, here is an amazon link:
https://www.amazon.de/gp/product/B0785D9LCM/ref=ppx_yo_dt_b_asin_title_o01_s00?ie=UTF8&psc=1
glass covered

Since the frame only leaves 4cm space, I had to disassemble the monitor, so that the display and the electronics would fit.
I used tinsnips to dismantle the housing of the monitor’s electronics and soldered extensions to the led backlights.
controls for monitor

I screwed brackets for the display panel and the monitor electronics into the aluminum frame and used power tape to support. I used adhesive bases and zipties to tidy up the wirings. I used a junction box for the mains connections (to which I later added additional lighting)
frame with display and mains box

I have adapted the MMM-buttons module to read a toggle switch to switch on and off the MMM_Webradio module, 3 momentary switches are used to control the volume and select the next radio station, you can see them in the next picture, here is a link to the buttons that I used:
https://www.amazon.de/gp/product/B07RXK544N/ref=ppx_yo_dt_b_asin_title_o02_s00?ie=UTF8&psc=1
radio buttons
You can also see the microwave sensor here, which I use to detect people in front of the mirror from behind the glass.

Finally, I have added 2 additional LED lamps. The reason for this is that the original neon light was not strong enough to shine through the tinted glass. (For the neon light I had left out a stripe in the mirror foil, which I then covered with frosted glass film.)
mirror with LED lamps

Things I changed during the build:
It turned out that the wlan dongle whith which I had tested was too weak and slow once the mirror was monted on the wall. Therefore I got a 5GHz Wlan dongle, which works fine, no drivers required for the raspberry:
https://www.amazon.de/gp/product/B00LLIOT34/ref=ppx_yo_dt_b_asin_title_o08_s00?ie=UTF8&psc=1

Behind the glass lamps are too weak to give proper light. Instead, I added these to the mirror:
https://www.amazon.de/gp/product/B07YD5NGVJ/ref=ppx_yo_dt_b_asin_title_o07_s00?ie=UTF8&psc=1

In addition to what I described in part 1 (link), I have added a bluetooth dongle to stream the webradio to a bluetooth speaker:
https://www.amazon.de/gp/product/B0096Y2HFW/ref=ppx_yo_dt_b_asin_title_o02_s01?ie=UTF8&psc=1

Final thoughts on the glass: The reflection is absolutely fine, albeit a little less bright and clear than a “real” mirror. The visibility of the text is ok, but you should set the monitor to the brightest level. The look and feel of the glass comes really close to an ordinary mirror.

Since my Magic Mirror went live, it received 2 major upgrades:

The monitor died and was replaced

Still not sure on how it died. I suspect that the button control caused a short circuit with the metal casing of the monitor control box. Or maybe it was moisture that got into it after all.
Anyway, I replaced it with a much slimmer monitor of the same size. Another advantage was that it had a well sealed external power brick instead of the somewhat sketchily mounted power board of the original monitor.
This is what I got:
https://www.amazon.de/gp/product/B07C4B1ZXC/ref=ppx_yo_dt_b_asin_title_o02_s00?ie=UTF8&psc=1
Very cheap, very slim, way lighter, way better sealed and brighter than the first monitor I head

The Raspberry is now running from HDD

The raspberry 2 kept crashing. All the time, every other day at least. Checked and changed power supply, no improvement. Re-wrote image on sd-card, no improvement. Updated os and mm, no improvement. I even set up a cron job to reboot once per night. Nothing helped.
So I investigated and read a lot on how an sd card isn’t really suitable to run an os over a long time (at least that is what I made of it). So I decided to run it from a hdd. Was originally planning to go for an sdd, but decided well I don’t want to spend another 50-100 EUR, including an usb adapter. So I digged up a 2.5’’ HDD which I had laying around (to be precise: being uselessly sticked to the back of my tv). Looked up a bunch of tutorials on how to run a raspberry 2 from HDD. (Note: it actually still boots from sd, but hands over control to HDD immediately after startup). It involves:

• burning a new raspberry os image on the HDD and on the sd card
• attaching the HDD and starting up the pi
• with sudo blkid getting and writing down the PARTUUID of the rootfs partition of the HDD
• replacing the PARTUUID of the sd card with the one written down in the previous step in both:
• the /boot/cmdline.txt, and also in the /etc/fstab

After that you should expand the size of the filesystem on the HDD, since it has initially only the size of the image you burned on it. Note, this can’t be done with raspi-config, but with fdisk

It looks like (and honestly is) quite some task to get it to run (at least it was for me, a half-experienced Linux user). I found it worth to investigate though, educate myself about Linux, the file system, and other aspects and spend some time with trial and error.
You will find plenty of instructions on the internet, some more useful than others, but you will find your way through it, too.

Finally it is running really fine now. I had no crashes since (and it is over a week running now), so I guess it is worth the effort. :-)
Sure, I could have thrown out the Raspberry pi 2 and replaced it with a 4, seeing if that helps, but I really wanted to see if I can make it work with the good old pi2.

So I ended up installing the mm from scratch (now on HDD), thereby getting the latest version, fetching the latest versions of the modules I use, redoing the modifications I did to them, re- and re- and rearranging the modules until I finally had it running as I wanted it to.

Here is a pic with the new monitor, the HDD and some cleaning up:

And here is the front, one more time:

Here is a current snapshot from the browser (with the webradio running):

Cheers!

Don’t change the resolution, change the overscan setting in /boot/config.txt.

In your case I assume you will have to play with
overscan_right
and
overscan_bottom

hope it helps, good luck!

@bhepler yes exactly :-)
It is “Life on Mars” - a terrific rendition, I find.

@Lx said in Glass on the way, but still eager to share my first try:

Would you mind sharing the module’s code from your config file, as well as the modified MMM-iFrameReload.js ?

Absolutely no problem, glad if I can help :-)

Here is the MMM-iFrameReload configuration in config/config.js:

{
			module: 'MMM-iFrameReload',
			position: 'top_right',	// This can be any of the regions.
			config: {
				url: "https://www.google.com/maps/embed?pb=!1m28!1m12!1m3!1d42533.999773346404!2d16.411988327113605!3d48.2186535328082!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m13!3e0!4m5!1s0x476d015a39ef4d09%3A0x9517276e2c623b28!2sGunertweg%204%2C%201220%20Wien%2C%20%C3%96sterreich!3m2!1d48.249941799999995!2d16.4780513!4m5!1s0x476d00ab0878e79f%3A0x27ed9084b744849a!2sErdbergstra%C3%9Fe%20236%2C%20Wien!3m2!1d48.1851841!2d16.4259021!5e0!3m2!1sde!2sat!4v1581209652324!5m2!1sde!2sat",	
				width: "100%", // Optional. Default: 400px
				height: "400px", // Optional. Default: 800px
				refreshInterval: 900  //Optional. Default: 3600 = 1 hour
			}
		},

So this shows the way from my home to my office. To show a route of your own liking, process as follows:

1. go to https://www.google.at/maps/
2. search your destination in the left-hand google maps search box
3. switch to navigation, enter your origin and let google calculate the route
4. this is the important part: get the iFrame url: click the menu button on the left, select ‘share or embed map’ and select embed map.
5. copy the iframe src into your clipboard, use the whole part between the double quotes including the https
6. paste it in the url: part of your MMM-iFrameReload config.js

Now you should see a colorful map after saving and restarting mm.
If you want to have the dark-grey appearance, go into the MMM-iFrameReload.js in ~/MagicMirror/modules/MMM-iFrameReload/
Find the line iframe.style = “border:0” and replace it with

iframe.style = "border:0;filter: grayscale(95%) invert(100%);"

Hope this helps, pls let me know if it worked!
Cheers
Markus

@linsenpago The mirror has arrived like 2 weeks ago, and I have already finished the project, just preparing an update to my original post. Will describe everything there, how it worked, what I think about the glass etc (the glass is great by the way!)

Hi @patrickgruber da hab ich eigentlich nix groß gemacht dran. Nur die Konfig angepasst.
Probier mal diese aus:

{
                        module: "MMM-WienerLinien",
                        position: "top_right",
                        config: {
                            api_key: "",
                            stations: ["941","3185"],
			    shortenDestination: 20 
                        }
                },

Danke fürs Lob :-)

Plus: I learned that the callback page needs to be called exactly as specified, so I tried also with http://127.0.0.1:8888/

with ending slash, without, even with https - all to no avail.

Thanks again
Markus

@Vizulize thanks a lot!
In the meantime I came a little further.

So about the package.json: Yes, can confirm, @sdetweil 's solution works perfectly.
I did go the other route: after the git clone, I did an npm init, this resolved the prob in the package.json and package-lock.json - this worked, too.
My next problem was when calling the init.sh, I found out I had no pip installed, so the required libraries could not be installed.
So I installed pip, then init.sh ran fine and installed what was required.

I also came to the conclusion that the oauth authentification would probably work better locally rather than over ssh.
So I ran auth.sh, was told that server was now listening on http://127.0.01/8888 - which was also what I entered when registering the app at fitbit. Looked good so far.

No browser was opened though. So restarted MM with an invalid config.js, hooked up a keyboard/mouse on the mirror-raspberry locally and opened electron from a local terminal like so:
/home/pi/MagicMirror/node_modules/electron/dist/electron http://localhost:8888
That’s when the serverside reported

127.0.0.1 - - [04/Dec/2023:20:19:56] "GET / HTTP/1.1" 404 2019 "" "Mozilla/5.0 (X11; Linux armv7l) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.5845.228 Electron/26.6.2 Safari/537.36"

So, 404.
On the electron window, this was shown:

Traceback (most recent call last):
  File "C:\ProgramData\Anaconda3\lib\site-packages\cherrypy\_cpdispatch.py", line 54, in __call__
    return self.callable(*self.args, **self.kwargs)
TypeError: index() missing 1 required positional argument: 'state'

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
  File "C:\ProgramData\Anaconda3\lib\site-packages\cherrypy\_cprequest.py", line 628, in respond
    self._do_respond(path_info)
  File "C:\ProgramData\Anaconda3\lib\site-packages\cherrypy\_cprequest.py", line 687, in _do_respond
    response.body = self.handler()
  File "C:\ProgramData\Anaconda3\lib\site-packages\cherrypy\lib\encoding.py", line 219, in __call__
    self.body = self.oldhandler(*args, **kwargs)
  File "C:\ProgramData\Anaconda3\lib\site-packages\cherrypy\_cpdispatch.py", line 60, in __call__
    raise sys.exc_info()[1]
  File "C:\ProgramData\Anaconda3\lib\site-packages\cherrypy\_cpdispatch.py", line 58, in __call__
    test_callable_spec(self.callable, self.args, self.kwargs)
  File "C:\ProgramData\Anaconda3\lib\site-packages\cherrypy\_cpdispatch.py", line 157, in test_callable_spec
    raise cherrypy.HTTPError(404, message=message)
cherrypy._cperror.HTTPError: (404, 'Missing parameters: state')

Pls note: this is not exactly my error, looks like this is coming from a windows machine:
This came up as the first result when entering “missing parameters state” in the google search. But it is close enough to my error (just replace C:\ProgramData… with home/pi/.local/lib/python3.7… - I could not be bothered to type it all off of my mirror :-D )
There was no solution given, though, so that is where I am stuck now…

Thanks again for your help,
Markus

So, quick update:
I tried inist.sh with the modified package.json
The result was just the same - I don’t see any input dialog open.

I believe the module is installed properly and the dependencies are ok.
Thanks
Markus

Yes, right.
Must have looked into the package.json after doing the npm init - my bad. Did another git clone and it is as you said.

Meanwhile it turned out I had pip not installed. After installing pip and running ./init.sh again (after npm init) libraries were installed, and also auth.sh was able to start (only saw it when I called the python script directly rather than from auth.sh)

So auth.sh was now able to “Open a Web browser” (at least according to its logs), I just don’t see any dialog.

Anyway, will now try init with the modified package.json and see if it makes a difference - will report back.
Thanks so far
Markus

@sdetweil yeah, so I renamed MMM-Fitbit2, cloned fresh.
In the package.json there is no such a line that you mentioned (I guess @Vizulize must have fixed it already)
Did npm init, then ./init seemingly went through.
With ./auth.sh same thing as before - no dialog showing up.

I hope @Vizulize sees it and helps out :-)

Thanks
Markus

Thanks, Sam!
Had it googled in the meantime, had renamed the package-lock.json und run npm init
It braught no further error, I called auth.sh and that’s where I’m stuck now.
After entering the credentials, no browser dialog opens and I’m not quite sure where to search it.
Am logged in over ssh and in addition have a browser open to :8080
Neither on the mirror, nor on the pc, there is any dialog appearing.

I guess I’ll start from scratch, remove the module folder, clone new from git, and try your suggested method with the original package.json?

Thanks again
Markus

Hi, updated MM and now Google-Fit can no longer be installed, so I gave MMM-Fitbit2 a go.
Thanks @Vizulize for your work, I’d really like to get it running.
I have the same error that is reported in the github:

npm ERR! must provide string spec

To reproduce, just try to install it on an updated MM system.
It happens when calling ./init.sh as per your instructions on github

Have you/has anybody figured out a way to initialize the module?
Thanks
Markus

Hallo @HansB
danke fürs Lob, sorry für die superspäte Antwort…
Ich verwende das MMM_Webradio Modul. Habe es ein wenig verändert, um die Logos für die Radiostationen anzuzeigen. Aber so wie es ist funktioniert es auch gut (habe ehrlich gesagt schon lange nicht mehr meine Module aktualisiert, weiß daher nicht, wie es aktuell tut)
Viel Erfolg und liebe Grüße

hi @bachoo786
sorry for the late late reply, haven’t been on the forum for quite some time.
Yes, I did have problems with dropping wifi. Not quite sure what it caused, might be the aluminium frame, maybe the mirror coating on the glass, idk. Had to replace the wifi module. Best of luck and cheers
Markus

Since my Magic Mirror went live, it received 2 major upgrades:

The monitor died and was replaced

Still not sure on how it died. I suspect that the button control caused a short circuit with the metal casing of the monitor control box. Or maybe it was moisture that got into it after all.
Anyway, I replaced it with a much slimmer monitor of the same size. Another advantage was that it had a well sealed external power brick instead of the somewhat sketchily mounted power board of the original monitor.
This is what I got:
https://www.amazon.de/gp/product/B07C4B1ZXC/ref=ppx_yo_dt_b_asin_title_o02_s00?ie=UTF8&psc=1
Very cheap, very slim, way lighter, way better sealed and brighter than the first monitor I head

The Raspberry is now running from HDD

The raspberry 2 kept crashing. All the time, every other day at least. Checked and changed power supply, no improvement. Re-wrote image on sd-card, no improvement. Updated os and mm, no improvement. I even set up a cron job to reboot once per night. Nothing helped.
So I investigated and read a lot on how an sd card isn’t really suitable to run an os over a long time (at least that is what I made of it). So I decided to run it from a hdd. Was originally planning to go for an sdd, but decided well I don’t want to spend another 50-100 EUR, including an usb adapter. So I digged up a 2.5’’ HDD which I had laying around (to be precise: being uselessly sticked to the back of my tv). Looked up a bunch of tutorials on how to run a raspberry 2 from HDD. (Note: it actually still boots from sd, but hands over control to HDD immediately after startup). It involves:

• burning a new raspberry os image on the HDD and on the sd card
• attaching the HDD and starting up the pi
• with sudo blkid getting and writing down the PARTUUID of the rootfs partition of the HDD
• replacing the PARTUUID of the sd card with the one written down in the previous step in both:
• the /boot/cmdline.txt, and also in the /etc/fstab

After that you should expand the size of the filesystem on the HDD, since it has initially only the size of the image you burned on it. Note, this can’t be done with raspi-config, but with fdisk

It looks like (and honestly is) quite some task to get it to run (at least it was for me, a half-experienced Linux user). I found it worth to investigate though, educate myself about Linux, the file system, and other aspects and spend some time with trial and error.
You will find plenty of instructions on the internet, some more useful than others, but you will find your way through it, too.

Finally it is running really fine now. I had no crashes since (and it is over a week running now), so I guess it is worth the effort. :-)
Sure, I could have thrown out the Raspberry pi 2 and replaced it with a 4, seeing if that helps, but I really wanted to see if I can make it work with the good old pi2.

So I ended up installing the mm from scratch (now on HDD), thereby getting the latest version, fetching the latest versions of the modules I use, redoing the modifications I did to them, re- and re- and rearranging the modules until I finally had it running as I wanted it to.

Here is a pic with the new monitor, the HDD and some cleaning up:

And here is the front, one more time:

Here is a current snapshot from the browser (with the webradio running):

Cheers!