Frameless Bathroom Mirror - Part 1: Software and Preparations

Meidlmarkus

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!

Meidlmarkus

This post is deleted!

samson_82

hi. wie hast du die deutschen news da rein bekommen?

ich scheiter da immer.

Stoffbeuteluwe

@samson_82 Hallo, du brauchst doch nur die (RSS feeds) von von Deutschen Nachrichten in die config einfügen.
Ich kann dir auch mal meine config von den Nachrichten schicken…wenn es bei dir nicht klappt.

Meidlmarkus

@samson_82 Hi, ja, wie auch @Stoffbeuteluwe geschrieben hat, du brauchst nur eine passende url für einen rss feed im config.js eintragen: ich habe diese beiden verwendet:

 {                                  
             module: "newsfeed",
             position: "bottom_bar",
             config: {
                            feeds: [
                                        {
                                                title: "derStandard.at - Newsroom",
                                                url: "http://derStandard.at/?page=rss&ressort=Newsroom"
                                        },
                                        {
                                                title: "kurier.at",
                                                url: "http://kurier.at/newsfeed/nachrichten_rss.xml"
                                        },
                                        ],
                         showSourceTitle: true,
                         showPublishDate: true
                        }
},

Fozi

That‘s a really cool sneak preview. I like the maps integration with iFrame and will give it a try on my mirror. Looking forward to seeing the finished build.

samson_82

Danke euch.
Werds am Freitag mal testen.

MfG

bhepler

Is that Postmodern Jukebox in the video?

Meidlmarkus

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

Meidlmarkus

@samson_82 did it work? Hat’s geklappt?

samson_82

Ja hats. Danke

Lx

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

I’m a bit proud of the next module to be honest.

And you have every reason to be! That’s great. I can’t even get any map displayed on the mirror.

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.

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

Meidlmarkus

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

go to https://www.google.at/maps/
search your destination in the left-hand google maps search box
switch to navigation, enter your origin and let google calculate the route
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.
copy the iframe src into your clipboard, use the whole part between the double quotes including the https
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

Lx

Hey @Meidlmarkus, thanks for the quick and kind reply. Actually, I’ve deleted the whole installation so there is no working environment right now. I’m just downloading the Raspbian 13 Feb build. Will give it a try soon and get back to you with the results!

linsenpago

Hi!

Did you already received your Spy Glass? If yes, how satisfied are you with the glass? I am thinking about to order this kind of spy glass from glass-star.de too.

Hast du deinen Spion Spiegel bereits bekommen? Falls ja, wie zufrieden bist du damit? Ich bin auch gerade am Smart Mirror planen und überlege mir ebenfalls so einen Spionspiegel von glass-star.de zu bestellen.

Grüße aus Wien!

Meidlmarkus

@linsenpago
Hi, no, unfortunately I’m still waiting… It’s been over a month now, and no news. I wrote a mail yesterday with no response yet :-(

Nein, leider immer noch nicht da. Habe gestern mail geschrieben, bis jetzt noch keine Reaktion. Werde morgen mal anrufen…

Grüße zurück aus Wien!

Edit: it is announced to arrive tomorrow! Die Spedition kommt morgen :-) Yeeeyy!

Meidlmarkus

@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!)

patrickgruber

WOW!
Echt tolle config! :smiling_face_with_heart-eyes:

Ich bekomme mein MMM-WienerLinien Modul iwie nicht zum Laufen.
API-Key wird ja laut WienerLinien nicht mehr benötigt.
Ich sehe jedoch kein Modul :(

Meidlmarkus

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 :-)

cyberphox

What region is your MMM-ScreenCast placed in here?
Care to share your config?