HTML/Javascript: Outputting keyboard strokes to URL Parameters

StackOverflow https://stackoverflow.com/questions/10523683

質問

I'll first explain my overall goal and then the question itself.

Overall Goal:

To send commands to an Arduino board that is connected to a router. A computer will be connected to the router over wifi. The Arduino will serve a local website that the computer will use to send key presses to the Arduino. Depending on the key press, the Arduino will behave in some way.

One way to send commands to the Arduino is to use the Parameters that are at the end of a URL of the website the Arduino serves. The Arduino can read these parameters. I have no problem with this.

The Arduino is able to serve a website coded with Javascript/HTML/CSS etc..

Question:

I have been in Javascript for a week; but so far I have the below code:

<!DOCTYPE html>
<html>
<head>

<script type="text/javascript">


function Submit()
{
document.forms['myform'].submit();
}

document.onkeydown = function(event) {
var key_press = String.fromCharCode(event.keyCode);
var key_code = event.keyCode;
document.getElementById('kp').innerHTML = key_press;
    document.getElementById('kc').innerHTML = key_code;
var t=setTimeout("Submit()", 500);          
}


</script>
</head>


<form name='myform' method='GET'>

Key Pressed : <span id="kp" name="KP"></span>
<br />
Key Code : <span id="kc" name="KC"></span>


</form>
</html>

With this, I am able to see the 'Key codes' of the keys from the keyboard that I hit. The website will see the key press, output the key code and actual key.

I put the set timeout function in there so the page is refreshing at a slower, constant rate while I'm holding a key.

I know some things in HTML will create and manage the parameters on their own. For instance, the drop down boxes. From my understanding, when drop down boxes are put into the 

<form method='GET'></form>

tag, you can create parameters. Also text boxes will do this same thing. Then if one 'submits' the webpage, then the adjusted values in these objects will appear in the parameters of the URL.

However, I can't figure out how to output the value of the key code to an object, then submit the page to copy the values to the URL parameters in REAL time.

By real time: I mean to continue to send a command while I'm pressing 'up' for instance, and to stop when I release.

I was able to do a crude version of this by typing a letter into a text box, and using a submit button to enter the value into the URL parameter. I can't include up or down arrows with this however, and I wanted the webpage to submit on its own in real time.

TLDR : How can I use the key codes from the keyboard to control the parameters in a URL in Real Time?

Thank you very much for reading this. All responses are greatly appreciated.

EDIT 5/15/12 web_bod gave me some helpful code. Here is the new code in it's entirety:

<!DOCTYPE html>
<html>
<head>

<script type="text/javascript">


function Submit()
{  
document.forms['myform'].submit();
}

document.onkeydown = function(event) {
var key_press = String.fromCharCode(event.keyCode);
var key_code = event.keyCode;
document.getElementById('kp').innerHTML = key_press;

var t=setTimeout("Submit()", 500);          
}

</script>
</head>

<body onLoad='document.myform.KP.focus()'>
<form name='myform' method='GET' action="ENTER URL HERE">
Key Pressed : <input type="text" id="kp" name="KP"></span>

</form>
</body>
</html>

I had the webpage focus onto the text box. Without it, I had to click on the text box, and then the code would finally register.

How this performs as it stands: When the webpage loads, the page will automatically focus on the text box. It waits for key press. Press a key: the page will load the letter to the parameters to the URL half a second later (You can make it respond quicker with the setTimeout()). The key will stay there in the parameter until another key is pressed.

I know beggars can't be choosers, but I wanted this to perform "video game style" where an action is carried so long I'm pressing a key, and the action stops the moment I release the key. In this case if you hold down a key, the text box will fill with letters, then submit. This wouldn't work because I would like for the Arduino to look for individual characters, not a list of characters. However this is really great so far. I most certainly wouldn't mind implementing this.

However I have been doing a lot of research with socket communication as mentioned by Tim. This seems like a great path to take, the Arduino Ethernet Shield uses a UDP library, and so far my only difficulty is setting up the client end. Arduino is the Server. Anything with this happens, I will make an edit.

役に立ちましたか？

解決

Firstly replace your spans:

<form name='myform' method='GET' action="scriptURL">
    Key Pressed : <input type="text" id="kp" name="KP"></span>
    <br />
    Key Code : <input type="text" id="kc" name="KC"></span>
</form>

(that will generate a url looking like : scriptURL?KP=xxx&KC=yyy)

If you want something really light weight then how about:

<script>     
  document.onkeydown = function(event) {
    var key_press = String.fromCharCode(event.keyCode);
    var key_code = event.keyCode;
    document.getElementById('img').src = "scriptURL?KP=" + key_press + "&KC=" + key_code;
  }
</script>

<img src="scriptURL" id="img" style="display:none;"/>

Each key press triggers a reload of the image (it's hidden), regardless of the data returned the script on your server will receive the KP and KC parameters in real time.

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top