ESP8266和ESP32物联网智能小车开发系列文章目录
第一篇：最简单DIY基于ESP8266的物联网智能小车①（webserver服务器网页简单遥控版）
第二篇：最简单DIY基于ESP8266的物联网智能小车②（webserver服务器网页高级遥控版）
文章目录
前言
daodanjishui物联网核心原创技术之最简单DIY基于ESP8266的物联网智能小车②（webserver服务器网页高级遥控版）。
市面上有各种开源ESP8266智能小车出售，但是有复杂的有简单的，如果想快速入门用专业的物联网技术制作的小成本高性价比的ESP8266智能小车，这个方案会给你一个快捷高效的方案。
一、最简单DIY基于ESP8266的物联网智能小车②（webserver服务器网页高级遥控版）是什么？
先看设计演示视频：https://v.youku.com/v_show/id_XNTE2MTk1NTg3Mg==.html
最简单DIY基于ESP8266的物联网智能小车②
距离我上次发布STC98C52RC的蓝牙遥控智能小车和STM32F103C8T6蓝牙遥控智能小车大概有一个月多了，今年的夏天额外炎热，笔记本电脑不断听歌编码火力全开，死机好几次，终于换来一个CSDN好的开头：上榜了！
记得当时我还是用手机蓝牙调试助手来进行遥控小车，想想都有点搞笑。这次打算做一个ESP8266和ESP32智能小车的系列专题，跟大家一起玩玩智能小车，涉及远程控制，高速图传，嵌入式图像处理，云计算图像处理，集群控制，更新大家对智能小车的认知。大部分编码我已经完成了，就差整理开源代码和掏几万块编写教材了，小车的主题是围绕钢铁侠展开的，daodanjishui也是钢铁侠电影系列的影迷，也梦想某天能成为钢铁侠那样有科学技术又有money的土豪，但是现实总是很残酷啊，连代码都没有推广出去，就算是出书了也没人买，所以免费开源啦！
这次的智能小车项目中，换了一个智能小车方案，采用国产芯片ESP8266核心板ESP-12F实现智能小车，ESP8266开发板介绍：mini D1 wifi ESP-12F N ，读者可以根据型号去查询。ESP8266]开启你的物联网小车之旅吧！主控芯片采用国产ESP8266，支持国产从我做起，反对霸权主义，反对技术封锁，反对芯片垄断。现在很多物联网小玩具或者智能电子控制小设备都使用了这个芯片，当我第一次接触这个芯片的时候，我就迷上了这个芯片不可自拔，所以所以一直围绕这个芯片编码都没有停过。
功能描述：现在小车升级到第二版，大概花了一天时间编写代码，有前期基础，编写代码显得很流畅。这次小车用网页来遥控，增加了两个技术：AJAX和一个崭新的嵌入式网页按钮定义方式。电脑端和手机端同时控制，实现钢铁侠电影中，托尼斯塔克和小辣椒共同操控贾维斯机器人的效果！daodanjishui是钢铁侠的忠实粉丝！下面是Arduino写的原创开源代码截图：
硬件全家福如下：
智能小车变身伸出第三条腿的智能小车如下：
小车模仿的原型是：
小车模仿效果：
智能小车肢解图：
智能小车虚拟按钮控制界面如下：
二、制作步骤
1.准备硬件
硬件与第一篇一样，主要是软件的变化，所以硬件就重复不说明了。
在文章后面会附录教程的下载地址。制作很easy！
2.搭建Arduino开发环境和链接硬件和下载代码
（1）第一步下载Arduino IDE安装，双击下一步，下一步，直到完成，建议不要中文路径。
（2）下载ESP8266安装包插件，这是最方便的，如果在Arduino里面搜索安装，你会发现很慢，特别是在这个紧张的芯片之争的关键时期下,按照这个网址去下载：https://www.arduino.cn/thread-76029-1-1.html
（3）双击（2）下载的三个包中的一个，我双击安装的是第二个包，重启Arduino就可以安装好了。
安装好之后你会发现开发板选项多了ESP8266这类的开发板。实在不行就找其他教程再试试了，没有必要一步一步教这个开发环境搭建。
（4）根据下面的原理图来连接硬件：
（5）新建工程，准备一份AJAX的代码作为嵌入式网页，其余的代码将与第一篇代码差不多一致，不过还是要好好修改一下的。
下面是第一篇的网页设计代码：
String index_html(String WiFiAddr){
return String("")+"<html> <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" /"+
"<head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">"+
"</head>"+
"<body>"+
"<h1>daodanjishui 经典物联网智能小车开源项目1</h1>"+
"<p></p> <form action=\"HandleVal\" method=\"\" name=\"\" >第一个参数是daodanjihsui，第二个参数是on或off或front或back或left或right或open或close，点击send发送控制指令给智能小车<br>"+
"<input type=\"text\" value=\"daodanjishui\" name=\"ssid\" id=\"cmd\" size=\"10\" maxlength=\"20\">"+
"<input type=\"text\" value=\"on\" name=\"password\" id=\"cmd1\" size=\"10\" maxlength=\"20\">"+
"<input type=\"submit\" value=\"send\" ><br>"+
"<h2>daodanjishui 原创经典值得期待！</h2>"+
" </form>"+
"</body>"+
"</html>";
}
下面是本篇博文的嵌入式主页：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
var xmlHttpReq;
function createXmlHttpRequest(){
if(window.XMLHttpRequest){
xmlHttpReq = new XMLHttpRequest();
}else{
xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
}
function checkCmd(cmd,val){
createXmlHttpRequest();
xmlHttpReq.onreadystatechange=handle;
var url="HandleVal?ssid="+cmd+"&password="+val+"&nocathe="+new Date().getTime();
xmlHttpReq.open("get",url,true);
xmlHttpReq.send(null);
}
function handle(){
if(xmlHttpReq.readyState==4){
if(xmlHttpReq.status==200){
var res = xmlHttpReq.responseText;
var result = document.getElementById("result");
result.innerHTML = "<font color=red>"+res+"</font>";
}
}
}
</script>
</head>
<body>
<h1>daodanjishui 经典物联网智能小车开源项目2</h1>
<form action="" method="" name="">第一个参数是daodanjihsui，第二个参数是on或off或front或back或left或right或open或close，点击send发送控制
指令给智能小车<br>
<input type="text" value="daodanjishui" name="inputcmd" id="cmd" size="10" maxlength="20">
<input type="text" value="off" name="inputcmd1" id="cmd1" size="10" maxlength="20">
<input type="button" value="send" onclick="checkCmd(this.form.inputcmd.value,this.form.inputcmd1.value)"><br>
控制反馈:<span id="result"></span><br>
<tr>
<td><input type="button" style="height:43px; width:43px" value="open" onclick="checkCmd('daodanjishui','open')"/></td>
<td><input type="button" style="height:43px;width:43px;" value="close" onclick="checkCmd('daodanjishui','close')"/></td>
<td><input type="button" style="height:43px; width:43px" value="on" onclick="checkCmd('daodanjishui','on')"/></td>
<td><input type="button" style="height:43px; width:43px" value="off" onclick="checkCmd('daodanjishui','off')"/></td>
</tr>
<br>
<br>
<table>
<tr>
<td colspan="3" align="middle">
<input type="button" style="height:43px; width:43px" value="up" onclick="checkCmd('daodanjishui','front')" />
</td>
</tr>
<tr>
<td><input type="button" style="height:43px; width:43px" value="left" onclick="checkCmd('daodanjishui','left')"/></td>
<td><input type="button" style="height:43px;width:43px;" value="on" onclick="checkCmd('daodanjishui','on')"/></td>
<td><input type="button" style="height:43px; width:43px" value="right" onclick="checkCmd('daodanjishui','right')"/></td>
</tr>
<tr><td colspan="3" align="middle">
<input type="button" style="height:43px;width:43px;" value="down" onclick="checkCmd('daodanjishui','back')"/></td>
</tr>
</table>
<h2>daodanjishui 原创经典值得期待！</h2>
</form>
</body>
</html>
剩下的工作就是组合代码，将新的嵌入式主页整合到我第一篇博文的主页，读者可以下载我上一篇博文的代码：https://blog.csdn.net/niruxi0401/article/details/120019039 如果组合成功，那么对编程能力肯定有提升的。如果不想麻烦
或者到本文最后面获取工程源码下载链接。有了这个技术，我们在网页操作小车的时候就不会因为触发按键之后发生网页跳转，并且增加了控制反馈显示在网页上，还有就是定义嵌入式网页更加方便，原来是用字符串拼接的方式定义网页的，修改网页相当麻烦，现在可以直接修改网页，相信下载我第一个版本代码的读者深有体检。
（6）安装工程运行需要的库：#include <DNSServer.h>
#include <Servo.h> ，因为用到舵机和DNS，所以要安装库，否则可能会出现编译出错。安装库有两个办法，一种是直接在Arduino里面搜索在线安装，一种是在网上下载好再导入Arduino
（7）配置开发板和串口信息
注意选择的是什么型号的开发板型号还有你自己开发板连上电脑之后是占用的是哪个串口号
（8）编译下载程序。（这个部分不懂的读者可以去百度看看啦，最简单的过程了）
3.智能小车与智能彩灯有什么关系？
智能小车专栏与智能彩灯专栏都采用了ESP8266来设计，都是基于Arduino IDE开发的，不是原来那种用AT固件通过另外外加单片机用过AT指令去控制ESP8266去实现网络操作（参考我：ESP8266 AT固件物联网控制 专栏），这次是用SDK的方式进行的开发，用到各种库和各种函数，最为经典的就是WebServer库了，这是一个嵌入式服务器库，单片机成为一个嵌入式网关。代码量不小的，几天时间是不可能完全掌握这个代码的构造的，但是作为制作电子设计，我们会使用其函数实现其功能即可。如果要深究C语言技术，我建议读者看我：STM32库函数开发专栏肯定能行得通的。后者期待我准备要出的物联网智能路由器二次开发专栏，确保读者有鱼又有熊掌。
代码是高度匹配原创开源的代码，不亲自编辑和编程是不可能达到这个效果的，不是那种什么毕设论文实验报告的电路方案，纯粹就是一个技术开发开源原创作品。代码力求简单、易读、具有扩展性和继承性。这些优点我这个方案都具备了。
三、运行与调试
1.准备硬件
2.根据下载的原理图接线
3.根据下载的源码和原理图指南下载程序到ESP8266
4.上电
5．用笔记本电脑连上ESP8266产生的WIFI热点DNSServer example，这个ESP8266开启的是AP热点模式，说白就是建立了一个名字为DNSServer example的热点，访问的IP地址是192.168.4.1，所以用手机或者笔记本电脑的浏览器访问之后就能访问小车的主页。在主页里面输入提示的指令就可以控制小车做动作。
6.在笔记本电脑的浏览器网址输入区输入192.168.4.1
7.在网页根据指令提示控制小车，或者用手机浏览器控制小车，说明一下：open就是打开舵机支架，close就是关闭舵机支架，on是开灯
Off是关灯 front是前进 back是后退 left是左转 right是右转
8.在CSDN下载的TestHttpPost.exe软件，打开，输入地址如下，也可以控制小车：
看到小车开灯，和返回的ok响应，其他操作按照网页的提示进行
9.其他操作请看博文介绍和视频演示。
总结
通过上面运行与调试状态良好，程序和硬件达到博文提出的要求，到此为止。在第一版的功能的基础上增加了：在不刷新网页的情况下能实现异步提交get请求并且实时获取单片机嵌入式服务器的响应显示在主页上用红色字符串显示出来。单单这个功能就可以实现网页wifi遥控器了，另外介绍了一个简单的嵌入式网页按钮的布局技术，用最小的体积部署可观的按键数量，读者还可以学会如何定义一个网页按键绑定事件去触发网络请求。这些知识，学几天HTML前端开发技术是不可能做出来的！不好好琢磨一下是学不到真正技术的，这个项目要下载到源码还是比较麻烦的。
如果是安装开发环境出了问题，那么请大家仔细上网搜寻解决问题的方案；如果是怀疑我代码写错了，那么是不可能的，代码我自己写，自己硬件测试。如果有更多的需求请私下找我交流，我缺的不是技术，而是一个奇特的想法或者创意······
最后附上本博文代码下载地址：https://gf.bilibili.com/item/detail/1107805114
631
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
