Magic Mirror Build Log ... Oak and Walnut Frame

ruff.hi

Greetings … I have a MM screen that is broadcast to my home network … but I would like to get a free standing version of that. I have been thinking about a MM for over a year and have now decided to start the planning and execution in earnest. It is currently too cold for wood work … so while I can plan (and plan) the frame, I won’t be starting it for a few months.

In the mean time, I can knock out what I want the mirror to show.

General Modules
Wallpaper (chromecast)
Clock (top left)
Calendar (top left)
Weather (top right)
Forecast (top right)
Google Tasks (top right)
Movie Listings (bottom left)
Aftership (bottom center)
MBTA (bottom right - guess that gives away where I live)
Newsfeed (NPR - and this gives away my nerd level … just in case wanting a MM didn’t already give it away)

Hardware
MSA 27" monitor
Smart Glass Mirror from twowaymirrors
Logitech S120 speakers

ruff.hi

Monitor - MSI 27" G271

I saw this monitor at Costco for around $150. It was flat (ie not curved), large and thin. It also had downward facing attachment ports.

Ports face downwards

Note that this pic isn’t the actual G271 but it is from the same family. The port picture of the G271 on the MSI sight was in total shadow - I have no idea what they were thinking.

I took off the back, took off the cage holding the circuit board. I re-routed some of the cable strips and reattached the board. The screen is a 1/4", the circuit board adds about another 1/4". So far, I have a very thin MM. Obviously, this will change as I load in the guts (Pi, power packs, cords, etc).

ruff.hi

Smart Glass Mirror

I ordered a bunch of samples from Two Way Mirrors and had a bunch of very pleasant email exchanges with Krista.

8" x 8" Dielectric Mirror Sample - 1/8" (3mm) Thickness
8" x 8" Glass Two Way Mirror Sample 1/4" (6mm) Thickness
6" x 6" (152x152mm) Acrylic Two Way Mirror Sample - 1/4" (6mm) Thickness
8" x 8" Glass Smart Mirror Sample - 1/8" (3mm) Thickness

The Dielectric mirror says it goes in front of a regular TV and turns the TV into a mirror when the TV is off. This was a purchase because I could … not for the MM. An interesting concept that I will need to get spousal approval for.

The other three were testing. Do I want acrylic? Do I want glass? What type of glass? I have to tell you, the Glass Smart Mirror killed, absolutely killed the others. It is a mirror with the monitor off and absolutely disappears with the monitor on. I haven’t tested it in front of my MM screen yet … I will have to see how the wallpaper module interacts with the glass. I am pretty sure I am keeping the glass … so the wallpaper module might have to go.

ruff.hi

Logitech Speakers

Nothing special here. I wanted some small speakers to strip down and these drew the short straw. The 2" speakers have now been dismantled (no way of putting them back together :beaming_face_with_smiling_eyes: ) and I have separated all wires from speakers and circuit boards. I now have complete control over where the speakers go, where the control board go and enough wire to run the connections.

My only concern is with my solder skills and if I can reconnect the wires. That said, they were $12 at Amazon so if I have to re-order it won’t kill me.

Speaking of wires, I picked up some replacement monitor power packs, low profile power board, low profile power plugs and some auto-wire joiners. I am going to be a hawk with wire lengths behind my mirror.

ruff.hi

General Comments about the Modules

My biggest issue with the modules is that there is no consistency. That is to be expected given the production crew (ie you!). One aspect that I would like to see is the module coders supplying the key parts of modifying the look & feel of their module via css.

For example … here is how to control the movie listing I am using.

.MMM-MovieListings {
  text-align: left;
  color: #B9B9B9;
}

/* plot and any movie subtitle */
.MMM-MovieListings .dimmed {
  font-size: 15px;
  color: #B9B9B9;
}

/* loading current movies? */
.MMM-MovieListings .small.dimmed {
  font-size: 18px;
  color: #B9B9B9;
}

/* Actors */
.MMM-MovieListings .xsmall {
  font-size: 18px;
  color: #B9B9B9;
}

/* weird ... ratings and director only */
.MMM-MovieListings .xsmall.dimmed {
  font-size: 18px;
  color: #B9B9B9;
}

/* white space after picture? */
.MMM-MovieListings .marginTop.xsmall {
  font-size: 2px;
  color: #B9B9B9;

I played around with the font sizes to see what part control what on screen display. A size of 88px really jumps out at you :). I then added some comments to the css so that I could work out what .xsmall actually changed.

There is some very weird groupings (see ratings and director comment above). Oh, one other aspect … this only impacts the screen if you are showing POSTERS. If you are showing the list of movies … then you are out of luck - I couldn’t find how to change the font size.

I found it very difficult to change the header of each module. I worked out how to change the calendar header …

alt text

… so that I have it slightly bigger and centered. But I can’t find out how to change my ToDo list, the movie listing, etc headings.

ruff.hi

GOOGLETASKS AUTHENTICATION

Warning … this post will probably come across as a rant … but, gees, the instructions provided for getting google task authentication / certificates are confusing. It took me a couple of attempts as well as taking detailed notes the last time to get it all working.

I did find the MMM-Buller instructions slightly easier to follow, but the actual module display was poor :(. I got my certificate by following Buller instructions and then used it for the MMM-GoogleTasks.

Here we go … from https://github.com/da4throux/MMM-Buller

Step 0
Have a gmail account (nice start!)

Step 1
Follow this instruction to Turn on the Google Tasks API and get your file credentials.json

And this is where you disappear down a rabbit hole. I am unsure how deep this rabbit hole is.

Rabbit Hole 1 - turn on google tasks API
First linked page is a google help page - has these pre-reqs

a. Node.js & npm installed.
b. A Google Cloud Platform project with the API enabled.
   To create a project and enable an API, refer to Create a project and enable the API
c. Authorization credentials for a desktop application. To learn how to create
   credentials for a desktop application,  refer to Create credentials
d. A Google account with Google Tasks enabled.

I have a) and d). I need to create a project for b)

Rabbit Hole 2 - Create Project / Enable API
Another google help page (these pages are actually pretty good instructions)

a. Create Project (I called mine 'MMBuller-GoogleTask', updated the project ID
   to sort of match and went with a location of 'No organization')

I got lots of system complains about my project ID … has to be lower case, has to be available!

b. Enable the API

Great, another link and a deeper rabbit hole. And you have to search for the API. Sigh … none of the above actually include the name of the API to enable. It could be Aardvark API and I am not joking

I searched for tasks … and hit 4 options with the first one being Tasks API
Seems like a fair option … lets go with that one
Click on the API box and then click enable

And that is part B of RH1. Moving onto part C.

Rabbit Hole 3 - create credentials
Straight off … you have three options (API Key, OAuth Client ID, Service account). Which one? I knew from prior MM google tasks googling that OAuth Client ID was the way to go … I just don’t know why it is the way to go. No problem … I feel like a bull with a ring in its nose. Here I go following directions.

Another unguided decision to make … what type of application do I have that needs to create credentials? Options include web, android, iOS, Chrome app, Desktop app, TV something and MS app. I think my choice is between web and desktop. What type of app is magic mirror. It feels to me that it could be either of them.

I went with desktop and will reserve the right (ha!) to create web credentials (if required).

First time through it wouldn’t / didn’t present the fields that the instructions implied (I couldn’t get application type to come up). I had to fill in the Consent Screen information (just put in my email address a bunch of times and clicked ‘save and continue’. I am now back to trying the to create credentials again … and it is showing the application type). I called it BullerGTasks … clicked create … and …

BINGO! I have Client ID and Client Secret (shhhh).

Crikey - I might have escaped the rabbit hole.

Wait … not so fast. I am just done with the pre-reqs :(

Step 3 - Installing the Client Library
These install instructions could have been a little better. It is all there, but a little bit scattered.

First off, you know that client secret file you created … you need to rename it to credentials.json and put it in the root folder for the module. That isn’t mentioned until you get to the TROUBLE SHOOTING section. No critical instructions about that file … but the developer fully expected you to fail to realize that you needed to so included it ‘trouble shooting’. Why not just put those instructions at the top?

Anyway, copy your secret cred file and rename it to ‘credentials.json’

Then follow the directions (install, create file, etc).

First off, it says to install the googleapi …

npm install googleapis@39 --save

Don’t do that. Drop everything after the @39 so you get the latest version.

npm install googleapis

Create a file (index.js - the code is on the instruction to Turn on the Google Tasks API page) and then run it in your SSH console with …

node index.js

Make sure you run it from inside MMM-Buller directory. This will give you a url … open browser, enter URL, and you should get a magic code. I didn’t because app wasn’t verified. Stuff that! I just hit continue / trust app.

The index.js is still running … waiting for the magic code from the URL. Unfortunately, by the time I had gone to a browser, clicked through to the code, etc … the index.js had moved on and I was back to the command prompt (SSH).

I ran it again, pasted the prior code … and index.js created a token.json file for me.

Note that the token.json file contained the IDs that the MMM-GoogleTasks module needed. No need to go through all of this guff again to get GoogleTasks working.

Step 4538
Now I think I am finally ready to install Buller.

ruff.hi

@ruff-hi said in Magic Mirror Build Log ... Oak and Walnut Frame:

I found it very difficult to change the header of each module.

I just finished watching the 49s v GreenBay game (taped it from last night and watched it with a +30seconds button very active). The 49s roll into next week. Only 6 teams left in the hunt now.

After the game, I tinkered a little more with my MM, added MMM-NetworkConnection (ping, up / down speed) and fiddled a little more with that heading issue.

It actually turned out to be pretty easy. Check the right syntax in the dedicated css file, lift that to your custom file and slap header in there …

.MMM-MBTA header {
  text-align: center;
  font-size: 20px;
  color: #B9B9B9;
}

Easy. What was I thinking about before?

ruff.hi

I hung a spare screen in portrait mode to test what my MM would look like (all of my testing to date as been in landscape mode). It was annoying having to rotate the screen … especially when you rotate it the wrong way :angry_face: .

The short answer … disappointing.

I lose a lot of horizontal space. The test screen is 12" wide … my MM will be 14+" wide. So, that will help some. The other issue is that using bottom right / left isn’t that hot. I will not use those two … just throw the modules that were in bottom left / right onto the end of top left / right and let MM work it all out.

Sharkbyte

@ruff-hi great build an looks like your rolling along
Oh thanks for the great news on Green Bay losing ha

For the to do list and calendar I use MMM-CalendarExt2

A lot of features in this and views along with grouping and more

Might wanna check it out

ruff.hi

@sharkbyte - thanks for reading this and the reply.

@ruff-hi great build an looks like your rolling along
Oh thanks for the great news on Green Bay losing ha

Spoiler? Sorry. It was a weird weekend worth of games … all decided near or after the end of the 4th quarter.

For the to do list and calendar I use MMM-CalendarExt2

I will take a look at it.

Edit: I had a quick look and first impressions is that it might be too much detail for my MM. My home calendars are pretty boring (1st … give dogs flea / tick pills, every 2nd Monday - put out recycling bins, etc).

I do want to see if I can mod the default code to identify (without icons) which calendar is which … and to drop the 2+ items from all recurring appointments (ie only show the first one).

ruff.hi

calendar.js file modded to show the text in the symbol field if displaySymbol is FALSE and displayText is TRUE.

Those display options are embedded in the js file (I tried to get them in via the config.js but couldn’t seem to get it done. I added the the displayText one.

	if (this.config.displaySymbol) {
<snip>

// the code above is for location reference.
// ... below is new ... and, YES, I did hard code some style items

	} else if (this.config.displayText) {
		const blankCell = document.createElement("td");
		const symbols = this.symbolsForEvent(event);
		symbols.forEach((s, index) => {
			blankCell.innerHTML = s;
			blankCell.style.paddingRight = "10px";
			blankCell.style.fontFamily = "Calibri";
			blankCell.style.fontSize = "18px";
			blankCell.style.fontcolor = "#B9B9B9";
		});
		eventWrapper.appendChild(blankCell);

Edit: I did have a brief look to see if I could stop the duplicate / repeat entries … nothing jumped out at me so I am going to pass on that.

ruff.hi

I ordered a piece of smart mirror as well as picking up some 1/4" 2x4 Oak sanded plywood (lowes). Time to start thinking about putting this puppy together.

I will take pictures as I go.

ruff.hi

My MMM-GoogleTasks output stopped showing tasks. Is it the v2.18 impacting google tasks? I dropped into the code, added a bunch of logging information and checked the debugging chrome console (Ctrl-Sht-J) to find that it wasn’t picking up a valid package.

Re-reading the install instructions led me to look at the token.json file … and in contains a expire token …

"expiry_date":1642896917968

What sort of weird date is that? I big of googling let me to stackoverflow (I love this site … so many answers!) and this …

I know it is kind of old, but I was just asking myself the same question. Right now I’m almost certain, that it’s just Unix timestamp with milliseconds.

… and to this site - a millisecond calculator. Put in 1.64 trillion and you get ‘Sun Jan 23 2022 00:15:17’.

Yep … that is an expired token. Can I just change that number to 1.8 trillion?

You can! Just don’t put in an extra 0 … it didn’t like that.

Anyway, 1.8 trillion comes out as ‘Fri Jan 15 2027 08:00:00’. So … now I just need to remember to update my token in 2027. I wonder if I can put in a google calendar reminder for then?

Google tasks back up and running … first task listed is to fix the Samsung drying … it is making a lot of noise.

ruff.hi

And the build of the electronics behind the mirror has started. First cab off the rank is the long, long screen power cable. It is just too long. I was thinking of running it throw a hot wash cycle to see if it would shrink … but I decided against that. Instead I just cut it down to size.

alt text

Now I just need to solder the wires back together. I wasn’t going to do that by hand … instead I picked up some of Solder Seal Wire Connectors, fished them onto the wires and applied a heat gun …

alt text

Good enough. How just to slip some heat sink over that ugly mess and more heat gun …

alt text

Bingo … a shorter power cord.

ruff.hi

Good Morning. I have been working away at this project off and on through the summer. It is almost ready to go on a wall (assuming I can find one). I’ve finished up the Oak and walnut frame (although I might be adding a touch more walnut at some point), I have carved out recesses in the Oak for the power board, the power block for the monitor and for a PIR sensor.

That sensor is annoying me a little bit … the screen takes a good 15 seconds to come back after I wave my hand in front of the sensor. I am pretty sure that I have to tweak one of the sensor dials to change that (I will post more on that later).

The whole mirror weights a ton. But it is relatively thin and I am happy with that.

Here is the empty frame. Notice the carve outs - top for power block, left for monitor block, right for PIR sensor.
I have also installed a bunch of threaded inserts to hold in the monitor.

empty frame

Front with very small hold drilled for PIR (masking tape). It can see motion through that small hole but I think my trigger states are not right as of yet.
alt text

Back.
alt text

sdetweil

@ruff-hi yes, if the hole is small for the pir, you might have difficulty.

ruff.hi

@sdetweil said in Magic Mirror Build Log ... Oak and Walnut Frame:

@ruff-hi yes, if the hole is small for the pir, you might have difficulty.

True. I did run some tests on various size holes and they all pretty much said ‘yes - I see you’. Anyway, current hole is small but I can make it bigger (if needed).

ruff.hi

Still undecided where the MM is going … but it is up and running (sans PIR - disabled the code that responds to the sensor as I am finding it more, and more, AND MORE annoying). More sensors on their way … I must have something to tinker with.

So … it is up, in the study, on the dog creates. Wife hasn’t seen it up and on yet … as such, results are PENDING :).

ruff.hi

I set it up in the study and just left it on. PIR is disconnected so the screen doesn’t blank. Wife walks in and …

“um … is that your magic mirror?”

Yes.

“It is very nice, I like the wood border, and, as usual, you have done a very nice work on making it look professional”

Thanks.

“But … it doesn’t appear to be a mirror. And that is a very busy screen”.

Oh oh. Now I will need to seriously rethink things.

Several days later … I have decided to ditch the PIR (I couldn’t get it to work to my satisfaction anyway). I am going to install a slightly hidden momentary switch. Press the button, screen comes on, release the button, screen turns off / Mirror returns.

That should get me my vision (ability to look at all the key stuff on my display) as well as getting my wife what she is after (nice mirror without the cluttered screen). It should be fairly easy to let people see the cool stuff, if they want to.

This will mean expanding my walnut border (I was probably going to do that anyway) and installing the switch.

The python code is much easier than with the PIR …

#!/usr/bin/env python
from gpiozero import Button
from time import sleep

def turnscreen_on():
    print('BUTTON PRESSED')
    ### subprocess.call("sh PIR/monitor_on.sh", shell=True)
 
def turnscreen_off():
    print('BUTTON RELEASED')
    ### subprocess.call("sh PIR/monitor_off.sh", shell=True)

button = Button(2)

while True:
    button.when_pressed = turnscreen_on
    button.when_released = turnscreen_off

    sleep(0.5)

I only had a rocker switch to test with and a momentary switch might be triggering the turnscreen_off part all of the time. I might need a boolean variable to hold the screen state (ON / OFF). Momentary switch is coming tomorrow … I will test it and see.

ruff.hi

Momentary switch arrived from Amazon. It is a lovely little piece of kit. And it works just like the rocker switch so my code is good to go.

Now I just need to install it, wire it up and find a place to hang it.