2012-05-09 9 views
3

まず、私の全体的な目標を説明し、次に質問そのものについて説明します。HTML/Javascript:キーボードストロークをURLパラメータに出力する

上位目標:

ルータに接続されているのArduinoボードにコマンドを送信します。コンピュータがWi-Fi経由でルータに接続されます。 Arduinoは、コンピュータがArduinoにキープレスを送信するために使用するローカルWebサイトを提供します。キープレスに応じて、Arduinoは何らかの形で動作します。

Arduinoにコマンドを送信する1つの方法は、Arduinoが提供するWebサイトのURLの最後にあるパラメータを使用することです。 Arduinoはこれらのパラメータを読み取ることができます。私はこれに問題はない。

アルドゥイーノはでコード化されたウェブサイトを提供することが可能であるのJavascript/HTML/CSSなど。

質問:私は一週間のためにJavascriptをされてきた

。私は私がヒット、キーボードからのキーの「キーコード」を見ることができています、これにより

<!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> 

:これまでのところ、私は以下のコードを持っています。ウェブサイトではキープレスが表示され、キーコードと実際のキーが出力されます。

私はキーを持っている間、ページがより遅く一定のレートでリフレッシュするように、そこにセットタイムアウト機能を置いています。

私はHTMLでいくつかのことを自分で作成し、管理することを知っています。たとえば、ドロップダウンボックス。私の理解では、ドロップダウンボックスを

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

タグに入れると、パラメータを作成できます。また、テキストボックスも同じことを行います。次に、ウェブページを提出すると、これらのオブジェクトの調整された値がURLのパラメータに表示されます。

しかし、私はキーコードの値をオブジェクトに出力する方法を見つけ出すことはできませんし、REAL時間に値をURLパラメータにコピーするためにページを送信します。

リアルタイムでは:私は例えば '上'を押している間にコマンドを送信し続け、リリースすると停止することを意味します。

テキストボックスに文字を入力し、送信ボタンを使用してURLパラメータに値を入力することで、これを行うことができました。しかし、私はこれに上下矢印を付けることはできません。ウェブページをリアルタイムで独自に提出したいと思っていました。

TLDR:キーボードのキーコードを使用して、リアルタイムでURLのパラメータを制御するにはどうすればよいですか?

ありがとうございます。すべての反応は非常に高く評価されています。

EDIT 5/15/12 web_bodが私に役立つコードをくれました。ここに新しいコードがあります:

<!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> 

私はテキストボックスにウェブページのフォーカスを持っていました。それがなければ、テキストボックスをクリックしなければならず、コードが最終的に登録されます。

これがどのように機能するか:ウェブページが読み込まれると、ページは自動的にテキストボックスにフォーカスします。キーを押すのを待ちます。キーを押します:半秒後にページにURLへのパラメータの文字が読み込まれます(setTimeout()でより速く応答させることができます)。キーは、別のキーが押されるまで、そのパラメーター内にとどまります。

私は乞食がチョーザーになれないことは知っていますが、これは私がキーを押している間にアクションが運ばれる「ビデオゲームスタイル」を実行したいと思っています。この場合、キーを押し続けると、テキストボックスに文字が入力され、送信されます。 Arduinoが文字のリストではなく、個々の文字を探すのが好きなので、これはうまくいかないでしょう。しかし、これはこれまで本当に素晴らしいです。私は確かにこれを実装する気にしません。

しかし私はTimが述べたようにソケット通信で多くの研究を行ってきました。 Arduino Ethernet ShieldはUDPライブラリを使用しています。これまでのところ、私の唯一の難しさはクライアント側の設定です。 Arduinoはサーバーです。これで何かが起こると、私は編集を行います。

+0

ページを送信すると、イベントハンドラの追加やリスニングに問題が発生します。あなたはおそらく、Ajax、イメージsrc、またはiframeで電話をかけたいと思うでしょう。 – epascarello

+0

そのようなURLを使ってコマンドを設定しようとすると、達成しようとしている通信を達成する最も簡単な方法ではありません。 ArduinoがWebページを提供するのではなくルータに接続されている場合、Arduinoとコンピュータ間の通信に使用できるソケットを作成する方が簡単かもしれません。それはあなたが必要とするリアルタイムのフィードバックを達成するために必要な信号を送信するはるかに簡単な手段になります。 – FoamyGuy

+0

ありがとうepascarelloとティム、あなたの応答は大歓迎です。私はAjax、イメージsrc、iframe、ソケット通信についてはほとんど知りません。だから2,3日間、私は多くの研究をするつもりです。確かに、私があなたのトピックを通して実行可能な解決策を見つけたら、私は編集して、私が行ったことを確実に投稿します。 –

答えて

1

まず、あなたのスパンを置き換える:

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

(それはのように見えるURLが生成されます:?scriptURL KP = xxxは& KC = YYY)を

あなたが何か本当に軽量にしたい場合は、どのように約:

<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;"/> 

キーを押すたびに、データに関係なく、画像が再読み込みされます(非表示になります)あなたのサーバ上のスクリプトを返して、リアルタイムでKPとKCのパラメータを受け取るでしょう。

+0

それはかなり良いです!あなたの提供されたコードの一部を編集するつもりです。キーを押すと、パラメータに登録されます。私は若干の変更を加えました。 –

関連する問題