好，标题关键词都提到了，我觉得很精准了。

先上个效果。

#目的

想做一个摆在桌上可以显示照片的mini屏幕。也就是一个电子相册。

想法很简单，esp8266+TFT屏幕（SSD1283驱动）

#设计思路

最初我的想法是电脑把图片发送到esp8266上去，然后esp8266在收到图片后更新。但网上众多教程都讲的是把图片接收到sd卡里面。在浏览了很多大佬的教程后发现自己把tcpClient给学会了。于是我的思路就变成了让esp8266主动去向服务器请求图片，然后把图片显示出来，要换图片就直接替换服务器上的图片。

1·ArduinoIED和ESP8266

到官网下载安装Arduino，在首选项里可以设置中文。

要让arduinoIDE可以给ESP8266烧程序（这一步卡了很久，因为没梯子，就一直下载失败。）

离线安装的工具的教程：

（感谢！！！！！！！！！！！)

2·ESP8266连接到wifi

首先要引入ESP8266WiFi.h，定义一个连接wifi的函数。

3·然后要点亮屏幕

这里要用到lcdwiki的库，在github上，（它的官网上树莓派的教程很详细，但arduino的实在是太少了，（废话了一大堆就只是安装了给IDE））https://github.com/lcdwiki

下载这两个仓库，解压放到“文档\Arduino\libraries”里面

（注意打开看一下，有的电脑解压后里面重了一层文件夹，要拿出来。）

然后是接线，这里我没有搞懂sck和sda为什么一定要接D7和D5...也不知道能不能修改（它中间空了一个让我看着特难受。。。）

vcc和GND直接对应（vcc有的板子上写的vin或者v5）。

LED，A0/DC，RST/REST，CS都是自己定义的

还有一点我有点迷惑，官方示例里的DC都写的CD，（我不理解？）

这里的颜色定义有点意思，等会儿转换图片的时候有点麻烦（当然也可以不麻烦。）

这里的颜色要用RGB565表示，只是一种颜色表示方式，涵盖人眼能识别的绝大对数颜色了。我们常见 的颜色是RGB（255，0，0）这种，python中常用的CV2就是这种不过有点不同的是CV2是倒着的BGR，也就是红色通道和蓝色通道是反的，处理时需要转换。

那如何把RGB（255，0，0）这种给写成RGB565呢？

在上面的代码里红色被写成了0xF800，这里其实是16进制的表示，用十进制表示就是63488

这里RGB565其实不一定要写成16进制，十进制写进去屏幕也能正确显示颜色。

这RGB565中的“565”其实就是分别对应R，G，B三通道的位数，二进制下的位数画个图来表示吧，以红色为例。

就是红色通道和蓝色通道舍去3位，绿色通道舍去2位。

后面会写一给python的工具来实现图片的转换。

4·让ESP8266向服务器请求内容。

然后就是要让esp8266主动去访问服务器。我用tcpclient而不用httpclient是因为我不知道httpclient如何分段地读取服务器发来的内容，tcp这个库可以readStringUntill来指定读到哪里，如果用http那个会一次性把图片的全部内容读到一个String里面，而这个String是必然会被撑爆的。现在先实现请求一段文字然后显示出来。写一个函数来访问服务器：

然后是电脑上要配置一个http的服务，为了方便测试，使用最简单粗暴的python的http.server。

这个方法还可以用来在内网传大文件，可惜不能传文件夹，只能打包后传。

首先要安装python.................（略）

然后随便选一个要用来分享的文件夹，打开，在地址栏输入cmd（linux就是cd到那个文件夹），然后输入：

这里的80是指监听80端口。（linux的有些版本的软件包管理很怪，必须把版本带上，要输入python3或者python3.7）

现在在浏览器输入自己电脑的ip地址或者127.0.0.1，就可以看到这个文件夹已经被罗列出来了。但上面代码中我的请求头是GET /，就会得到这个页面，这肯定是不行的，于是就要在这个文件夹里新建一个index.html,这样http。server就会默认地把这个文件内的内容发送出去。

新建一个index.html，里面写上几个字（英文），然后保存，再访问的时候，浏览器上就出现了刚才写的那几个字了，这也就达到了我想让服务器把指定内容返回ESP8266的目的。

就是如此如此，这般这般。

注意，我是另存为index.html,因为觉得展示后缀名看着丑就坚持没显示，就只能另存了...

可以看到，在电脑的index.html中输入的文字成功的被ESP8266读取并显示到了屏幕上，虽然它在中途停顿了一下，gif是加速了的，实际上等了有5秒，最后一行才显示出来。经过反复测试，如果写很多行，只有最后一行会卡一下，这让我百思不得其解....

还有就是前面会有一堆http的响应结构，要排除掉，可以设置一个x=-18，额..或者更多，然后再循环的时候加成正数后才开始向屏幕打印内容。

5·展示图片！！！

重点来了，这个图片是必须要转换的，为了方便，我的想法是直接把图片的信息写到index.html里面，以后要弄更多图片的时候再更改请求头或者直接写一个替换index.html的脚本来实现图片切换。

这个转换图片真的是有那么些.......

网上有转换图片的网站，但都有一个缺陷就是转换后的结果是一个xxx.c，是直接包含到程序里，是不能改变的，而想要把变量通过http传过去有有点太麻烦了。而且一个变量一个变量的传会导致图片加载就特别慢。

最重要的是，那种把图片写成一个数组，然后一次性显示图片的函数，我是真的不会写啊.....(wo shi zai shi tai ben le)...

于是我想到的办法是，先规定好图片只能是什么个尺寸，把图片的每一个像素的颜色写成一个数字，数字之间用空格隔开，ESP8266读取的时候以空格为分割符，把像素一个个的堆在屏幕上，图片就显示出来了。（看着效果和网上看到的那些大佬的电子相册的加载的样子有那么点像了。）

所以图片怎么转换喃？

万能的PYTHON又出现了！！！

#首先要把图片加载进去，然后缩小/放大/调整成指定大小或者裁剪，要遍历每一个像素，转换成rgb565的对应数字，然后写进index.html

emmmm....pygame的surface可以缩放，blit一个图片在里面，可以裁剪，但是这个surface对象不能遍历每一个像素。CV2可以遍历每一个像素.......

pygame》》》》加载图片，通过读取键盘指令调整图片

转换成CV2的图形》》》遍历每一个像素，》》转换为rgb565》写入文件。

✔计划通，开始！

然后就没有然后了。

自动更换和内网穿透后在公网访问什么的就以后再说啦....