Node-Red UI界面基础设计

这篇具有很好参考价值的文章主要介绍了Node-Red UI界面基础设计。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.UI界面介绍

UI的布局依赖于节点中Tab和Group属性。Tab可以理解为页面,Group是分组。Tab可以包含Group。
在使用dashboard控件时,可以对节点的Tab和Group名称进行设置,设置后可在UI界面查看。
nodered制作漂亮的界面,Node-Red,ui,android

2.dashborad标签

使用dashboard节点时,屏幕右侧“调试窗口”的旁边会多一个名为dashborad的小标签,下边有Layout,Theme和Site三个选项。
Layout意思是布局,在Layout里可以重新排列Tab,Group与控件,并编辑其属性。也可以把其它网页添加到Tab中。
Site意为地址,可以设置标题的UI,或者选择标题栏。也能够以像素为单位设置网格布局的基本图形,就是刚刚提到默认是48像素的那个“单位”,或者单独设置控件,组的大小
Theme意思是主题。可以选明亮的,或者暗的,或者自定义。

(1)Layout

在Layout标签中可对所有程序的Tab和Group进行查看,并查看对应标签下所包含的节点,当然最重要的功能是布局的修订。在这里有两种修订的方式,可根据喜好进行调整。

  1. 布局修改-1
    将左键长按想挪动的节点,并拖到适宜位置,在目标位置处会有虚线进行标识。
    优点: 这种方式拖动起来比较快,操作简单;
    缺点: 节点的大小需在设定Tab或Group时已经设定好,且会根据节点的大小自动补全空缺位置,当节点大小不统一时,界面不美观。
    nodered制作漂亮的界面,Node-Red,ui,android
  2. 布局修改-2
    点击Tab名称后的Layout后可对整个界面的节点进行布局调整。当节点未被锁时表示为auto,大小不可调;当节点被锁后,可对节点进行随意拖拽,及修改节点长度、宽度等。
    优点: 使用此方法修改布局时,修改界面的布局及为UI界面查看到的布局,对布局的整体把握度教高;
    缺点: 只能修改本Tab内的节点,UI界面显示多个Tab时,不能对Tab的顺序进行调整。
    nodered制作漂亮的界面,Node-Red,ui,android

(2)Site

在Site设计界面中可修改的内容有很多

  1. Title: 可修改UI界面的名称,这里说的名成是指在浏览器标签页的名称;
  2. Options:
  • 在选项菜单中可修改显示或隐藏标签框,标签框为在UI界面显示Tab名称的横向部分,默认为蓝色;下面为两种选择的对比效果图;
    nodered制作漂亮的界面,Node-Red,ui,androidnodered制作漂亮的界面,Node-Red,ui,android

  • 选择显示或隐藏菜单名,菜单名即为显示Tab名的纵向部分;
    nodered制作漂亮的界面,Node-Red,ui,android

  1. Date Format为日期格式,详情可以查看输入框左上角的详情进入详情界面进行查看;
  2. Sizes可以调整 1x1 窗体大小、窗体间距等。

(3)Theme

Node-red 还可以对UI界面设置不同主题,包含白天、夜晚、定制三种;在白天或 夜晚主题下还可对bar、Tab字体颜色、节点默认背景染色等 进行颜色自定义 ;也可修改所有UI界面数字或字母的字体。文章来源地址https://www.toymoban.com/news/detail-783361.html

到了这里,关于Node-Red UI界面基础设计的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • docker 安装 Node-RED

    Node-RED 是构建物联网应用程序的一个强大工具,使用可视化编程方法,连接起来执行任务。而homeassistant是家居智慧中枢,本文介绍如何安装Node-RED及HASS的插件 docker pull nodered/node-red # 2、部署镜像 创建目录 分配权限: 部署命令 端口是 18880 数据存储路径 /opt/node_red docker服务包

    2024年02月09日
    浏览(47)
  • node-red - 读写操作redis

    安装配置node-red环境: centos通过源文件的方式安装node-red nodered-环境搭建及使用 安装配置redis: centos - docker安装redis Windows10安装redis(图文教程) Redis支持的数据结构 回到目录 1.在node-red里面安装redis节点 : 2. 刷新node-red: 回到目录 3.1.1 List(列表)存储 :redis-out节点   redis

    2024年02月10日
    浏览(41)
  • Node-Red中Homeassistant节点使用

    谷歌解释:Home Assistant is an open-source home automation platform that focuses on privacy and local control. 是一个开源的家庭自动化控制管理平台。 Homeassistant简称HA,目前我们想要远程控制家里的电器等设备,首先需要购买智能家居,而智能家居市场上存在许多家居生态(米家、天猫、homeki

    2024年02月09日
    浏览(44)
  • 如何使用 Docker 安装 Node-RED

    安装 Node-RED 使用 Docker 是一种简便的方式,以下是基本的步骤: 安装 Docker: 确保已在系统上安装 Docker。可从 Docker 官方网站 或 Windows Docker 安装教程 获取安装指南。 拉取运行 Node-RED 镜像: 打开终端或命令行界面,运行以下命令安装 Node-RED。您可以使用官方的 nodered/node-r

    2024年04月22日
    浏览(49)
  • 在nodejs应用中集成node-red

    随着物联网(IoT)和边缘计算的快速发展,实时数据处理和可视化变得越来越重要。Node-RED是一个基于JavaScript的开源平台,用于创建实时数据流应用程序。它提供了一个可视化的开发环境,使用户可以轻松地构建、部署和管理数据流。本文将介绍如何在Node.js应用中集成Node-RED,以

    2024年02月14日
    浏览(49)
  • 【Node-RED】安全登陆时,账号密码设置

    Node-RED 在初始下载完成时,登录是无账号密码的。基于安全性考虑,本期博文介绍 在安全登陆时,如何进行账号密码设置 。当然,此处可以参考官方使用指南Securing Node-RED,里面有更为详细的介绍。 而本博文只对用到的进行日志记录,方便后续回顾查看 。 在使用指南中,对

    2024年02月19日
    浏览(39)
  • node-red安全部署方式-安全登录功能

      安装号的node-red,默认是没有用户登陆功能的,每次进入工作界面只需输入 服务器ip:端口号 即可登陆。但是假如其他人知道了我们的ip地址,岂不是任何人都可以访问我们的服务器呢?基于这种情况,我们需要给node-red添加安全认证,即安全登陆功能,使得每次进入node

    2024年02月15日
    浏览(49)
  • Node-Red与ModbusTCP设备通信——读数据

    一、内容简介 本篇内容主要介绍Node-Red通过node-red-contrib-modbus插件与ModbusTCP设备进行通讯,这里用Modbus Slave工具来模拟从站设备,Node-Red作为主站分别从0地址开始读取10个线圈状态和10个保持寄存器,分别用Modbus-Read、Modbus-Getter、Modbus-Flex-Getter三个节点以不同的方式来实现。

    2024年01月24日
    浏览(59)
  • Node-Red-访客、操作员和管理员登录

    要实现Node-Red识别图片内容,在这里我们需要下载安装有控件: node-red-dashboard 。 首先在左上角点击设置,并找到节点管理 ; 在节点管理中点击安装; 在安装界面的查询窗口输入node-red-dashboard控件,查询后选择下载,等待下载完成; 本案例主要实现的功能包含有模式选择及

    2023年04月08日
    浏览(83)
  • centos通过源文件的方式安装node-red

    [回到目录]  查看你的Linux系统是32位还是64位的,不要搞错版本了。执行命令: cat /proc/version  下载地址:【https://npm.taobao.org/mirrors/node/】  选择合适的版本下载: 记住查看你的Linux系统是32位还是64位的,不要搞错版本了。一般x86_64是64位,x86是32位的。 我的服务器是64位的

    2024年02月11日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包