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，则可以实现一个比较完美的设计：自由、开源、可视化编程、多种类型图表。
网友评论