Virtual keyboard in WebFrontend (and Mythweb)

[Freyta]

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 .

[Freyta]

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) . 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.