Home

VideoLAN Jukebox Kiosk

Some time ago a company contacted me regarding a touchscreen display they had worked on for the lobby of a major software company in Silicon Valley.  It seems that they were trying to use eight touchscreens connected to one computer to launch and control a video on a second computer connected to a large HD Display.  Each touchscreen had it's own image, which when pressed, spawns player controls on the touchscreen and launches an associated video on the main display. Basically it was a fancy version of those old diner jukeboxes at your booth that would queue your song on the playlist.




So how do you meet the project goals without using Elo touch monitors or super expensive nVidia gamer machines? A combination of Ubuntu Linux, Firefox, and VLC running on nine of the cheapest machines available. Here's how:

First we download Ubuntu 7.10 Desktop (Gutsy Gibbon) iso image to burn on a CD. We want this particular version of Ubuntu because the 8.04 version uses a beta(5) version of Firefox(3) which doesn't support the plugins we will be using.

Next, burn the image to a CD using your favorite burner software and install it on all the machines. Name each computer something relevant, like it's position 'topfarleft' or 'bottomcenterright' or 'maindisplay'. This will be exceedingly useful later when we are dealing with multiple html, video, and image files on the server.

On the large main display:

  • Select System - Administration - Synaptic Package Manager from the taskbar menu


Screenshot

Now to make them automatically launch at boot:

  • Select System - Preferences - Sessions from the taskbar menu

Photobucket

  • Add a new item and name it VLC
  • Add to the command line section: vlc -I http /usr/share/vlc/http/example.mov

Photobucket

Hopefully /usr/share/vlc/http/example.mov is obvious and you substituted the full path to your video. I used the VLC root http interface directory, /usr/share/vlc/http, for simplicity and because of folder and file permissions can get complicated fast. You can use the default home directory of the current user. The -I http is to launch the webserver remote control interface and you can use only this if you do not want a default video to launch.

  • Add a new item and name it Unclutter
  • Add to the command line section: unclutter -idle 2

Photobucket

The option -idle 2 tells the OS to hide the mouse cursor after two seconds. Before you forget, set the machine to auto-login on boot.

  • Select System - Administration - Login Window from the taskbar menu
  • Select the Security tab
  • Check the box Enable Automatic Login and select your user.

Photobucket

Now we can customize VLC.

  • Select Applications - Sound & Video - VLC media player

Photobucket

  • Select Settings - Preferences from the menu
  • Make sure to enable the Advanced Settings checkbox in the lower right corner
  • Expand the Interface directory and select Main interfaces
  • Mark the box for HTTP remote control interface

Photobucket

  • Select the Video directory
  • Mark Fullscreen video output and Disable screensaver

Photobucket

Since this is a dedicated machine we can tell it to use as much of the system resources as it wants.

  • Select the Advanced directory and mark Allow real-time priority

Photobucket

  • Select Save preferences

Now you can customize the web interface for the touchscreens. We are going to make copies of all the documents we will be modifying.

  • Select Applications - Accessories - Terminal from the taskbar menu

Photobucket

  • Type sudo chmod -R 777 /usr/share/vlc/http

Photobucket

  • Type cd /usr/share/vlc/http
  • Then type cp index.html touch_template.html
  • Followed by cp style.css touch_style.css

First let's customize our touch_template.html page.

  • Select Applications - Accessories - Text Editor

Photobucket

  • Open /usr/share/vlc/http/touch_template.html
  • Change <link href="style.css" rel="stylesheet" type="text/css" />
     to:
    <link href="touch_style.css" rel="stylesheet" type="text/css" />

Photobucket

  • Change <body onload="loop_refresh();"> to:
    <body onload="loop_refresh();no_show();" style="cursor:crosshair;">

Photobucket

Adding style="cursor:crosshair;" is optional, but it centers the precise cursor location to the center of your finger instead of the upper left corner of your finger press. The no_show(); function we will be creating later to hide elements we do not want. Now we will create some static variables on the page to pass to the right javascript functions.

  • Insert <div id="bkgd_image" onclick="in_play();">
    <img src="images/touch_0.jpg" onmousedown="return false;">
    </div>
    <input type="hidden" name="input_pl" id="input_pl" value="/usr/share/vlc/http/touch_0.mov" />

Photobucket

Obviously touch_0.jpg and touch_0.mov will be named whatever you choose. Make sure to place them in the correct folder. The default http interface looks like this in your browser:

Photobucket

Any more changes to the 'look and feel' will be made by altering touch_style.css elements directly. This project required a video to launch when you pushed anywhere on the screen. This is where you could use in_enqueue(); instead of in_play(); in the <div id="bkgd_image" onclick="in_play();"> tag to add a video to the playlist instead of interrupting and replacing the current video.

My particular project required only a Play/Pause button and a time-slider control about mid-screen. So we have to explicitly tell the section where it should appear and what elements it should display.

  • Open touch_style.css using the text editor
  • Insert section:
    div#main {
    position: absolute;
    top: 500px;
    left: 275px;
    width: 325pt;
    background: transparent;
    border: none;
    }
  • Insert line display: none; into the div.title section

Photobucket

Since each touchscreen had it's own image and associated video I altered the touch_template.html file eight times (touch_1.jpg, touch_8.mov, etc.) and saved them with useful names like topfarleft.html and bottomcenterright.html so I could easily known where I was making changes on the entire display.

On my project I had to spawn the player controls *only* on the touchscreen that launched the video. For this sort of dynamic filtering we have to alter the javascript file functions.js located in the /usr/share/vlc/http/js directory.

  • Add to the global variable section var pl_cur_video; on the line after var pl_cur_id;
  • Continuing on the next line insert the following:
    function no_show()
    {
    var disappear= new Array(
    "playlist",
    "footer",
    "btn_open",
    "btn_stop",
    "btn_previous",
    "btn_next",
    "btn_playlist",
    "btn_info",
    "btn_sout",
    "btn_fullscreen",
    "btn_snapshot",
    "btn_volume_down",
    "btn_volume_up",
    "status",
    "nowplaying"
    );
    for (key in disappear)
    toggle_show(disappear[key]);
    }
  • Find the parse_playlist() function
  • Find if( elt.getAttribute( 'current' ) == 'current' ) and after the first parenthesis insert pl_cur_video = elt.getAttribute ( 'name' );
    *immediately before* the line if( elt.getAttribute( 'ro' ) == 'rw' ) insert:

    var showMain = document.getElementById( 'main' );
    if( value( 'input_pl') != pl_cur_video )
    {
    showMain.style.display = 'none';
    }
    else
    {
    showMain.style.display = 'block';
    }

This makes the player controls only appear on the touchscreen that launched the video. Now we have to customize the button and slider control images.

  • Select Applications - Graphics - GIMP Image Editor
  • Open and customize /usr/share/vlc/http/images/play.png
    /usr/share/vlc/http/images/slider_point.png
    /usr/share/vlc/http/images/slider_bar.png
    /usr/share/vlc/http/images/slider_left.png
    /usr/share/vlc/http/images/slider_right.png

Remember that if you change the size of the images, you have to open /usr/share/vlc/http/dialogs/main and edit the width and height values of the images in the progress bar section so they match the new size.

Photobucket

Make sure to restart your machine and you're finished with the main display.

On the touchscreens:
First we need to download and install the eGalax touchkit drivers and configuration utility. If you are following my instructions, then you are using a 32Bit 2.6 Kernel and you need the driver found here. Otherwise, use the driver that matches your system from here.

  • Select Applications - Accessories - Terminal from the taskbar menu
  • Type cd Desktop/TouchKit or the path to where you extracted the driver folder **WARNING** Case sensitive, so pay attention
  • Copy it by typing sudo cp egalax_drv.so /usr/lib/xorg/modules/input directory and entering your password at the prompt
  • Type sudo gedit /etc/X11/xorg.conf
  • Add the line InputDevice “EETI” “SendCoreEvents” to the "ServerLayout" section

Photobucket

  • Insert:
    Section "InputDevice"
    Identifier "EETI"
    Driver "egalax"
    Option "Device" "usbauto"
    Option "Parameters" "/var/lib/egalax.cal"
    Option "ScreenNo" "0"
    EndSection

Photobucket

  • Save xorg.conf and close the text editor
  • Plug in the touchscreen usb cable and follow any prompts with the affirmative
  • Reboot the machine
  • Select Applications - Accessories - Terminal from the taskbar menu
  • Type sudo touchcfg to launch the TouchKit configuration utility
  • Select Tools and run the 4 point calibration test

You might find with touchscreens that you would like to make the cursor disappear because it's unnecessary.

  • Select System - Administration - Synaptic Package Manager from the taskbar menu
  • Install unclutter

Now we can make it go fullscreen without a scrollbar. We will also stop triggering a taskbar or menubar near the edge of the screen.

  • Select Applications - Internet - Firefox Web Browser
  • Select Tools - Add-ons and click the Get Add-ons button

Photobucket

  • Install Fullerscreen from the search box
  • Select Edit - Preferences - Main and set the Firefox homepage to http://maindisplay:8080/topfarleft.html replacing maindisplay with the IP address of the main display machine and replacing topfarleft.html with the name of the machine you are working on
  • Go to Tools - Add-ons - Fullerscreen and select Options
  • Uncheck everything and set the Threshold for edge detection to 1 pixel

These next steps gets rid of that annoying "Restore Session?" message box every time you reboot the machines.

  • Type about:config in the browser bar
  • Find browser.sessionstore.enabled and set it to false

Now we can install the final add-on which will default to full screen, disable all menus, toolbars, key commands and right button menus.

  • Install R-kiosk on Firefox from the Get Add-on search box

Now to make Firefox automatically launch at boot:

  • Select System - Administration - Sessions from the taskbar menu
  • Add a new item and name it Firefox
  • Add to the command line section: firefox

This will automatically launch Firefox, fullscreen with no borders or scroll bars, just your image which, when pressed, launches a video on the main display. Before you forget, set the machine to auto-login on boot.

  • Select System - Administration - Login Window from the taskbar menu
  • Select the Security tab
  • Check the box Enable Automatic Login and select your user


And that's it.

Posted by Adam on Fri, 07/04/2008 - 21:50