open - HTML/Javascript: generación de trazos de teclado a parámetros de URL
window.open popup (1)
Primero explicaré mi objetivo general y luego la pregunta en sí.
Objetivo general:
Para enviar comandos a una placa Arduino que está conectada a un enrutador. Se conectará una computadora al enrutador a través de wifi. El Arduino servirá un sitio web local que la computadora utilizará para enviar pulsaciones de teclas al Arduino. Dependiendo de la presión de la tecla, el Arduino se comportará de alguna manera.
Una forma de enviar comandos a Arduino es usar los parámetros que se encuentran al final de una URL del sitio web al que sirve Arduino. El Arduino puede leer estos parámetros. No tengo problema con esto.
El Arduino puede servir un sitio web codificado con Javascript / HTML / CSS, etc.
Pregunta:
He estado en Javascript por una semana; pero hasta ahora tengo el siguiente código:
<!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>
Con esto, puedo ver los "códigos clave" de las teclas del teclado que pulso. El sitio web verá presionar la tecla, emitirá el código de tecla y la clave real.
Pongo la función de tiempo de espera establecido para que la página se actualice a un ritmo más lento y constante mientras estoy presionando una tecla.
Sé que algunas cosas en HTML crearán y administrarán los parámetros por sí mismos. Por ejemplo, los cuadros desplegables. Según entiendo, cuando las cajas desplegables se colocan en el
<form method=''GET''></form>
etiqueta, puede crear parámetros. También los cuadros de texto harán lo mismo. Entonces, si uno ''envía'' la página web, los valores ajustados en estos objetos aparecerán en los parámetros de la URL.
Sin embargo, no puedo descifrar cómo mostrar el valor del código de la clave a un objeto, luego enviar la página para copiar los valores a los parámetros de la URL en tiempo REAL.
Por tiempo real: me refiero a continuar enviando un comando mientras presiono ''arriba'', por ejemplo, y para cuando lo suelte.
Pude hacer una versión cruda de esto escribiendo una letra en un cuadro de texto, y usando un botón de enviar para ingresar el valor en el parámetro URL. Sin embargo, no puedo incluir flechas hacia arriba o hacia abajo con esto, y quería que la página web se enviara por sí sola en tiempo real.
TLDR: ¿cómo puedo usar los códigos de tecla del teclado para controlar los parámetros en una URL en tiempo real?
Muchas gracias por leer esto. Todas las respuestas son muy apreciadas.
EDIT 15/05/12 web_bod me dio un código útil. Aquí está el nuevo código en su totalidad:
<!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>
Tuve el foco de la página web en el cuadro de texto. Sin él, tuve que hacer clic en el cuadro de texto y luego el código finalmente se registró.
Cómo funciona tal como está: cuando la página web se carga, la página se enfocará automáticamente en el cuadro de texto. Espera presionar la tecla. Presione una tecla: la página cargará la letra a los parámetros en la URL medio segundo más tarde (Puede hacer que responda más rápido con setTimeout ()). La tecla permanecerá allí en el parámetro hasta que se presione otra tecla.
Sé que los mendigos no pueden ser selectivos, pero quería que este llevara a cabo un "estilo de videojuego" donde una acción se lleva a cabo mientras estoy presionando una tecla, y la acción se detiene en el momento en que suelto la tecla. En este caso, si mantiene presionada una tecla, el cuadro de texto se llenará con letras, luego enviará. Esto no funcionaría porque me gustaría que el Arduino busque caracteres individuales, no una lista de caracteres. Sin embargo, esto es realmente genial hasta ahora. Ciertamente no me importaría implementar esto.
Sin embargo, he estado investigando mucho con la comunicación de socket como menciona Tim. Esto parece un gran camino a seguir, Arduino Ethernet Shield usa una biblioteca UDP, y hasta ahora mi única dificultad es configurar el extremo del cliente. Arduino es el servidor. Cualquier cosa con esto sucede, haré una edición.
Primero reemplace sus tramos:
<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>
(que generará una URL similar a: scriptURL? KP = xxx & KC = yyy )
Si quieres algo realmente ligero, ¿qué tal:
<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;"/>
Cada pulsación de tecla desencadena una recarga de la imagen (está oculta), independientemente de los datos devueltos, la secuencia de comandos en su servidor recibirá los parámetros KP y KC en tiempo real.