heredago's blog

October 31, 2011

Hey Reddit. I wanted an overview page for my XBMC HTPC, so I created one to my exact requirements. It has lots of widgets and stuff.

Filed under: Uncategorized — heredago @ 19:39

Hey Reddit. I wanted an overview page for my XBMC HTPC, so I created one to my exact requirements. It has lots of widgets and stuff.

What is HTPC Frontend?

I wanted a simple web interface to act as a nice overview/front page for my XBMC HTPC. I couldn’t find anything that suited my requirements so I created something myself.

Here are some of its features:

  • Customisable applications widget providing quick access to your web interfaces (e.g. SABnzb+, SickBeard, or whatever else you want to link to)
  • Recently added episodes widget – click an episode to play it in XBMC
  • Media library browser – browse your movies and TV shows, and click to play in XBMC
  • SABnzbd+ widget which appears when something is downloading and hides again when finished – shows you what is currently downloading, speed, time/MB remaining, and a progress bar
  • Currently playing bar with play/pause/stop controls
  • widget which shows you what people are saying about the episode or movie that you’re watching (requires a free account)
  • Full-screen background image changes to the fanart of what you’re currently watching (optional, can be turned off)
  • Customisable via a server-side settings file – choose which modules to display, in which column/order you would like them displayed, and how frequently each one should update
Screenshot 1 Screenshot 2

It is a work-in-progress – things are still being changed, and new features and modules are being added quite frequently.

Awesome. How do I use it?

HTPC Frontend is written in Python and uses the Flask framework, so you need to configure a suitable web server (such as Apache) to serve it.

If you want to use Apache and mod_wsgi on a Linux-based system then you could do the following:

  1. Install the following:
    • Apache
    • mod_wsgi
    • Python
    • python-setuptools, so that you can use easy_install for the following:
      • Flask (easy_install Flask)
      • jsonrpclib (easy_install jsonrpclib)
  2. Clone the htpc-frontend repository. You can find it on github:
  3. Create a settings file. Copy to – you will learn about customising it later.
  4. Serve using Apache and mod_wsgi.

    Here’s a helpful article:

    Don’t forget to add the htpc-frontend directory to your Python path. One way of doing this is in the mod_wsgi file:

    import sys sys.path.insert(0, "/var/www/htpc-frontend") from htpcfrontend import app as application

Neat. Now, how do I customise it?

Open up and start changing stuff!

MODULES controls the ordering of the modules. The default MODULES in the example file is set up to display all of the modules. The first array is the first column, the second one the second, and the third one the third.

Modules with a ‘poll’ value specified will be updated using AJAX, and modules with a ‘delay’ value will have a delayed loading time. In this example:

{ 'module': 'sabnzbd', 'poll': 10, 'delay': 5 },…the sabnzbd module will be refreshed every 10 seconds and won’t be loaded until 5 seconds after page load.

It’s worth noting that some modules do not take poll/delay values, and settings them will have no effect. These modules are ‘library’, ‘synopsis’ and ‘trakt’. In the example of the trakt module, if enabled then it updates whenever what you’re watching has changed – no need to poll.

SHOW_CURRENTLY_PLAYING shows the ‘currently playing’ bar if set to True. It will only appear if something is actually playing.

If FANART_BACKGROUNDS is set to True then the full-screen background image will change to the fanart of what you’re currently watching.

SERVER is quite important – this is where you enter the details of your XBMC installation. Without this the app cannot access the XBMC API and won’t be able to tell what’s playing, what has been recently added, etc.

SABNZBD_URL is only required if you are using the ‘sabnzbd’ module. It must point to the IP/URL of the machine running SABnzbd, on the correct port, and include your API key as shown in the example (you can get this through the SABnzbd interface).

TRAKT_API_KEY is needed if you want to use the ‘trakt’ module to display shouts (what people are saying) about what you’re currently watching.

NUM_RECENT_EPISODES controls how many episodes are displayed in the ‘recently_added’ module.

APPLICATIONS defines what links you want in the ‘applications’ module.

If you set AUTH to contain a username and password then HTTP basic auth will be used.

Something is broken! Can you fix it please?

I sure hope so! Let me know about it on GitHub and I’ll look into it as soon as I can.


Leave a Comment »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

Blog at

%d bloggers like this: