Transporter

At the heart of Transporter is a “no compromise” attitude to component selection and electronic design.

 

I bought my Tranporter in 2010, right before this audiophile streamer was discontinued by Logitech. It was originally designed and manufactured by a company called Slim Devices. The above quote refers to them, certainly not to Logitech!

The Transporter, or any player from the Squeezebox line, is controlled by a free and open source streaming server. This server communicates with connected players via the ‘SlimProto’ protocol over TCP/UDP. All functions can be controlled via Telnet commands, but the server also has an interface that can be accessed over http. This means that you can fully control a player (or query its status) by sending http requests to the server. This is what sets this streaming solution apart from the many commercial (often LoFi) products that have meanwhile entered the market. And it can stream lossless FLAC files!

Once you understand the mechanism of controlling the player by sending commands over http, it only takes some basic knowledge of html, javascript and css to create a fully functional remote control web page.

My personal goal was to create a web page that shows a picture of the Transporter, with all buttons executing their function when clicked or touched (the player comes with a remote control but can also be controlled by buttons at the front). It also should mimic the player’s display. Most if this turned out to be very simple.

This picture shows a screenshot of my web based Transporter in action: a fully functional synchronized clone of the physical player, including volume- and brightness control, as well as the switch back to the ‘NOW PLAYING’ display, 30 seconds after the last command.

The approach is pretty straightforward:

The buttons:

  • Create a <div> element for every button and give it an unique id.
  • Use css to place every <div> exactly over ‘its’ button on the Transporter image.
  • Add an onclick event to every <div>, executing a javascript function with the <div>’s id as a parameter.
  • Write this javascript function, making it send the appropriate command url to the server, based on the firing <div>’s id.

The display:

  • Create a <div> for every relevant part of the display and give it an unique id.
  • Use css to place every display <div> at its right position on the Transporter image.
  • Create a javascript function with a timer loop, asynchronously requesting the latest information that the server has sent to the physical Transporter’ s display. By using ajax calls, only the display will be refreshed (vs the entire web page).
  • Make the same javascript function populate the display <div> elements with the updated display info (innerHTML property).

Well, that’s basically all it takes for the essential functions. Because it’s completely web based, it will work in every browser on every operating system. No app installation or Java required! This method gives you full control over what to display, and how. You’re not even limited to what the physical Transporter can do or show. For instance, you could add cover art or extra buttons for custom functions.

The remaining challenge was to properly emulate the VU meters. The Transporter has no physical VU meters but draws them on its graphic screen (and they look so good!). The server doesn’t seem to send audio level information to the player so I guess the drawing is done by the player’s software. My approach so far has been:

  • Run a ‘Squeezebox’ player on the tablet or computer that is going to control the Transporter. These software players exist for Windows, Linux and Mac.
  • Synchronize this software player with the physical Transporter (a standard feature of the server). Now I can read the audio levels on the Transporter by actually reading them from the synchronized software player.
  • Make javascript ‘listen’ to the audio stream that comes in to the software player and calculate separate audio levels for both stereo channels. There are libraries for this.
  • Draw the VU meters on a html5 canvas and have javascript refresh the needles based on the calculated levels.

Some other options:

Richard Titmuss wrote a fantastic emulator for Transporter and Squeezebox, called Softsqueeze. It’s built in Java, so it won’t work on my iPad2.

The streaming server has a web interface of its own that supports skins. So I could as well have written a skin for my project, but decided that it would be easier to create something from scratch.

Someone wrote this powerful SqueezePHPAPI. It includes a working example that shows exactly how to use it. [site no longer exists]

There are several apps for controlling whatever player you attach to the streaming server. The term to search for is ‘squeezebox’.