<?php
   $title = _("VLC RealSense™ Technology");
   $body_color = "red";
   $language = "";
   $nobanner = true;

   require("./include/language.php");

  require("./include/header.php");
  require("./include/os-specific.php");
  require("./include/package.php");
  include("./include/news.php");


   $macosxversion = "2.1.1";
   $win32version = "2.1.1";
?>
    <div>
            <center><h1 class='bigtitle' style="padding-bottom: 3px;">VLC RealSense™</h1>
            <div style="padding-top: 0px; padding-bottom: 10px; color: grey;">VLC edition with RealSense™ Technology is a special version allowing Gestures and Voice control of VLC.</div>
            </center>

            <style>
 body {
      -webkit-font-smoothing: antialiased;
      color: #232525;
    }

    #slides {
      display: none
      border: 1px solid red;
    }

    #slides .slidesjs-navigation {
      margin-top: 5px;
    }

    a.slidesjs-next,
    a.slidesjs-previous,
    a.slidesjs-play,
    a.slidesjs-stop {
      background-image: url(//images.videolan.org//js/css/btns-next-prev.png);
      background-repeat: no-repeat;
      display:block;
      width:12px;
      height:18px;
      overflow: hidden;
      text-indent: -9999px;
      float: left;
      margin-left: 10px;
    }

    a.slidesjs-next {
      margin-right:10px;
      background-position: -12px 0;
    }

    a:hover.slidesjs-next {
      background-position: -12px -18px;
    }

    a.slidesjs-previous {
      background-position: 0 0;
    }

    a:hover.slidesjs-previous {
      background-position: 0 -18px;
    }

    .slidesjs-pagination {
      margin: 7px 0 0;
      float: right;
      list-style: none;
    }

    .slidesjs-pagination li {
      float: left;
      margin: 0 1px;
    }

    .slidesjs-pagination li a {
      display: block;
      width: 13px;
      height: 0;
      padding-top: 13px;
      background-image: url(//images.videolan.org/js/css/pagination.png);
      background-position: 0 0;
      float: left;
      overflow: hidden;
    }

    .slidesjs-pagination li a.active,
    .slidesjs-pagination li a:hover.active {
      background-position: 0 -13px
    }

    .slidesjs-pagination li a:hover {
      background-position: 0 -26px
    }

    #slides a:link,
    #slides a:visited {
      color: #333
    }

    #slides a:hover,
    #slides a:active {
      color: #9e2020
    }

    .subtext { position: relative; top: 0px; left:300px; width: 300px; text-align: center; margin-bottom: 20px; } 

</style>
            <script>
              $(function(){
                $("#slides").slidesjs({
                  width: 940,
                  height: 340,
                  navigation: {
                        active: true,
                        effect: "slide"
                  }, 
                  play: {
                         active: false,
                         effect: "slide",
                         interval: 4000,
                         auto: true,
                         swap: true,
                         pauseOnHover: true,
                         restartDelay: 3000
                 },
                 callback: {
                         complete: function(number) { 
                                var selector = "#text_" + number;
                                $(".subtext").css("display", "none");
                                $(selector).css("display", "block");
                         }
                 } 
                });
              });
            </script>

        <div style="width: 940px; margin: 0 auto;">
          <div id="slides" style="margin: 0 auto;">
                <img src="IntelRealSense.jpg" />
         </div>
        <h2 class="subtext" id="text_1">Gestures control your playback</h2>
        </div>

                <a id='downloadButton' href='#download' style="margin-left: 300px; margin-top: 0px;">
                    <img style='position: absolute; top: -10px; left: -10px;' src='//images.videolan.org//images/downloadVLC.png' alt='Download VLC icon' />
                    <span class='downloadText'><?php echo _("Get VLC now!"); ?></span>
                    <span id='downloadDetails' style='font-size: 12px; color: white;'>
                    <span id='downloadVersion'>Ultrabook</span> edition
                    </span>
                </a>
                <script>
                $(document).ready(function() {
                    $("#downloadButton").removeAttr('href');
                });
                $("#downloadButton").click(function() {
                     $('html, body').animate({
                         scrollTop: $("#getit").offset().top
                     }, 2000);
                });
                </script>

        <div class="clearme" style='padding-top: 30px;'>
            <div style='float: left; width: 500px;'>
            <h1 style='margin-bottom: 12px;'><?php echo _("VLC RealSense Highlights"); ?></h1>
                <div class='projectDescription'>
                    <div style="padding-bottom: 8px;">Compatible with the latest version of VLC, 2.2.1, those modules extend VLC with RealSense Technology:</div>
                    <div class='productDescription' style="padding-left: 30px; font-size: 15px;">
                        <h2>Voice</h2>
                           You can control VLC by just telling it to "play", "pause", "stop"...
                        <h2>Gestures</h2>
You can move your hands before the 3D camera, a la minority report, to control VLC.
                    </div>
                    <div style="float: right;">Read the <a href="http://www.jbkempf.com/blog/post/2015/Control-VLC-with-your-voice-and-gestures">Blogpost</a></div>

                </div>
            </div>
            <?php image( 'largeVLC.png', 'Large Orange VLC media player Traffic Cone Logo', 'projectImg' ); ?>
        </div>



        <div class="clearme"></div>

        <a name="download" id="getit"></a>
        <h1>Download Modules</h1>
           <a id='downloadButton' href='http://people.videolan.org/~jb/Builds/RSSDK/librssdk_g_plugin.dll' >
               <img style='position: absolute; top: -10px; left: -10px;' src='//images.videolan.org/images/downloadVLC.png' alt='Download VLC icon' />
               <span class='downloadText'><?php echo _("VLC Gestures Module"); ?></span>
               <span id='downloadDetails' style='font-size: 12px; color: white;'>
                    <span id='downloadVersion'>Ultrabook</span> edition
           </a>

           <a id='downloadButton' href='http://people.videolan.org/~jb/Builds/RSSDK/librssdk_v_plugin.dll' >
               <img style='position: absolute; top: -10px; left: -10px;' src='//images.videolan.org/images/downloadVLC.png' alt='Download VLC icon' />
               <span class='downloadText'><?php echo _("VLC Voice Module"); ?></span>
               <span id='downloadDetails' style='font-size: 12px; color: white;'>
                    <span id='downloadVersion'>Ultrabook</span> edition
           </a>

<div class='clearme'>
<h2 style="margin-top: 280px;" >How to Install</h2>
          
<p>You need to install them in the <code>plugins/control</code> folder in your VLC installation (usually in <code>C:\Program Files (x86)\VideoLAN\VLC</code>) and restart VLC.</p>


<p>You need to have <a href="http://registrationcenter-download.intel.com/akdlm/irc_nas/5105/intel_rs_sdk_runtime_4.0.0.112526.exe">RealSense runtime</a> installed too, if you don't have it.</p>


<p>Finally, you need to activate them in the preferences. <em>(advanced -&gt; Interface -&gt; Control Interfaces).</em></p>


<p><a href="//www.jbkempf.com/blog/public/VideoLAN/IntelRealSense.png" title="IntelRealSense.png"><img src="//www.jbkempf.com/blog/public/VideoLAN/.IntelRealSense_m.png" alt="IntelRealSense.png" style="display:block; margin:0 auto;" title="IntelRealSense.png, May 2015" /></a></p>


<h3>Source</h3>


<p>Of course, I provide, the source of the plugin <a href="http://people.videolan.org/~jb/Builds/RSSDK/0002-RSSDK-modules.patch">here</a>, so you can hack on it, and recompile it.</p>


<p>To build it, you need the latest version of the <a href="https://software.intel.com/en-us/intel-realsense-sdk">RealSense SDK</a>, with a version above 4, and you need to point to the right headers. Here is <a href="http://people.videolan.org/~jb/Builds/RSSDK/0001-Add-RSSDK-headers.patch">another patch</a> to help you build it, if you need.</p>


<h2>Documentation</h2>


<h3>Voice</h3>


                <div class='projectDescription'>
<p>The voice module should understand the following control:</p>
<ul>
<li>&quot;Play&quot;</li>
<li>&quot;Pause&quot;</li>
<li>&quot;Stop&quot;</li>
<li>&quot;Next&quot;</li>
<li>&quot;Previous&quot;</li>
<li>&quot;Volume Up&quot;</li>
<li>&quot;Volume Down&quot;</li>
</ul>
</div>

<h3>Gestures</h3>


                <div class='projectDescription'>
<p>The gestures recognized should be:</p>
<ul>
<li>waving to stop</li>
<li>swiping to go to the next video</li>
<li>&quot;V sign&quot; to go to the previous video</li>
<li>tap in front of the camera to toggle play/pause</li>
<li>&quot;Thumb Up&quot; to increase the volume</li>
<li>&quot;Thumb Down&quot; to decrease the volume</li>
<li>&quot;Full Hand Pinch&quot; to mute the sound''</li>
</ul>
</div>


<p><em>Have fun!</em></p></div>
</div>
<?php footer('$Id: index.php 7173 2012-02-11 00:58:09Z jb $'); ?>
