Virtual keyboard in WebFrontend (and Mythweb)

Virtual keyboard in WebFrontend (and Mythweb)

Postby Freyta » Wed Apr 05, 2017 10:00 pm

Hello.

I've been working on this in my spare time, and maybe someone can help me solve a problem or two that have come up. It's pretty simple, Kodi as you may be aware has a web interface that lets you control the program with your keyboard. I decided to try and make a similar one for MythTV.

I'm not sure the best way to upload the code if someone wants to help or whatever, but I uploaded it to Github here. There's 2 files that need to be changed (menu.qsp and backend_index.qsp) and a new file called keys.js.

backend_index.qsp changes
Code: Select all
Add this under the menu.js:
<script type="text/javascript" src="/js/keys.js"></script>


And replace the (document).ready function with this:
$(document).ready(function() {
    $('#header_status').hide();
    $('#header_error').hide();
    loadDiv("menu-bg", "/menu.qsp");
    $('.menu').initMenu();
    showHostName();

    // If our little remote icon is pressed
    $('#remote').click(function (){
      // Get the cookie
      var kbenabled = getCookie("kbenabled");
      if(kbenabled){
        setCookie("0");
        kbenabled = 0;
      } else {
        setCookie("1");
        kbenabled = 1;
      }
    });
});


Add the following lines in menu.qsp just before the </nav> line.
Code: Select all
  <br>
  <br>
  <a class='menuitem' href="#"><img src="/images/remote.png" id="remote" class="png" width="128" height="128" border="0" alt="MythTV"></a>


And finally the actual code that makes it all work.
Create a file in the folder "js" called "keys.js"
Code: Select all
// Function to create a cookie to check if virtual keyboard is enabled
function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

// Set a cookie
function setCookie(cvalue) {
    document.cookie = "kbenabled=" + cvalue + ";";
    console.log("wrote value: " + cvalue);
}

// Get the cookie where keyboard is enabled or not
var kbenabled = getCookie("kbenabled");

// Let the keyboard to control the frontend
$(document).on('keydown', function(e) {
   console.log(window.kbenabled);
  // If keyboard is enabled
   if (kbenabled) {
    // Get the keypress into a variable
      var key = e.keyCode;
      switch (key) {
         // Arrow keys
         case 37:
            {
               key = "LEFT";
               break;
            }
         case 38:
            {
               key = "UP";
               break;
            }
         case 39:
            {
               key = "RIGHT";
               break;
            }
         case 40:
            {
               key = "DOWN";
               break;
            }
            // Play/Pause
         case 80:
            {
               key = "P";
               break;
            }
            // Info button
         case 73:
            {
               key = "I"
               break;
            }
            // Menu button
         case 77:
            {
               key = "M"
               break;
            }
            // Guide data button
         case 83:
            {
               key = "S"
               break;
            }
         case 27:
            {
               key = "ESCAPE"
               break;
            }
         case 13:
            {
               key = "ENTER"
               break;
            }
         case 32:
            {
               key = "SPACE"
               break;
            }
            // Volume down
         case 219:
            {
               key = "["
               break;
            }
         case 121:
            {
               key = "F10"
               break;
            }
            // Volume up
         case 122:
            {
               key = "F11"
               break;
            }
            // Mute the volume
         case 120:
            {
               key = "F9"
               break;
            }
      }
    // Print which key was pressed and its keycode
      console.log(key + " - " + e.keyCode)
    // Submit the ajax request
      $.ajax({
         url: "http://" + window.location.hostname + ":6547/Frontend/SendKey",
         type: "POST",
         data: {
            Key: key
         },
      })
   }
});


You also need to download the remote icon, which I copied from icons8 because I can't draw to save my life :lol:.
Image
AustraliaFreyta
Newcomer
 
Posts: 2
Joined: Fri Mar 24, 2017 7:36 am

Re: Virtual keyboard in WebFrontend (and Mythweb)

Postby Freyta » Wed Apr 05, 2017 10:05 pm

Alright, so the problem I am actually having is for some reason it isn't setting the cookie properly. I'm not sure why (I'm no good at javascript) :oops:. Either kbenabled is always set to 0 (disabled) or 1 (enabled). The keys that have been added are: up, down, left, right, volume up (F10 + ]), volume down (F9 + [), M (menu), I (info), ENTER, ESC, P (pause).

I tried to comment as much as possible so any other help is appreciated.
AustraliaFreyta
Newcomer
 
Posts: 2
Joined: Fri Mar 24, 2017 7:36 am


Return to General Development



Who is online

Users browsing this forum: No registered users and 1 guest

cron