初学HTML5，用eCharts做了一个空气质量检测仪

一直想自己动手做一个室内空气质量检测仪，主要关心颗粒物浓度、二氧化碳浓度和温湿度指标。

设计方案

网上也找到了一些爱好者作品的演示，发现大多是基于单片机+传感器+显示器的方案。比如下面这个x宝找到的：

笔者在多年以前也做过类似的产品开发。做这样一个界面，先要在pc机上规划好显示的页面，然后抠字模、扣图标，把这些字模和图标用专用的工具软件转为单片机能识别的格式，放到单片机存储空间的特定位置供程序绘图时调用。一个产品开发怎么也得3个月到半年的时间，其中主要的工作量在人机界面，需要堆砌大量的底层代码逻辑，这些底层代码的重用性是很差的，如果不大批量生产，这些劳动没有多少价值可言。

前端

最近由于工作的需要，刚好学习了一些前端HTML5 DIV+CSS的基础知识，就在想能不能用html5代码来码一个这样的界面呢？说干就干，直接在浏览器当中写代码，第一版的显示界面是这样的：

直接用div堆砌的色块，然后在里面显示各种空气质量参数。做好以后发现一个问题，满屏都是数字看得人眼花缭乱，头晕。

果断换用百度的eCharts，数据用图表方式显示：

Javascripts代码：

<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript">$(document).ready(function(){var t = setInterval(tupdate, 1000);var pm25Chart = echarts.init(document.getElementById('pm2-5'));var pm25option = {title: {text: 'PM2.5', //x: 'center',},grid:{x:20,y:30,x2:20,y2:10,},series: [{name: 'PM2.5',type: 'gauge',min: 0,max: 400,  splitNumber: 8,axisLine: {lineStyle: {color:[[12/400, '#006000'],[35.4/400, '#FFDC35'],[55.4/400, '#FF8000'],[150.4/400, '#EA0000'],[250.4/400, '#460046'],[400/400, '#750000']                     ],width:3,}},axisLabel: {show:false,},detail: {formatter:'{value}',offsetCenter:[0,'60%'],},data: [{value: 45.1, name: 'ug/m3'}]}]};function hchoupdate(data) {if (hchooption.series[0].data[0]['value'] != data/1000) {hchooption.series[0].data[0]['value'] = data/1000;hchoChart.setOption(hchooption);}}function humiupdate(data) {$("#humin div.para_data").text(String(Math.round(data/10)));}function tempupdate(data) {$("#temp div.para_data").text(String(Math.round(data/10)));}function tupdate() {var d=new Date();var hours=d.getHours();var minutes=d.getMinutes();    var seconds=d.getSeconds();$("#date-time div.date").text(d.toDateString());$("#date-time div.time").text(((hours  <  10)  ?  "0"  :  "")+hours+":"+((minutes  <  10)  ?  "0"  :  "")+minutes+":"+((seconds  <  10)  ?  "0"  :  "")+seconds);$.getJSON("/air-quality-get", function(data) {for (var key in data) {if (key == 'co2Data')co2update(data['co2Data']);else if (key == 'hchoData')hchoupdate(data['hchoData']);else if (key == 'tempData')tempupdate(data['tempData']);else if (key == 'humiData')humiupdate(data['humiData']);else if (key == 'pm1Data')pm1update(data['pm1Data']);else if (key == 'pm10Data')pm10update(data['pm10Data']);else if (key == 'pm25Data')pm25update(data['pm25Data']);               }});}});
</script>

以上是javascripts的代码，有所简略。因为首页要放置一个菜单，所以还用到了bootstrap。

后端

关于后端，本来打算采用树莓派，直接通过GPIO扩展口和传感器模块相连。但是这里又有一个问题，市面上能买到的空气质量传感器，比如攀藤的PMS系列，Senseair的S8系列，都是串口通讯，而树莓派的扩展IO口，一共只有一个UART，还是和板内蓝牙共享的。所以后来采用了一块国产的单板计算机Innostick6，它有六个串口也支持Debian。

几点体会

1、采用HTML5做交互，和采用C语言像素描点完全不在一个层面上

没有编程基础的人也可以做这个工作，前端设计有很多中间件可以免费获得，因此真正的工作量就是调整和改善UI。这一点我觉得特别适合一些创新项目或者展示项目，可以把精力集中到应用上。

2、关于性能问题

这些年由于芯片技术的发展，尤其是手机芯片的突飞猛进。低功耗高性能的芯片层出不穷，在无风扇无散热的条件下跑一个桌面操作系统已经很平常了。笔者采用的就是一个ARM Cortex-A7单核的嵌入式计算机，运行Debian stretch，后端采用Python Flask架构，前端跑浏览器+eCharts，3000点的仪表盘显示cpu表示无压力。

最后放一张整体层次图