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上。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Redis学习二--常见问题及处理

基本概念 Redis基本概念数据结构 机制 持久化机制&#xff1a; RDB(内存快照)&#xff1a;某一时刻的内存快照以二进制的方式写入磁盘&#xff0c;可以手动触发和自动触发。 优点&#xff1a;生成文件小&#xff0c;恢复速度快&#xff0c;适用于灾难恢复。 缺点&#xff1a…

如何与施耐德Schneider建立EDI连接?

EDI基础知识 何为EDI&#xff1f;是一个软件、系统还是一种流程呢&#xff1f;准确来说&#xff0c;EDI全称Electronic Data Interchange&#xff0c;中文名称是电子数据交换&#xff0c;也被称为“无纸化贸易”。EDI是&#xff1a; 标准化的数据格式连接业务系统间的数据桥梁…

Verilog刷题笔记40

题目&#xff1a; For the following Karnaugh map, give the circuit implementation using one 4-to-1 multiplexer and as many 2-to-1 multiplexers as required, but using as few as possible. You are not allowed to use any other logic gate and you must use a and …

vite脚手架生成vue项目及其配置

认识脚手架 脚手架就是为了快速生成可复用代码的工具&#xff0c;帮你配置好开发过程中要用到的工具和环境&#xff0c;更快更方便地做开发写业务 vite和cli脚手架区别 可参考博主文章&#xff1a; Vue脚手架&#xff08;cli和vite详解&#xff09;_vite和vuecli-CSDN博客 …

JVM的知识

什么是JVM 1.JVM&#xff1a; JVM其实就是运行在 操作系统之上的一个特殊的软件。 2.JVM的内部结构&#xff1a; &#xff08;1&#xff09;因为栈会将执行的程序弹出栈。 &#xff08;2&#xff09;垃圾99%的都是在堆和方法区中产生的。 类加载器&#xff1a;加载class文件。…

花生壳 | ubuntu安装和卸载花生壳

一、到花生壳官网下载linux版本的花生壳 一般下载到Downlaods文件夹 进入文件夹 dpkg -i phddns_5_1_amd64.deb #安装花生壳 dpkg -r phddns #卸载花生壳 登录花生壳管理网站 http://b.oray.com 在Ubuntu中输入命令查看sn码&#xff0c;默认密码为admin phddns status …

年龄大了转嵌入式有机会吗?

有老铁说&#xff0c;我28了&#xff0c;转嵌入式还来得及吗&#xff1f; 其实这个是因人而异的&#xff0c;没有固定说超过多少岁&#xff0c;就不能转了。 我一般不太建议30及以上的转行&#xff0c;第一是30岁才从开始做技术&#xff0c;感觉意义不大。第二是难度大&#xf…

淡旺季酒店价格波动太大,住宿费用怎么管?

受地理位置、季节等因素的影响&#xff0c;部分城市不同季节的酒店价格浮动较大。一线还是二线城市&#xff1f;是淡季还是旺季&#xff1f;价格差距之间可以说是天差地别。 在淡季出差时&#xff0c;按照旺季的标准会导致成本过高&#xff0c;造成资源的浪费。而在旺季出差时&…

python+requests接口自动化测试实战

环境说明&#xff1a; 1.WIN 7, 64位 2.Python3.4.3 &#xff08;pip-8.1.2&#xff09; 3.Requests —>pip install requests 4.Unittest —>unittest 框架是python自带的单元测试框架&#xff0c;python2.1及其以后的版本已将unittest作为一个标准块放入python开发包中…

【GPT概念-03】:人工智能中的注意力机制

说明 注意力机制生成分数&#xff08;通常使用输入函数&#xff09;&#xff0c;确定对每个数据部分的关注程度。这些分数用于创建输入的加权总和&#xff0c;该总和馈送到下一个网络层。这允许模型捕获数据中的上下文和关系&#xff0c;而传统的固定序列处理方法可能会遗漏这…

LeetCode:2617. 网格图中最少访问的格子数(优先级队列 Java)

目录 2617. 网格图中最少访问的格子数 题目描述&#xff1a; 实现代码与解析&#xff1a; 优先级队列 原理思路&#xff1a; 2617. 网格图中最少访问的格子数 题目描述&#xff1a; 给你一个下标从 0 开始的 m x n 整数矩阵 grid 。你一开始的位置在 左上角 格子 (0, 0) 。…

C语言数据结构基础————二叉树学习笔记(四)简单的OJ题目练习

1.单值二叉树 965. 单值二叉树 - 力扣&#xff08;LeetCode&#xff09; 建立一个新的函数&#xff0c;用函数传参的方法来记录val的值 如上一篇最后的对称二叉树的习题&#xff0c;建立新的函数来传参 多采用使用反对值的方法&#xff0c;因为如果是相等return true的话&am…

芯片公司SAP管理架构:科技与管理的完美融合

在当今日新月异的科技时代&#xff0c;芯片公司作为信息技术领域的核心力量&#xff0c;其运营管理的复杂性日益凸显。SAP管理架构作为一种高效的企业资源规划系统&#xff0c;为芯片公司提供了强大的管理支持。本文将为您科普芯片公司SAP管理架构的相关知识。 SAP管理架构是一…

leetcode每日一题1969

目录 一.题目原型&#xff1a; 二思路解析&#xff1a; 三.代码实现: 一.题目原型&#xff1a; 二思路解析&#xff1a; 灵神的做法非常让人惊叹&#xff1a; 理解就是&#xff0c;如果一个数大于另一个数要交换的1的权重&#xff0c;那么他们的乘积就变小。 那么一个大的数…

React 中的懒加载(Lazy Load)

React 中的懒加载&#xff08;Lazy Load&#xff09; 在大型的 React 应用中&#xff0c;为了提高页面加载速度和性能&#xff0c;我们经常会使用懒加载技术来延迟加载组件或资源。懒加载可以将页面初始加载的内容减少到最小&#xff0c;只在需要时再动态加载额外的组件或资源…

js实现hash路由原理

一、简单的上下布局&#xff0c;点击左侧导航&#xff0c;中间内容跟对变化&#xff0c;主要技术使用js检测路由的onhashchange事件 效果图 二、话不多说&#xff0c;直接上代码 <!DOCTYPE html> <html lang"zh"><head><meta charset"…

Wireshark 抓包工具与长ping工具pinginfoview使用,安装包

一、Wireshark使用 打开软件&#xff0c;选择以太网 1、时间设置时间显示格式 这个时间戳不易直观&#xff0c;我们修改 2、抓包使用的命令 1&#xff09;IP地址过滤 ip.addr192.168.1.114 //筛选出源IP或者目的IP地址是192.168.1.114的全部数据包。 ip.sr…

Win10中IIS服务如何部署c#服务

1、将项目打包发布 注意发布位置 2、打开搜索搜索计算机管理 3、点击服务和应用程序 4、点击internet information service 5、点击网站再点击添加网站 6、添加网站名称:opm 添加网站路径(即刚才发布路径) 输入ip地址:自己电脑ip 配置端口号5052 最后点击确认 7、…

vue3中如何实现多个侦听器(watch)

<body> <div id"app"><input type"button" value"更改名字" click"change"> </div> <script src"vue.js"></script> <script>new Vue({el: #app,data: {food: {id: 1,name: 冰激…

类型双关联合体(C++基础)

类型双关 类型双关就是在同样的一个内存中&#xff0c;存储的数据可以用做不同类型的表述。用在底层性能优化的时候&#xff0c;一般使用的时候要非常小心&#xff0c;因为不当的使用可能导致程序的不稳定和不可预测的行为。 int a 5;//double value (double)a;double value…