Arduino网页按钮遥控小车

网页按钮遥控小车
在学习这段之前,请读者看一下7.3节的第3个程序,里面讲到了用网页中的一个按钮来控制一个LED灯亮灭。在那个案例的基础上,我们在网页上建立了5个按钮,分别是Forward、Stop、Left、Right和Backward。通过这5个按钮来控制小车的各个方向上的动作。其中用的程序语句和之前的案例是差不多的。对于新手,主要的难点是在网页上建立的按钮,需要补充HTML + CSS + JavaScript的知识。要做出一个赏心悦目的网页还是要好好学习一下的。一旦读者有了一定的网页制作基础,再反过来做这个就会易如反掌,如鱼得水。网页的制作的效果如下图8-11。
Arduino网页按钮遥控小车_第1张图片 图8-11

图8-11的左上角的192.168.100.105的地址是如何得到的呢?在正确的程序上传到控制器NodeMCU后,通过串口监视器,我们可以得到这个控制器的地址。如果你的程序运行正确的话,你只要在网页的地址栏中输入这个地址后,回车,就会看到图8-11的所示。

下面我们讲一下整个接线情况,如下表8-12.

Arduino网页按钮遥控小车_第2张图片
表8-12
根据作者的经验,杜邦线一定要多品种的买点,公-公,母-母,公-母,主要是因为nodeMCU和Arduino板子的插孔不一样。Arduino的针脚是母插孔,而NodeMCU的针脚是公的。而且杜邦线的长度可以多买几种,如10mm,20mm,30mm,用的最多的以10mm和20mm居多些。同时各种颜色的LED灯、大小面包板和不同的按钮也可以多采购些,特别是LED灯质量要好些,不然对于质量不过关的LED灯,使用了一段时间它会损坏
具体程序如下:
/等程序上传后,在串口监视器中会打印出nodeMCU地址, 在网页地址中输入:192.168.100.105
就会看到你想要按钮效果
/
#include
const char *ssid = “xxxxxxx”; //在此输入你家里或办公室的WiFi用户名
const char *password = “xxxxxxx”; //在此输入你家里或办公室的WiFi密码
WiFiServer server(80); // 建立ESP8266WebServer的服务,对象名为: server,括号中的数值80是网络服务器响应http请求的端口号
String readString = “”; //建立一个字符串对象用来接收存放来自客户的数据
//响应头
String responseHeaders =
String(“”) +
“HTTP/1.1 200 OK\r\n” +
“Content-Type: text/html\r\n” +
“Connection: close\r\n” +
“\r\n”;
//网页, 读者自行补充HTML + CSS + JavaScript的知识,需要在每一行的前面加上“,后面加上”+
String myhtmlPage =
String(“”) +
“” +
“” +
“ESP8266 Web Server Test” + //定义网页名

你可能感兴趣的:(经验分享)