初学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表示无压力。

 

最后放一张整体层次图