leaniot/dashboard

A dashboard for LeanIOT, including user management, notification management, data visualization and so on.

Develop Document for Dashboard of LeanIOT

Brief Introduction

It's a develop document of dashboard for LeanIOT. The dashboard provides essential features for allowing users to manage their configurations, devices, and monitor data, including user management, notification management, data visualization and so on. In this document, it mainly includes 3 parts: deployment, front end design and back end design.

Deployment

Run the following script under the root directory to install all the dependencies that the service needs:

sudo npm install --save

Then start the service by running the following script:

node .

You can reach your web service by visiting localhost:3000/.

Front End Design

Templates

This project supports switching different templates without changing too much code. You need config your template path in the server.js under the /server and restart the service to activate the new template. In server.js, you can set your own template path as long as the template subject to the standard front end data model.

// Set static files paths
app.set('template', path.join(__dirname, '../client/material/template'));
app.set('js', path.join(__dirname, '../client/material/js'));
app.set('css', path.join(__dirname, '../client/material/css'));
app.set('sass', path.join(__dirname, '../client/material/sass'));
app.set('img', path.join(__dirname, '../client/material/img'));

Front End Data Model

1. Temporal Data (for Line Chart)

A standard temporal data model in json format:

{
	"valueBound": ["upperbound", "lowerbound"],
	"data": [ {}, {}, ... ],
	"temporalKeys": [ "Key_t1", "Key_t2", ... ],
	"detailKeys": [ "Key_d1", "Key_d2", ... ],
	"timestamps": [ "t1", "t2", ... ]
}

A json data subject to the standard temporal data model could be easily visualized by invoking all of the methods of object lineChart in client/js/line-chart.js. For the time being, lineChart supports:

• liveLine: A non-interactive line chart refresh the figure in a fixed interval time. Its datasource (determined by apiParam and apiUrl) is supposed to provide a real-time data in chronological order (which means the response of every query would return the latest data).

There is an example for detailed explanation. In our backend loopback service, it provides an API (param: { sensorId: sensorId }, url: "/sensorLatestTemporalView") for returning the latest sensor data in chronological order.

var sensorId = "{{ sensorId }}";

lineChart.liveLine(
	{ sensorId: sensorId },
	"/sensorLatestTemporalView",
	"latestTemporalChart", 
	5000
);

2. Geo Location Data (for Map)

A standard geo location data model in json format:

{
	
}

dashboard's Issues

修复和完善 API

临时修复：
2f0e52c
a648760

不要直连 MongoDB

临时代码：
7426fc2

前端开发

Repo 内容

这个库是一个专门用来实现 Dashboard 的 Node.js 服务端程序，它封装了一组前端所需的 API ，并伺服前端页面。

目前的实现中已经有一套前端页面实现，位于 /client 目录下，不过没有启用，可以忽略它。

本地部署和调试：

1. 切到 dev 分支

2. 安装依赖+启动：

npm install --save
node .

3. 查看 http://localhost:3000/testbed 页面

这是一个测试 API 的简单 HTML 页面，可以从这个页面了解接口，相当于文档了。现在 API 还不全，我会陆续补全。

基本概念

• 三个层次

每个用户可以拥有多个 项目(Project)，每个 项目 下有多个 设备(Device) ，每个 设备 下有多个 传感器(Sensor)。项目 可以自由地创建和删除； 设备 需要通过一个引导页面来添加，也叫“绑定设备”，删除 设备 也叫“解除绑定”。设备上的传感器可以自由创建和删除，用户也可以自由地配置传感器的参数，如数据类型和数据采集周期等。

• 数据

每个 传感器 实时产生一组 数据(Data)。每条 数据 都有时间戳。大部分传感器产生的数据类型是简单数字，而有的特殊传感器(如 GPS)会产生特定的 JSON 对象(如 {lat:xxx,lng:xxx})。

• 通知和通知规则

用户可以创建「通知规则」，如“传感器T0温度高于100度时邮件通知我”；用户也可以在页面上查看通知的历史记录。

前端页面结构

• 首先是「登录」和「注册」两个页面；用户登录后，首先呈现「项目列表」页面。
• 从「项目列表」可以进入某个项目的「项目首页」。
  -「项目首页」有 4 个 TAB：分别是「总览」、「数据」、「设备」、「通知」、「设置」
  -「总览」和「设置」还未具体设计，先忽略