Wi-Fi控制FPV机器人（Arduino，ESP8266和直流电机）(3)_haoDIY

widc.ino

下载

步骤8：基于Web的控制接口

一个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 }）；
 {连接：关闭

interface.rar
下载

步骤9：使用

当Arduino重新启动时，它会尝试连接你的Wi-Fi网络自动。使用串口监控检查是否连接成功，并获得其IP是由路由器分配给你的esp-8266。在浏览器中打开html文件（Firefox），在文本框中告知这个IP地址。

你也可能用户等手段，找出你的路由器的IP地址分配给您的设备。断开Arduino Uno从你的电脑连接到电源。等待它再次连接。在连接到机器人的智能手机的推出，IP摄像头应用程序。型在你的控制接口的视频/音频IP并连接到服务器，你就可以走了。你可能需要减少应用程序中的视频分辨率以减少传输过程中的延迟之间。单击并按住你的键盘箭头按钮旋转机器人移动或前进/后退和乐趣探索你的环境。

注意到机器人运行在开环。这样，它向前移动使它很难。马达，定位差异小，等会造成累积偏差。

机器人开始移动，当它接收到一个给定的命令（“CM1”到“CM4”），并保持，直到接收到命令状态不同（“CM1”到“里”）。有时ESP8266失去一些信息，这可能会造成一些麻烦。如果，例如，一个“朋友”的命令了，机器人将保持移动甚至在任何箭头键被释放。我还在处理这个问题。随意更改命令进行解释，避免这种问题的方法。

(责任编辑：admin)

制作爬墙机器人—萌版蜘蛛侠	用网络摄像头快速搭建WIFI智能机器人小车	鼠标垫改造的机器人	[普及贴] 作为科技迷，你必须要了解的乐	（螃蟹王国）新四足太阳能机器人—22
(螃蟹王国）竞赛冠军-吊绳攀爬机器人—33	(螃蟹王国）就靠它high你的翻暑假—同步	一些简单的机器人制作教程1——暴走的臭	DIY甲壳虫机器人	360消防卫士（自动灭火机器人）【周最佳

搜索

热门标签:

Wi-Fi控制FPV机器人（Arduino，ESP8266和直流电机）(3)

步骤8：基于Web的控制接口

步骤9：使用