当前位置: 首页 > 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…...

<6>-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

.Net框架,除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

ffmpeg(四):滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用&#xff0c;因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型&#xff08;VLMs&#xff09;在字幕生成方面…...

从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

06 Deep learning神经网络编程基础 激活函数 --吴恩达

深度学习激活函数详解 一、核心作用 引入非线性:使神经网络可学习复杂模式控制输出范围:如Sigmoid将输出限制在(0,1)梯度传递:影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...

Web后端基础(基础知识)

BS架构&#xff1a;Browser/Server&#xff0c;浏览器/服务器架构模式。客户端只需要浏览器&#xff0c;应用程序的逻辑和数据都存储在服务端。 优点&#xff1a;维护方便缺点&#xff1a;体验一般 CS架构&#xff1a;Client/Server&#xff0c;客户端/服务器架构模式。需要单独…...

python爬虫——气象数据爬取

一、导入库与全局配置 python 运行 import json import datetime import time import requests from sqlalchemy import create_engine import csv import pandas as pd作用&#xff1a; 引入数据解析、网络请求、时间处理、数据库操作等所需库。requests&#xff1a;发送 …...

ZYNQ学习记录FPGA(一)ZYNQ简介

一、知识准备 1.一些术语,缩写和概念&#xff1a; 1&#xff09;ZYNQ全称&#xff1a;ZYNQ7000 All Pgrammable SoC 2&#xff09;SoC:system on chips(片上系统)&#xff0c;对比集成电路的SoB&#xff08;system on board&#xff09; 3&#xff09;ARM&#xff1a;处理器…...