摘要: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,拖拽就可完成数据的可视化展示的更多相关文章

  1. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  2. 一步一步实现JS拖拽插件

    js拖拽是常见的网页效果,本文将从零开始实现一个简单的js插件. 一.js拖拽插件的原理 常见的拖拽操作是什么样的呢?整过过程大概有下面几个步骤: 1.用鼠标点击被拖拽的元素 2.按住鼠标不放,移动鼠 ...

  3. 再谈React.js实现原生js拖拽效果

    前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...

  4. js拖拽效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 关于 JS 拖拽功能的冲突问题及解决方法

    前言 我在之前写过关于 JS 拖拽的文章,实现方式和网上能搜到的方法大致相同,别无二致,但是在一次偶然的测试中发现,这种绑定事件的方式可能会和其它的拖拽事件产生冲突,由此产生了对于事件绑定的思考.本文 ...

  6. js拖拽分析

    js拖拽分析 思路 1.三个鼠标事件,mousedown,mousemove,mouseup 2.可移动性absolute 3.边界限制 得到鼠标点击处和div边界的距离,然后得出top 和 left ...

  7. JS拖拽div(移动)

    <!doctype html><html><head> <meta charset="utf-8"> <title>JS ...

  8. 浅谈js拖拽

    本文来自网易云社区 作者:刘凌阳 前言 本文依据半年前本人的分享<浅谈js拖拽>撰写,算是一篇迟到的文章. 基本思路 虽然现在关于拖拽的组件库到处都是,HTML5也把拖放纳入了标准.但考虑 ...

  9. 原生js拖拽、jQuery拖拽、vue自定义指令拖拽

    原生js拖拽: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  10. 原生js拖拽功能制作滑动条实例教程

    拖拽属于前端常见的功能,很多效果都会用到js的拖拽功能.滑动条的核心功能也就是使用js拖拽滑块来修改位置.一个完整的滑动条包括 滑动条.滑动痕迹.滑块.文本 等元素,先把html代码写出来,如下所示: ...

随机推荐

  1. CF1364B

    题目简化和分析: 这题没啥好说的,找其绝对值最大,也就是找到每一个山峰山谷. 这样不仅满足选择的个数最少,并且值最大. 正确性证明: 若 \(a\le b\le c\) \(|a-b|+|b-c|=( ...

  2. C、C++函数和类库详解(VC++版)(2016-06-26更新)

    C.C++函数和类库详解(VC++版)(未完成) 整理者:赤勇玄心行天道 QQ:280604597 Email:280604597@qq.com 大家有什么不明白的地方,或者想要详细了解的地方可以联系 ...

  3. 【对象存储】Minio本地运行和 golang客户端基本操作

    运行环境 OS和Golang版本: go version go1.21.0 darwin/arm64 安装 源码安装 下载最新版本的源码,地址https://github.com/minio/mini ...

  4. 解码注意力Attention机制:从技术解析到PyTorch实战

    在本文中,我们深入探讨了注意力机制的理论基础和实际应用.从其历史发展和基础定义,到具体的数学模型,再到其在自然语言处理和计算机视觉等多个人工智能子领域的应用实例,本文为您提供了一个全面且深入的视角.通 ...

  5. 一个基于百度飞桨封装的.NET版本OCR工具类库 - PaddleOCRSharp

    前言 大家有使用过.NET开发过OCR工具吗?今天给大家推荐一个基于百度飞桨封装的.NET版本OCR工具类库:PaddleOCRSharp. OCR工具有什么用? OCR(Optical Charac ...

  6. 代码安全之代码混淆及加固(Android)🔒

    ​ 代码安全之代码混淆及加固(Android) 目录 代码安全之代码混淆及加固(Android) 摘要 引言 正文 代码混淆 代码加固 总结 参考资料 摘要 本文将介绍如何通过代码混淆和加固来保护An ...

  7. 关联规则挖掘:Apriori算法的深度探讨

    在本文中,我们深入探讨了Apriori算法的理论基础.核心概念及其在实际问题中的应用.文章不仅全面解析了算法的工作机制,还通过Python代码段展示了具体的实战应用.此外,我们还针对算法在大数据环境下 ...

  8. 🔥🔥Java开发者的Python快速进修指南:面向对象--高级篇

    首先,让我来介绍一下今天的主题.今天我们将讨论封装.反射以及单例模式.除此之外,我们不再深入其他内容.关于封装功能,Python与Java大致相同,但写法略有不同,因为Python没有修饰符.而对于反 ...

  9. Linux机器自建账号并赋予sudo权限,同时修改远程端口

    默认使用root账号来操作Linux有一定风险,因此需要自建账号并赋予sudo权限,方便使用 登录为root用户后,创建账号 adduser <username> Ubuntu系统会同时要 ...

  10. Go笔记(2)-5种运算符总结

    运算符 (1)算术运算符 (2)关系运算符 (3)逻辑运算符 (4)位运算符 (5)赋值运算符