目录
- node-red介绍
- Demo效果图
- node-red自定义节点A–获取主机CPU使用率os-info
- node-red自定义节点B–动态显示UI图表panel-node
- 节点A、节点B联合使用Demo效果
- 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">
<