当前位置: 首页 > news >正文

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

相关文章:

RUST egui体验

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

详解llamaindex

什么是LlamaIndex LlamaIndex是一个用于LLM应用程序的数据框架&#xff0c;用于注入、结构化&#xff0c;并访问私有或特定领域的数据。 入门教程 简单使用 # Linux export OPENAI_API_KEYxxxwindows set OPENAI_API_KEYxxx# 代码中加入 API_SECRET_KEY "xxx" B…...

管理类联考–复试–英文面试–问题--规划介绍原因做法--汇总

文章目录 规划介绍原因做法 规划 一、提问方式&#xff1a;问题1&#xff1a;读研的规划&#xff1b;问题2&#xff1a;未来五年的规划&#xff1b;问题3&#xff1a;是否计划读博 常见问法1&#xff1a;Can you talk about your plans in the postgraduate period&#xff1f…...

成都百洲文化传媒有限公司电商新浪潮的领航者

在当今电商行业风起云涌的时代&#xff0c;成都百洲文化传媒有限公司以其独特的视角和专业的服务&#xff0c;成为了众多商家争相合作的伙伴。今天&#xff0c;就让我们一起走进百洲文化的世界&#xff0c;探索其背后的成功密码。 一、百洲文化的崛起之路 成都百洲文化传媒有限…...

【Unity】获取游戏对象或组件的常用方法

前言 在Unity开发过程中&#xff0c;我们经常需要获取组件&#xff0c;那么在Unity里如何获取组件呢&#xff1f; 一、获取游戏对象 1.GameObject.Find GameObject.Find 是通过物体的名称获取对象的 所以会遍历当前整个场景&#xff0c;效率较低 而且只能获取激活状态的物体…...

html5cssjs代码 024 响应式布局示例

html5&css&js代码 024 响应式布局示例 一、代码二、解释 该HTML代码重点在于构建一个带有响应式设计的两栏布局网页&#xff0c;包含页头、导航条、主要内容区&#xff08;左右两列&#xff09;和底部区域&#xff0c;并运用CSS样式设置页面元素的布局、颜色、字体、间…...

json详解

文章目录 概述JSON 发展史什么是 JSON为什么要使用 JSONJSON 的不足JSON 应该如何存储什么时候会使用 JSON1) 定义接口2) 序列化3) 生成 Token4) 配置文件 Json分类json-lib开源的JacksonGoogle的Gson阿里巴巴的FastJsonJSON.simple JSON 序列化方式有哪些消息队列中传输的数据…...

C语言之---柔性数组

1.1前记 也许你从来没有听说过柔性数组这个概念&#xff0c;但是它是确实存在的。 C99中&#xff0c;结构中的最后一个元素允许是未知大小的数组&#xff0c;这就是柔性数组成员。 例如: struct st_type {int i;int a[0]; }; 有些编译器会报错无法编译可以改为&#xff1a…...

鸿蒙错误记录

鸿蒙错误代码记录 只是记录学习过程中的错误 只是记录学习过程中的错误 刚开始入手学习鸿蒙&#xff0c;错误记录一下 BussinessError 200 授权没有成功&#xff0c;需要先申请权限 BussinessError 3301200:定位时没有网络&#xff0c;打开网络即可...

Leetcode热题100:图论

Leetcode 200. 岛屿数量 深度优先搜索法&#xff1a; 对于这道题来说&#xff0c;是一个非常经典的图的问题&#xff0c;我们可以先从宏观上面来看问题&#xff0c;也就是说在不想具体算法的前提下&#xff0c;简单的说出如何找到所有的岛屿呢&#xff1f; 如图中所示&#x…...

刚进公司第一天-电脑环境搭建

写在前面 之前在公司做过一次开发小工具的分享&#xff0c;这两天有个同事找我学习一些小工具开发的知识&#xff0c;但是我发现他的基础是真的差&#xff0c;想学开发知识却连自己本地电脑环境都没弄好&#xff0c;确实&#xff0c;有些人工作了很久&#xff0c;由于自己工作中…...

kubernetes集群报 unable to load bootstrap kubeconfig处置思路

一.现状和问题现象 公司kubernetes集群是通过kubeadm工具安装的&#xff0c;使用1年之后证书到期。在 kubernetes control plane maste节点服务器上运行 kubeadm certs renew all 命令更新证书后&#xff0c;kubelet 无法正常启动&#xff0c;报错日志如下 Failed to run kube…...

MacBook远程桌面Windows使用Microsoft Remote Desktop for Mac_亲测使用

MacBook远程桌面Windows使用Microsoft Remote Desktop for Mac_亲测使用 像Windows上有自带的远程桌面连接软件.MacBook没有自带的远程连接Windows桌面的工具,需要安装软件来实现. 像远程桌面控制软件一般有 TeamViewer、向日葵远程控制, ToDesk, Microsoft Remote Desktop f…...

Huggingface 笔记:大模型(Gemma2B,Gemma 7B)部署+基本使用

1 部署 1.1 申请权限 在huggingface的gemma界面&#xff0c;点击“term”以申请gemma访问权限 https://huggingface.co/google/gemma-7b 然后接受条款 1.2 添加hugging对应的token 如果直接用gemma提供的代码&#xff0c;会出现如下问题&#xff1a; from transformers i…...

WebGL 理论基础 01 WebGL 基础概念

WebGL 理论基础 基础概念 WebGL 基础概念 顶点着色器的作用是计算顶点的位置。根据计算出的一系列顶点位置&#xff0c;WebGL可以对点&#xff0c; 线和三角形在内的一些图元进行光栅化处理。当对这些图元进行光栅化处理时需要使用片段着色器方法。 片段着色器的作用是计算…...

Leetcode 28:找出字符串中第一个匹配项的下标

给你两个字符串 haystack 和 needle &#xff0c;请你在 haystack 字符串中找出 needle 字符串的第一个匹配项的下标&#xff08;下标从 0 开始&#xff09;。如果 needle 不是 haystack 的一部分&#xff0c;则返回 -1 。 示例 1&#xff1a; 输入&#xff1a;haystack &q…...

docker opensearch arm64 运行失败解决方案

opensearch版本 2.1.0 docker日志错误信息&#xff1a; Disabling execution of install_demo_configuration.sh for OpenSearch Security Plugin Enabling OpenSearch Security Plugin Killing opensearch process 10 OpenSearch exited with code 143 Performance analyze…...

C#、ASP、ASP.NET、.NET、ASP.NET CORE区别、ASP.NET Core其概念和特点、ASP.NET Core个人心得体会

C#是一种面向对象的编程语言&#xff0c;主要用于开发跨平台的应用程序。它是.NET框架的一部分&#xff0c;并且可以在.NET平台上运行。 ASP&#xff08;Active Server Pages&#xff09;是一种用于构建动态Web页面的技术&#xff0c;使用VBScript或JScript作为服务器端脚本语…...

SpringMVC 简介及入门级的快速搭建详细步骤

MVC 回顾 MVC&#xff0c;即Model-View-Controller&#xff08;模型-视图-控制器&#xff09;设计模式&#xff0c;是一种广泛应用于软件工程中&#xff0c;特别是Web应用开发中的架构模式。它将应用程序分为三个核心组件&#xff1a; Model&#xff08;模型&#xff09;&#…...

Flutter编译卡在Running Gradle task ‘assembleDebug

1、翻墙 2、修改国内镜像源&#xff08;以下以Flutter 3.19.3版本为例&#xff09; 找到Flutter SDK目录下的Flutter配置文件resolve_dependencies.gradle 路径&#xff1a;flutter/packages/flutter_tools/gradle/resolve_dependencies.gradle 1)、第一处修改&#xff1a; g…...

龙虎榜——20250610

上证指数放量收阴线&#xff0c;个股多数下跌&#xff0c;盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型&#xff0c;指数短线有调整的需求&#xff0c;大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的&#xff1a;御银股份、雄帝科技 驱动…...

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施&#xff0c;由雇主和个人按一定比例缴纳保险费&#xff0c;建立社会医疗保险基金&#xff0c;支付雇员医疗费用的一种医疗保险制度&#xff0c; 它是促进社会文明和进步的…...

可靠性+灵活性:电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

免费PDF转图片工具

免费PDF转图片工具 一款简单易用的PDF转图片工具&#xff0c;可以将PDF文件快速转换为高质量PNG图片。无需安装复杂的软件&#xff0c;也不需要在线上传文件&#xff0c;保护您的隐私。 工具截图 主要特点 &#x1f680; 快速转换&#xff1a;本地转换&#xff0c;无需等待上…...

系统掌握PyTorch:图解张量、Autograd、DataLoader、nn.Module与实战模型

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文通过代码驱动的方式&#xff0c;系统讲解PyTorch核心概念和实战技巧&#xff0c;涵盖张量操作、自动微分、数据加载、模型构建和训练全流程&#…...

springboot 日志类切面,接口成功记录日志,失败不记录

springboot 日志类切面&#xff0c;接口成功记录日志&#xff0c;失败不记录 自定义一个注解方法 import java.lang.annotation.ElementType; import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy; import java.lang.annotation.Target;/***…...

上位机开发过程中的设计模式体会(1):工厂方法模式、单例模式和生成器模式

简介 在我的 QT/C 开发工作中&#xff0c;合理运用设计模式极大地提高了代码的可维护性和可扩展性。本文将分享我在实际项目中应用的三种创造型模式&#xff1a;工厂方法模式、单例模式和生成器模式。 1. 工厂模式 (Factory Pattern) 应用场景 在我的 QT 项目中曾经有一个需…...