Home Theatre Remote Overhaul demo

Hello all

I was inspired yesterday, and decided to give my THR HT remote a UX overhaul. I am sharing not only to get some constructive criticism, but also upsell to newcomers a more simple layout than we’ve seen with some of the other amazing projects on here, and also how I’ve worked around some limitations of the current solution.

I’m just a customer, and still think there is so much potential for THR that I encourage everyone I speak to with similar needs to give it a try (this is why I’ve put almost as much effort into this post as the overhaul itself). Once you get over the hump, it’s a very powerful framework to develop almost anything you might need w.r.t. home automation.

A bit about my system: I’m mostly interfacing with my equipment with a combination of Global Cache devices (legacy TCP client), direct device and Node Red connections via IP (custom plugins) and Home Assistant (built-in plugin). The global cache is used for the projector. Main reason…the projector only supports a single TCP connection, and I want to ensure from other places in the house that it’s off when not being viewed. Global Cache IP2SL serial devices allow simultaneous connections, so I’ll never be “locked out.” Pro Tip: For those who don’t want a GC, you can do the same with Node Red acting as a go-between!

THR is running on a dedicated iPad mini (designer is running in Windows emulation to get around the lack of a iPad Mini config, which I’ve found is forced with Apple devices). The main page uses big icons for the primary actions and smaller icons for device interaction. I’ve used icons that are intuitive for our environment - triangles, for example, are the Nanoleaf panels we have on our back wall.

The top panel is a page browser that links to a page dedicated to controls that are to display on every page (each page has the same page browser embedded). The volume controls on the right, which are currently dimmed because the AVR is off, are also in a pagebrowser-linked page.

The title of the page is captured in a virtual device variable, and is set using the pages “loaded” event.

In the top-right corner of many of the large icons, you’ll notice a thunderbolt. This is how I overcame the distiction of not having different tactile actions (i.e. long-press, double-tap). So in this case, pressing the tile will just switch to the source, whereas the lightning bolt will switch and trigger the scene actions to turn off the lights, turn on all the required devices, etc. Other colours are used to show when the state is different (e.g. red signifies action probably should be taken, and the projector icon will show when it’s warming up, cooling down, or has an error.

Clicking on the home button in the top panel will take you back to the home page.

Above is an example after launching one of the streaming services via the lightning bolt. It takes you to the Apple TV control page, sets the title.

The remote button links to a iOS shortcut to pull up the built-in AppleTV remote (in case I need to swipe). That being said, I still use the physical ATV remote for the siri integration (so much easier to speak the name of a movie vs navigate to it :slight_smile:.

Above is a view of the music page with the volume muted. This interfaces directly with Node Red which keeps track of the Bluesound Node status, pulling metadata and artwork.

Above is a page with live streams and dynamic icons to show the state of the home. Icon images will change when the state changes:


That’s basically it. I still have a little work with formatting (mostly fiddling around with grids so that placement works regardless of the connecting device resolution), but I’m happy with the results. Please let me know what you think below, and if you have any questions on how I did anything, please let me know.


Absolutely brilliant! I love how flat it is, and simple. Less is more. It’s modern and elegant and to the point. Well done. If I had to make a criticism, I would say I personally would like 4 columns on the big icons on the main screen so it would be a full grid, so 3 rows of 4 icons on each row, as opposed to 2 rows of 5 icons and then 2 icons on the third row. Lastly, I love peeking at people’s cameras on their screenshots and I’m admiring the snow. Where about are you located?

1 Like

Great post @LJR ! Looks awesome! I typically like things that are overly complicated :stuck_out_tongue_closed_eyes: but this is really good! If I were to change anything I would enlarge the cover-art of your music page.and put it side by side with the song info.

I’ve been thinking about scooping up a Bluesound Node. Would I need to use Node Red or can I do the same with just Home Assistant?


1 Like

@gregkinney thank you for the enthusiastic response out of the gate…means a lot! I originally had the tiles laid out as you suggested, and have since reverted back. (I’m in Ottawa, Canada) :smiley:

@Jdamore Thank you, also, for the suggestion about the music page. I agree something is missing, and I’ll try that layout out.

On the topic of the Node and Node Red, you don’t need Node Red at all, but the api is a bit tricky. Either you can poll in intervals (which is taxing on the client), or you can make a call that remains persistent until something changes, then the connection is destroyed (thus requiring some logic to start up a new one). Node Red solved this for me by allowing me to create the connection, update MQTT when there was a change, then loop to start the listener again. With a MQTT client, THR gets the notification that something has changed and updates accordingly. I can share the flow with you if you’re interested.

I don’t know if you can use Home Assistant at all. I did look at the Bluesound plugins, but it seemed that was to allow one to integrate Bluesound speakers, and not Node control. You could, though, set up the MQTT server instance in Home Assistant instead of Node Red, if you wanted.