F.A.B IoT 原型拟用EChart替换GoogleChar

gauge.png

前言

承接前文Flask AppBuilder 用于物联网应用服务器原型设计所述，除了基础的最小化设计之外，要做的事情很多：

• 太多国外组件，需要兼容国内的图形库和第三方认证；
• Dashboard即仪表盘设计，即JS/CSS客制化；
• 使用率的图示，需要替换Google Chart，重新定义ChartView；
• API的集成，重新定义REST API的架构；
• 权限的表达、申请和授权，需要更新ER图；
• 与设备云API的整合；
• hash替代id使用；
• 从sqlite3到MySQL/Maria/Redis的整合。

UI是应用层迭代的重要部分

linechart.png

F.A.B内建的图表绘制API来自Google，但是国内用户用不了。商用的Highchart更好，但是需要许可证。阿里云的可视化组件依然需要交费，所以我准备选用百度开源的EChart。

如果要采用EChart替换Google Chart API，则需要改动到F.A.B的底层ChartView，在不熟悉F.A.B的情况下，比较浪费时间。所以我采用替换CSS/JS文件的方式来实现。

更新私有静态资源文件

更新后的工程数结构如下：

C:.
+---app
|   +---static
|   |   \---css
|   +---templates
|   |   \---appbuilder
|   \---translations
|       \---pt
|           \---LC_MESSAGES
\---babel

在 templates 路径下增加一个epicbase.html。

> dir app\templates\ /b
404.html
appbuilder
dashboard.html
epicbase.html
gauge_device.html
index.html
messages.html
testpage.html

epicbase.html内容如下：

{% extends 'appbuilder/baselayout.html' %}

{% block head_css %}
    {{ super() }}
    <link href="{{url_for('static',filename='css/epic.css')}}" rel="stylesheet">
{% endblock %}

{% block head_js %}
    {{ super() }}
    <!--<script src="{{url_for('static',filename='js/your_js_file.js')}}"></script>-->
{% endblock %}

{% block tail_js %}
    {{ super() }}
    <!--<script src="{{url_for('static',filename='js/your_js_file.js')}}"></script>-->
{% endblock %}

部分代码被注释，是因为不想产生没有必要的404错误。该文件中已经增加了自己的css文件，百度EChart的JS/CSS可以嵌入到这些位置中。其中EChart如果太大，则可以放置在页面底部的位置加载。

接下来不够就是按照EChart Demo一个个地把数据API对接到JS库就可以显示出来了。

想来想去，关于门锁不过就是每天的开关次数之类的柱状图。而对于设备供应商来说，显示的是库存和激活数量的饼图，以及与销售有关的着色地图。仔细推敲一下，或许还可以分析一下单台设备的电压和电压报警，以及错误报警的统计分析，用于产品维护等。

与可视化编辑器整合

前文IoT数据可视化工具中提到了Freeboard。这是一个很棒的设计，可惜Freeboard支持的可视化类型太少，如果整合EChart，则可以实现一个比较完美的设计：自由、开源、可视化编程、多种类型图表。