I realise this is an exceptional amount of blowing my own horn, but I could not be more happy with how this came out.

The content is focused on things I want to see when I wake up in the morning, which I’ll cover briefly now. Feel free to skip if you want to get to the techy bits, or future plans.

— TFL Tube Status

Powered by TFL’s Open Data, the information here is pulled from Transport for London’s API, which gives me the status of various tube lines. You may notice several train lines missing; the ones listed here are the ones I use most frequently. I can’t even remember the last time I took the Bakerloo or Circle lines. I’m not entirely sure they still exist.

— EMERGENCY

This is actually a placeholder for the time being. The more eagle-eyed and nerdy amongst you will recognise the design is “lovingly recreated from” Neon Genesis Evangelion, a popular Anime that is a gold star standard of futuristic user interface design. What this will be when it’s finished is actually a state-dependent image based on temperature. 20°c and higher is a green ‘status:normal’ sign. 10°c - 19°c is an amber ‘caution’ sign, and anything less than 10°c is going to result in the red emergency text you can see in the photo.

— Facial Recognition

Right now, that’s just to look pretty. It is a mirror, I do need to actually see my face sometimes. Recognition is indeed possible with HomeAssistant, and some of the lovely folks at /r/homeassistant & /r/homeautomation have already been offering ideas. I’ll need to order some camera hardware and find a way of neatly attaching it to the Raspberry Pi, but right now I’m thinking of using Face Recognition as a way of turning off my alarm in the morning. Tragically for some years now I have chronically suffered from ‘Oculi-Gluteal Disconnection’; in layman’s terms, I don’t see my arse getting out of bed.

— Date & Time

Fairly self explanatory. Will probably adjust the date format to be a bit more British.

— London Weather & OTACON Monitor

The information is pulled from Wunderground and displayed in the stats most important to me. The more interesting aspect here is the image you see below of OTACON holding a little umbrella; this is another example of a state-dependent image. In rain, he has an umbrella. In sun, aviators, and in cloudy weather, he’ll be surrounded by clouds passing him by. As mentioned earlier, thunder, snow, and zombie apocalypse still to be whipped up. The avatar itself has been created using assets from the Maplestory online RPG; truth be told, I’ve never played it, but I found the art style endearing, and it reminded me of the OTACON character avatar used in Metal Gear Solid 2.

— The following section is mostly for the Redditors who asked for the write-up and snippets of code; skip to the next section if you’re not interested in the behind-the-scenes. —

Code bits & pieces

For those curious about the setup, the layout is dictated by three things; Vertical-stack, CSS Margins & Padding.

At the moment, this is horrifically coded in such a way that it only fits my monitor resolution/zoom, which is partially why I’ve not released all the config files as a whole. For those wanting to emulate what I’ve done, I’d much rather offer to help set it up yourself than have you try to work your way through my Frankenstein code.

There are four vertical stack sections:

Train Entity Card & EMERGENCY Picture-Entity Top Left FR Corner, Bottom Left FR Corner Top Right FR Corner, Bottom Right FR Corner Date & Time, Weather Entity Card, Picture-Entity

You’ll notice for stacks 2 & 3 the Facial Recognition isn’t one image. You’d be right, it’s actually split into four corners because I wasn’t sure how to resize individual cards in Lovelace.

This may change; I think if I’m a clever-clogs I can modify the card size using height & width CSS values, but I’ve not extensively tested this yet. The current setup is my ‘yeah, that kinda works’ definition of ‘stable’.

Each card in the UI apart from Vertical Stacks 2 & 3 are wrapped in Thomas Lovén’s Custom Card Modder, which allows me to modify the CSS for each card. Using this I can manipulate the placement of the card with the margin value, the placement of the content with the padding value, and the images themselves come from using background-image:url and background-size.

If you’re familiar with CSS, you’ll suddenly realise just how simple the code actually is. Below shows an example of both the CSS and the Lovelace entity card in use. You can see the 1st block is the start of the vertical-stack, the second is the custom:card-modder (where all of our CSS takes place) and the final block is the actual YAML used for Lovelace.

- type: vertical-stack

cards: - type: custom:card-modder

style:

margin: 0px 15px 150px 15px

padding: 20px 25px 30px 15px

background-image: url("/local/resources/images/mirror/tube_card2.png")

background-size: cover

background-repeat: no-repeat

font-family: baksheesh, sans-serif



card:

title: " "

show_header_toggle: false

type: entities

entities:

- sensor.victoria

- sensor.piccadilly

- sensor.jubilee

- sensor.northern

- sensor.tfl_rail

- sensor.london_overground

For those curious, the title: and empty space on line 14 is just to allow for the card to be expanded, but empty. This allows me the space to insert my own title as part of the image tube_card2.png . I could probably achieve this with CSS too, but I’d rather use the YAML code more than the CSS.

I’m happy to answer any questions about recreating this for those who would like to know anything about the build so far. For those hoping to see the animated layout without my festive mug in it, it looks like this:

If I do adjust the central area into one card instead of four, I may throw in some blue shading and a transparent animated holographic effect. Yes, I like holograms too much.

Still to come before declaring V2 finished

A couple of bits I’ve mentioned are still to come already, like finishing the ‘Emergency’ picture-state in the bottom left, creating more weather state images, and putting together a face recognition setup that will act a morning alarm disable.

Something I would like to get in is a news feed. At the moment I’m undecided on either embedding a Twitter feed in a card that displays something like @BBCBreaking or an RSS feed that pulls headlines specifically from a London-specific news service. Possibly both, and then re-negotiate the space on the right hand side to have both the Emergency status monitor and weather avatar to be in a horizontal stack together.

Lastly, I’m also toying around with reducing the Facial recognition panels by ~100 pixels to allow space for a randomised positive/optimistic message to be displayed every 5 minutes or so; with all this faux-techy overlay I’ve clearly not allowed enough room for my inner basic-bitch to come out and play.