Node-RED教程(十四):定制Node-REDUI

Node-RED系列文章目前已经写了16篇,介绍了Node-RED的安装以及默认安装的一些基本节点的使用,作为物联网的一个可视化拖动的流程,Node-RED的确实很容易上手。还没开始学习的同学可以先看下我以前的文章。

本篇文章可能是这个系列的倒数第二篇文章,确切说,本篇文章可能是最后一篇Node-RED系列的技术文章。后面会写一篇有关本系列文章的写作总结,以及自己在学习的过程中一下经验分享给大家。写这个系列花了不少时间和精力,但也确实帮助了很多人。很多人拜托我解决各种各样的Node-RED问题,其实在三个月前,我也是一个小白,只是机缘巧合进入了这个物联网领域。后续如果还有人想看Node-RED的其他技术解析,可以留言给我。我会抽时间给安排上。最后,写作不易,如果对你有帮助,请不要吝啬你的赞。让我们进入最后一篇的Node-RED技术分享吧。

本篇文章我将带领大家对开源物联网平台Node-RED,从源码层面上进行定制化修改。

环境搭建

搭建一个Node-RED的开发环境需要安装一下软件

  • nodejs
  • git (可选)
  • vscode (可选)

直接从github下载源码

git clone https://github.com/node-red/node-red.git

下载完成后

cd node-red

npm i # 安装依赖包

npm run dev # 启动开发环境

启动日志

代码归“拿我格子衫来”所属
> node-red@1.2.9 dev D:\my\node-red
> grunt dev

Running "clean:build" (clean) task
>> 3 paths cleaned.

Running "jsonlint:messages" (jsonlint) task
>> 35 files lint free.

Running "jsonlint:keymaps" (jsonlint) task
>> 1 file lint free.

Running "concat:build" (concat) task

Running "concat:vendor" (concat) task

Running "copy:build" (copy) task
Created 10 directories, copied 84 files

Running "uglify:build" (uglify) task
>> 4 files created 1.98 MB → 745.63 kB

Running "sass:build" (sass) task

Running "attachCopyright:js" (attachCopyright) task
Attached copyright to packages/node_modules/@node-red/editor-client/public/red/red.min.js
Attached copyright to packages/node_modules/@node-red/editor-client/public/red/main.min.js

Running "attachCopyright:css" (attachCopyright) task
Attached copyright to packages/node_modules/@node-red/editor-client/public/red/style.min.css

Running "setDevEnv" task

Running "concurrent:dev" (concurrent) task
    Running "nodemon:dev" (nodemon) task
    Running "watch" task
    Waiting...
    [nodemon] 2.0.6
    [nodemon] to restart at any time, enter `rs`
    [nodemon] watching path(s): packages\node_modules\**\*
    [nodemon] watching extensions: js,html,json
    [nodemon] starting `node packages/node_modules/node-red/red.js -V`
    10 Mar 11:19:20 - [info]

    Welcome to Node-RED
    ===================

    10 Mar 11:19:20 - [info] Node-RED version: v1.2.9
    10 Mar 11:19:20 - [info] Node.js  version: v14.16.0
    10 Mar 11:19:20 - [info] Windows_NT 10.0.18363 x64 LE
    10 Mar 11:19:21 - [info] Loading palette nodes
    10 Mar 11:19:21 - [info] Settings file  : C:\Users\fizz\.node-red\settings.js
    10 Mar 11:19:21 - [info] Context store  : 'default' [module=memory]
    10 Mar 11:19:21 - [info] User directory : C:\Users\fizz\.node-red
    10 Mar 11:19:21 - [warn] Projects disabled : editorTheme.projects.enabled=false
    10 Mar 11:19:21 - [info] Flows file     : C:\Users\fizz\.node-red\flows_GZDP-DZ-00046.json
    10 Mar 11:19:21 - [info] Creating new flow file
    10 Mar 11:19:21 - [warn]

    ---------------------------------------------------------------------
    Your flow credentials file is encrypted using a system-generated key.

    If the system-generated key is lost for any reason, your credentials
    file will not be recoverable, you will have to delete it and re-enter
    your credentials.

    You should set your own key using the 'credentialSecret' option in
    your settings file. Node-RED will then re-encrypt your credentials
    file using your chosen key the next time you deploy a change.
    ---------------------------------------------------------------------

    10 Mar 11:19:21 - [info] Starting flows
    10 Mar 11:19:21 - [info] Started flows
    10 Mar 11:19:21 - [info] Server now running at http://127.0.0.1:1880/

看到这句日志,Server now running at http://127.0.0.1:1880/就是说明Node-RED已经正常启动了。
使用浏览器打开http://127.0.0.1:1880/ 即可看到页面

缺少图片

项目架构

Node-RED是使用Grunt来进行构建的打包的,这一点可以根据package.json中的
scripts得到,另外在项目的根目录下也存在一个Gruntfile.js文件定义了项目如何构建,打包,编译,文件处理。
使用web框架是"express": "4.17.1", 国家化使用"i18next": "15.1.2",
样式时使用"node-sass": "^4.14.1",
页面模板使用的是"mustache": "4.1.0",

目录解析

缺少项目主目录图片
文件夹的用途说明

  • .github 用于定义github cicd的Actions
  • packages 项目核心代码
  • scripts 用于处理自定义主题,验证包依赖版本的一些js脚本和shell脚本
  • test 存放测试用例的地方
  • Gruntfile.js 定义Grunt任务 用于项目构建,编译,文件处理
  • 。。。。

在核心代码packages目录中有二个比较重要的目录一个是@node-red 一个是node-red

没有带@node-red目录是用于定义Node-red命令行操作符的。
带有@@node-red目录是存放项目所有源码,包括客户端和服务端。

@node-red中又有以下几个目录

  • editor-api 服务端代码
  • editor-client 客户端代码
  • nodes 默认安装的节点
  • registry 暂时不知
  • runtime 暂时不知
  • util 国际化,日志,常用函数

要修改客户端页面需要在editor-client中找相应的文件
要修改配置,服务端代码需要在editor-api中找相应的文件

主要文件分析

colors.scss

定义项目的主题,配色,

$primary-background: #0ff;//#0ff;  主背景色

$secondary-background: #ff0;//#ff0; 副背景色,

修改样式后需要重启项目才能生效。

npm run dev
theme.js

此文件配置了项目的title, favicon,

修改 page与header属性, 重启和生效
如下是我的修改。

page: {
    title: "TopFE",
    favicon: "mylogo.png",
    tabicon: "mylogo.png"
},
header: {
    title: "TopFE",
    image: "mylogo.png"
}

page定义的是网站title相关信息,
header定义的是网站右上角的图标和标题。

主题简单改造

修改背景颜色,标题,图标
theme.js

代码归“拿我格子衫来”所属
var defaultContext = {
    page: {
        title: "Node-RED",
        favicon: "favicon.ico",
        tabicon: "red/images/node-red-icon-black.svg"
    },
    header: {
        title: "Node-RED",
        image: "red/images/node-red.svg"
    },
    asset: {
        red: (process.env.NODE_ENV == "development")? "red/red.js":"red/red.min.js",
        main: (process.env.NODE_ENV == "development")? "red/main.js":"red/main.min.js",

    }
};

colors.scss

$primary-background: #f3f3f3;//#0ff;

$secondary-background: #fff;//#ff0;

将文件mylogo.png放到packages/node_modules/@node-red/editor-client/src/mylogo.png

并再Gruntfile.js中配置该文件

最终效果图
在这里插入图片描述

拿我格子衫来 CSDN认证博客专家 拿我格子衫来 范马勇次郎 琦玉君
积土成山,风雨兴焉;积水成渊,蛟龙生焉;积善成德,而神明自得,圣心备焉。故不积跬步,无以至千里;不积小流,无以成江海。骐骥一跃,不能十步;驽马十驾,功在不舍。锲而舍之,朽木不折;锲而不舍,金石可镂。蚓无爪牙之利,筋骨之强,上食埃土,下饮黄泉,用心一也。蟹六跪而二螯,非蛇鳝之穴无可寄托者,用心躁也。
<p> <span style="color:#313d54;font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;font-size:16px;background-color:#ffffff;">Node-RED是工业网物联网的重要组成部分,我最开始接触Node-RED,也算是一个偶然的机会吧,上班后领导安排我的第一个任务就是调研一下Node-RED,我之后上网查了一下,那个时候网上相对于Node-RED的资料也比较少,只知道它是IBM公司的一个开源项目。直到最近,发现许多大公司的产品都支持Node-RED,比如西门子公司的IoT2000,研华公司的WISE PaaS 网关,美国OPTO 22等设备中都安装了Node-RED,表明它在工业物联网和控制中已经广泛应用了。</span> </p> <p> <img src="https://img-bss.csdnimg.cn/202010200935441926.png" alt="" width="1316" height="524" /> </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> 那么工业物联网为什么要用它?它又处于工业物联网那个层次?它具有哪些特性?它帮助物联网解决了什么问题?为什么说它是柔性动态可重构的解决方案呢? </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;">   </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;">   </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> 本门课程,老师将带领你从Node-RED的发展,工业物联网定位开始讲解,并带领着大家进行手把手安装Node-RED,实际操作演练Node-RED,并搭建一个物联网小平台,给大家带来更好的学习效果。 </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> <img src="https://img-bss.csdnimg.cn/202010200936289051.png" alt="" width="1841" height="948" /> </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> <img src="https://img-bss.csdnimg.cn/202010200936561564.png" alt="" width="1920" height="977" /> </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;">   </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;">   </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> 为了能够让小伙伴们快速了解本门课程的结构,本门课程从以下几个方面展开: </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> Node-RED入门 </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> Node-RED安装与配置 </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> Node-RED教学实战 </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> Node-RED的优势与不足 </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> Node-RED能为我们带来什么 </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> Node-RED总结与展望 </p>
相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页