即使不会node.js,拖拽就可完成数据的可视化展示
摘要:node-red是一款基于Node.js的开源可视化界面开发工具,不需要掌握node.js而通过拖拽即可完成数据的可视化展示。
1.首先看一下node-red对数据的渲染效果

你可能认为,必须熟练掌握前端知识才能做出这样的页面,实际上它只需要一下几步拖拽操作即可

node-red本身就是为MQTT而诞生,因此很适合进行物联网数据展示,支持数据库操作、mqtt协议,同时用户也可以在它的基础上,使用html等进行前端界面修改。如果你想快速而完美的展示你的数据,不妨试一试NODE-RED。当然,你想安装它,也很简单的~~
2.安装
首先需要安装nodejs(百度上有很多示例,也挺简单的,就不讲解啦),然后 在控制台输入 npm install -g --unsafe-perm node-red 即可;
为了让node-red在后台保持运行,我们使用此命令:nohup node-red &
完整的安装步骤如下
- 安装nodejs环境
sudo apt-get install nodejs
- 安装node-red
sudo apt-get install npm
sudo npm install -g node-red
- 普通运行
node-red
- 后台持续运行
nohup node-red &
3.使用示例
展示一下我自己展示温湿度的页面
nede-red这款工具,好用而且简单,很适合初学者。给大家分享一下我的数据展示,附源码(页面交丑,仅供交流学习)其中包括连接mqtt服务器、数据插入mysql数据库
数据展示页面

在下面这个界面中,我进行了两个温度、两个湿度数据的展示;当订阅的主题接受到消息后,解析json数据格式,得到温湿度数据并展示在前端

布局:
注意,在此布局中,有使用到数据库。我使用的是mysql,只是简单的插入数据,仅供参考。
- 紫色的方块为订阅的MQTT消息,需要配置相应的参数
- 绿色为调试信息;
- 蓝色方块为布局的展示,不同部件,展示的效果不同
- 黄色方块为信息格式转化,主要是为了方便折线图的展示;
- 橙色方块为数据库操作,需要连接自己的数据库;

其实实现很简单,就是通过拖拉、然后设置相应的参数,基本上不要求编程能力。而且,只要有数据,就可以通过nodered去展示。
即使不会node.js,拖拽就可完成数据的可视化展示的更多相关文章
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- 一步一步实现JS拖拽插件
js拖拽是常见的网页效果,本文将从零开始实现一个简单的js插件. 一.js拖拽插件的原理 常见的拖拽操作是什么样的呢?整过过程大概有下面几个步骤: 1.用鼠标点击被拖拽的元素 2.按住鼠标不放,移动鼠 ...
- 再谈React.js实现原生js拖拽效果
前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...
- js拖拽效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 关于 JS 拖拽功能的冲突问题及解决方法
前言 我在之前写过关于 JS 拖拽的文章,实现方式和网上能搜到的方法大致相同,别无二致,但是在一次偶然的测试中发现,这种绑定事件的方式可能会和其它的拖拽事件产生冲突,由此产生了对于事件绑定的思考.本文 ...
- js拖拽分析
js拖拽分析 思路 1.三个鼠标事件,mousedown,mousemove,mouseup 2.可移动性absolute 3.边界限制 得到鼠标点击处和div边界的距离,然后得出top 和 left ...
- JS拖拽div(移动)
<!doctype html><html><head> <meta charset="utf-8"> <title>JS ...
- 浅谈js拖拽
本文来自网易云社区 作者:刘凌阳 前言 本文依据半年前本人的分享<浅谈js拖拽>撰写,算是一篇迟到的文章. 基本思路 虽然现在关于拖拽的组件库到处都是,HTML5也把拖放纳入了标准.但考虑 ...
- 原生js拖拽、jQuery拖拽、vue自定义指令拖拽
原生js拖拽: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- 原生js拖拽功能制作滑动条实例教程
拖拽属于前端常见的功能,很多效果都会用到js的拖拽功能.滑动条的核心功能也就是使用js拖拽滑块来修改位置.一个完整的滑动条包括 滑动条.滑动痕迹.滑块.文本 等元素,先把html代码写出来,如下所示: ...
随机推荐
- 源码搭建zabbix平台
1.基于lnmp部署zabbix监控平台; zabbix优点: 1.支持自动发现服务器和网络设备: 2.分布式的监控体系和集中式的WEB管理: 3.支持主动监控和被动监控模式: 4.基于SNMP.IP ...
- Redis常用命令-实战篇
目录 写在前面 连接操作命令 持久化 远程服务控制 对value操作的命令 操作字符串String命令 List Set Hash 写在前面 java 操作 redis 太常见了,基本上有需要的系统, ...
- DNS 服务 docker-bind 的部署使用
前言 前面使用 nginx 代理转发了几个域名到服务器,但是每次添加一个域名都需要在客户端添加一行 hosts 文件,无疑是繁琐的,其中也提到可以使用 DNS 来实现自动解析域名 到指定服务器的功能, ...
- OpenGL 基础光照详解
1. 光照 显示世界中,光照环境往往是相对复杂的.因为假设太阳作为世界的唯一光源,那么太阳光照在物体A上A将阳光进行反射后,A又做为一个新的光源共同作用于另一个物体B.所以于B来讲光源是复杂的.然而这 ...
- SNN_LIF模型
LIF模型 Leaky integrity-Fire(LIF)模型 输入信号直接影响神经元的状态,即神经元膜电位,只有当膜电位上升到阈值的时候,才会产生输出信号. 膜电位:细胞膜两侧的电位差.只有当膜 ...
- 使用ResponseSelector实现校园招聘FAQ机器人
本文主要介绍使用ResponseSelector实现校园招聘FAQ机器人,回答面试流程和面试结果查询的FAQ问题.FAQ机器人功能分为业务无关的功能和业务相关的功能2类. 一.data/nlu.y ...
- AtCoder Beginner Contest 328 (ABC328)
A. Not Too Hard 模拟. Code B. 11/11 模拟. Code C. Consecutive Description 给你一个字符串 \(S\),有 \(Q\) 次询问,每次输入 ...
- 使用 TortoiseGit 在两个项目之间共享代码(cherry-pick)
需求:项目 A 需要新增项目 B 的部分代码,要求不变更 commit message 信息 做法 项目 A 新增上游 Remote,Remote URL 为 项目 B 的 URL 新增方式:依次点击 ...
- 七天.NET 8操作SQLite入门到实战 - 第二天 在 Windows 上配置 SQLite环境
前言 SQLite的一个重要的特性是零配置的.无需服务器,这意味着不需要复杂的安装或管理.它跟微软的Access差不多,只是一个.db格式的文件.但是与Access不同的是,它不需要安装任何软件,非常 ...
- Jayway JsonPath-提取JSON文档内容的Java DSL
介绍 JsonPath是一种能够提取部分JSON文档属性.对象.数组的语法,支持条件过滤.数学运算.字符串处理等功能.JsonPath与JSON文档就像 XPath 表达式与 XML 文档结合使用一样 ...