四色WiFi空氣質量顯示器-第二屆立創商城電子製作節30強作品

寫在前面

事情的開始，要從很久以前我買的一個時鐘說起。

那是iPhone發售不久的時候，喬布斯還站在蘋果發布會上，HTC做出了第一台Android手機。為了給iPhone充電方便，我購買了一個飛利浦的充電時鐘，它長這樣：

它的正面是一個十分簡潔的時鐘，你可以把iPhone放在上面充電，順便聽聽音樂和收音機。

一眨眼，iPhone已經出到第七代，這個Philips的充電座，早已經不能兼容新的iPhone充電介面，成了家裡眾多過氣電器的一員。但我卻從來沒有將它收到抽屜里的念頭。

因為它的時鐘功能，真的是太好用了。

首先，它沒有顯示年份，月份，農曆，星期幾這些不常用到的功能。它的正面是很大的綠色LED，只顯示當前的時間。即使距離很遠，你也能一眼看清鐘面上的數字。

其次，它可以從iPhone自動同步時間，完全不需要人工設置。

憑著這兩個優點，這個本來應該收藏到柜子裡面的「過氣」電器，一直擺在我的客廳里使用到現在。

我從這件事情上受到啟發：這是一個」Less is more「的好例子。因此，我想把這種簡單，易用的設計理念，貫穿到設計四色空氣質量顯示器的過程當中。

它要足夠簡單，足夠傻瓜，即使看不清面板上的數字，還是能知道當前的空氣質量。

作品簡介

一個能夠通過WiFii獲取空氣質量數據的桌面設備。根據空氣質量數據的不同，使用不同的顏色來標識數據。能夠通過手機對設備配置參數進行設置，例如連接WiFi的SSID和密碼，目標城市等等。

擬用到的立創商城在售物料：

STM32F103C8T6，ESP8266模塊，74HC373N，TLV70033，MicroUSB座子，SS8050，AO3407，FPC連接線及座子，2.54mm單排針/排座，0805、0603、1206封裝電阻電容等。

其它物料：多色LED數碼管等。

1.設計目標

設計目標可以用一句話來概括：「能通過WiFi獲取空氣質量數據，並用四種顏色顯示出來的桌面設備。」

作為一個工程師，總是有許多功能想要實現，想要添加到產品中，有時反而忽視了這些功能對產品是不是真的合適。

舉一個例子來說：我見過一個手機萬能充電器，它有一整排的藍色3mm高亮LED，在充電時，這些LED會開始跑馬燈。然後在充電結束以後，它會用內置的蜂鳴器開始演奏《茉莉花開》。

想像一下，當你睡覺前開始用它給手機電池充電，你需要先找一個東西把它的高亮LED蓋住，因為它的跑馬燈閃的讓人根本無法入睡。然後，幾個小時過後，當你睡的正香的時候，它突然響亮的演奏了一曲《茉莉花開》，告訴你充電完成了。相信被吵醒的人，都會有把這個充電器丟到垃圾桶的衝動。

雖然跑馬燈和蜂鳴器是工程師必備的練手好項目，但顯然它們不適合出現在一個手機充電器上。

當設計四色空氣質量顯示器時，也有許多容易添加的功能。例如，增加一個DS18B20，就能顯示溫度啦，再增加一個DHT11，連濕度也能測量了，或者再來一個繼電器，還能遠程控制家電？

然而這些功能，就像充電器上的跑馬燈一樣，是完全多餘的。它們反而會降低空氣質量顯示器本身的易用程度。

另外一個方面，因為這是一個WiFi聯網設備，不可避免的，需要對設備進行配置，輸入當前所使用WiFi的SSID和密碼，才能連接互聯網。

有許多種現成的方案能夠實現這一個功能，例如：

設備本身構造一個沒有密碼，或者密碼已知的WiFi Station信號，通過手機連接，然後在手機上使用瀏覽器，對設備進行配置。

雖然有這麼多不同的方法來配置WiFi，不過歸根結底，這些方法都是利用WiFi信號做為載體，向聯網設備發送ASCII字元。

在這次設計當中，我想嘗試一下另外一種配置WiFi的方法：通過手機屏幕的閃爍，向空氣質量顯示器發送WiFi的SSID和密碼。

這種方法和現有的SmartConfig，AirKiss等相比，優點是方便易用：只要拿起手機，直接輸入要連接WiFi的SSID和密碼，然後用手機屏幕對準設備，就能完成配置，不需要切換手機的WiFi環境。

這種方法的缺點是：傳輸速度受到手機屏幕刷新率的限制，不同的手機會存在一定差異。

到這裡為止，小結一下要做的功能：

空氣質量數據顯示

通過手機屏幕來配置設備

2.工作原理

圖1 系統工作原理

首先，空氣質量數據的來源是專業的氣象服務站，例如 aqicn.org，它們能夠提供實時可靠的空氣質量數據，以及獲取這些數據的API。比起較為便宜的家用空氣質量測試設備，這些專業氣象網站的數據往往更加準確。

利用一台自有伺服器，定時從專業氣象站獲取空氣質量數據，並且保存到自有伺服器本地。這樣做的原因是：

1.能夠保證系統的自由度

2.降低空氣質量顯示器固件的複雜性。

最後，空氣質量顯示器通過無線路由器的WiFi網路，連接自有伺服器，獲取空氣質量數據，並根據空氣質量的好壞，使用四種不同的顏色將數據顯示出來:

圖2 綠色，黃色，橙色和紅色顯示

3.硬體設計

硬體分為兩部分電路組成：數碼管驅動電路以及MCU電路，兩塊電路板使用FPC排線相連接。

圖3 PCB實物

顯示部分選用了多色0.8英寸數碼管。多色數碼管的原理是在數碼管的每個分段中，同時放入幾種顏色不同的LED。通過控制不同顏色LED的亮度，就能混合出不同的顏色。

由於數碼管的每一個分段都要放置數個LED，因此，這種多色數碼館的功耗也比單色數碼管高出許多。空氣質量顯示器使用了3個多色數碼管，同時點亮時，最大驅動電流會達到150mA左右。這已經接近了STM32能夠允許的IO吸收電流限制，因此，直接使用STM32的IO口驅動這些數碼管是不安全的，需要搭配額外的驅動電路。

下圖是數碼管驅動電路的原理圖。每一個數碼管使用一片74HC373N鎖存器來驅動。這個電路沒有使用常見的數碼管分時掃描顯示法，而是利用了鎖存器的數據保持功能，靜態驅動數碼管。

圖4 數碼管驅動電路

採用靜態方式驅動數碼管的原因有兩個：

1.因為多色數碼管的顏色調節需要使用PWM進行功率控制，如果同時使用分時掃描驅動，某些顏色時會出現閃爍現象。

2.既然數碼管驅動電路是必須的添加的，為什麼不讓事情變的更簡單一些呢？

圖5 MCU和WiFi模塊介面部分電路原理圖

MCU選用STM32F103C8T6，通過串口連接WiFi模塊，WiFi模塊選用ESP8266。

P4是光敏電阻的介面。光敏電阻接收手機屏幕閃爍之後發出的信號。這個信號經過兩級三極體簡單放大以後，送到STM32進行解碼。通過這種方式，實現低成本和有效的系統配置方法。

MicroUSB介面除了提供系統的電源以外，D－和D＋還分別連接了STM32的串口RX和TX，這不是USB的標準連接方法，而是預留給調試設備使用的。

圖6 設備內部圖片

4.固件和軟體

STM32固件

因為需要獲取的數據在自己的伺服器上進行了二次封包，所以STM32的固件在WiFi上的的處理就變得相對比較簡單，圖7是STM32程序的主要部分流程圖：

圖7 MCU固件流程圖

光數據傳輸

系統使用手機屏幕閃爍的方式，來傳遞WiFi的SSID和密碼。本質上這是一種非同步單線傳輸，必須設定數據的傳輸速率，這和串口傳輸有點類似，只是我們的數據來源是屏幕手機的閃爍，並且預先約定好了數據的配置選項。

Javascript和屏幕刷新率

使用網頁方式來實現手機端的應用程序。

系統有三個配置選項：

1.WiFi SSID

2.WiFi密碼

3.需要獲取空氣質量數據的城市位置

為了節約數據的傳輸時間，可以單獨更新其中的任何一項，只要將其它選項留空白即可。

在頁面上填寫好需要更新的配置以後，將空氣質量顯示器放置在手機屏幕上，讓它底部的光敏二極體能夠和手機屏幕盡量靠近，然後點擊頁面上的 「start」 按鈕。

幾秒鐘以後，如果數據傳輸和校驗都正確，空氣質量顯示器會顯示 「CCC」的字樣，然後用新的配置自動重啟運行。

通過手機屏幕閃爍的方式來傳遞數據，最大的問題在於：這個方法受限制與手機的屏幕刷新率。當屏幕的圖像數據閃爍頻率超過手機屏幕的硬體刷新率時，就會出現數據掉幀的現象。另一種情況是，手機處理器運行太慢，在一幀圖像需要顯示的時候，仍然沒有完成圖像的繪製。

這兩種情況都會出現數據丟失損壞的現象。解決辦法只有降低數據傳輸的頻率，不過這樣做也會延長數據傳輸的時間。

5.獲取空氣質量數據

獲取空氣質量原始數據的工作，是在自有Linux伺服器上，使用python腳本完成的。

aqicn網站還提供一個JSON的API介面，用來提供外部程序的集成。

我們的自有伺服器上，通過設定Linux的定時任務，每隔15分鐘，就調用一次python腳本，通過JSON的API介面，獲取aqicn上的指定城市數據，然後保存在自有伺服器本地，以提供給空氣質量顯示器使用。

以下是獲取空氣質量數據的python腳本：（詳見原帖）

6.外觀設計

空氣質量顯示器的外殼使用3D列印的方式製作。因為系統內部分成的兩塊電路板，因此需要考慮到兩塊電路板相互之間的固定和連接方式。

圖8 外殼使用SketchUp設計

圖9 3D列印外殼實物

空氣質量顯示器的正面使用了定製的黑色亞克力擋光板，讓LED的顯示更加清晰，美觀。

圖10 空氣質量顯示器正面

光敏二極體被設計安放在空氣質量顯示器的底部，這樣，就可以把它直接放置在手機屏幕上，設置WiFi和城市位置信息。

圖11 位於設備底部的光敏二極體

MicroUSB供電座位於設備後面，使用了90度的MicroUSB母座：

圖12 設備背部介面

7.總結和延伸

四色空氣質量顯示器能夠隨時提供當前城市的空氣質量信息，並使用四種不同的顏色來標識。比起單純使用數字，這樣的方法更加直觀有效：只要抬起眼皮掃一眼，就能夠知道今天的空氣質量如何。因為是專用設備，在實際使用中，這比手機端的天氣app，還要方便一些。

換一個角度想，這個設備實際上是一個能夠用四種顏色顯示遠程伺服器上數據的裝置，至於數據的種類是什麼，則完全由我們自己來定義。所以，可以簡單的更改自有伺服器上的腳本和數據，而不用重寫設備固件，來改變設備的用途。

例如，我們可以通過gamil的API，獲取授權郵箱的未讀郵件數，然後顯示在設備上。這樣，四色空氣質量顯示器就變成了一個「未讀郵件顯示器」。

再如，我們也可以通過伺服器，獲取某一隻股票的價格，顯示在設備上，這樣，四色空氣質量顯示器就變成了一個「迷你股票價格顯示器」。

IoT設備的玩法多種多樣，並且在個人或者工業領域，都有著十分廣闊的應用前景。

8.演示視頻

9.附件下載

原理圖源文件、PCB源文件及BOM列表下載詳見原帖

「關於」立創商城（WWW.SZLCSC.COM）成立於2011年，致力於為客戶提供一站式電子元器件線上採購服務，成交量全國領先。自建9200多平方米現代化元器件倉庫，現貨庫存超50000種。本文由立創商城原創，轉載請註明出處。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！