D1开发版写入HTML,从零开始——wemos d1板例程应用（1）

本帖最后由 xp2xp 于 2018-1-13 15:49 编辑

从零开始——wemos d1板例程应用(1)

自从上篇http://www.arduino.cn/thread-74852-1-4.html发文以后，沉静了小一个月，实在是年底太忙，不如我贴一点以前练习写过的东西，给我的好哥们去看看吧。

还是接着那块ESP-8266的arduino板来说，装好IDE之后，总会拿个例程来试试吧，比如：ESP8266WiFi/WiFiWebServer。详细例程我就不贴了，大意是通过pinMode(2, OUTPUT)后，设置digitalWrite(2, 0)或者digitalWrite(2, 1)点亮或熄灭ESP8266上的LED，当然这个不到100行例程非常容易理解，但有些人要问了wemos板上自带了LED怎么没有用了呢，稍作修改成pinMode(14, OUTPUT)就可以了，当然ESP-8266芯片上的LED采用低电平点亮，而板载的LED采用高电平点亮。

这个例程这么简单，难道还能玩出花来么？

当然可以啊，我们知道至少有两个方面来改进这个例程：

1、例程点灯太单一；

2、例程里面的web页面太丑。

我们先从点灯太单一说起，如果没有外接传感器，又希望能够实时变化，那么只能考虑从web(或者串口)输入信号来操作点灯，用莫尔斯电码的表现形式就不错啊。短的滴，长的嗒，写出来是点点划划，用灯的表现来看就是闪闪停停。一般来说呢，如果以滴为时间单位t，亮灯为信号，那么嗒的时长为3t，一个字母之中灯熄灭的时间为1t，字母和字母之间熄灭的时间为3t，单词和单词之间为7t。

e824b899a9014c08f6ae6650017b02087af4f4aa.jpg (7.27 KB, 下载次数: 55)

2018-1-13 15:40 上传

每个符号和数字也有对应的滴嗒表示方法。即使中文也可以表示哦(参考http://www.atool.org/morse.php，虽然我这里没有做，如果大家有兴趣，可以自行尝试)。

再说第二点，web显示难看，这个么，我就不多说了，工科狗们毕竟不是谁都有一双郁纪(沙耶之歌男主角)的眼睛，对我来说，哪怕是404都比那个text("HTTP/1.1 200 OK\r\nContent-Type:text/html\r\n\r\n\r\n\r\nGPIO is now "+(val)?"high":"low" + "\n")的感官要好。

好吧，多的不说，上界面：

微信图片_20180109020640.jpg (129.91 KB, 下载次数: 58)

2018-1-13 15:41 上传

可以通过key、number、mark、hide切换键盘状态；显示的“This is the CapsLock LED Statue”是通过ajax显示ESP-8266上指示灯的状态，通过软键盘输入文字后，点击Submit，那么文字可以在板载的LED上通过morse code显示出来。当然这个html只是涂鸦之作，更多的优化还等着诸位读者来实施呢。顺便提醒一句，大家如果也是用记事本写html，可以考虑使用网页压缩(http://tool.oschina.net/jscompress/)来减小网页体积，不然很可能就会打不开网页，我用wireshark工具捕获了下报文，发现类似图三，根本没有传完，连接就自动断开了，具体的原因我还没找到。

原文件.png (73.17 KB, 下载次数: 57)

2018-1-13 15:40 上传

好吧，再给大家另外一个提示，可以用gzip来写web页面(我已经做了相关接口，大家看我的代码)。

主程序(基本就是WiFiWebServer的例程)：

网页定义文件：

(代码贴起来真奇怪，打包上传吧)

newWiFiWebServer.rar

(4.48 KB, 下载次数: 158)

2018-1-13 15:46 上传

点击文件名下载附件