#magicmirror2

Apptober ‘19, Day 28

One of the cool features in Habitica is the Inn. When you go on vacation, or are just burnt out, you can have your little habit hero rest at the Inn to avoid taking any damage from missed dailies or boss fights.

Wohoo the Wallberry clock submodule is finished! The time zone stuff wasn’t actually terrible to write. Probably because I wasn’t doing anything super complicated, but I feel lucky all the same!

A Wild Design Pattern Appears!

If you’ve ever worked with a project using the  MVC (Model View Controller) design pattern you’ll feel right at home writing a MagicMirror2 module. If you haven’t played with MVC before have no worries because the idea is gloriously simple, it just means our code is organized into three neat components:

The Model (AKA Data Model)

The Data Model contains the code that describes the data our module will be using. 

For a more complex module you might have entire data object classes that live in their own files (like the authors of this weather module did). However, my clock module here is so simple that it’s not even worth separating my little time and city data objects from the Controller code. 

The Controller

The Controller is what implements the lion’s share of our app logic. It takes the Data Model objects, does whatever calculations need to be done on them, then hands the results off to the View to be displayed.

In our case the main module file (“WB-clock.js”, also displayed in the first screenshot up above) is our Controller. You can see how it’s responsible for assembling the city and timezone data objects and returning them for our View’s template:

The View

The View is the code is responsible for constructing and displaying what the user sees. 

MM2 includes the Nunjucks templating engine, so my View code is going to take the form of .njk template file. You’ll recognize the syntax immediately if you’ve ever written templates for a Django web server or used Jinja templates, but for the most part it just looks like fancy HTML:

Those {{ variable }} things are where the templating engine will put the data from the Controller, then the whole thing will be displayed to the user like you saw in the first screen shot!

Why Bother With MVC?

MVC is such a popular design pattern (seriously, once you learn it you’ll see it EVERYWHERE in web development) because it helps us write much, MUCH more maintainable code. 

Having our Controller separate from our View means that we can change our app’s logic WITHOUT having to touch the code that’s responsible for displaying it. This becomes especially useful when you’re working with a team of people; now your interface designer can write the CSS and template code at the same time another dev writes the logic code that will provide the data. 

Also, just to give you nightmares, imagine being the person who comes in to re-theme or maintain a project where all of your View and Controller code is mixed together and all of the app’s HTML is constructed through a spaghetti bowl of various javascript if-statements and functions:

Yeah that’s not fun. MVC FTW.

Also I want to say I’m not dunking on the person who had to write the code above (for MM2′s default clock.js), it was written before MM2 had Nunjucks support and you gotta do what you gotta do wildwildwest.mp3.

Up Next

Now that I’ve got my Rasberry Pi Wall Display built and up on the wall, I figure Apptober is the perfect time to commit to finishing the software side of the project! This month I’m going to be hacking around with MagicMirror2 (a wonderful open source NodeJS app built for the RasberryPi) to make my little Wallberry the fairest wall display of them all.

Magic Mirror, On The Wall

The design aesthetic of MM2 is originally intended to turn a raspberryPi and a two-way mirror into a sleek, space-ship-worthy HUD. While I do love the minimalist mirror look, I’d prefer to give Wallberry a more classic, picture frame display look. Basically I want to go from the image on the left (Wallberry with a vanilla install of MM2) to something like the design to the right:

I’ve got a lot of tweaking ahead of me 😊

BTW - the image on the right there is from a company called Dakboard and they make GORGEOUS wall displays and I’d almost consider using their wall display software but alas I’m a fool for open source and MM2 has stolen my heart.

Project Requirements

Too many of my projects get abandoned unfinished due to feature creep so I’ve challenged myself to start REALLY small this time. To begin with I want my display to have the following features:

Current local time + date

Current time for at least two other cities in different timezones (I can’t do timezone math help me Wallberry)

Current local weather + temperature

Local weekly weather forecast

A gorgeous, high-resolution background photo that periodically changes

Exciting New Tech

I’m anticipating learning a ton of new stuff for this project, including:

NodeJS - finally, an excuse to learn Node 😄

SASS - cool cool, if I can’t avoid writing CSS forever then at least I can put variables in it

How to extend and theme MagicMirror - yay MM2 Modules!

The Unsplash photo API - because this seems like a really fun way to get great background photos

A ton of stuff that seems obvious but somehow isn’t when it comes to the UX design of wall display web apps

Some RaspberryPi-specific development things that’ll definitely pop up to bite me when I least expect it because nothing ever works in production like it does on your development machine

Tomorrow

LONG post incoming!

It took me forever, BUT I FINISHED PUTTING WALLBERRY TOGETHER!

Aww, thanks Wallberry, you look nice too!

Putting Things Together

I’m not really experienced at anything hardware related so this part of the project was a particular challenge. Since I don’t have access to a lot of tools or a workshop space I tried as much as possible to use out-of-the-box solutions or hack stuff together from odds and ends around the house.

The easiest solution for the frame was to order a custom frame (I went with a simple wooden one from American Frame), which was surprisingly cheap since I didn’t need the acrylic glass or the mounting board:

American Frame didn’t have an option for cutting matboard as small as I needed (I only needed enough to cover up the screen’s ugly silver bezel where it peaked out from under the frame), so I thought “Michaels is having a 50% sale, why not get some matboard and cut it myself, how hard could that be?”

Oh my god what a pain in the ass, I DO NOT recommend doing this if you huge amount of area to cut out (I have 21x12 inches here) unless you have one of those big professional mat cutters with a backstop. Eventually I got something I could live with:

Aaaand this is the point where I realized that getting matboard with white backing would give me an ugly white boarder around my screen... ugh. But hey, that’s what Sharpies are made for, right? Right. 

In retrospect, I should have ditched the matboard idea altogether, covered the half-inch of silver bezel with black electrical tape and called it a day. Live and learn, lol.

Cable Management Is The Worst

Now everything gets to go in the frame, and wow am I reminded that I hate cable management! 

I put an extra layer of matboard against the back of the monitor screen as a buffer between it and the other components and used a bunch of (appropriately Halloween-themed!) electrical tape to fasten everything to the back of the screen and frame. Once I know for sure where I want everything to go I’ll find more permanent methods to secure everything, but the tape works great for now and makes it easy to change things if I realize something needs to move.

The raspberry pi is secured to another piece of matboard with plastic zip-ties, which at least makes it really easy to get it out again if I need access to it later.

Ideally I would have found much shorter cables and cut back on some of the mess, but in the spirit of using things around the house I just did my best to keep the ones I had from exploding all over the place.

Probably the most annoying thing is how much extra space is needed by the the monitor’s outward-pointing power and HDMI cable outlets. If you have extra time and money to spend on monitors I’d definitely suggest getting one with outlets oriented parallel to the screen. 

I also should have gone with a much deeper frame, at least 2 or 2.5 inches instead of the 1.5 I thought I could get away with. For now I’ve solved the problem of needing some extra depth by sticking some styrofoam blocks on the back as spacers:

I’ll have to invent something classier later. At least there’s a ton of space for air flow and heat dissipation :)

All in all, it looks pretty awesome from the usual vantage point of standing at the whiteboard, so I’m happy with it.

Up Next: Software, Finally!

Wallberry is currently running a vanilla install of MagicMirror2 (which is what you see displayed in the photos above). I really love MM2 so far (super modable and has a GREAT community), but I’ll probably change the look and feel significantly from the intended mirror theme to something more like a traditional wall display. I’m really looking forward to this part!

Today I started work on the clock submodule! I have mixed feelings about this one because on the one hand, yay I finally get to write some javascript! On the other, I’m quite sure everything to do with timezones and time math were created to persecute me, personally, so there’s that.

I have decided to write my clock module from scratch though, since my design is different enough from MM2′s default clock module to make it worth it. A quick refresh of my requirements for this module:

A large digital clock featuring my local time 

The current date

The current time in a couple of other featured cities (that have different time zones than mine)

And here’s what that will look like visually:

I can trivially figure out the local date/time in code (MM2 already uses moment.js), but the easiest way to get the rest of the info will be to have the user supply it in MM2′s main config.js file. 

The config section for my module currently looks like this, with the other cities and their timezones configurable as a simple list:

I could probably also guess the user’s local city name without having them supply it in the config, but that’s kind of a PITA currently and I have a strong feeling a better solution will pop up later after I implement the weather module.

Up Next

After reviewing a bunch of MagicMirror2 code, I’m pretty satisfied that my theme will work well enough as a MM2 module and I won’t have to modify any of the core MM2 code. Hooray!

I’m basically gonna organize my code like this: a main module with all the general theming code, and several submodules that each handle a small chunk of functionality. My folder structure will look a lot like this:

WallberryTheme

theme fonts, general styles, default config files for submodules

Clock submodule

Weather submodule

Background Image Fetch submodule

In previous posts I've gone through a bunch of other 3rd party MM2 modules that handle clock, weather, and the background fetching, but the only one I won't have to modify to suit my needs is the background fetching one (thanks parnic!).

For the Clock and Weather submodules I've got some great starting points, but I'll need to modify them a decent amount to fit my needs. Time to get forking :D

Setting up my development environment to work on my MagicMirror2 theme (one of these days I’ll actually name it) and I gotta say for all my love of beautiful GUIs I’ve missed working more with CLI tools. I am really enjoying Node + npm so far (brings back some warm fuzzies of developing with Django and pip) and everything installed cleanly without issue.

Basic Game Plan

I’m so impressed with the MM2 developer community, people have already created so many great modules. From what I’ve gathered looking through the MM2 code I’ve now got a rough idea of how I’ll start building out the different parts of my theme:

I think I’ll easily be able to build off the default clock module for my clock features

The default weather module is pretty great but I’d love to be able to use the DarkSky API for weather so I think I’m going to tweak this wonderful forecast-io module from dmcinnes.

I think I’ll probably build my own module (yay) to grab images from Unsplash and use as backgrounds. I found this wonderful module from parnic that does something quite similar to what I want for pulling images from collections, so that will probably be a great help.

Next Up

Tomorrow I’m gonna play with developing my own MM2 module, wish me luck!

BONUS - I love coming across code like this, it’s like playing a new dungeon area in a video game and coming across the bones of another adventurer: