попробуй с клавишами
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>OR-WIFI-ROBOT</title>
<link rel="stylesheet" type="text/css"
href="res/main.css"/>
<script type="text/javascript">
var speed=10;
var tspeed=10;
var ent_press=0;
var lastTurn = -1;
var lastPress = -1;
var lastPos = {};
lastPos[9]=-1;
var teks=9;//текущий сервопривод
function submitUART(uartString)
{
document.getElementById('serialData').value=uartString+"\n";
document.getElementById('serialForm').submit()
};
function scrollCam(el,l)
{var el1;if(l!=undefined)
{el1=document.getElementById
(teks);el1.parentNode.scrollLeft=l;}
else
{el1=el.getElementsByTagName('div')[0];
teks=el1.id;};
};
function keyPressed(e)
{
var keynum
var keychar
var numcheck
if(window.event) // IE
{
keynum = e.keyCode
}
else if(e.which)
{
keynum = e.which
}
keychar = String.fromCharCode(keynum);
if(keychar == "w" || keychar == "ц" ||
keychar == "W" || keychar == "Ц")
submitUART("DrvLR=100,100");
if(keychar == "a" || keychar == "ф" ||
keychar == "A" || keychar == "Ф")
submitUART("DrvLR=-100,100");
if(keychar == "s" || keychar == "ы" ||
keychar == "S" || keychar == "Ы")
submitUART("DrvLR=-100,-100");
if(keychar == "d" || keychar == "в" ||
keychar == "D" || keychar == "В")
submitUART("DrvLR=100,-100");
return true;
};
function keyUp(e)
{
var keynum
var keychar
var numcheck
if(window.event) // IE
{
keynum = e.keyCode
}
else if(e.which)
{
keynum = e.which
};
if((keynum==37)||(keynum==39)||
(keynum==38)||(keynum==40))
{ent_press=0;return};
keychar = String.fromCharCode(keynum);
if(keychar == "w" || keychar == "ц" ||
keychar == "W" || keychar == "Ц")
submitUART("DrvLR=0,0");
if(keychar == "a" || keychar == "ф" ||
keychar == "A" || keychar == "Ф")
submitUART("DrvLR=0,0");
if(keychar == "s" || keychar == "ы" ||
keychar == "S" || keychar == "Ы")
submitUART("DrvLR=0,0");
if(keychar == "d" || keychar == "в" ||
keychar == "D" || keychar == "В")
submitUART("DrvLR=0,0");
return true;
};
//--
function keyDown(e)
{e.preventDefault();
var keynum
var keychar
var numcheck
if(window.event) // IE
{
keynum = e.keyCode
}
else if(e.which)
{
keynum = e.which
};
if(keynum==37)
{ent_press=1;teks=9;tspeed=-speed};
if(keynum==39)
{ent_press=1;teks=9;tspeed=speed};
if(keynum==38)
{ent_press=1;teks=2;tspeed=speed};
if(keynum==40)
{ent_press=1;teks=2;tspeed=-speed};
return true;
};
//---
window.setInterval(
function(){var pos;
if(ent_press){ pos =
document.getElementById(teks).parentNode.scrollLeft;
pos+=tspeed;document.getElementById
(teks).parentNode.scrollLeft=pos;};
pos = document.getElementById
(teks).parentNode.scrollLeft;
if(lastPos[teks]!=pos){
submitUART("#"+teks+" P" +(pos + 700));
lastPos[teks]=pos;
};
},100
);
</script>
</head>
<body onKeyPress="return keyPressed
(event)" onKeyUp="keyUp(event)"
onkeydown="keyDown(event)">
<pre class="banner">
**************************************
************
**************************************
****
* ____ ____ __ __ _ *
* / __ \____ ___ ____ / __ \____ / /_
____ / /_(_)__________ _______ __ *
* / / / / __ \/ _ \/ __ \______/ /_/ /
__ \/ __ \/ __ \/ __/ // ___/ ___/ /
___/ / / / *
* / /_/ / /_/ / __/ / / /_____/ _, _/
/_/ / /_/ / /_/ / /_/ // /__(__ )_ / /
/ /_/ / *
* \____/ .___/\___/_/ /_/ /_/ |_|
\____/_.___/\____/\__/_/ \___/____/
(_)_/ \__,_/ *
* /_/ *
* *
**************************************
************
**************************************
****
</pre>
<table>
<tr>
<td>
<script type="text/javascript">
document.write("<img alt='RobotEye'
class='bot-eye' src='http://" +
document.location.host + ":8080/?
action=stream'/>")
</script>
<br/>
Camera control:<br>
<button type="button"
onclick="scrollCam(1,0)">Left</button>
<button type="button"
onclick="scrollCam
(1,800)">Center</button>
<button type="button"
onclick="scrollCam
(1,1600)">Right</button>
<br/>
</td>
</tr>
<tr>
<td>
<div style="width:320px;height:
20px;margin-top: 15px;overflow-x:
scroll;display: inline-block;"
onscroll="scrollCam(this)">
<div id="9"
style="width:1920px;height:
1px;display:block;" ></div>
</div>
</td>
</tr>
<tr>
<td>
<div style="width:320px;height:
20px;margin-top: 15px;overflow-x:
scroll;display: inline-block;"
onscroll="scrollCam(this)">
<div id="2"
style="width:1920px;height:
1px;display:block;" ></div>
</td>
</tr>
<tr>
<td>
<hr style="width: 240px;margin-top:
15px">
Chassis control:<br>
<button type="button"
onclick="submitUART
('DrvLR=100,100')">Forward</button><br
>
<button type="button"
onclick="submitUART('DrvLR=-
100,100')">Left</button>
<button type="button"
onclick="submitUART
('DrvLR=0,0')">STOP</button>
<button type="button"
onclick="submitUART('DrvLR=100,-
100')">Right</button><br>
<button type="button"
onclick="submitUART('DrvLR=-100,-
100')">Backward</button>
</td>
</tr>
<tr>
<td>
<hr style="width: 240px;margin-top: 15px">
<form id="serialForm" action="/cgi-bin/serial.cgi" method="POST"
target="hidden">
<label>Serial data:<br/>
<textarea id="serialData"
name="SERIAL_DATA" rows="2"
cols="40">TEST SERIAL</textarea>
</label><br/>
<input type="submit" value="Send">
</form>
</td>
</tr>
</table>
<hr/>
<iframe name="hidden"
src="/nothing.html" style="width:
1px;height: 1px;visibility: hidden"></iframe>
<a href="admin/index.html">Robot administration</a>
</body>
</html>
. Пока достаточно двух ползунков для камеры.
