<div><strong>作品简介：</strong></div> <div> <div>一个能够通过WiFii获取空气质量数据的桌面设备。</div> <div>根据空气质量数据的不同，使用不同的颜色来标识数据。</div> <div>能够通过手机对设备配置参数进行设置，例如连接WiFi的SSID和密码，目标城市等等。</div> </div> <div> <div><strong> </strong></div> <div>拟用到的立创商城在售物料：</div> </div> <div> <div>STM32F103C8T6</div> <div>ESP8266模块</div> <div>74HC373N</div> <div>TLV70033</div> <div>MicroUSB座子</div> <div>SS8050</div> <div>AO3407</div> <div>FPC连接线及座子</div> <div>2.54mm单排针/排座</div> <div>0805，0603，1206封装电阻电容</div> <div> </div> </div> <div>拟用到的非立创商城物料或其它补充：</div> <div>多色LED数码管</div> <div> </div> <div><img src="//image.lceda.cn/pullimage/Cdin6B3tSOIYCq4VQ1gr6hu92HQM8mOSvj3DNWLf.jpeg" alt="" width="480" height="298"></div> <div> </div> <div> <div><span style="font-size: 24px;">写在前面</span></div> <hr> <div>事情的开始，要从很久以前我买的一个时钟说起。</div> <div> </div> <div>那是iPhone发售不久的时候，乔布斯还站在苹果发布会上，HTC做出了第一台Android手机。为了给iPhone充电方便，我购买了一个飞利浦的充电时钟，它长这样：</div> <div> <img src="//image.lceda.cn/pullimage/GmqFdouHFoUjtbAzq5Tbz4OlHIGEAgyIsa1CVYkO.png" alt="" width="404" height="480"></div> <div> </div> <div>它的正面是一个十分简洁的时钟，你可以把iPhone放在上面充电，顺便听听音乐和收音机。</div> <div> </div> <div>一眨眼，iPhone已经出到第七代，这个Philips的充电座，早已经不能兼容新的iPhone充电接口，成了家里众多过气电器的一员。但我却从来没有将它收到抽屉里的念头。</div> <div> </div> <div>因为它的时钟功能，真的是太好用了。</div> <div> </div> <div>首先，它没有显示年份，月份，农历，星期几这些不常用到的功能。它的正面是很大的绿色LED，只显示当前的时间。即使距离很远，你也能一眼看清钟面上的数字。</div> <div> </div> <div>其次，它可以从iPhone自动同步时间，完全不需要人工设置。</div> <div> </div> <div>凭着这两个优点，这个本来应该收藏到柜子里面的“过气”电器，一直摆在我的客厅里使用到现在。</div> <div> </div> <div>我从这件事情上受到启发：这是一个”Less is more“的好例子。因此，我想把这种简单，易用的设计理念，贯穿到设计四色空气质量显示器的过程当中。</div> <div> </div> <div>它要足够简单，足够傻瓜，即使看不清面板上的数字，还是能知道当前的空气质量。</div> <p> </p> <p> </p> <div><span style="font-size: 24px;">0x00 设计目标</span></div> <hr> <div>设计目标可以用一句话来概括：</div> <p>“能通过WiFi获取空气质量数据，并用四种颜色显示出来的桌面设备。”</p> <p> </p> <p> </p> <div><span style="font-size: 24px;">0x01 要做的和不要做的</span></div> <hr> <div>作为一个工程师，总是有许多功能想要实现，想要添加到产品中，有时反而忽视了这些功能对产品是不是真的合适。</div> <div> </div> <div>举一个例子来说：我见过一个手机万能充电器，它有一整排的蓝色3mm高亮LED，在充电时，这些LED会开始跑马灯。然后在充电结束以后，它会用内置的蜂鸣器开始演奏《茉莉花开》。</div> <div> </div> <div>想象一下，当你睡觉前开始用它给手机电池充电，你需要先找一个东西把它的高亮LED盖住，因为它的跑马灯闪的让人根本无法入睡。然后，几个小时过后，当你睡的正香的时候，它突然响亮的演奏了一曲《茉莉花开》，告诉你充电完成了。相信被吵醒的人，都会有把这个充电器丢到垃圾桶的冲动。</div> <div> </div> <div>虽然跑马灯和蜂鸣器是工程师必备的练手好项目，但显然它们不适合出现在一个手机充电器上。</div> <div> </div> <div>当设计四色空气质量显示器时，也有许多容易添加的功能。例如，增加一个DS18B20，就能显示温度啦，再增加一个DHT11，连湿度也能测量了，或者再来一个继电器，还能远程控制家电？</div> <div> </div> <div>然而这些功能，就像充电器上的跑马灯一样，是完全多余的。它们反而会降低空气质量显示器本身的易用程度。</div> <div> </div> <div>另外一个方面，因为这是一个WiFi联网设备，不可避免的，需要对设备进行配置，输入当前所使用WiFi的SSID和密码，才能连接互联网。</div> <div> </div> <div>有许多种现成的方案能够实现这一个功能，例如：</div> <ul> <li>设备本身构造一个没有密码，或者密码已知的WiFi Station信号，通过手机连接，然后在手机上使用浏览器，对设备进行配置。</li> <li>TI的SmartConfig，微信的AirKiss，MTK的SmartConnection等等</li> </ul> <div> </div> <div>虽然有这么多不同的方法来配置WiFi，不过归根结底，这些方法都是利用WiFi信号做为载体，向联网设备发送ASCII字符。</div> <div> </div> <div>在这次设计当中，我想尝试一下另外一种配置WiFi的方法：通过手机屏幕的闪烁，向空气质量显示器发送WiFi的SSID和密码。</div> <div> </div> <div>这种方法和现有的SmartConfig，AirKiss等相比，优点是方便易用：只要拿起手机，直接输入要连接WiFi的SSID和密码，然后用手机屏幕对准设备，就能完成配置，不需要切换手机的WiFi环境。</div> <div> </div> <div>这种方法的缺点是：传输速度受到手机屏幕刷新率的限制，不同的手机会存在一定差异。</div> <div> </div> <div>到这里为止，小结一下要做的功能：</div> <ol> <li>空气质量数据显示</li> <li>通过手机屏幕来配置设备</li> </ol> <p> </p> <div><span style="font-size: 24px;">0x02 它是这样工作的</span></div> <hr> <div> </div> <div>图1 系统工作原理</div> <div> <img src="//image.lceda.cn/pullimage/wtGnYrz29WAIMgdEky9Ax3Ai6P9lreep5FOLM6M4.png" alt="" width="871" height="539"></div> <div> </div> <div>整个系统的大致工作原理画在了图1中。</div> <div> </div> <div>首先，空气质量数据的来源是专业的气象服务站，例如 <a href="http://www.aqicn.org/" target="_blank">aqicn.org</a>，它们能够提供实时可靠的空气质量数据，以及获取这些数据的API。比起较为便宜的家用空气质量测试设备，这些专业气象网站的数据往往更加准确。</div> <div> </div> <div>利用一台自有服务器，定时从专业气象站获取空气质量数据，并且保存到自有服务器本地。这样做的原因是：</div> <ol> <li>能够保证系统的自由度</li> <li>降低空气质量显示器固件的复杂性。</li> </ol> <div> </div> <p>最后，空气质量显示器通过无线路由器的WiFi网络，连接自有服务器，获取空气质量数据，并根据空气质量的好坏，使用四种不同的颜色将数据显示出来:</p> <p>图2 绿色，黄色，橙色和红色显示</p> <p>    <img src="//image.lceda.cn/pullimage/fypKk92oFcBwe6cGDcvZosdGlnrOOBzl51YrpxoO.jpeg" alt="" width="296" height="184"><img src="//image.lceda.cn/pullimage/zwELo3NPkpd9nW4F3x45eZrRpLpEW1YsPHBMT4La.jpeg" alt="" width="295" height="185"><img src="//image.lceda.cn/pullimage/yEUyoMf5WDO0iUEYwny5g4uqLT3Tl0BT1ky7sgBn.jpeg" alt="" width="295" height="185"></p> <p><img src="//image.lceda.cn/pullimage/lY8rTcwYfM1e9UMuLj6uftybLMbPWBBs1YkAXm1N.jpeg" alt="" width="294" height="186"></p> <p> </p> <div><span style="font-size: 24px;">0x03 硬件的设计</span></div> <hr> <p>硬件分为两部分电路组成：数码管驱动电路以及MCU电路，两块电路板使用FPC排线相连接。</p> <p>图3 PCB实物<img src="//image.lceda.cn/pullimage/JFlFj1qcm3k7AWmMkGfkWUysFBtyX0UyvubAV6CP.jpeg" alt="" width="480" height="504"></p> <div> </div> <div>显示部分选用了多色0.8英寸数码管。多色数码管的原理是在数码管的每个分段中，同时放入几种颜色不同的LED。通过控制不同颜色LED的亮度，就能混合出不同的颜色。</div> <div> </div> <div>由于数码管的每一个分段都要放置数个LED，因此，这种多色数码馆的功耗也比单色数码管高出许多。空气质量显示器使用了3个多色数码管，同时点亮时，最大驱动电流会达到150mA左右。这已经接近了STM32能够允许的IO吸收电流限制，因此，直接使用STM32的IO口驱动这些数码管是不安全的，需要搭配额外的驱动电路。</div> <div> </div> <div>图4 是数码管驱动电路的原理图。每一个数码管使用一片74HC373N锁存器来驱动。这个电路没有使用常见的数码管分时扫描显示法，而是利用了锁存器的数据保持功能，静态驱动数码管。</div> <div> </div> <p style="text-align: center;">图4 数码管驱动电路</p> <p> <img src="//image.lceda.cn/pullimage/aeSh0U4xqx2UUgybc8GhbaPNCLD0FeiZZydlL8zw.png" alt="" width="1700" height="1187"></p> <div> </div> <div>采用静态方式驱动数码管的原因有两个：</div> <ol> <li>因为多色数码管的颜色调节需要使用PWM进行功率控制，如果同时使用分时扫描驱动，某些颜色时会出现闪烁现象。</li> <li>既然数码管驱动电路是必须的添加的，为什么不让事情变的更简单一些呢？</li> </ol> <div> </div> <p>图5 MCU和WiFi模块接口部分电路原理图</p> <p> <img src="//image.lceda.cn/pullimage/wB9yuHQtUGo1vsIZop6Pmb5WGE9w8mkstelJ59EG.png" alt="" width="1700" height="1187"></p> <div> </div> <div>MCU选用STM32F103C8T6，通过串口连接WiFi模块，WiFi模块选用ESP8266。</div> <div> </div> <div>P4是光敏电阻的接口。光敏电阻接收手机屏幕闪烁之后发出的信号。这个信号经过两级三极管简单放大以后，送到STM32进行解码。通过这种方式，实现低成本和有效的系统配置方法。</div> <div> </div> <div>MicroUSB接口除了提供系统的电源以外，D－和D＋还分别连接了STM32的串口RX和TX，这不是USB的标准连接方法，而是预留给调试设备使用的。</div> <div> </div> <div>图6 设备内部图片</div> <div> </div> <p><img src="//image.lceda.cn/pullimage/Ns7lfel5fDspkwIiR5BXUinBc0Kyn7Eptg13rWl4.jpeg" alt="" width="480" height="294"></p> <p> </p> <div>0x04 固件和软件</div> <hr> <div>STM32固件</div> <div>因为需要获取的数据在自己的服务器上进行了二次封包，所以STM32的固件在WiFi上的的处理就变得相对比较简单，图7是STM32程序的主要部分流程图：</div> <div> </div> <div>图7 MCU固件流程图</div> <div> <img src="//image.lceda.cn/pullimage/kb0ZJgeWgrAsncx0iPTWhDA03meOeAUW2LRL4Qbh.jpeg" alt="" width="600" height="1048"></div> <div> </div> <div> </div> <div>光数据传输</div> <div>系统使用手机屏幕闪烁的方式，来传递WiFi的SSID和密码。本质上这是一种异步单线传输，必须设定数据的传输速率，这和串口传输有点类似，只是我们的数据来源是屏幕手机的闪烁，并且预先约定好了数据的配置选项。</div> <div> </div> <div>Javascript和屏幕刷新率</div> <div>使用网页方式来实现手机端的应用程序。网址为：<a href="http://roots4pi.com/caqi-tool/" target="_blank">http://roots4pi.com/caqi-tool/</a>。</div> <div> </div> <div>系统有三个配置选项：</div> <ol> <li>WiFi SSID</li> <li>WiFi密码</li> <li>需要获取空气质量数据的城市位置</li> </ol> <div> </div> <div>为了节约数据的传输时间，可以单独更新其中的任何一项，只要将其它选项留空白即可。</div> <div> </div> <div>在页面上填写好需要更新的配置以后，将空气质量显示器放置在手机屏幕上，让它底部的光敏二极管能够和手机屏幕尽量靠近，然后点击页面上的 “start” 按钮。</div> <div> </div> <div>几秒钟以后，如果数据传输和校验都正确，空气质量显示器会显示 “CCC”的字样，然后用新的配置自动重启运行。</div> <div> </div> <div>通过手机屏幕闪烁的方式来传递数据，最大的问题在于：这个方法受限制与手机的屏幕刷新率。当屏幕的图像数据闪烁频率超过手机屏幕的硬件刷新率时，就会出现数据掉帧的现象。另一种情况是，手机处理器运行太慢，在一帧图像需要显示的时候，仍然没有完成图像的绘制。</div> <div> </div> <div>这两种情况都会出现数据丢失损坏的现象。解决办法只有降低数据传输的频率，不过这样做也会延长数据传输的时间。</div> <p> </p> <div><span style="font-size: 24px;">0x05 获取空气质量数据</span></div> <hr> <div>获取空气质量原始数据的工作，是在自有Linux服务器上，使用python脚本完成的。</div> <div> </div> <div>空气质量数据的来自于网站 www.aqicn.org，这是一个源自“ World Air Quality Index”项目的网站。网站的宗旨是：“提高空气污染意识，为全球提供统一的空气质量信息”。</div> <div> </div> <div>aqicn网站还提供一个JSON的API接口，用来提供外部程序的集成：<a href="http://aqicn.org/json-api/doc/" target="_blank">http://aqicn.org/json-api/doc/</a></div> <div> </div> <div>我们的自有服务器上，通过设定Linux的定时任务，每隔15分钟，就调用一次python脚本，通过JSON的API接口，获取aqicn上的指定城市数据，然后保存在自有服务器本地，以提供给空气质量显示器使用。</div> <div> </div> <div>以下是获取空气质量数据的python脚本：</div> <div> <pre class="prettyprint lang-py">import re import requests import sys import json import os token = "06119a2e7f455402ef6c4ec02a62bc9a87ab××××" addr = "https://api.waqi.info/feed/" path = "/var/www/aqicn/" if (len(sys.argv) > 1): city = sys.argv[1] else: city = "xiamen" req = addr + city + "/?token=" + token str = requests.get(req).text #print str p = json.loads(str) if (p['status'] == "ok"): print ("PM2.5 value = %d" % p['data']['iaqi']['pm25']['v']) fpath = path + city if (os.path.isfile(fpath)): os.remove(fpath) fh = open(fpath, "w") fh.write("%d" % p['data']['iaqi']['pm25']['v']) fh.close() print ("write to file " + fpath) else: print ("response error") </pre> </div> <br> <p> </p> <div><span style="font-size: 24px;">0x06 外壳的一些考虑</span></div> <hr> <div>空气质量显示器的外壳使用3D打印的方式制作。因为系统内部分成的两块电路板，因此需要考虑到两块电路板相互之间的固定和连接方式。</div> <div> </div> <div>图8 外壳使用SketchUp设计</div> <div><img src="//image.lceda.cn/pullimage/cEqLGgiSrsWnxFW0eQGzUL1LV7ytbJFlvrJgPQQm.png" alt="" width="600" height="304"></div> <div> </div> <p>图9 3D打印外壳实物</p> <p> <img src="//image.lceda.cn/pullimage/8jsbmynJgMlxNFnNZidzRNnRX3fbWbwtnJ8DbJeE.jpeg" alt="" width="480" height="517"></p> <div> </div> <p>空气质量显示器的正面使用了定制的黑色亚克力挡光板，让LED的显示更加清晰，美观。</p> <p>图10 空气质量显示器正面</p> <p> <img src="//image.lceda.cn/pullimage/MwVHGUn47E5E8ZaogHlhnRJdvwXDKpr2NeO7fCAz.jpeg" alt="" width="480" height="298"></p> <div> </div> <div> </div> <p>光敏二极管被设计安放在空气质量显示器的底部，这样，就可以把它直接放置在手机屏幕上，设置WiFi和城市位置信息。</p> <p>图11 位于设备底部的光敏二极管</p> <p> <img src="//image.lceda.cn/pullimage/bzppZC5yqejzFDugHbfEDXE1gjrlsXFPWdyB5AVd.jpeg" alt="" width="480" height="221"></p> <div> </div> <div> </div> <p>MicroUSB供电座位于设备后面，使用了90度的MicroUSB母座：</p> <p>图12 设备背部接口</p> <div><img src="//image.lceda.cn/pullimage/avjAs7CueDY37KYWltO26a4MciOZrgKOTA7fB9CA.jpeg" alt="" width="480" height="303"></div> <div> </div> <p><span style="font-size: 24px;">0x07 总结和延伸</span></p> <hr> <div>四色空气质量显示器能够随时提供当前城市的空气质量信息，并使用四种不同的颜色来标识。比起单纯使用数字，这样的方法更加直观有效：只要抬起眼皮扫一眼，就能够知道今天的空气质量如何。因为是专用设备，在实际使用中，这比手机端的天气app，还要方便一些。</div> <div> </div> <div>换一个角度想，这个设备实际上是一个能够用四种颜色显示远程服务器上数据的装置，至于数据的种类是什么，则完全由我们自己来定义。所以，可以简单的更改自有服务器上的脚本和数据，而不用重写设备固件，来改变设备的用途。</div> <div> </div> <div>例如，我们可以通过gamil的API，获取授权邮箱的未读邮件数，然后显示在设备上。这样，四色空气质量显示器就变成了一个“未读邮件显示器”。</div> <div> </div> <div>再如，我们也可以通过服务器，获取某一只股票的价格，显示在设备上，这样，四色空气质量显示器就变成了一个“迷你股票价格显示器”。</div> <div> </div> <div>IoT设备的玩法多种多样，并且在个人或者工业领域，都有着十分广阔的应用前景。</div> <p> </p> <p> </p> <p><span style="font-size: 24px;">0xFF 附录</span></p> <hr> <p><strong>原理图源文件：</strong></p> <p><a class="ke-insertfile" href="http://club.szlcsc.com/article/downFile_E7AFC29AEE87E216.html" target="_blank">SCH-MainBoard.zip</a> (下载次数：744)  </p> <p><a class="ke-insertfile" href="http://club.szlcsc.com/article/downFile_7F1A56587D73A11B.html" target="_blank">SCH-DisplayBoard.zip</a> (下载次数：681)  </p> <p> </p> <p><strong>PCB源文件：</strong></p> <p><a class="ke-insertfile" href="http://club.szlcsc.com/article/downFile_E5349EBE3FF3D0C7.html" target="_blank">PCB-MainBoard.zip</a> (下载次数：781)  </p> <p><a class="ke-insertfile" href="http://club.szlcsc.com/article/downFile_2122E5B2FDE3C9E7.html" target="_blank">PCB-DisplayBoard.zip</a> (下载次数：745)  </p> <p> </p> <p><strong>BOM表：</strong></p> <p><a class="ke-insertfile" href="http://club.szlcsc.com/article/downFile_8D64441566BB71EF.html" target="_blank">BOM-MainBoard.zip</a> (下载次数：690)  </p> <p><a class="ke-insertfile" href="http://club.szlcsc.com/article/downFile_028EFF3EA24FE068.html" target="_blank">BOM-DisplayBoard.zip</a> (下载次数：673)  </p> <p> </p> <p><strong>腾讯视频：</strong></p> <p><a href="https://v.qq.com/x/page/t0541yfz9nj.html" target="_blank">https://v.qq.com/x/page/t0541yfz9nj.html</a></p> <p> </p> <p> </p> <h3><strong>更多项目详情见链接：http://club.szlcsc.com/article/details_5837_1.html </strong></h3> <h3><strong>本项目归立创社区“Zeronex”所有</strong></h3> </div>