node-red可视化编程——自定义动态CPU显示图表节点

目录

1. node-red介绍
2. Demo效果图
3. node-red自定义节点A–获取主机CPU使用率os-info
4. node-red自定义节点B–动态显示UI图表panel-node
5. 节点A、节点B联合使用Demo效果
6. github源码地址

node-red介绍

node-red是IBM开发的一个基于浏览器、可拖动节点和连接的可视化编程工具。
该工具基于node.js。
开发者可通过快速拖动节点，连接流程开发自己的dashboard界面
或者用于构建物联网应用程序。具体安装和介绍见官网(https://nodered.org/)
本文基于ubuntu 16.04 + node-red编程工具自定义节点，
实现一个可以动态显示CPU使用率的一个dashboard界面。

Demo效果图

如图，该demo动态地显示主机CPU，X轴为当前时间，Y轴为CPU使用率。
每一秒钟自动读取CPU使用率并动态加载到表格中。
当CPU使用率超过90%的时候折线变为红色，左上角为当前的CPU使用率。

上图的效果使用node-red编程工具使用，一共使用了三个节点。第一个节点为node-red自带的inject节点，设置周期性每秒钟自动注入时间戳，第二个节点为自己实现的节点并添加到node-red中，该节点能自动读取主机CPU等信息，第三个节点为动态图表，也是自己实现的节点并添加到node-red中，该节点能将os-info节点的信息呈现给用户。下面是两个自定义节点的代码实现。`

node-red自定义节点A–获取主机CPU使用率os-info

	新建文件夹，并且新建三个文件
 	os-info.html   os-info.js  package.json
	os-info.html,该文件有三个<script>元素
	第一个<script>用来注册节点
	第二个<script>为节点的属性前端页面
	第三个节点<script>为节点的说明页面

<script type="text/javascript">
    RED.nodes.registerType('os-info',{
        category: 'myNode',
        color: '#a6bbcf',
        defaults: {
            name: {value:""}
        },
        inputs:1,
        outputs:1,
        icon: "file.png",
        label: function() {
            return this.name||"os-info";
        }
    });
</script>

<script type="text/x-red" data-template-name="os-info">
    <