Magic Mirror Build Log ... Oak and Walnut Frame

ruff.hi

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.