먼저 전반적인 목표를 설명한 다음 질문 자체를 설명합니다.HTML/Javascript : 키보드 스트로크를 URL 매개 변수로 출력
전체 목표 :
가 라우터에 연결되어있는 아두 이노 보드에 명령을 보낼 수 있습니다. 컴퓨터가 wifi를 통해 라우터에 연결됩니다. Arduino는 컴퓨터가 Arduino에 주요 프레스를 보내는 데 사용할 로컬 웹 사이트를 제공합니다. 키 누름에 따라 Arduino는 어떤 방식 으로든 작동합니다.
Arduino에 명령을 보내는 한 가지 방법은 Arduino가 사용하는 웹 사이트의 URL 끝에있는 매개 변수를 사용하는 것입니다. Arduino는 이러한 매개 변수를 읽을 수 있습니다. 나는 이것에 아무런 문제가 없다.
아두 이노는 코딩 웹 사이트를 제공 할 수있는 자바 스크립트/HTML/CSS 등
질문 : 일주일 동안 자바 스크립트에 있었다
; 하지만 지금까지 아래 코드를 가지고 있습니다 :
<!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의 매개 변수를 실시간으로 제어 할 수 있습니까?
고맙습니다. 모든 응답은 크게 감사하겠습니다.
편집 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에 대한 매개 변수에 문자를 0.5 초 후에로드합니다 (setTimeout()을 사용하여 응답 속도를 향상시킬 수 있습니다). 키는 다른 키를 누를 때까지 매개 변수에 머물러 있습니다.
저는 거지가 선택자가 될 수 없다는 것을 알고 있습니다. 그러나 저는이 동작이 너무 오랫동안 수행되어 "키 비디오 스타일"을 수행하기를 원했고, 키를 누르면 그 동작은 내가 키를 놓는 순간 멈 춥니 다. 이 경우 키를 누르고 있으면 텍스트 상자에 글자가 채워지고 제출됩니다. Arduino가 문자 목록이 아닌 개별 문자를 찾길 원하기 때문에이 방법은 효과가 없습니다. 그러나 이것은 지금까지 정말 훌륭합니다. 나는 확실히 이것을 구현하는 것을 꺼려하지 않을 것입니다.
그러나 Tim이 언급 한 것처럼 소켓 통신으로 많은 연구를 해오 고 있습니다. 이것은 Arduino Ethernet Shield가 UDP 라이브러리를 사용하는 가장 좋은 방법 인 것 같습니다. 지금까지는 클라이언트 측에서 설정이 어려웠습니다. Arduino는 서버입니다. 이 일이 생기면 나는 편집을 할 것입니다.
페이지를 잘 제출하면 이벤트 핸들러를 추가하고 청취하는 데 문제가 있습니다. Y 당신은 아마 Ajax, 이미지 src 또는 iframe으로 전화를 걸고 싶어한다. – epascarello
그런 URL로 명령을 설정하려고 시도하는 것이 내가 달성하려고하는 커뮤니케이션을 달성하는 가장 쉬운 방법은 아니라고 생각합니다. arduino가 웹 페이지를 제공하는 대신 라우터에 연결되어 있다면 arduino와 컴퓨터 간의 통신에 사용할 수있는 소켓을 만드는 것이 더 쉽습니다. 그러면 실시간 피드백을 얻기 위해 필요한 신호를 보내는 훨씬 간단한 방법이 될 것입니다. – FoamyGuy
epascarello와 Tim 감사합니다, 당신의 답변을 크게 주시면 감사하겠습니다. Ajax, 이미지 src, iframe 및 소켓 통신에 대해서는 거의 알지 못합니다. 그래서 며칠 동안, 나는 많은 연구를해야 할 것입니다. 내가 주제를 통해 실행 가능한 솔루션을 찾으면 필자는 편집 한 후 내가 한 일을 게시 할 것입니다. –