Slideshow interface adaptation

opt/lrc-client/css/style.css

@@ -117,6 +117,25 @@ a {
     text-align: center;
 }
 
+#main section #mouseclick .w50 {
+    display: inline-block;
+    width: 50%;
+    height: 100%;
+    text-align: center;
+    margin: -1px;
+    margin-top: 1px;
+    border: 1px solid #318CE7;
+}
+
+#main section #slidecontrol .w50 {
+    display: inline-block;
+    width: 50%;
+    height: 100%;
+    text-align: center;
+    margin: -2px;
+    border: 1px solid #318CE7;
+}
+
 #main section .line .w50 {
     display: inline-block;
     width: 50%;
@@ -166,12 +185,12 @@ a {
 
 #main section .line .play-slideshow {
     background: url("../img/icons/play-slideshow.png") no-repeat center;
-    background-size: auto 50%;
+    background-size: auto 40%;
 }
 
 #main section .line .exit-slideshow {
     background: url("../img/icons/exit-slideshow.png") no-repeat center;
-    background-size: auto 50%;
+    background-size: auto 40%;
 }
 
 /* Playlists _________________________________________________________________*/
@@ -210,12 +229,17 @@ a {
 
 /* Touchpad __________________________________________________________________*/
 
-#main section #canvas {
+#main section #Touchpad-canvas {
     background: url("../img/layout/touch.png") no-repeat center;
     background-size: auto 50%;
 }
 
-#main .keyboard-input {
+#main section #Slideshow-canvas {
+    background: url("../img/layout/touch1.png") no-repeat center;
+    background-size: auto;
+}
+
+#main .keyboard-input, #main .combined-keyboard {
     width: 100%;
     height: 100%;
     text-align: center;
@@ -241,6 +265,74 @@ a {
     height: 0px;
 }
 
+#main section .combined-keyboard {
+    display:none;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 45%;
+    border-top: solid 2px #318CE7;
+}
+
+#main section .combined-keyboard button {
+    display: block;
+    position: relative;
+    left:0;
+    top:0;
+	background: rgb(255,149,0);
+	color: white;
+}
+
+#main section .combined-keyboard #keypressed {
+    width: 100% ; 
+    height: 8%;
+    font-size: 14px;
+    text-align: left;
+    padding-left: 10px;
+    padding-top: 3px;
+    background: #318CE7;
+}
+
+#main section .combined-keyboard #ctrl, #main section .combined-keyboard #alt {
+    width: 45% ; 
+    height: 38%;
+    font-size: 30px;
+    float: left;
+    clear:both;
+}
+
+#main section .combined-keyboard #c, #main section .combined-keyboard #v,
+ #main section .combined-keyboard #a, #main section .combined-keyboard #x,
+#main section .combined-keyboard #u, #main section .combined-keyboard #i,
+ #main section .combined-keyboard #b, #main section .combined-keyboard #n {
+    width: 20%; 
+    height: 18%;
+    font-size: 30px;
+    float: right;
+}
+
+#main section .combined-keyboard .hr {
+    margin: 4px 4px 2px 2px;
+}
+
+#main section .combined-keyboard .hl {
+    margin: 4px 2px 2px 4px;
+}
+
+#main section .combined-keyboard .br {
+    margin: 2px 4px 4px 2px;
+}
+
+#main section .combined-keyboard .bl {
+    margin: 2px 2px 4px 4px;
+}
+
+#main section .combined-keyboard #hide {
+    width: 100% ; 
+    height: 10%;
+    clear:both;
+}
+
 /* Resets ____________________________________________________________________*/
 
 .left {

opt/lrc-client/index.html

@@ -494,7 +494,7 @@
                     <a href="#!" class="w14 left" data-page="slideshow" data-direction='left'><i class="fa fa-unsorted fa-rotate-90"></i></a>
                     <a href="#!" class="w14 left" data-page="custom-commands" data-direction='left'><i class="fa fa-terminal"></i></a>
                 </header>
-                <div id="canvas" class="line h70">
+                <div id="Touchpad-canvas" class="line h70">
                 </div>
                 <div id="mouse-controls" class="line h20 color2-light">
                     <a href="#!" class="w33 left-click left" data-command='{"cmd":"export DISPLAY=:0; xdotool click 1"}'></a>
@@ -516,14 +516,35 @@
                     <a href="#!" class="w14 left" data-page="slideshow" data-direction='none'><i class="fa fa-unsorted fa-rotate-90"></i></a>
                     <a href="#!" class="w14 left" data-page="custom-commands" data-direction='left'><i class="fa fa-terminal"></i></a>
                 </header>
-                <div class="line h70 slideshow-controls color1-dark">
-                    <a href="#!" class="w50 left" data-command='{"cmd":"export DISPLAY=:0; xdotool key Left"}'><i class="fa fa-5x fa-chevron-left"></i></a>
-                    <a href="#!" class="w50 right" data-command='{"cmd":"export DISPLAY=:0; xdotool key Right"}'><i class="fa fa-5x fa-chevron-right"></i></a>
+                <div id="slidecontrol" class="line h10 slideshow-controls color1-dark">
+                    <a href="#!" class="w50 left" data-command='{"cmd":"export DISPLAY=:0; xdotool key Left"}'><i class="fa fa-chevron-left"></i></a>
+                    <a href="#!" class="w50 right" data-command='{"cmd":"export DISPLAY=:0; xdotool key Right"}'><i class="fa fa-chevron-right"></i></a>
+                </div>
+                <div id="Slideshow-canvas" class="line h50">
+                </div>
+                <div id="mouseclick" class="line h10 slideshow-controls color1-dark">
+                    <a href="#!" class="w50 left-click left" data-command='{"cmd":"export DISPLAY=:0; xdotool click 1"}'></a>
+                    <a href="#!" class="w50 right-click right" data-command='{"cmd":"export DISPLAY=:0; xdotool click 3"}'></a>
                 </div>
                 <div class="line h20 color2-light slideshow-controls">
-                    <a href="#!" class="w33 play-slideshow left" data-command='{"cmd":"export DISPLAY=:0; xdotool key F5"}'></a>
-                    <a href="#!" class="w33 exit-slideshow left" data-command='{"cmd":"export DISPLAY=:0; xdotool key Escape"}'></a>
-                    <a href="#!" class="w33 mouse right" data-page="touchpad" data-direction='left'><i class="fa fa-2x fa-hand-o-up"></i></a>
+                    <a href="#!" class="w25 play-slideshow left" data-command='{"cmd":"export DISPLAY=:0; xdotool key F5"}'></a>
+                    <a href="#!" class="w25 exit-slideshow left" data-command='{"cmd":"export DISPLAY=:0; xdotool key Escape"}'></a>
+                    <a href="#!" class="w25 keyboard left" data-command='{"cmd":""}'><i class="fa fa-2x fa-keyboard-o"></i></a>
+                    <a href="#!" class="w25 combined right" data-command='{"cmd":""}'><i class="fa fa-2x fa-link"></i></a>
+                </div>
+                <input type="text" class="keyboard-input"/>
+                <div class="combined-keyboard color1-dark">
+                    <div id="keypressed"></div>
+                    <button id="hide"><i class="fa fa-2x fa-angle-down"></i></button>
+                    <button id="ctrl" class="hl">Ctrl</button>
+                    <button id="c" class="hr">C</button>
+                    <button id="v" class="hl">V</button>
+                    <button id="x" class="br">X</button>
+                    <button id="a" class="bl">A</button>
+                    <button id="alt" class="bl">Alt</button>
+                    <button id="u" class="hr">U</button>
+                    <button id="i" class="hl">I</button>
+                    <button id="b" class="bl">B</button>
                 </div>
             </section>
 

opt/lrc-client/js/js.js

@@ -1,3 +1,10 @@
+// Function to catch context menu and stop it ___________________________________
+window.oncontextmenu = function(event) {
+     event.preventDefault();
+     event.stopPropagation();
+     return false;
+};
+
 // Function to convert music time to seconds ___________________________________
 function seconds(time) {
     var split = time.split(":");
@@ -282,6 +289,19 @@ $(function() {
     });
 });
 
+$(function() {
+    $(".combined-keyboard #hide, #Slideshow-canvas").click(function() {
+        $(".combined-keyboard").css("display","none");
+    });
+});
+
+$(function() {
+    $(".slideshow-controls .combined").click(function() {
+        $(".combined-keyboard").css("display","block");
+        $.get("http://" + navigator.host + ":" + port + "/lrc", {cmd: $(this).data("command").cmd});
+    });
+});
+
 // Custom Commands _____________________________________________________________
 $(function() {
     // Existing commands are loaded in custom-commands.js