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.mzph.cn/news/752006.shtml

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

相关文章

asp.net 作业星软件系统

asp.net 作业星软件系统 用户功能:分教师和家长&#xff08;学生) 注册登录:登录部分是用户名密码&#xff0c;以及教师和家长&#xff08;学生&#xff09;的勾选; 注册包括用户名密码确认密码再次确认密码(与上方输入的密码比对&#xff09;身份班级设置找回账号的问题和答案…

【人工智能】英文学习材料01(每日一句)

&#x1f33b;个人主页&#xff1a;相洋同学 &#x1f947;学习在于行动、总结和坚持&#xff0c;共勉&#xff01; 目录 1.Natural Language Processing&#xff0c;NLP&#xff08;自然语言处理&#xff09; 2.Machine Learing&#xff0c;ML&#xff08;机器学习&#xf…

FFplay使用滤镜添加字幕到现有视频显示

1.创建字幕文件4k.srt 4k.srt内容: 1 00:00:01.000 --> 00:00:30.000 日照香炉生紫烟2 00:00:31.000 --> 00:00:60.000 遥看瀑布挂前川3 00:01:01.000 --> 00:01:30.000 飞流直下三千尺4 00:01:31.000 --> 00:02:00.000 疑是银河落九天2.通过使用滤镜显示字幕在视…

【GPT-SOVITS-03】SOVITS 模块-生成模型解析

说明&#xff1a;该系列文章从本人知乎账号迁入&#xff0c;主要原因是知乎图片附件过于模糊。 知乎专栏地址&#xff1a; 语音生成专栏 系列文章地址&#xff1a; 【GPT-SOVITS-01】源码梳理 【GPT-SOVITS-02】GPT模块解析 【GPT-SOVITS-03】SOVITS 模块-生成模型解析 【G…

llama笔记:官方示例解析 example_chat_completion.py

1 导入库 from typing import List, Optional从typing模块中导入List和Optional。typing模块用于提供类型注解的支持&#xff0c;以帮助明确函数预期接收和返回的数据类型。List用于指定列表类型Optional用于指定一个变量可能是某个类型&#xff0c;也可能是None。 import fir…

Linux 下使用 socket 实现 TCP 客户端

目录 示例代码板级验证更多内容 套接字&#xff08;socket&#xff09;是 Linux 下的一种进程间通信机制&#xff08;socket IPC&#xff09;&#xff0c;它不仅支持同一主机的不同进程间通信&#xff0c;还支持跨网络的不同主机的进程间通信。 socket 允许通过标准的文件描述…

十四、GPT

在GPT-1之前&#xff0c;传统的 NLP 模型往往使用大量的数据对有监督的模型进行任务相关的模型训练&#xff0c;但是这种有监督学习的任务存在两个缺点&#xff1a;预训练语言模型之GPT 需要大量的标注数据&#xff0c;高质量的标注数据往往很难获得&#xff0c;因为在很多任务…

Android学习使用GitLab(保姆级)

实习生入职第一课 学习使用GitLab&#xff0c;熟悉Git版本控制工具 下面是我的学习笔记&#xff0c;希望能帮助到需要的人&#xff01; 目录 一、注册你的GitLab账号 二、安装Git 三、在Android studio中配置Git 四、GitLab账户配置SSH Keys 五、GitLab账号创建项目 六…

深度学习-基于机器学习的垃圾邮件过滤系统

概要 当今社会发展迅速&#xff0c;网络邮件也愈加普及。但是随之产生的垃圾邮件问题&#xff0c;也是的我们的邮件用户不堪其扰。对企业的工作以及个人用户的生活也造成了很大的影响。针对一些由于垃圾邮件导致的网络吞吐量异常和邮件系统无法正常使用的情况。建立一个机器学习…

html5黑色大气的个人博客全屏滚动个人主页源码HTML+JS+CSS

html5黑色大气的个人博客全屏滚动个人主页源码HTMLJSCSS

基于背景差法的运动目标检测(车辆检测),Matlab实现

博主简介&#xff1a; 专注、专一于Matlab图像处理学习、交流&#xff0c;matlab图像代码代做/项目合作可以联系&#xff08;QQ:3249726188&#xff09; 个人主页&#xff1a;Matlab_ImagePro-CSDN博客 原则&#xff1a;代码均由本人编写完成&#xff0c;非中介&#xff0c;提供…

【计算机视觉】二、图像形成——实验:2D变换编辑器2.0(Pygame)

文章目录 一、向量和矩阵的基本运算二、几何基元和变换1、几何基元(Geometric Primitives)2、几何变换(Geometric Transformations)2D变换编辑器0. 项目结构1. Package: guibutton.pywindow.py1. __init__(self, width, height, title)2. add_buttons(self)3. clear(self)4. dr…

Docker 安装 Skywalking以及UI界面

关于Skywalking 在现代分布式系统架构中&#xff0c;应用性能监控&#xff08;Application Performance Monitoring, APM&#xff09;扮演着至关重要的角色。本文将聚焦于一款备受瞩目的开源APM工具——Apache Skywalking&#xff0c;通过对其功能特性和工作原理的详细介绍&am…

【C++ leetcode 】双指针问题

1. 183. 移动零 题目 给定一个数组 nums&#xff0c;编写一个函数将所有 0 移动到数组的末尾&#xff0c;同时保持非零元素的相对顺序。 请注意 &#xff0c;必须在不复制数组的情况下原地对数组进行操作。 题目链接 . - 力扣&#xff08;LeetCode&#xff09; 画图 和 文字 分…

基于深度学习LSTM+NLP情感分析电影数据爬虫可视化分析推荐系统(深度学习LSTM+机器学习双推荐算法+scrapy爬虫+NLP情感分析+数据分析可视化)

文章目录 基于深度学习LSTMNLP情感分析电影数据爬虫可视化分析推荐系统&#xff08;深度学习LSTM机器学习双推荐算法scrapy爬虫NLP情感分析数据分析可视化&#xff09;项目概述深度学习长短时记忆网络&#xff08;Long Short-Term Memory&#xff0c;LSTM&#xff09;机器学习协…

golang常用库之-golang常用库之-ladon包 | 基于策略的访问控制

文章目录 golang常用库之-ladon包 | 基于策略的访问控制概念使用策略 条件 Conditions自定义conditionLadon Condition使用示例 持久化访问控制(Warden) 结合 Gin 开发一个简易 ACL 接口参考 golang常用库之-ladon包 | 基于策略的访问控制 https://github.com/ory/ladon Lado…

NPM 仓库的超集 JSR 来了!

引言 今天在 Deno 博客中看到了一篇文章&#xff0c;介绍了一个叫 JSR 的包管理注册中心&#xff0c;简单尝试了一下觉得还不错&#xff0c;本文将结合原文章和个人体验对 JSR 进行一个详细的介绍。 在现如今的前端开发中&#xff0c;包管理注册中心 (如 npmjs.com) 扮演着至…

Javaweb学习记录(一)Maven

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

Github 2024-03-17 php开源项目日报 Top9

根据Github Trendings的统计,今日(2024-03-17统计)共有9个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量PHP项目9Blade项目2Laravel:表达力和优雅的 Web 应用程序框架 创建周期:4631 天开发语言:PHP, BladeStar数量:75969 个Fork数量:24281 次关…

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

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