NICEGUI---ROS开发之中常用的GUI工具

news2024/9/20 20:33:34

0. 简介

对于ROS来说,如果不具备一定知识的人员来使用这些我们写的算法,如果说没有交互,这会让用户使用困难,所以我们需要使用GUI来完成友善的数据交互,传统的GUI方法一般有PYQT这类GUI方法,但是这类GUI工具上手门槛较高,也不太适合快速且敏捷的可视化界面开发。NiceGUI 是一个易于使用、基于Python的用户界面框架,它显示在Web浏览器里,可创建按钮,对话框,markdown,3D场景,绘图等。它非常适用于小型网页应用、仪表盘、机器人项目、智能家居解决方案和类似的场景。相关代码也已经全部在Github上开源了。
在这里插入图片描述

1. 具体功能

我们打开NICEGUI官网就可以看到NICEGUI支持一些写法了,具体支持

- 交互
  - 按钮、滚动条、输入框
  - 提醒、对话、菜单
  - 键盘输入
  - ...

- 样式设计
  - 自定义颜色主题
  - 自定义CSS
  - 现代设计风格素材
  - 内置Taiwind

- 布局
  - 导航栏、选项卡、面板、...
  - 用行、列和卡片分组
  - HTML 和降价元素
  - 默认Flex

- 代码
  - 实时
  - 代码更改时隐式重新加载
  - 直接的数据绑定
  - 在 Python 内执行 javascript

- 可视化
  - 图表、图表和表格
  - 3D场景
  - 进度条
  - 用于数据刷新的内置定时器
...

在这里插入图片描述

2. 环境安装

对于nicegui来说安装很简单,即使用下面指令安装即可

python3 -m pip install nicegui

如果想要使用Docker,也可以使用multi-arch Docker image,在拉下docker后,就可以通过下面的指令运行含有NICEGUI的docker环境了

docker run --rm -p 8888:8080 -v $(pwd):/app/ -it zauberzeug/nicegui:latest

这将使用当前目录中的代码在http://localhost:8888上启动服务器。包含ui.run(port=8080,…)命令的文件必须命名为main.py。代码修改会触发自动重载。

3. 常见api以及在ROS中的使用

NICEGUI中也有良好的API以供读者参考,我们可以在https://nicegui.io/reference中找到NICEGUI常用的API。代码简单易懂,很值得试一下
在这里插入图片描述
下面我们根据API可以完成最简单的与ros联合的代码,这里将/status/odometry获取,并通过NICEGUI完成消息的显示整合以及发送

…详情请参照古月居

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/391736.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

激光炸弹(前缀和)

地图上有 N 个目标,用整数 Xi,Yi 表示目标在地图上的位置,每个目标都有一个价值 Wi。注意:不同目标可能在同一位置。现在有一种新型的激光炸弹,可以摧毁一个包含 RR 个位置的正方形内的所有目标。激光炸弹的投放是通过卫星定位的&…

顺序表以及链表的应用及区别(包含OJ讲解)

前面我已经发过怎么实现链表以及顺序表,今天大概的总结一下。 顺序表: 1.能够随时的存取,比较方便。 2.插入删除时,需要挪动数据,比较麻烦,因为是连续存储。 3.存储密度相对于链表来说是比较高的&#…

C++类的组合

C类的组合什么是类的组合初始化参数列表使用类的组合案例分析组合构造和析构顺序问题this指针基本用法和作用什么是类的组合 类的组合就是以另一个对象为数据成员,这种情况称为类的组合 1.优先使用类的组合,而不是继承 2.组合表达式的含义 一部分关系 初…

用户登录请求100w/每天, JVM如何调优

用户登录请求100w/每天, JVM如何调优 大概可以分为以下8个步骤。 Step1:新系统上线如何规划容量? 1.套路总结 任何新的业务系统在上线以前都需要去估算服务器配置和JVM的内存参数,这个容量与资源规划并不仅仅是系统架构师的随意估算的&am…

springboot启动过程加载数据笔记(springboot3)

SpringApplication AbstractApplicationContext PostProcessorRegistrationDelegate ConfigurationClassPostProcessor ConfigurationClassParser 一堆循环和调用 ComponentScanAnnotationParser扫描 processConfigurationClass.doProcessConfigurationClass(configClass, so…

网络编程(二)

6. TCP 三次握手四次挥手 HTTP 协议是 Hype Transfer Protocol(超文本传输协议)的缩写,是用于从万维网(WWW:World Wide Web)服务器(sever)传输超文本到客户端(本地浏览器…

小众但意外觉得蛮好用的剪辑软件!纯良心分享

爱剪辑 有开屏广告,一共3个界面:首页、剪同款、我的。 剪辑、配乐、字幕、滤镜、加速、贴纸、配音等主流功能都有。 特色功能有剪裁视频、倒放视频、视频旋转、视频转换GIF、转场、提取音频、画中画等。 还可以拼接视频,不过不支持FLV等小众文…

人员摔倒识别预警系统 人员跌倒检测算法 yolov7

人员摔倒识别预警系统 人员跌倒检测算法基于yolov7网络模型计算机识别技术,人员摔倒识别预警系统 人员跌倒检测算法对画面中人员摔倒进行实时检测识别抓拍告警。YOLOv7 的策略是使用组卷积来扩展计算块的通道和基数。研究者将对计算层的所有计算块应用相同的组参数和…

buuctf-pwn write-ups (11)

文章目录buu083-x_ctf_b0verfl0wbuu084-picoctf_2018_leak_mebuu085-inndy_echobuu086-hitcontraining_unlinkbuu087-ciscn_2019_final_3buu088-axb_2019_fmt64buu089-wustctf2020_name_your_catbuu090-pwnme1buu091-axb_2019_brop64buu092-[极客大挑战 2019]Not Badbuu083-x_c…

JAVA开发运维(nginx工作原理)

nginx源码目录结构: . ├── auto 自动检测系统环境以及编译相关的脚本 │ ├── cc 关于编译器相关的编译选项的检测脚本 │ ├── lib nginx编译所需要的一些库的检测脚本 │ ├── os 与平台相关的一些系统参数…

2023-03-06 debian11 最小安装记录

1.镜像准备,根据个人需求下载debian 版本Debian -- 获取 Debian2.上传到VSAN 内容库我这边是在vm里面安装的,就直接上传到内容库备用(根据个人需求存放)3.分配虚拟主机配置根据个人需要配置4.开始最小安装1.在界面中选择Install&a…

Packet Tracer--配置帧中继

Packet Tracer--配置帧中继 拓扑图: 设备参数: 设备 接口 DLCI R1 S0/2 102,103 R2 S0/2 201 R3 S0/2 301 R1---R2 Se1:102-----Se2:201 R1---R3 Se1:103-----Se3:301 IP参数 设备 接口 IP地址…

CFNet: Cascade Fusion Network for Dense Prediction

论文名称:CFNet: Cascade Fusion Network for Dense Prediction 论文下载:https://arxiv.org/pdf/2302.06052.pdf 论文代码:GitHub - zhanggang001/CFNet: CFNet: Cascade Fusion Network for Dense Prediction 摘要: 在密集预…

十四届蓝桥选拔赛Scratch-2023.02.12 试题解析

十四届蓝桥选拔赛Scratch-2023.02.12 试题解析 单选题: 1. 运行以下程序,小猫和小企鹅谁能到达舞台右侧边缘? ( B ) *选择题严禁使用程序验证,选择题不答和答错不扣分 A. 小企鹅 B. 小猫 C. 都能到达 D. 都不能到达 2. 运行以下程序(小象仅有两个造型),小象的造型是…

最简单的SpringBoot+MyBatis多数据源实现

最简单的SpringBootMyBatis多数据源实现1.数据库准备2.环境准备3.代码部分3.1多数据源配置2.测试随着应用用户数量的增加,相应的并发请求的数量也会跟着不断增加,慢慢地,单个数据库已经没有办法满足频繁的数据库操作请求了,在某些…

【JeecgBoot-Vue3】第4节 目录结构与常用组件介绍

一、项目的目录结构讲解 1. src/api/ 存放API相关信息 src/api/存放的是调用后台api接口相关信息src/api/commonapi.tsapi接口信息2. src/assets 静态资源 src/assets静态资源 src/assets/icons 图标 src/assets/images 图片 src/assets/less 样式src/assets/svgsvg图像3. s…

函数编程:强大的 Stream API

函数编程:强大的 Stream API 每博一文案 只要有人的地方,世界就不会是冰冷的,我们可以平凡,但绝对不可以平庸。—————— 《平凡的世界》人活着,就得随时准备经受磨难。他已经看过一些书,知道不论是普通…

Python API教程:API入门

什么是API? 一个API,或被称为应用程序接口,是一个服务器为你提供一个接收或发送数据的代码。API通常用来接收数据。 本文就集中焦点在此话题中。 当我们想从一个API中接收数据,我们需要开始请求。请求可以包含整个Web。例如&am…

Vue基础18之github案例、vue-resource

Vue基础18github案例静态页面第三方样式引入(以bootstrap举例)App.vueSearch.vueList.vue列表展示接口地址使用全局事件总线进行兄弟间组件通信Search.vueList.vue完善案例List.vueSearch.vue补充知识点:{...this.info,...this.dataObj}效果呈…

Serverless

Serverless:云计算的下一个十年 最近几年的技术圈,对于 Serverless 技术的讨论异常火热,在业内也有了很多成熟的案例,国外发展较早,比较有代表性的就是亚马逊和谷歌, 而在国内,腾讯和阿里两位巨…