一、創(chuàng)意方案簡介

　　手機微信是我們?nèi)粘Ｉ钪惺褂迷絹碓蕉嗟耐ㄐ殴ぞ咧?，手機微信在給我們帶來便利的同時，也帶來很多煩惱。特別對于小朋友們，長時間看手機微信導(dǎo)致眼睛視力受損。用手機微信會養(yǎng)成過度玩游戲等不良習(xí)慣等。怎樣使得小朋友們在能獲取微信消息的同時，又不受沉迷手機的危害，本創(chuàng)意則運應(yīng)而生。即通過手機端家長可以把重要信息轉(zhuǎn)發(fā)到一個桌面終端上，小朋友通過桌面信息終端能夠閱讀微信通知信息。

　　墨水屏具有無輻射，依靠自然光反射顯示圖像的綠色健康使用特性，又具有斷電內(nèi)存保持的有點，因而它適合作為文字圖片類的信息顯示設(shè)備。它適合作為本創(chuàng)意的顯示器件。

　　瑞薩電子RA6M5芯片是32位高性能微控制器(MCU)產(chǎn)品。它具有支持TrustZone的高性能Arm Cortex-M33內(nèi)核。結(jié)合片內(nèi)的SecureCryptoEngine(SCE)配合使用，可實現(xiàn)安全芯片的功能，適合安全信息場景的應(yīng)用。RA6M5采用高效的40nm工藝，由靈活配置軟件包(FSP)支持開放且靈活的生態(tài)系統(tǒng)。

　　FSP基于FREERTOS構(gòu)建，并能夠進行擴展，以使用其他實時操作系統(tǒng)(RTOS)和中間件。RA6M5適用于物聯(lián)網(wǎng)應(yīng)用的需求，如多樣化的通信功能、面向未來應(yīng)用的安全功能、大容量嵌入式RAM和較低的運行功耗(從閃存運行CoreMark算法時功耗低至107μA/MHz)。其優(yōu)異的性能和低功耗安全的特點。本創(chuàng)意項目選擇該MCU作為主控組件。

　　二、項目創(chuàng)意與特點

　　本項目名稱為《瑞薩RA6M5電子墨水屏微信桌面信息站》，在需要微信面向如小朋友使用的場景下，需要一個環(huán)保健康的設(shè)備，以及減少使用手機微信帶來的傷害，以及小朋友使用手機時的不良習(xí)慣。而瑞薩RA6M5電子墨水屏微信桌面信息站則可以讓小朋友無害的閱讀微信內(nèi)容。微信的消息內(nèi)容通過微信服務(wù)機器人自動轉(zhuǎn)發(fā)或者由家長手動發(fā)送。

　　本項目利用野火瑞薩RA6M5開發(fā)板具備聯(lián)網(wǎng)通信能力，與驅(qū)動顯示墨水屏顯示輸出能力，以及按鍵交互的功能。使用野火瑞薩RZ6M5開發(fā)板SPI 總線連接墨水屏顯示器件，通過板載ESP8266模塊連接云端消息數(shù)據(jù)處理服務(wù)，完成微信圖文信息通過網(wǎng)絡(luò)向瑞薩RA6M5電子墨水屏微信桌面信息站發(fā)送與消息閱讀確認的回復(fù)功能。

　　本項目完成RA6M5開發(fā)板使用SPI連接6寸大屏電子墨水屏，并移植開發(fā)墨水屏顯示驅(qū)動，以及在線數(shù)字，日期顯示到內(nèi)存位圖的功能，實現(xiàn)墨水屏消息站終端的顯示功能。使用nginx和python圖像處理腳本在云端完成微信圖片與文字轉(zhuǎn)換成墨水屏能夠顯示的單色點陣圖，再通過socket傳送到RA6M5 終端上顯示輸出。同時消息站用戶按下按鍵，將會將按鍵消息回傳，已示確認消息收到，實現(xiàn)消息站消息接收顯示以及用戶對消息已閱讀的確認。

　　該項目涉及到如下技術(shù)內(nèi)容：

　　RA6M5—野火瑞薩RA6M5開發(fā)板，完成微信桌面消息站的終端硬件

　　Nginx+uWSGI+django服務(wù)提供HTTP與python應(yīng)用中間件，支持OpenCV圖文轉(zhuǎn)換，終端身份識別，圖片文字上傳與下載。

　　OpenCV-python—服務(wù)端完成文字與文字轉(zhuǎn)換成墨水屏顯示的4階灰度圖

　　WeChaty—微信客服機器人開源項目，實現(xiàn)微信消息過濾，轉(zhuǎn)發(fā)

　　Websocket--支持web端的二進制網(wǎng)絡(luò)數(shù)據(jù)通信

　　FreeRTOS --一款開源的MCU上運行的實時多任務(wù)操作系統(tǒng)

　　E-ink Paper—微雪電子紙驅(qū)動開源代碼，用于驅(qū)動電子墨水屏

　　三、項目所涉及的材料

　　RA6M5 野火瑞薩RA6M5開發(fā)板，微信桌面消息站終端主板

　　GDEW0583T7 電子墨水屏顯示器件，支持4階灰度圖像內(nèi)容顯示

　　WIFI路由器，提供有線網(wǎng)絡(luò)和互聯(lián)網(wǎng)的通訊和無線通訊

　　互聯(lián)網(wǎng)云主機，提供微信機器人服務(wù)

　　Windwos X86 電腦，提供RA6M5開發(fā)與燒錄環(huán)境

　　兼容STM DAP 燒錄下載器

　　四、方案整體技術(shù)架構(gòu)

　　瑞薩RA6M5電子墨水屏微信桌面信息站如下圖所示，服務(wù)端主要有Nginx服務(wù)作為H5頁面的WEB服務(wù)，OpenCV服務(wù)使用opencv-pyton啟動一個圖像處理服務(wù)進程，通過socket與web服務(wù)連接完成文字圖片的轉(zhuǎn)換，微信機器人是一個消息轉(zhuǎn)發(fā)服務(wù)，將文字消息發(fā)送到opencv服務(wù)上再與web通信。服務(wù)端均部署在互聯(lián)網(wǎng)公網(wǎng)服務(wù)器上，移動端通過移動網(wǎng)絡(luò)訪問圖文消息轉(zhuǎn)發(fā)的編輯頁面，完成手動消息的發(fā)送。野火RA6M5開發(fā)板和墨水屏組成的信息終端通過wifi連接路由器，完成通信的硬件聯(lián)通。

　　五、RA6M5墨水屏信息站開發(fā)

　　墨水屏信息站使用野火RA6M5開發(fā)板，通過板載的ESP8266 WIFI模塊連接WEB socket服務(wù)，接收服務(wù)端推送的顯示圖像的指令以及使用http get獲取服務(wù)端轉(zhuǎn)換好的電子墨水屏顯示圖像數(shù)據(jù)。

　　1

　　硬件連接

　　墨水屏信息站終端硬件由主控板RA6M5開發(fā)板，墨水屏轉(zhuǎn)接板、GDEW0583T7 4階墨水屏組成。

　　RA6M5開發(fā)板主控是瑞薩R7FA6M5BH3CFC芯片，基于Cortex-M33 內(nèi)核，主頻高達 200MHz，具有 512KB SRAM、2MB Code Flash 和 8KB Data Flash。

　　轉(zhuǎn)接板使用的微雪的DESPI-C02 型號的E-ink轉(zhuǎn)接板：

　　GDEW0583T7四階灰度電子墨水顯示屏，接口為SPI接口，600x448的分享率，顯示屏尺寸為6.5英寸：正面圖

　　背面如下圖

　　主控板使用GPIO模擬SPI接口連接轉(zhuǎn)接板，轉(zhuǎn)接板通過FPC排線連接墨水屏24PIN，連接完的系統(tǒng)如下圖：

　　只要接線方式是：

　　RA6M5---DESPI轉(zhuǎn)接板

　　P608 --- DC

　　P801 --- RST

　　P706 --- BUSY

　　P805 --- SCK

　　P806 --- SDA

　　P611 --- CS

　　連接實物圖如下：

　　2

　　軟件開發(fā)

　　墨水屏信息站終端軟件開發(fā)主要有以下幾部分：

　　一、使用GPIO通過軟件控制IO實現(xiàn)SPI標準時序，

　　二、移植GDEW0653W4顯示驅(qū)動，該屏提供了STM32上的驅(qū)動程序，按相應(yīng)的函數(shù)移植SPI讀寫完成初始化，清屏，向屏幕輸出圖像數(shù)據(jù)。

　　三、tcp/ip通訊協(xié)議，分別實現(xiàn)websocket的連接與http get的數(shù)據(jù)下載。

　　野火RA6M5開發(fā)板在線文檔非常豐富詳細，因此RA6M5開發(fā)非常輕松，文檔地址見后面鏈接查看參考文獻。

　　該開發(fā)板開發(fā)采用 KEIL + FSP的方式，首先下載瑞薩的板級支持包 Renesas.RA_DFP.4.0.0.pack 再下載瑞薩Renesas RASmart Configurator(FSP)以及DAP的驅(qū)動JLink_Windows_V788c，開發(fā)工具的安裝過程這里略過，安裝完FSP后，即可單獨啟動FSP，在FSP的包管理中導(dǎo)入上面下載RA_DFP板級支持包，即完成了該開發(fā)板的開發(fā)環(huán)境準備工作。

　　FSP配置工程

　　同時在FSP中創(chuàng)建新工程，選擇RA6M5開發(fā)板型號，選擇KEIL工具平臺，即產(chǎn)生開發(fā)板支持的初始工程，打開KEIL，再打開該工程即可看到工程目錄，此時可以進行本項目的開發(fā)了。

　　使用SPI線連接E-INK 墨水屏，移植該墨水屏的顯示驅(qū)動，顯示驅(qū)動完成初始化，參數(shù)設(shè)定，清屏，顯示圖像等函數(shù)。

　　3

　　編譯下載程序到RA6M5上運行調(diào)試

　　各部分開發(fā)完成，連接DAP jtag下載器，點擊下載即可把程序下載到RA6M5開發(fā)板上，按下復(fù)位鍵將自動運行。

　　六、服務(wù)端WEB服務(wù)與uWSGI應(yīng)用框架搭建

　　使用云主機搭建web服務(wù),主要用于手機端H5編輯頁面的發(fā)布服務(wù)，以及相關(guān)圖片資源上載和下載的服務(wù)功能。而WSGI(Web Server Gateway Interface)是Python Web應(yīng)用程序和Web服務(wù)器之間的接口標準，它定義了一個簡單的API，使得Python Web應(yīng)用程序可以被部署在多種Web服務(wù)器上，而無需修改應(yīng)用程序代碼。uWSGI是實現(xiàn)WSGI協(xié)議的高效web應(yīng)用服務(wù)器，他可以配合其它web服務(wù)器一起使用，可以讓服務(wù)應(yīng)用開發(fā)非常簡單而又高效運行。

　　這里使用nginx服務(wù)作為web服務(wù)，云主機使用ubuntu 18.04操作系統(tǒng)，安裝nginx服務(wù)很簡單，使用apt-get即可輕松安裝上nginx服務(wù)，安裝并檢查nginx服務(wù)指令如下：

　　啟動nginx服務(wù)

　　輸入服務(wù)器IP地址可以看到服務(wù)已運行

　　因為后臺應(yīng)用采用python開發(fā)而成，因此需要在nginx配置對uwsgi協(xié)議的消息轉(zhuǎn)發(fā)配置，配置方式如下，增加uwsgi.conf 配置文件到 /etc/nginx/conf.d 目錄下

　　在/opt/werobot目錄下創(chuàng)建werobot.wsgi 配置文件

　　安裝uwsgi中間件軟件

　　添加python服務(wù)測試程序：

　　啟動 uwgsi 服務(wù)中間件，檢查運行正確

　　uwsgi --http :8000 --wsgi-file werobot.py

　　打開瀏覽器訪問uwsgi服務(wù)地址與端口，顯示如下表示uwsgi應(yīng)用已啟動：

　　再啟動成為nginx的應(yīng)用模塊，在正式部署使用時，為服務(wù)安全起見使用內(nèi)部端口，而不使用8000外部端口。

　　uwsgi -d /opt/werobot/werobot.log --ini/opt/werobot/werobot.wsgi --pidfile=/opt/werobot/werobot.pid

　　這樣服務(wù)python應(yīng)用程序只要加上uwsgi的接口即可形成網(wǎng)絡(luò)微服務(wù)模式，可以對外提供應(yīng)用服務(wù)。

　　七、服務(wù)端OpenCV

　　電子墨水圖像處理

　　為了使終端上能夠顯示出圖文等復(fù)雜的內(nèi)容，這里設(shè)計把消息發(fā)來的圖文信息在服務(wù)端轉(zhuǎn)換成為電子紙支持的圖像內(nèi)容數(shù)據(jù)，其思路是對于手機編輯的圖文顯示內(nèi)容，在前端編輯器上生成顯示內(nèi)容結(jié)構(gòu)描述文件，設(shè)計編輯頁面顯示內(nèi)容結(jié)構(gòu)如下所示：

　　[

　　{"id":"001","type":"text","property":{"content":"Thismessage for RA6M5 E-ink station!", "font": "Time newRomain", "size": 18, "cord": {"x": 20,"y": 50, "w": 0, "h": 0},"color":"#EE2020"}, "index":3},

　　{"id":"002","type":"imge","property":{"res":"res/e28346rawe3.jpg" ,"cord": {"x": 20,"y": 90, "w": 600, "h": 360}}, "index":1},

　　{"id":"003","type":"imge","property":{"res":"res/qifw34ddwe3.jpg" ,"cord": {"x": 40,"y": 120, "w": 400, "h": 300}},"index":2},

　　{"id":"004","type":"chtxt","property":{"content":"背誦詩詞", "font":"msyh", "size": 20, "cord": {"x": 20,"y": 90, "w": 0, "h": 0},"color":"#EE2020"}, "index":4},

　　{"id":"005","type":"chtxt","property":{"content":"Thisis test", "font": "refsan", "size": 18,"cord": {"x": 20, "y": 120, "w": 0,"h": 0},"color": "#EE2020"}, "index":5}

　　]

　　其流程為當(dāng)手機上編輯圖文內(nèi)容并提交時，上傳本地圖片資源以及顯示頁面結(jié)構(gòu)數(shù)據(jù)，服務(wù)端收到提交的顯示結(jié)構(gòu)數(shù)據(jù)后，后端python服務(wù)接收來自編輯器編輯的信息是上面這樣的json格式頁面描述，使用服務(wù)端python程序，解析頁面json結(jié)構(gòu)數(shù)據(jù)，使用OpenCV API在按json描述的參數(shù)在內(nèi)存中繪制出圖像。

　　處理流程如下圖所示：

　　開發(fā)python + opencv的服務(wù)端解析以及繪制圖像代碼如下：

　　由于墨水屏顯示的圖像數(shù)據(jù)格式和我們在電腦上看的圖片格式并不相同，它是一種點陣的顯示方式，并且不需要文件頭和其它的描述信息，并且墨水屏顏色數(shù)非常有限，通常是單色或者灰度，4色等有限顏色的范圍。因此需要把彩色圖像先轉(zhuǎn)換成灰度圖像，彩色變換為灰度的算法很簡單，采用一下算法對每個原像素進行計算即可把RGB 24位色圖轉(zhuǎn)換為4階灰度圖。

　　彩色圖片轉(zhuǎn)灰度的算法如下，其中R,G,B為OpenCV 從原始資源和編輯描述文件產(chǎn)生的全彩圖片中每個像素的三個色彩的分量值，其取值范圍為[0,255], 轉(zhuǎn)換后的值為一個灰色的值，通過四舍五入后，值范圍為[0,255],

　　再進行一次256階灰度向4階灰度變換，此時變換一種方法是直接使用分階段的歸類方式，即每64色階歸一個新的4階色域上，但出來的4階圖像非常粗糙，丟失很多圖像內(nèi)容細節(jié)。因此這里采用一種全新的方式來解決這個問題，即分階抖動的算法，抖動算法是二值圖像常用的轉(zhuǎn)換方法，抖動算法能夠在顏色或灰度級別受限的情況下，模擬出更多的顏色或灰度等級，從而提高圖像的視覺質(zhì)量。這里的方式是在256階灰度圖像，通過4色階和圖像點陣密度的變化組合形成256階灰度表達，其算法如下：

　　通過算法處理后的數(shù)據(jù)，就可以并轉(zhuǎn)換成電子墨水屏所需要的4階灰度RAW光柵圖像數(shù)據(jù)文件，并通過websocket向終端發(fā)送顯示命令，并且發(fā)送raw終端顯示數(shù)據(jù)。

　　對于服務(wù)端圖像生成，則使用 OpenCV-Python 庫，完成文字字體設(shè)置，大小設(shè)置，位置設(shè)置，顏色設(shè)置并繪制到內(nèi)存畫布上。同樣對于圖片使用OpenCV讀取圖片數(shù)據(jù)繪制到內(nèi)存畫布上，對于有多個圖片和文字資源的顯示畫面結(jié)構(gòu)，按照index索引的重小到大的順序進行繪制，最終產(chǎn)生內(nèi)存圖片數(shù)據(jù)，在調(diào)用E-Ink提供的4階灰度抖動python算法，完成電子紙RAW數(shù)據(jù)的生成。

　　單元測試，使用一張彩圖，通過以上變換，查看輸出如下：

　　原始輸入圖像：

　　轉(zhuǎn)換為8位256階的灰度圖：

　　經(jīng)過抖動轉(zhuǎn)換2位4階灰度疏密點陣圖：

　　將2位色抖動圖的圖像去掉頭部描述數(shù)據(jù)后取出raw數(shù)據(jù)形成輸出的文件，保存在out目錄下，供HTTP服務(wù)向墨水屏終端信息站發(fā)布使用。

　　八、手機微信客服機器人部署

　　為了使得該信息站更方便使用，那么最好的方式就是把這個信息站和我們?nèi)粘Ｉ钪凶畛Ｓ玫耐ㄐ殴ぞ哒掀饋?，形成簡單易用的一個操作體驗。日常最常用的消息通訊工具莫過于手機微信軟件了。由于微信的通訊是一個封閉的系統(tǒng)，外部的終端是無法和微信服務(wù)直接通信的，不過可以通過擴展功能的方式來達到同樣的目的，這里的方案就是，開發(fā)微信客服機器人。

　　微信客服機器人是微信允許加入微信中的一個機器代理的消息收發(fā)者，它是一個微信賬號，如同一個真實的微信賬號一樣，其它用戶可以和它進行通信和交互，如發(fā)消息和圖片。它的后臺可以由程序接管，可以完成自動化的消息回復(fù)，服務(wù)交付等功能。這里利用微信客服機器人服務(wù)，完成微信消息向RA6M5信息站進行轉(zhuǎn)發(fā)。即微信客戶機器人將收到的消息發(fā)送到上面的信息站服務(wù)端，服務(wù)端接收到微信機器人發(fā)來的消息后進行文字以及圖像的繪制并轉(zhuǎn)換成RA6M5信息站接收的圖像數(shù)據(jù)，在終端上顯示出來，從而完成微信消息到RA6M5信息站信息的發(fā)布。

　　網(wǎng)上有很多 微信客服機器人的接口，但很多是由第三方服務(wù)端完成，提供接口使用的，使用這些接口一方面使得消息轉(zhuǎn)發(fā)次數(shù)更多，導(dǎo)致發(fā)送延時，另外也不希望自己發(fā)送的微信消息被第三方看到，因此這里使用原生的一個微信接口庫來實現(xiàn)微信客服機器人，這里使用wechaty庫來實現(xiàn)微信機器人。

　　首先在服務(wù)端安裝wechaty的服務(wù)模塊，wechaty 是一個nodejs 的服務(wù)，安裝非常方便，首先初始化本地項目

　　npm init

　　因為筆者的服務(wù)器系統(tǒng)是ubuntu 18版本，因此這里不使用 npminstall wechaty 直接安裝新版，因為該工程主干需要的環(huán)境版本比較高，這里使用它的一個分支版本。

　　git clonehttps://gitee.com/clasp/wechaty.git-b custom-io-server-host

　　再安裝檢查必要的依賴的運行庫

　　開發(fā)一個簡單的微信機器人后臺消息接收處理的nodejs 代碼wechatbot.js，代碼內(nèi)容如下：

　　使用socker環(huán)境啟動本地的wechatbot.js服務(wù)

　　sudo docker run -ti --rm --volume="$(pwd)":/botwechaty/wechaty wechatbot.js

　　//停止

　　docker rm -f 78ee9164894e

　　啟動微信服務(wù)后，使用一個測試的微信號作微信服務(wù)機器人，掃描服務(wù)端生成的微信登錄二維碼，即授權(quán)微信機器人在我們的服務(wù)端啟動，并且開始收發(fā)微信的消息.

　　向這個微信客服機器人發(fā)送信息時，后臺將收到這個機器人接收到的消息，自動回復(fù)一個“ok”做為服務(wù)運行正常的確認。

　　九、整體功能測試與運行效果

　　在各部分開發(fā)完，由于涉及多個系統(tǒng)，包括微信客服機器人，后臺圖像轉(zhuǎn)換，以及消息的通知，終端收發(fā)消息以及終端下載圖像數(shù)據(jù)等環(huán)節(jié)，因此先對各部分分別做測試。

　　再查看終端是否收到了新發(fā)布信息的內(nèi)容，并且發(fā)起http get請求，拉取圖片，顯示在終端電子紙屏幕上，在電子墨水屏清屏閃動幾次后，終于看到了在墨水屏顯示出圖像：

　　大約過十幾秒，終端屏幕上顯示出了文字內(nèi)容，從文字顯示看，文字的位置有一點不正確外，內(nèi)容顯示正常。

　　經(jīng)過檢查，發(fā)現(xiàn)是在服務(wù)端繪制圖片時，對不同矢量文字的寬度計算有誤，導(dǎo)致計算每行的文字寬度小于實際寬度，而默認設(shè)計繪制消息框是居中顯示，導(dǎo)致圖像偏右。

　　在重新修正服務(wù)端繪制缺陷后，再由網(wǎng)頁頁面向終端模擬發(fā)起一個消息通知消息，觸發(fā)終端重新拉取服務(wù)端重新繪制的圖片后，顯示終于正確了：

　　十、項目講解演示

　　十一、項目開發(fā)后記

　　大約經(jīng)過1個半月左右，斷斷續(xù)續(xù)的把這個以前一直想做的項目基本實現(xiàn)了。服務(wù)端設(shè)計時，考慮了多種屏幕的適配問題，這樣可以同時滿足LCD屏幕以及墨水屏屏幕的顯示需求，以及不同尺寸的變換。這樣通過服務(wù)端強大的圖形圖像處理，能夠?qū)崿F(xiàn)較好的動態(tài)信息生成。滿足多種的信息發(fā)布和輸出。

　　同時因為時間比較緊，項目中有一些后續(xù)可以改進的地方，一是終端拉取圖像資源時，可以采用壓縮數(shù)據(jù)的方式傳輸，現(xiàn)在這種用傳輸占用通信較多，不過好在一張輸出圖片也在30K左右。二是微信和硬件信息終端沒有做綁定關(guān)系判斷，還沒有考慮多個微信機器人和多個終端間多對多的關(guān)系，因此目前且的開發(fā)僅作為技術(shù)驗證。三是需要考慮部分動態(tài)的數(shù)據(jù)以及時間等數(shù)據(jù)信息，不需要太多美術(shù)化的信息內(nèi)容，能在終端內(nèi)合成顯示或者使用局部刷新顯示的方式，這對將來智慧物聯(lián)的數(shù)據(jù)顯示，動態(tài)數(shù)據(jù)顯示是一個好的處理方式。

　　同時在開發(fā)RA6M5時，開始使用硬件SPI與墨水屏通信，但是經(jīng)過多次調(diào)試未果，因為時間沒有深入探究，轉(zhuǎn)而采用了軟SPI的方式，好在RA6M5的IO速度足夠快，實測軟SPI的通信速度可穩(wěn)定的達15Mbps，對本屏傳送一幀數(shù)據(jù)僅需要不到300毫秒。同時在開發(fā)ESP8266聯(lián)網(wǎng)功能是，參考了前面網(wǎng)友發(fā)布的ESP8266更新固件和測試的資料，這使得聯(lián)網(wǎng)功能得以順利的完成。