RUST egui体验

news2025/1/11 0:01:51

egui官方提供了web版的demo,效果还是很不错的,就是用的时候有点一头雾水,没有找到明确的指导怎么把这些组件插入到自己的application或者web。花了一天时间撸了一遍流程,记录一下,说不定以后能用到呢 >_<

eframe_template

首先先去clone一下,egui的官方的template,从官方的描述来看,

This is a template repo for eframe, a framework for writing apps using egui.The goal is for this to be the simplest way to get started writing a GUI app in Rust.You can compile your app natively or for the web, and share it using Github Pages.

使用eframe_template是最简单的实现方式。clone下来后,按照repo里的描述,修改工程名称相关的配置为自己的工程名:
在这里插入图片描述
clone下来的eframe_template,使用cargo run --release的界面如下图:
在这里插入图片描述

改造界面

我相中了egui的示例中的plot的界面,想把它替换到eframe_template中,在egui的代码中找到plot的示例代码,额,讲真,没看懂,没关系,先放着。

回到eframe_template,先按照官方描述,给自己的工程改个名字,这里我改成了plot_test。

CentralPanel

研究一下eframe_template,发现main.rs里其实没有具体的UI的描述,它只是根据当前是要编译本地的application还是web版的信息,调用了不同的API,最终的UI的绘制,都是在app.rs目录下。

app.rs目录,对于中心UI的绘制,是使用下面的语句进行绘制的, CentralPanel传入一个ui用于绘制主体Panel

egui::CentralPanel::default().show(ctx, |ui| {});

所以,其实我们只需要将plot_demo的ui来替换掉这里的ui就可以了。

ui

再回去看plot_demo.rs里的ui,找到下面一段代码,看起来不同的demo,调用了自身不同的ui实现来绘制,应该只需要将这个ui抄到CentralPanel里就可以了,我们抄一个line_demo的ui
在这里插入图片描述
将原来的ui的函数,直接替换为line_demo的ui调用即可

        egui::CentralPanel::default().show(ctx, |ui| {
            self.line_demo.ui(ui);
        });

其他编译改动不再赘述,主要有点懒,直接参考我的github的改动就行,重点关注app.rs和main.rs的改动即可,其他的改动都是编译过程中的改动,无关大局。>_<

效果

cargo build --release的效果如下,换了一个小螃蟹当icon:在这里插入图片描述
再来试一试egui提供的wasm,这个还是有点意思的。
使用trunk serve来编译运行工程,编译完成后提示如下,在本机的8080端口可以看到该http服务:
在这里插入图片描述
用网页打开本机的8080端口,效果拔群 _
在这里插入图片描述
回头再抽空研究下怎么部署到github上。

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

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

相关文章

蓝桥杯并查集|路径压缩|合并优化|按秩合并|合根植物(C++)

并查集 并查集是大量的树&#xff08;单个节点也算是树&#xff09;经过合并生成一系列家族森林的过程。 可以合并可以查询的集合的一种算法 可以查询哪个元素属于哪个集合 每个集合也就是每棵树都是由根节点确定&#xff0c;也可以理解为每个家族的族长就是根节点。 元素集合…

【Java基础知识总结 | 第三篇】深入理解分析ArrayList源码

文章目录 3.深入理解分析ArrayList源码3.1ArrayList简介3.2ArrayLisy和Vector的区别&#xff1f;3.3ArrayList核心源码解读3.3.1ArrayList存储机制&#xff08;1&#xff09;构造函数&#xff08;2&#xff09;add()方法&#xff08;3&#xff09;新增元素大体流程 3.3.2ArrayL…

R:简易的Circos图

library(grid) library(circlize) library(RColorBrewer) library(ComplexHeatmap) setwd("C:/Users/fordata/Downloads/Circos") # 创建颜色调色板 coul <- colorRampPalette(brewer.pal(9, "Set3"))(12) # 读取基因组数据 genome <- read.table(ci…

【启动npm run serve 奇怪的报错】

报错如下&#xff1a; INFO Starting development server... utils.js:587Uncaught TypeError [ERR_INVALID_ARG_VALUE]: The argument path must be a string or Uint8Array without null bytes. Received E:\\#\u0000#idea-workspace\\wonderful-search\\wonderful-search-v…

julia语言中的决策树

决策树&#xff08;Decision Tree&#xff09;是一种基本的分类与回归方法&#xff0c;它呈现出一种树形结构&#xff0c;可以直观地展示决策的过程和结果。在决策树中&#xff0c;每个内部节点表示一个属性上的判断条件&#xff0c;每个分支代表一个可能的属性值&#xff0c;每…

JavaSE、JavaEE和Jakarta EE的历史、区别与联系

JavaSE、JavaEE和Jakarta EE是Java平台中的三个重要组成部分&#xff0c;它们各自承担着不同的角色&#xff0c;同时也有着密切的联系。在理解它们之间的历史、区别和联系之前&#xff0c;我们首先需要了解它们的基本概念。 JavaSE&#xff08;Java Standard Edition&#xff…

电脑充电器能充手机吗?如何给手机充电?

电脑充电器可以给手机充电吗&#xff1f; 电脑充电器可以给手机充电&#xff0c;但前提是电脑充电器的功率输出与手机的功率匹配且接口匹配。 假设电脑充电器的输出功率为5V/2A&#xff0c;手机也支持5V/2A的输入功率。 只要接口匹配&#xff0c;就可以使用电脑充电器给手机充…

基于单片机的光电传感转速测量系统的设计

摘要:针对在工程实践中很多场合都需要对转速这一参数进行精准测量的目的,采用以STC89C52 芯片为核心,结合转动系统、光电传感器、显示模块等构成光电传感器转速测量系统,实现对电机 转速的测量。通过测试表明该系统具有结构简单、所耗成本低,测量精度高、稳定可靠等优点,…

Day67:WEB攻防-Java安全JNDIRMILDAP五大不安全组件RCE执行不出网

知识点&#xff1a; 1、Java安全-RCE执行-5大类函数调用 2、Java安全-JNDI注入-RMI&LDAP&高版本 3、Java安全-不安全组件-Shiro&FastJson&JackJson&XStream&Log4j Java安全-RCE执行-5大类函数调用 Java中代码执行的类&#xff1a; GroovyRuntimeExecPr…

html5cssjs代码 023 公制计量单位进位与换算表

html5&css&js代码 023 公制计量单位进位与换算表 一、代码二、解释 这段HTML代码定义了一个网页&#xff0c;用于展示公制计量单位的进位与换算表。 一、代码 <!DOCTYPE html> <html lang"zh-cn"> <head><meta charset"utf-8&quo…

将FastSAM中的TextPrompt迁移到MobileSAM中

本博文简单介绍了SAM、FastSAM与MobileSAM,主要关注于TextPrompt功能的使用。从性能上看MobileSAM是最实用的,但其没有提供TextPrompt功能,故而参考FastSAM中的实现,在MobileSAM中嵌入TextPrompt类。并将TextPrompt能力嵌入到MobileSAM官方项目提供的gradio.py部署代码中,…

ros小问题之差速轮式机器人轮子不显示(rviz gazebo)

在rviz及gazebo练习差速轮式机器人时&#xff0c;很奇怪&#xff0c;只有个机器人的底板及底部的两个万向轮&#xff0c;如下图&#xff0c; 后来查看相关.xacro文件&#xff0c;里面是引用包含了轮子的xacro文件&#xff0c;只需传入不同的参数即可调用生成不同位置的轮子&…

ARM_基础之RAS

Reliability, Availability, and Serviceability (RAS), for A-profile architecture 源自 https://developer.arm.com/documentation/102105/latest/ 1 Introduction to RAS 1.1 Faults,Errors,and failures 三个概念的区分&#xff1a; • A failure is the event of devia…

IDEA系列软件设置自动换行

以pycharm软件为例&#xff0c;我们在编程的时候常常会遇到这种情况&#xff0c;内容过长导致超出pycharm的界面&#xff0c;导致我们阅读浏览起来非常的不方便&#xff0c;对于这种情况&#xff0c;我们可以通过给IDEA软件设置自动换行来解决 首先打开setting&#xff0c;找到…

MySQL_数据库图形化界面软件_00000_00001

目录 NavicatSQLyogDBeaverMySQL Workbench可能出现的问题 Navicat 官网地址&#xff1a; 英文&#xff1a;https://www.navicat.com 中文&#xff1a;https://www.navicat.com.cn SQLyog 官网地址&#xff1a; 英文&#xff1a;https://webyog.com DBeaver 官网地址&…

odoo17开发教程(6):用户界面UI的交互-创建Action

前面的文章中我们已经创建了新模型及其相应的访问权限&#xff0c;是时候与用户界面进行交互了。 数据文件&#xff08;XML&#xff09; 在上一篇文章中&#xff0c;我们通过 CSV 文件添加数据。当要加载的数据格式简单时&#xff0c;CSV 格式很方便。当格式比较复杂时&#x…

Javaweb学习记录(一)Maven

Maven是一款Java项目管理工具&#xff0c;下面将介绍Maven的实际作用和相关的操作 Maven项目依赖的添加 在Maven项目中添加依赖&#xff0c;通过dependencies标签添加所有依赖&#xff0c;所有依赖都添加在里面&#xff0c;而单个依赖就使用dependency标签添加进项目&#xf…

【数据结构入门】顺序表详解(增删查改)

目录 顺序表的基本概念 动态顺序表的实现 初始化 插入 尾插法 头插法 指定位置之前插入 删除 尾删法 头删法 指定位置删除 查找 销毁 顺序表的基本概念 什么是顺序表&#xff1f; 顺序表是用一段物理地址连续的存储单元依次存储数据元素的线性结构&#xff0c;一般…

elasticsearch基础学习

elasticsearch简介 什么是elasticsearch elasticsearch&#xff08;简称es&#xff09;&#xff0c;其核心是 Elastic Stack&#xff0c;es是一个基于 Apache Lucene&#xff08;TM&#xff09;的开源的高扩展的分布式全文检索引擎&#xff0c;它可以近乎实时的存储、检索数据…

软考 系统架构设计师之回归及知识点回顾(7)

接前一篇文章&#xff1a;软考 系统架构设计师之回归及知识点回顾&#xff08;6&#xff09; 11. 云计算 背景 大数据和云计算已成为IT领域的两种主流技术。“数据是重要资产”这一概念已成为大家的共识&#xff0c;众多公司争相分析、挖掘大数据背后的重要财富。同时学术界、…