2012-05-09 8 views
3

Сначала я объясню свою общую цель, а затем сам вопрос.HTML/Javascript: вывод штрихов клавиатуры на URL Параметры

Общая цель:

Для отправки команд на плате Arduino, который подключен к маршрутизатору. Компьютер будет подключен к маршрутизатору через Wi-Fi. Arduino будет обслуживать местный сайт, который компьютер будет использовать для отправки нажатия клавиш в Arduino. В зависимости от нажатия клавиши, Arduino будет вести себя в некотором роде.

Одним из способов отправки команд в Arduino является использование параметров, которые находятся в конце URL-адреса веб-сайта, который служит Arduino. Эти параметры можно прочитать в Arduino. У меня нет проблем с этим.

На платформе 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-адреса.

Однако я не могу понять, как вывести значение кода ключа для объекта, а затем отправить страницу, чтобы скопировать значения в параметры 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 искал отдельные персонажи, а не список персонажей. Однако пока это действительно здорово. Я, конечно же, не прочь это реализовать.

Тем не менее, я проводил много исследований с поддержкой сокетов, как упомянуто Тимом. Это похоже на отличный путь, в Arduino Ethernet Shield используется библиотека UDP, и до сих пор моя единственная трудность заключается в настройке конца клиента. Arduino - это Сервер. Что бы ни случилось с этим, я сделаю редактирование.

+0

Ну, при отправке страницы возникнут проблемы с добавлением обработчиков событий и прослушиванием. Возможно, вы хотите совершать звонки с помощью Ajax, изображения src или iframe. – epascarello

+0

пытаясь настроить свои команды с помощью таких URL, это не самый простой способ достичь сообщения, которое вы пытаетесь достичь, я не думаю. Если ваш arduino подключен к маршрутизатору вместо того, чтобы он обслуживал веб-страницу, может быть проще создать сокет, который вы можете использовать для связи между arduino и компьютером. Это будет гораздо более простое средство для отправки сигналов, необходимых для получения требуемой в реальном времени обратной связи. – FoamyGuy

+0

Спасибо, epascarello и Тим, ваши отзывы очень ценятся. Я мало знаю об Ajax, образе src, iframe и сокет. Поэтому в течение нескольких дней у меня будет много исследований. Конечно, если я найду жизнеспособное решение по вашим темам, я обязательно сделаю редактирование и отправлю то, что я сделал. –

ответ

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 = ххх & KC = ууу)

Если вы хотите что-то действительно легкий вес, то, как около:

<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

Это очень хорошо! Я сделаю редактирование с участием некоторых из предложенного вами кода. Как только я нажимаю клавишу, он будет регистрироваться в параметрах. Я внес небольшие изменения. –