Magic Mirror Build Log ... Oak and Walnut Frame

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.