Go Back
Screensaver

I’m a keen user of Plex. For those of you that don’t know what it is, Plex is a media server that allows you to serve your own content to your devices whether that be a TV, Computer, Phone, Games console or Set-top box.

I have a huge library that I’m passionate about. For ages I’ve been wanting a screensaver for my Nvidia Shield that displays all the glorious tv/movie artwork along with my Plex server and the TV show logo. I set out to recreate my own version of the Netflix screensaver.

I looked at different ways of doing this, the first was to create all the 4K artwork in Photoshop and then add them to Google Photos and use the Photo Gallery and Screensaver app to display the content. Whilst this worked, it was extremely time consuming to create all the artwork and I wouldn’t be able add any form of animations, the gallery just fades the content in and out.

As I’m a designer/wordpress developer I decided that I could easily create a slideshow as a website and host it on my NAS that I have on my local network. I needed a way of getting that website to display as the screensaver on my Shield. I hired an Android developer on Upwork to build my little app and 24 hours later I had what I wanted.

Screensaver App Interface

A slight aside for people interested in Android TV development, whilst testing the app it appeared that Android wasn’t displaying the site in full 4K glory. After a lot of digging on the internet and finally a very helpful Redditor solved the issue for me.

TL:DR; Android TV does not render the Android GUI in 4K, only 1080p. So you have to use developer tools to log into the device through the command line and force it to run at 4K and a higher pixel density.

Enough about that.

I created a very simple WordPress site using Advanced Custom Fields, where I can add in the TV Show, along with the TV Show logo and add a number of high res images. The homepage then spits out the images into a Slick slider.

Screensaver Add Show

WP TV Show Editing

And if we view the site in a browser.

Screensaver Working

Glorious 2160p!

From a frontend standpoint, I kept everything very simple, the shows are shuffled twice and a simple fade with a very slow zoom out giving each slide 30 seconds.

The site is very large with all the images and does cause my CPU to work hard especially in Safari. A better dev than I am can probably think of a way around this, however, once I exported the site as a static version so that WP wasn’t calling the database all the time it seems to run quite happily.

If you’re interested in a live version it’s here: https://plex.willbeeching.com It will take forever to load and is 165MB so beware before clicking.

I may upload the app to the Play Store if people are interested, although I’m not an Android developer so it’s all new to me. If people would like to try it you can download the apk here and sideload it onto your device.

To make your own version of the WordPress site you can clone from my GitHub Repository.

I have plans in the future to build a version where you can pick and import the show logos/graphics in from Fanart.tv or The Movie Database, to further make creating slides easy. I could also pull in the shows that exist on my Plex server too. However I do prefer to be able to curate the images that are shown rather than letting it pick random ones from the sites, some of the show graphics can be a bit – crap.

This may sound like a very simple result for a lot of effort but once it’s all running the result is really captivating — either that or I’m just really sad.

Disclaimer: This is all for personal use and I don’t own any of the images/licenses, my server logo ‘Plexflix’ is a deliberate joke/imitation of the Netflix logo.

I’ve sped up the video below to show more photos.

Here’s a version that’s in real time.

Share this

About the author

Will Beeching

I'm Will, a entrepreneurial designer/developer based in Britain. I create products that people love to interact with. I focus on Home Theater/Audio, Media Servers and Home Automation.