Setting up a USB Touchscreen to control your Raspberry Pi audioplayer

In an previous post, I discussed that I have been using the Logitech Squeezebox Duet and Logitech media server (LMS) software, to be able to play my mp3 collection and stream audio from Spotify. But the iPod shaped Duet controller, over 7 years old, got some issues charging its battery. I am hoping to be able to fix it, but in the meanwhile I wanted a bit of a replacement, to control audio playback, without using for example, the “Squeezer” app on my android phone.

Before I bought the Squeezebox duet somewhere in 2009, I had been experimenting with a touchscreen based solution in combination Asus eeebox mini PC, but wasn’t really satisfied. Then came the Squeezebox duet along and I replaced the touchscreen setup for it. However, I kept the LG Flatron L1510SF 15-inch touchscreen. Now in 2016 one of the best community supported mini PCs must be the Raspberry Pi. I have also been playing with it to make both video and audio-player devices. There is also already a whole range of supported small touchscreens, which connect via the GPIO header or Display header, but using screens with HDMI, DVI, or VGA input and USB for the touch-control seems not so common. But when my Squeezebox Duet controller got issues charging, I was thinking why not pair my old 15-inch touchscreen with a Raspberry Pi running LMS?

Setting up Logitech Media Server (LMS)

Setting up a Raspberry Pi with LMS is very simple when you use the Max2Play audioplayer OS. Just download the SD image from the Max2play website, write it to the SD card with a tool like win32diskimager. Insert the SD in the Rpi, connect the Rpi to you network using an ethernet cable and power it up. You now can enter the setup of Max2play on you Rpi, by typing the URL: max2play/ in your browser. In the setup interface you can select to install LMS and the Squeezerplayer playback software onto you Raspberry Pi automatically. In this way you have a headless audio server device, which can playback songs locally or on other squeezebox devices on your network. You can control it via an app like Squeezer on android or by logging into the LMS server web-interface on your laptop or PC.

Jivelite, the touchscreen interface for LMS

In my case, I wanted to use a local touchscreen display to control Rpi with LMS. For this, you have to do some extra work. First of all, you need to connect the screen and also for setup purposes, a keyboard and mouse. Secondly you need to install the JiveLite Squeezebox interface software via the Max2play setup. This is a Max2Play premium feature which costs you a license fee of €9,99 per year. It is possible to setup LMS and Jivelite without Max2Play, but not as effortless as provided by the setup interface of Max2play. The JiveLite setup in Max2Play lets you also select several JiveLite interface skins, but these are tailored to the smaller Raspberry Pi specific touchscreens and needed some modification to get a fitting layout for the 1024×768 resolution of my LG touchscreen. But more about that later.

Calibrating your USB touchscreen

Now we first need to get the USB touchscreen working with the Raspberry pi. When researching how to do this, I came across this article (in Dutch). Which describes the process for the exact same screen as I am using. First of all, you need to install xinput-calibrator. You best do this locally on your Rpi using the attached mouse and keyboard by opening a terminal window and typing sudo apt-get install -y xinput-calibrator. You now have to run xinput-calibrator by typing xinput-calibrator. This will open a window for calibration. You can follow the instructions for calibration and use a stylus for best precision. This will result in an output window with calibration parameters that need to be put into the /etc/X11/xorg.conf.d/99-calibration.conf file. I did this with the parameters I recorded but run into problems. The LXDE gui would not show after a reboot. So in the end, I just used the exact same settings as described in the article with the exact same LG touch screen. That did the trick, the touchscreen is working fine.

Making the Joggler skin fit your resolution

Now I wanted the have a JiveLite skin that was a good fit with the resolution of the screen. The Joggler skin, came nearest to what I wanted but needed adjustment to fill the whole screen. For this you need to edit the code of skin file: /opt/jivelite/jivelite/share/jive/applets/JogglerSkin/JogglerSkinApplet.lua

And edit line 259 so it reads:
Framework:setVideoMode(1024, 768, 0, false) where 1024 and 768 reflect the resolution and aspect-ratio of the screen.

When you want the spectrum visualizer of Jivelite to show correctly (Only visible when playing audio locally on the LMS machine). You also need to edit the following section in the JogglerSkinApplet.lua file. The values to edit are shown in bold

-- Visualizer: Spectrum Visualizer
s.nowplaying_spectrum_text = _uses(s.nowplaying_visualizer_common, {
npvisu = {
hidden = 0,
position = LAYOUT_NONE,
x = 0,
y = 2 * TITLE_HEIGHT + 4,
w = 1024,
h = 566 - (2 * TITLE_HEIGHT + 4 + 45),
border = { 0, 0, 0, 0 },
padding = { 0, 0, 0, 0 },

spectrum = {
position = LAYOUT_NONE,
x = 0,
y = 2 * TITLE_HEIGHT + 4,
w = 1024,
h = 566 - (2 * TITLE_HEIGHT + 4 + 45),
border = { 0, 0, 0, 0 },
padding = { 0, 0, 0, 0 },

After a restart of the Jivelite GUI, or reboot of the system, the layout should have a good fit with the resolution of the screen. Some buttons may still not have the most perfect scaling, but it is all functional. I however will, keep an eye open for a more perfected 1024×768 skin for JiveLite. If you a reading this and have one or knows one, please let me know.

Finally

One small thing is still bothering me and this is the visible mouse cursor. Max2Plays add-on, specific for the smaller Raspberry Pi touchscreens, has a very handy checkbox to make the mouse pointer on a touchscreen invisible. But as my touchscreen is not supported by this add-on, I cannot use it. Any suggestions to make the mouse pointer disappear are also very welcome. To get a better impression of how it works and what it looks like I recommend you to watch my youtube video about it, here below.