好，標(biāo)題關(guān)鍵詞都提到了，我覺(jué)得很精準(zhǔn)了。

先上個(gè)效果。

#目的

想做一個(gè)擺在桌上可以顯示照片的mini屏幕。也就是一個(gè)電子相冊(cè)。

想法很簡(jiǎn)單，esp8266+TFT屏幕（SSD1283驅(qū)動(dòng)）

#設(shè)計(jì)思路

最初我的想法是電腦把圖片發(fā)送到esp8266上去，然后esp8266在收到圖片后更新。但網(wǎng)上眾多教程都講的是把圖片接收到sd卡里面。在瀏覽了很多大佬的教程后發(fā)現(xiàn)自己把tcpClient給學(xué)會(huì)了。于是我的思路就變成了讓esp8266主動(dòng)去向服務(wù)器請(qǐng)求圖片，然后把圖片顯示出來(lái)，要換圖片就直接替換服務(wù)器上的圖片。

1·ArduinoIED和ESP8266

到官網(wǎng)下載安裝Arduino，在首選項(xiàng)里可以設(shè)置中文。

要讓arduinoIDE可以給ESP8266燒程序（這一步卡了很久，因?yàn)闆](méi)梯子，就一直下載失敗。）

離線安裝的工具的教程：

（感謝?。。。。。。。。。。?

2·ESP8266連接到wifi

首先要引入ESP8266WiFi.h，定義一個(gè)連接wifi的函數(shù)。

3·然后要點(diǎn)亮屏幕

這里要用到lcdwiki的庫(kù)，在github上，（它的官網(wǎng)上樹(shù)莓派的教程很詳細(xì)，但arduino的實(shí)在是太少了，（廢話了一大堆就只是安裝了給IDE））https://github.com/lcdwiki

下載這兩個(gè)倉(cāng)庫(kù)，解壓放到“文檔\Arduino\libraries”里面

（注意打開(kāi)看一下，有的電腦解壓后里面重了一層文件夾，要拿出來(lái)。）

然后是接線，這里我沒(méi)有搞懂sck和sda為什么一定要接D7和D5...也不知道能不能修改（它中間空了一個(gè)讓我看著特難受。。。）

vcc和GND直接對(duì)應(yīng)（vcc有的板子上寫(xiě)的vin或者v5）。

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

還有一點(diǎn)我有點(diǎn)迷惑，官方示例里的DC都寫(xiě)的CD，（我不理解？）

這里的顏色定義有點(diǎn)意思，等會(huì)兒轉(zhuǎn)換圖片的時(shí)候有點(diǎn)麻煩（當(dāng)然也可以不麻煩。）

這里的顏色要用RGB565表示，只是一種顏色表示方式，涵蓋人眼能識(shí)別的絕大對(duì)數(shù)顏色了。我們常見(jiàn) 的顏色是RGB（255，0，0）這種，python中常用的CV2就是這種不過(guò)有點(diǎn)不同的是CV2是倒著的BGR，也就是紅色通道和藍(lán)色通道是反的，處理時(shí)需要轉(zhuǎn)換。

那如何把RGB（255，0，0）這種給寫(xiě)成RGB565呢？

在上面的代碼里紅色被寫(xiě)成了0xF800，這里其實(shí)是16進(jìn)制的表示，用十進(jìn)制表示就是63488

這里RGB565其實(shí)不一定要寫(xiě)成16進(jìn)制，十進(jìn)制寫(xiě)進(jìn)去屏幕也能正確顯示顏色。

這RGB565中的“565”其實(shí)就是分別對(duì)應(yīng)R，G，B三通道的位數(shù)，二進(jìn)制下的位數(shù)畫(huà)個(gè)圖來(lái)表示吧，以紅色為例。

就是紅色通道和藍(lán)色通道舍去3位，綠色通道舍去2位。

后面會(huì)寫(xiě)一給python的工具來(lái)實(shí)現(xiàn)圖片的轉(zhuǎn)換。

4·讓ESP8266向服務(wù)器請(qǐng)求內(nèi)容。

然后就是要讓esp8266主動(dòng)去訪問(wèn)服務(wù)器。我用tcpclient而不用httpclient是因?yàn)槲也恢纇ttpclient如何分段地讀取服務(wù)器發(fā)來(lái)的內(nèi)容，tcp這個(gè)庫(kù)可以readStringUntill來(lái)指定讀到哪里，如果用http那個(gè)會(huì)一次性把圖片的全部?jī)?nèi)容讀到一個(gè)String里面，而這個(gè)String是必然會(huì)被撐爆的。現(xiàn)在先實(shí)現(xiàn)請(qǐng)求一段文字然后顯示出來(lái)。寫(xiě)一個(gè)函數(shù)來(lái)訪問(wèn)服務(wù)器：

然后是電腦上要配置一個(gè)http的服務(wù)，為了方便測(cè)試，使用最簡(jiǎn)單粗暴的python的http.server。

這個(gè)方法還可以用來(lái)在內(nèi)網(wǎng)傳大文件，可惜不能傳文件夾，只能打包后傳。

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

然后隨便選一個(gè)要用來(lái)分享的文件夾，打開(kāi)，在地址欄輸入cmd（linux就是cd到那個(gè)文件夾），然后輸入：

這里的80是指監(jiān)聽(tīng)80端口。（linux的有些版本的軟件包管理很怪，必須把版本帶上，要輸入python3或者python3.7）

現(xiàn)在在瀏覽器輸入自己電腦的ip地址或者127.0.0.1，就可以看到這個(gè)文件夾已經(jīng)被羅列出來(lái)了。但上面代碼中我的請(qǐng)求頭是GET /，就會(huì)得到這個(gè)頁(yè)面，這肯定是不行的，于是就要在這個(gè)文件夾里新建一個(gè)index.html,這樣http。server就會(huì)默認(rèn)地把這個(gè)文件內(nèi)的內(nèi)容發(fā)送出去。

新建一個(gè)index.html，里面寫(xiě)上幾個(gè)字（英文），然后保存，再訪問(wèn)的時(shí)候，瀏覽器上就出現(xiàn)了剛才寫(xiě)的那幾個(gè)字了，這也就達(dá)到了我想讓服務(wù)器把指定內(nèi)容返回ESP8266的目的。

就是如此如此，這般這般。

注意，我是另存為index.html,因?yàn)橛X(jué)得展示后綴名看著丑就堅(jiān)持沒(méi)顯示，就只能另存了...

可以看到，在電腦的index.html中輸入的文字成功的被ESP8266讀取并顯示到了屏幕上，雖然它在中途停頓了一下，gif是加速了的，實(shí)際上等了有5秒，最后一行才顯示出來(lái)。經(jīng)過(guò)反復(fù)測(cè)試，如果寫(xiě)很多行，只有最后一行會(huì)卡一下，這讓我百思不得其解....

還有就是前面會(huì)有一堆http的響應(yīng)結(jié)構(gòu)，要排除掉，可以設(shè)置一個(gè)x=-18，額..或者更多，然后再循環(huán)的時(shí)候加成正數(shù)后才開(kāi)始向屏幕打印內(nèi)容。

5·展示圖片?。?！

重點(diǎn)來(lái)了，這個(gè)圖片是必須要轉(zhuǎn)換的，為了方便，我的想法是直接把圖片的信息寫(xiě)到index.html里面，以后要弄更多圖片的時(shí)候再更改請(qǐng)求頭或者直接寫(xiě)一個(gè)替換index.html的腳本來(lái)實(shí)現(xiàn)圖片切換。

這個(gè)轉(zhuǎn)換圖片真的是有那么些.......

網(wǎng)上有轉(zhuǎn)換圖片的網(wǎng)站，但都有一個(gè)缺陷就是轉(zhuǎn)換后的結(jié)果是一個(gè)xxx.c，是直接包含到程序里，是不能改變的，而想要把變量通過(guò)http傳過(guò)去有有點(diǎn)太麻煩了。而且一個(gè)變量一個(gè)變量的傳會(huì)導(dǎo)致圖片加載就特別慢。

最重要的是，那種把圖片寫(xiě)成一個(gè)數(shù)組，然后一次性顯示圖片的函數(shù)，我是真的不會(huì)寫(xiě)啊.....(wo shi zai shi tai ben le)...

于是我想到的辦法是，先規(guī)定好圖片只能是什么個(gè)尺寸，把圖片的每一個(gè)像素的顏色寫(xiě)成一個(gè)數(shù)字，數(shù)字之間用空格隔開(kāi)，ESP8266讀取的時(shí)候以空格為分割符，把像素一個(gè)個(gè)的堆在屏幕上，圖片就顯示出來(lái)了。（看著效果和網(wǎng)上看到的那些大佬的電子相冊(cè)的加載的樣子有那么點(diǎn)像了。）

所以圖片怎么轉(zhuǎn)換喃？

萬(wàn)能的PYTHON又出現(xiàn)了?。。?/p>

#首先要把圖片加載進(jìn)去，然后縮小/放大/調(diào)整成指定大小或者裁剪，要遍歷每一個(gè)像素，轉(zhuǎn)換成rgb565的對(duì)應(yīng)數(shù)字，然后寫(xiě)進(jìn)index.html

emmmm....pygame的surface可以縮放，blit一個(gè)圖片在里面，可以裁剪，但是這個(gè)surface對(duì)象不能遍歷每一個(gè)像素。CV2可以遍歷每一個(gè)像素.......

pygame》》》》加載圖片，通過(guò)讀取鍵盤(pán)指令調(diào)整圖片

轉(zhuǎn)換成CV2的圖形》》》遍歷每一個(gè)像素，》》轉(zhuǎn)換為rgb565》寫(xiě)入文件。

?計(jì)劃通，開(kāi)始！

然后就沒(méi)有然后了。

自動(dòng)更換和內(nèi)網(wǎng)穿透后在公網(wǎng)訪問(wèn)什么的就以后再說(shuō)啦....