RUST egui体验

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.hqwc.cn/news/545397.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Java设计模式】二十四、Spring重要接口回顾

文章目录 1、Spring架构概述2、BeanFactory接口3、BeanDefinition4、BeanDefinitionReader5、BeanDefinitionRegistry6、创建容器 1、Spring架构概述 Spring包含约20个模块&#xff0c;1300多个文件。主要架构&#xff1a; Spring面向Bean编程&#xff0c;Bean即受Spring容器管…

SQLiteC/C++接口详细介绍之sqlite3类(十七)

返回目录&#xff1a;SQLite—免费开源数据库系列文章目录 上一篇&#xff1a;SQLiteC/C接口详细介绍之sqlite3类&#xff08;十六&#xff09; 下一篇&#xff1a; SQLiteC/C接口详细介绍之sqlite3类&#xff08;十八&#xff09; ​ 53.sqlite3_trace_v2 函数功能&#x…

hcia静态综合实验

1.数清广播域&#xff0c;划分网段 6个广播域加8个环回接口&#xff0c;总共14个广播域 六个骨干链路&#xff0c;每条骨干链路只需要两个ip地址。 192.168.1.0/30 有4个ip地址&#xff0c;其中主机位全0与全1不能用&#xff0c;剩两个ip地址可用&#xff0c;现在有六条骨干…

2024Vue高频面试题

前言: Vue 在前端开发领域拥有强劲的发展势头,以下是一些 Vue 的发展趋势: 1.持续增长的用户数量: Vue 作为一款轻量级、易学易用的前端框架,吸引了越来越多的开发者和企业选择使用。其活跃的社区和丰富的资源也促进了用户数量的不断增长。 2.生态系统不断丰富: 随着 V…

Gitlab CI/CD 自动化打包部署前端(vue)项目

一、虚拟机安装 1.vmware下载 2.镜像下载 3.Ubuntu 4.新建虚拟机 一直点下一步&#xff0c;直到点击完成。 5.分配镜像 二、Gitlab CI/CD 自动化部署项目 1.配置GitLab CI/CD&#xff1a; A.在你的Vue.js项目中&#xff0c;创建一个名为.gitlab-ci.yml的文件&#xff0…

System Verilog的接口、程序块与断言解析

接口、程序块与断言 1 接口 1.1 使用接口简化连接 // 接口 interface arb_if(input bit clk);logic [1:0] grant,request;logic rst; endinterface// 使用了简单接口的仲裁器 module arb (arb_if arbif);...always(posedge arbif.clk or posedge arbif.rst)beginif(arbif.rs…

【图像分割】使用Otsu 算法及迭代计算最佳全局阈值估计并实现图像分割(代码实现与分析)

本实验要求理解全局阈值分割的概念&#xff0c;并实现文本图像分割。需要大家深入理解Ostu 算法的实现过程及其迭代原理&#xff0c;同时通过学习使用Otsu 算法及其迭代&#xff0c;实践图像分割技术在文本图像处理中的应用。 以下将从实验原理、实验实现、实验结果分析三部分对…

springboot项目读取excel表格内容到数据库,excel表格字段为整数的读取方法

在我昨天的项目中&#xff0c;我需要把excel表格中字段为整数的字段读取到数据库中进行保存&#xff0c;但是在内置方法中并没有读取整数的方法&#xff08;也有可能是我没发现&#xff0c;太菜了~~&#xff09;&#xff0c;那接下来我就提供给大家一个简单地方法来读取excel表…

力扣977. 有序数组的平方

思路&#xff1a;暴力法&#xff1a;全部平方&#xff0c;然后调用排序API&#xff0c;排序算法最快是N*log(N)时间复制度。 双指针法&#xff1a;要利用好原本的数组本就是有序的数组这个条件&#xff0c; 只是有负数 导致平方后变大了&#xff0c;那么平方后的最大值就是在两…

PTAL1-006 连续因子

c语言中的小小白-CSDN博客c语言中的小小白关注算法,c,c语言,贪心算法,链表,mysql,动态规划,后端,线性回归,数据结构,排序算法领域.https://blog.csdn.net/bhbcdxb123?spm1001.2014.3001.5343 给大家分享一句我很喜欢我话&#xff1a; 知不足而奋进&#xff0c;望远山而前行&am…

数据可视化-ECharts Html项目实战(2)

在之前的文章中&#xff0c;我们学习了如何创建简单的折线图&#xff0c;条形图&#xff0c;柱形图并实现动态触发&#xff0c;最大最小平均值。想了解的朋友可以查看这篇文章。同时&#xff0c;希望我的文章能帮助到你&#xff0c;如果觉得我的文章写的不错&#xff0c;请留下…

【Windows Defender 排除指定 文件夹、文件夹以提升性能】

使用webStorm时候提醒排出程序和目录提升性能, 于是我就把我的代码目录和常用程序全部排出, 不过不知道能不能提升多少性能, 先加上再说 一.使用UI配置排出项 隐私与安全性安全中心 病毒与威胁防护 添加或删除排出项 配置 二.使用命令配置 使用 PowerShell开启自动排除列表…