NodeRed 在Windows下修改界面样式（Linux环境下类似）

已于 2022-02-22 15:48:37 修改
阅读量2.1k 收藏 8
点赞数 3
分类专栏： NodeRed 文章标签： NodeRed
于 2020-06-16 10:42:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lxmuyu/article/details/106782381
版权

博客迁移

不恰饭的小站

修改Window端界面

需求 定制化编辑界面，包含页面标题、Header图标及文字、增加定制化CSS等

寻找解决方案 在GitHub上发现有同样的需求并提供了解决方案

Editor Theming #610
https://github.com/node-red/node-red/issues/610 在这里插入图片描述

解决方案 根据解决方案的内容，可以修改的元素有：Page（标签）、Header（标题）、DeployButton(部署按钮)、Menu（菜单）、Login（登录界面）等

同时，也可以通过修改CSS文件，修改元素的指定样式
在这里插入图片描述

实现 图标修改 在这里插入图片描述

样式修改 可从如下的样式文件中，找到对应元素，进行修改

在这里插入图片描述

lxmuyu
关注
  • 3
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
Node-RED系列（二二）：使用dashboard搭配echarts制作漂亮的面板
知无涯
06-06 9232
在node-red中dashboard 是一个很常用的模块，其中它有一个chart节点可以用来制作一些图表，比如柱状图，折线图，饼图，但其中的图表并不是很美观，而且可配置项非常的少。 于是就有很多小伙伴找我做一套比较好看的图表面板，在对比了一下几个图表库，我选中了echarts。 不仅美观大方，而且非常容易集成，配置。下面先来看一下我做的效果。这里是直接做了四个折线图，第一个折线图有动态效果，第二个折线图是一个多线条的折线图，第三个折线图是在一个图例显示两个折线图。第二第三都可以用于数据对比。 第四个折线
探索Node-RED Dashboard：构建直观易用的IoT应用界面
gitblog_00052的博客
03-26 1020
探索Node-RED Dashboard：构建直观易用的IoT应用界面 项目地址:https://gitcode.com/node-red/node-red-dashboard Node-RED 是一个由IBM开发的强大开源工具，用于简化物联网(IoT)应用程序的编程和集成。它基于Node.js，提供了一个可视化的编程环境，允许用户通过连接“节点”来创建复杂的流处理逻辑。而 Node-RED Da...
MDK5软件和stm32pack的安装步骤
weixin_51087836的博客
10-07 1881
MDK5软件和stm32包的安装过程，及stm32的程序设计入门练习 一、MDK5软件和stm32包的安装 1.1、MDK5安装步骤 1.2、stm32的安装步骤 二、MDK5软件的注册 三、stm32的程序设计入门练习 一、MDK5软件和stm32包的安装 1.1、MDK5安装步骤 1、在官网或其他渠道下载好软件资源包以后，双击运行“mdk_510.exe”，进入安装界面 2、点击“Next” 3、勾选“i agree to …”并点击“Next” 4、选择软件安装路径（可选默认路径），并点击“Next”
推荐开源项目：Pagenodes - 浏览器端的物联网网络构建工具
最新发布
gitblog_00059的博客
05-30 349
推荐开源项目：Pagenodes - 浏览器端的物联网网络构建工具 项目地址:https://gitcode.com/monteslu/pagenodes 项目介绍 Pagenodes 是一个基于浏览器的 Node-RED 的分支，它不需要后端服务器支持，完全在你的浏览器中运行。这个项目的目标是提供一个简单易用的浏览器内物联网（IoT）网络构建平台，让开发流程完全由用户控制。只需很少的设置步骤，...
NodeRed 修改主题（详细教程）
qq_36379705的博客
11-04 2471
默认的NodeRed的编辑器主题是白色和红色,UI中的图片也是白色和红色,个人不喜欢这种风格,所以研究一下怎么给Node-Red换皮,同时初步熟悉一下NodeRed源码
node-red-dashboard-custom-widget:使用ui-template创建Node-RED-Dashboard UI小部件
05-11
节点红色定制小部件1 遵循指南外部源创建ui-widget ui-template代码段 <!-- external libraries --> [removed][removed] <link rel="stylesheet" href="http://billmill.org/css/style.css" /> <style> ... </style> [removed] ;(function(scope) { scope.msgReady = ... // ng-if var timer = setInterval(function() { //check that D3 libs are loaded, if not wait if (!window.d3) return; clea
Node-Red UI界面基础设计
热门推荐
weixin_43195420的博客
09-08 1万+
Node-Red的Dashboard配置，修改UI界面色调、布局
在Windows下使用Linux的开发环境
01-20
有一次想安装node-sass，windows下报错缺少MSBuild什么的，可能需要装一个vs解决，不过估计没有人愿意装那么大的东西，另外如果你想安装node-canvas的话可能准备工作会更多。。。不过肯定有人像我一样买不起Mac（哭...
安装 Node.js 并配置环境在windows，linux及macos
01-04
nodejs安装及环境配置
Windows下Node.js安装及环境配置方法
01-02
简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。Node.js 的包管理器 n
Windows8下搭建Node.js开发环境教程
10-25
主要介绍了Windows8下搭建Node.js开发环境教程,Win8下安装node.js也比较简单,只是一些权限比较麻烦,需要的朋友可以参考下
node-red-dashboard：Node-RED的仪表板UI
02-09
节点红色仪表板 该模块在Node-RED中提供了一组节点，以快速创建实时数据仪表板。 这些节点需要使用node.js版本8。支持节点v6的最新版本是2.9.5。 从版本2.10.0开始，您可以创建和安装小部件节点，如其他Node-RED节点。 有关更多信息，请参见 。 有关最新更新，请参阅 先决条件 Node-RED-Dashboard需要安装 。 安装 要安装稳定版，请使用Menu - Manage palette选项并搜索node-red-dashboard ，或在Node-RED用户目录（通常为~/.node-red运行以下命令： npm i node-red-dashboard 重新启动Node-RED实例，并且面板中应该有可用的UI节点，右侧面板中应有一个新的dashboard选项卡。 UI界面位于 （如果使用默认设置）。 如果要尝试从github下载最新版本，可以通
NodeJs在Linux下使用的各种问题解决
09-15
在Linux环境下使用Node.js时，可能会遇到一些常见问题，本文将针对这些问题提供解决方案。首先，我们讨论的是Ubuntu 16.04系统下安装Node.js的问题。通常，通过`apt-get`命令安装Node.js后，你会发现只能使用`nodejs...
持续部署编排的另类选择：使用Node-RED进行容器化部署
知行合一 止于至善
03-23 2275
Node-RED是在2013年IBM开源的应用于物联网的流编排引擎，但是也不仅限于物联网，这篇文章选取容器化应用持续交付的一个示例来进行说明Node-RED的使用方式。
Node-RED与uibuilder构建自定义UI
z924219829的博客
10-23 5916
Node-RED是一款可以进行可视化编程的低代码工具, 在快速构建原型和做小型应用有着较大优势. 在Node-RED中构建图形化(GUI)界面通常使用Dashboard完成, 其UI简约好看, 但其界面无法自定义, 只能使用现有的节点组件, 对于特殊界面无法满足. 因此Node-RED社区推出了uibuilder. 其可以使用HTML/JS/CSS等自定义构建页面, 同时也可以引入其它框架(Vue, React等)和组件库(Vue-Bootstrap等), 在通讯层面则通过封装的socket.io。
Node-RED dashboard 制作注册/登录页面
xiuqitao的博客
01-15 1002
JS部分：利用localStorage进行基础信息存储，此处可以加入更多的逻辑，来实现复杂的验签方式。效果：完成用户注册及登录，并实现基础持久登录方法。
Node-RED系列（二三）：在Node-RED中开发一个高德地图面板dashboard
知无涯
06-08 3906
上面的二篇文件我们介绍了如果在node-red中使用echarts，并制作了很多漂亮的直线图，其实这只是很小的一部分，更多的echarts图表可以去官方找一找。这两天有朋友问我，如何在node-red中集成高德地图？他要在node-red中使用高德地图的api来实现一个dashboard。经过两天时间的业余研究，终于给他做了一个demo版本的案例。下面来分享一下这个思路。要使用高德地图的sdk，首先要注册成为高德地图的开发者，有了账号后，需要实名制，否则有些权限收限制。接着去控制台，找到应用管理，创建一个应
Windows10 node-red环境从零开始配置（node.js、npm环境配置）
hansrobothans的博客
03-23 6551
Windows10 node-red环境配置（node.js、npm环境配置）介绍打开power shellpower shell介绍搜索框里搜索power shell，并打开安装node.js和npm安装node.js和npm的原因为什么node.js和node-red这么像安装node.js同时会自动安装好npm安装卸载node.js安装node-red在power shell运行命令第一个问...
使用Node-RED搭建一个天气预报面板
z924219829的博客
10-23 3910
使用低代码平台Node-RED搭建一个天气预报面板
Node-Red-访客、操作员和管理员登录
weixin_43195420的博客
09-21 5544
本案例主要实现的功能包含有模式选择及输入密码、界面切换、修改密码：在界面可选择访客、操作员、管理员三种模式，输入对应的密码即可跳转对应的操作界面，在管理员界面中可对三种模式进行密码修改，并能使用新密码重新登录。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值