一个HTML界面的设计，对机器人的控制。
下载interface.rar和提取所有文件到指定的文件夹。然后打开Firefox。一个文本框的形式使用，界面进入ESP模块的IP地址和视频/音频服务器（从Android IP摄像头应用程序）。有一个测试，但是，这将使机器人旋转直到另一接收到命令。键盘箭头键用于移动机器人前进或后退，并向左或向右旋转。
Android智能手机是用来播放视频和音频从机器人控制界面。你会发现在谷歌Play商店应用程序（https://play.google.com/store/apps/details？ID = com.pas.webcam）。
安装和移动到下一个步骤。
HTML代码解释：
HTML界面有两部：一个音频和视频（从Android IP摄像头服务器）和一个命令。
音频和视频部门有一个文本框的按钮形式。这是作为指定的网络服务器的IP地址和加载它的输入。它配备了一个标准的IP地址（192.168.0.5），但使用可以进入一个不同的IP。视频和音频都装在物体下方的文本框。
<div id="video_and_audio" style="position: absolute; top: 50px; width:25%">
<form name="myform" action="" method="GET">
IP Webcam (IP):
<input type="text" name="inputbox" value="192.168.0.5">
<input type="button" name="button1" value="Load" onClick="readUrlAV(this.form)">
</form>
<object id="video" type="text/html" data="http://192.168.0.5:8080/video"
style="position: absolute; width:100%; height:480px;">
</object>
<object id="audio" type="text/html" data="http://192.168.0.5:8080/audio.opus"
style="position: absolute; width:388px; height:30px; left:8px; top:425px;">
</object>
</div>
其他部门的另一种形式的智慧的一个文本框，以便用户可以通知它ESP8266 IP地址。
<divid=“命令”style=“位置：绝对；顶部：50px；左：35%；宽度：65%”>
<表格名称=“myform2”行动=“=”“>方法
Arduino的IP地址：
<输入类型“文本”name=“InputBox”价值=“192.168.0.5”>
<输入=“按钮”name=“按钮”value=“测试”onclick=“testararduino（的形式）”>
<形式>
<img src=“图像/键盘。png”style=“margin-left: 100px；边距：50px；“>
< h4 >按住键盘箭头键移动机器人< / H4 >
< / DIV
JavaScript是用来处理界面和发送数据到Arduino。这些脚本在不同的文件编码，和HTML标题添加。
<head>
<meta http equiv =“内容类型”content=“text/html；字符集= UTF-8”/>
<meta name=“作者”内容=“Igor Fonseca Albuquerque”>
<标题>标题> < /控制接口
<脚本src=“jQuery JS”> < /脚本>
<脚本src=“myscript .js”> < /脚本/头> < >
JavaScript的解释：
一个函数（readurlav）用于读取HTML形式的IP地址和加载在“视频”和“音频”对象。
功能readurlav（形式）{
textvar =形式。InputBox。价值；
videovar =“http：/ /”+ textvar +”：8080 /视频”；
audiovar =“http：/ /”+ textvar +”：8080 /音频。作品”；
文件。getElementById（“视频”）。setAttribute（数据，videovar）；
文件。getElementById（“声音”）。setAttribute（数据'，
脚本读取键盘定期，等着用户按下任意键。如果用户按下任意键（左=“37”上=“38”，右为“39”或“下”= 40），它发送一个命令（“CM1”到“下面”）对于一个给定的IP地址。注意，有一个锁存功能，从而避免了被一遍又一遍地重复同样的命令。数据将被转移时，按下键。
var latch = false;
document.onkeydown = checkKeyDown;
function checkKeyDown(e) {
e = e || window.event;
if (e.keyCode == '38') {
// up arrow
if (latch == false) {
TextVar = myform2.inputbox.value;
ArduinoVar = "http://" + TextVar + ":80";
$.get( ArduinoVar, { "cm1": 1000 }) ;
{Connection: close};
latch = true;
}
}
else if (e.keyCode == '40') {
// down arrow
if (latch == false) {
TextVar = myform2.inputbox.value;
ArduinoVar = "http://" + TextVar + ":80";
$.get( ArduinoVar, { "cm2": 1000 }) ;
{Connection: close};
latch = true;
}
}
else if (e.keyCode == '37') {
// left arrow
if (latch == false) {
TextVar = myform2.inputbox.value;
ArduinoVar = "http://" + TextVar + ":80";
$.get( ArduinoVar, { "cm3": 1000 }) ;
{Connection: close};
latch = true;
}
}
else if (e.keyCode == '39') {
// right arrow
if (latch == false) {
TextVar = myform2.inputbox.value;
ArduinoVar = "http://" + TextVar + ":80";
$.get( ArduinoVar, { "cm4"：1000 }）；
{连接：关闭}；
闩=真；
}
当任何箭头键释放，无为的执行函数时，它发送命令“CM5”（停机），和复位锁存器，允许接口发送不同的命令。
document.onkeyup = checkkeyup；
功能checkkeyup（e）{
E = E | |窗口。事件；
（（如果能= =“38”）| |（妻子= =“40”）| |（妻子= =“37”）| |（妻子= =“39”））{
setTimeout（什么也不做，200）；} }
功能donothing() {
textvar = myform2。InputBox。价值；
arduinovar =“http：/ /”+ textvar +“：80”；
美元。得到（arduinovar，{“CM5”：1000 }）；
{连接：关闭
