This is so refreshing… Documentation, code snippets and advice online, nothing compares to watching someone build something live. I’ve seriously been searching for this exactly topic. 🤦♂️ thank you!!
this is what i've been looking for... for so long. I do not overexaggerate when I say that this (imo) is close to perfect. (maybe speak a bit louder) Keep up the amazing work!
Thanks for posting this multi-part series. I am enjoying working through the lessons. One note, the egui crate has versioned up. Some of the equi-related functions used in your code are now deprecated or replaced.
A note on using the egui CentralPanel: There's a particular line in the documentation: "⚠ *CentralPanel* must be added after all other panels!" Because of the *TopBottomPanel* in *render_footer,* the *update* should look like this: self.render_top_panel(ctx, frame); render_footer(ctx); CentralPanel::default() .show(ctx, |ui| { render_header(ui); ScrollArea::auto_sized() .show(ui, |ui| { self.render_news_cards(ui); }); }); If you don't order the calls in this way, the footer will end up covering up part of the ScrollArea.
I'm following this tut, and it seems that ScrollArea::auto_sized() is no more. I got same result with ScrollArea::vertical().auto_shrink([false, false]).show(...)
@@creativcoder Hey, I had the same issue and on top the "family_and_size" does not exist anymore. Font sizing and styling has to be done completely different now. I tried to implement the approach from the egui font styling example. Now it looks like this: fn configure_fonts(&self, ctx: &Context){ use FontFamily:: Proportional; let mut font_def = FontDefinitions::default(); font_def.font_data .insert("MesloGS".to_owned(), FontData::from_static(include_bytes!("../../MesloLGS_NF_Regular.ttf"))); font_def.families.get_mut(&FontFamily::Proportional).unwrap() .insert(0, "MesloGS".to_owned()); ctx.set_fonts(font_def); let mut style = (*ctx.style()).clone(); style.text_styles = [ (TextStyle::Heading, FontId::new(35., Proportional)), (TextStyle::Body, FontId::new(20.0, Proportional)), ] .into(); ctx.set_style(style); } This works, but "with_layout" renders the first card always to grab the remaining size of the window. Even when interactively changing the size of the window. The others are rendered as expected.
It is, you need to set window decorations off from NativeOptions and then make a custom top header with buttons that ties to system close, minimize events
your videos are very good quality and perfect to learn rust, I hope to see more soon. I would prefer the coding part not sped up as we can adjust while viewing, as this where there is a lot to learn too.
While implementing App trait, how do you auto fill the methods of the trait? Are you using a different rust analyser, mine does not show such options to auto fill
Ah no, that's vscode quick fix shortcut. Hit `Ctrl + .` (dot) to show the quick fix menu. If it's not assigned, go to keyboard shortcuts and look for "problems.action.showQuickFixes" and assign a key.
You forgot to mention in this series how you got the original windows title bar removed and made the new title bar draggable. Kind of an important step...
thank you, it was awesome, I have a strange question, do you recall what was your program size output in release mode after build, with all dependency?
@@creativcoder thank you for fast answer, its quiet large... one other question, what backend did you used for gui? and its fully static? (I mean no shared library?) just want to start rust 😅
@@samansamani4477 it uses opengl as its rendering backend with glium crate at present. But you can switch to anything else. static, yes. I believe for opengl deps it maybe uses cdylib underneath.
Great tutorial! Are you using Gnome on X11? Because I run on Wayland and the window decorations are very ugly. (It's a known gnome issue) Or do you just run headlines using XWayland?
Sorry. I have really tried to follow this tutorial as I'd really like to learn. You go through things too fast, beginning with having the implementation fill in automatically at 7:00. I could not get this to work. I paused the playback and tried to enter in the function manually, but all I get is errors. I'm not new to programming, just new to Rust. Right now it seems impossible to learn from your examples.
For errors: Maybe your egui, version might be an upgraded one than the one in the video. For the pace: It you notice the video description it's shot as an "overview video". I'll try to slow down in future videos. Thank you for the feedback.
Im looking for a GUI that can be use on macos native apps, with permissions also can be set up on rust. I think rust makes sense in building native desktop app.
cargo build --release gives me ~19 Mb on linux. After using the following flags in Cargo.toml i managed to get it down to 7 Mb: [profile.release] strip = true opt-level = "z" lto = true codegen-units = 1
![Getting started with Rust 🦀 2021: 7b. Building a GUI app in Rust [Part B]](http://i.ytimg.com/vi/SvFPdgGwzTQ/mqdefault.jpg)
![Getting started with Rust 🦀 2021: 7b. Building a GUI app in Rust [Part B]](/img/tr.png)
This is so refreshing… Documentation, code snippets and advice online, nothing compares to watching someone build something live. I’ve seriously been searching for this exactly topic. 🤦♂️ thank you!!
Hey glad you found this helpful!
This is an excellent tutorial on gui design in Rust and a welcome tutorial on egui.
Your teaching style and editing skills are fantastic! Thank you for sharing your expertise!
Not even one single code that I get from tutorials in Rust works. So impressive
Skill Issue
@@xXYourShadowDaniXx totally haha
you are watching a old video, its still good for the basics of how egui works but you should be looking at the docs yourself
Great tutorial.. watched a lot of times.. waiting for the next continuation video ..
this is what i've been looking for... for so long. I do not overexaggerate when I say that this (imo) is close to perfect. (maybe speak a bit louder) Keep up the amazing work!
Thank you, means a lot. Sure, will fine tune my rec setup
This is more than just Rust GUI tutorial. Thanks for sharing.
Thanks for posting this multi-part series. I am enjoying working through the lessons. One note, the egui crate has versioned up. Some of the equi-related functions used in your code are now deprecated or replaced.
Yes, planning for a follow up video where we go through the fixes
So great, ... continue please .....
Hey thank you, part B just dropped!
Really looking forward to the second part.
part B: ua-cam.com/video/SvFPdgGwzTQ/v-deo.html
Subscribed. even your website has some great articles. Good one
Thank you :) It means a lot.
this is my first day learn rust and I love it
thanks for the tuts
This is just what I have been looking for. Thanks!
Great job, keep the level and sure people will be donating to you
A note on using the egui CentralPanel: There's a particular line in the documentation:
"⚠ *CentralPanel* must be added after all other panels!"
Because of the *TopBottomPanel* in *render_footer,* the *update* should look like this:
self.render_top_panel(ctx, frame);
render_footer(ctx);
CentralPanel::default()
.show(ctx, |ui| {
render_header(ui);
ScrollArea::auto_sized()
.show(ui, |ui| {
self.render_news_cards(ui);
});
});
If you don't order the calls in this way, the footer will end up covering up part of the ScrollArea.
I'm following this tut, and it seems that ScrollArea::auto_sized() is no more. I got same result with ScrollArea::vertical().auto_shrink([false, false]).show(...)
Hey thanks, I have a new video coming up soon, where we will refactor and update the app to use the most recent egui release. Stay tuned :)
@@creativcoder Hey, I had the same issue and on top the "family_and_size" does not exist anymore. Font sizing and styling has to be done completely different now. I tried to implement the approach from the egui font styling example. Now it looks like this:
fn configure_fonts(&self, ctx: &Context){
use FontFamily:: Proportional;
let mut font_def = FontDefinitions::default();
font_def.font_data
.insert("MesloGS".to_owned(), FontData::from_static(include_bytes!("../../MesloLGS_NF_Regular.ttf")));
font_def.families.get_mut(&FontFamily::Proportional).unwrap()
.insert(0, "MesloGS".to_owned());
ctx.set_fonts(font_def);
let mut style = (*ctx.style()).clone();
style.text_styles = [
(TextStyle::Heading, FontId::new(35., Proportional)),
(TextStyle::Body, FontId::new(20.0, Proportional)),
]
.into();
ctx.set_style(style);
}
This works, but "with_layout" renders the first card always to grab the remaining size of the window. Even when interactively changing the size of the window. The others are rendered as expected.
I failed to make a gui-rs app in the many other frameworks.
but this nicely works !!
thank you.
is there a way to set opacity of 50% on the whole window in iced? transparency setting is not doing anything for me.
I just wonder is it possible to create a custom titlebar for it? the default windows one is so big...
It is, you need to set window decorations off from NativeOptions and then make a custom top header with buttons that ties to system close, minimize events
@@creativcoder thank you for answer, but then how handle windows movement? can we still hook system movement to new created titlebar?
Question: Why is 'render_top_panel()' placed into 'impl Headlines' but the helper functions 'render_footer' and 'render_header' are not?
Good catch, there isn't any reason, I might have missed refactoring it while shooting the video. Will make changes
just out of curiosity what is the settings/extension/theme your using for the dock in gnome?
Thank you.. see you in 7b :)
This looks really cool. It reminds me of a windows widget.
The best tutorial!!!
dude awesome. you earned a sub
and also the immediate compile and the output on the terminal, which plugin do you use?
what is the theam used? btw great tutorial dude
Really helpful!
your videos are very good quality and perfect to learn rust, I hope to see more soon. I would prefer the coding part not sped up as we can adjust while viewing, as this where there is a lot to learn too.
The voice could be better.
Agree, I generally try to speed up repetitive parts of code. Thanks for the suggestion, will try to keep things realtime for code sections.
Thank you, will look into it
While implementing App trait, how do you auto fill the methods of the trait? Are you using a different rust analyser, mine does not show such options to auto fill
Ah no, that's vscode quick fix shortcut. Hit `Ctrl + .` (dot) to show the quick fix menu. If it's not assigned, go to keyboard shortcuts and look for "problems.action.showQuickFixes" and assign a key.
@@creativcoder thank you very much..
Very nice!
anyone know the extension/setting which automatically displays the type next to each variable and argument? (the light greyed out text)
That's type inlay hints in rust analyzer vscode extension. Just type Ctrl + Shift + P then toggle inlay hints
Very. NIce, by the way which kind of font do you use in vscode? Very clean and readable.
Great work 👏
You forgot to mention in this series how you got the original windows title bar removed and made the new title bar draggable. Kind of an important step...
Correct, there'll be a follow up video on same soon.
thank you, it was awesome, I have a strange question, do you recall what was your program size output in release mode after build, with all dependency?
About 16mb in release. You can reduce it further by following a few applicable ones in: github.com/johnthagen/min-sized-rust
@@creativcoder thank you for fast answer, its quiet large... one other question, what backend did you used for gui? and its fully static? (I mean no shared library?) just want to start rust 😅
@@samansamani4477 it uses opengl as its rendering backend with glium crate at present. But you can switch to anything else. static, yes. I believe for opengl deps it maybe uses cdylib underneath.
@@creativcoder well I build your project in windows and its worked without problem, except just there was 2 progress bar
@@samansamani4477 better to open an issue on github repository with a screenshot. I'd be able to help better
Great tutorial! Are you using Gnome on X11? Because I run on Wayland and the window decorations are very ugly. (It's a known gnome issue) Or do you just run headlines using XWayland?
Yeah had to switch back to X11, because obs (recording software) doesn't like wayland :)
This is good! 👍
What cursor pack do you use?
Hi! What the operation system you use?
I used Ubuntu till ep 8, but now I use arch btw :D
ImGUI is pronounced IM-Gooey, not Image UI. It's an acronym for Immediate Mode Graphic User Interface.
amazing tutorial
Sorry. I have really tried to follow this tutorial as I'd really like to learn. You go through things too fast, beginning with having the implementation fill in automatically at 7:00. I could not get this to work. I paused the playback and tried to enter in the function manually, but all I get is errors. I'm not new to programming, just new to Rust. Right now it seems impossible to learn from your examples.
For errors: Maybe your egui, version might be an upgraded one than the one in the video.
For the pace: It you notice the video description it's shot as an "overview video". I'll try to slow down in future videos. Thank you for the feedback.
Excelente....gracias saludos de los andes peruanos
Can you make some tutorials on druid?
Will do
what vscode theme are you using?
That's Bearded Theme Arc: marketplace.visualstudio.com/items?itemName=BeardedBear.beardedtheme
How can I follow this tutorial on windows machine ?
Im looking for a GUI that can be use on macos native apps, with permissions also can be set up on rust. I think rust makes sense in building native desktop app.
It's almost there, the libraries still need a fair bit of polish tbh
Thanks!
Make video on iced.
Yeah, iced is good too. Will see
so it took me hours to develop the same as this 28 min video :D
Yeah, that's the realistic time. I had to speed things up to not bore people watching 3-4 hour of a video :D
Great video, but I would like to mention that the Imgui library, is actually called "Dear Imgui" and is pronounced "Dear I'm GUI"
How big is the final binary?
cargo build --release gives me ~19 Mb on linux.
After using the following flags in Cargo.toml i managed to get it down to 7 Mb:
[profile.release]
strip = true
opt-level = "z"
lto = true
codegen-units = 1
Does it compile on windows?
I love your voice
what the system are you using?
In the left corner, i see "app,places,vscode"
That's Ubuntu 21.04 with
Theme: Mc-OS-Transparent-1.3 [GTK2/3]
Icons: McMojave-circle-grey-dark [GTK2/3]
I'd suggest you changing your logo as it is not readable. Think of it in the future.
Thanks for the suggestion, will look into it
Thank you
Thanks
Google pitchfork will put an end in all this suffering very soon
App::setup is missing??
Yep, in the recent video I have explained how to fix that: ua-cam.com/video/EOIhsRxhV80/v-deo.html
not wayland?
obs had trouble getting along with wayland, so x11.
Wow
isn't YEW better and faster than this?
faster? it calls web technologies from wasm lol
@@henrylang699 oh so EGUI does not depend on javascript at all?
I use SLINT for my gui
it's formerly sixtyfps
Yeah, it looks promising for embedded platforms
“image ui”