Getting started with Rust 🦀 2021: 7a. Building a GUI app in Rust [Part A]

[@Crux161]

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!!

[@creativcoder]

Hey glad you found this helpful!

[@jamesb1559]

This is an excellent tutorial on gui design in Rust and a welcome tutorial on egui.

[@metasim]

Your teaching style and editing skills are fantastic! Thank you for sharing your expertise!

[@paulmarkert5907]

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.

[@creativcoder]

Yes, planning for a follow up video where we go through the fixes

[@peterthecoderd.1210]

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.

[@creativcoder]

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.

[@cthutu]

ImGUI is pronounced IM-Gooey, not Image UI. It's an acronym for Immediate Mode Graphic User Interface.

[@theeagleseye4989]

Great tutorial.. watched a lot of times.. waiting for the next continuation video ..

[@overshifted]

Great video, but I would like to mention that the Imgui library, is actually called "Dear Imgui" and is pronounced "Dear I'm GUI"

[@luizneri]

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 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 :)

[@michaelheisler8501]

@@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.

[@codesurge6838]

This is more than just Rust GUI tutorial. Thanks for sharing.

[@devfagundes]

Not even one single code that I get from tutorials in Rust works. So impressive

[@xXYourShadowDaniXx]

Skill Issue

[@devfagundes]

@@xXYourShadowDaniXx totally haha

[@brunob.7792]

Google pitchfork will put an end in all this suffering very soon

[@saaddahmani1870]

So great, ... continue please .....

[@creativcoder]

Hey thank you, part B just dropped!

[@princeofexcess]

is there a way to set opacity of 50% on the whole window in iced? transparency setting is not doing anything for me.

[@saathwik_dasari1]

Thanks!

[@samansamani4477]

I just wonder is it possible to create a custom titlebar for it? the default windows one is so big...

[@creativcoder]

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

[@samansamani4477]

@@creativcoder thank you for answer, but then how handle windows movement? can we still hook system movement to new created titlebar?

[@spinthma]

Very. NIce, by the way which kind of font do you use in vscode? Very clean and readable.

[@buhaytza2005]

Thanks

[@ajinkyax]

Subscribed. even your website has some great articles. Good one

[@creativcoder]

Thank you :) It means a lot.

[@aeases-]

just out of curiosity what is the settings/extension/theme your using for the dock in gnome?

[@filmo]

Question: Why is 'render_top_panel()' placed into 'impl Headlines' but the helper functions 'render_footer' and 'render_header' are not?

[@creativcoder]

Good catch, there isn't any reason, I might have missed refactoring it while shooting the video. Will make changes

[@Zooiest]

What cursor pack do you use?

[@VAcharya]

How can I follow this tutorial on windows machine ?

[@spinthma]

and also the immediate compile and the output on the terminal, which plugin do you use?

[@josbexerra8115]

Excelente....gracias saludos de los andes peruanos

[@manoj88153]

Make video on iced.

[@creativcoder]

Yeah, iced is good too. Will see

[@RobertoOrtis]

Does it compile on windows?

[@delusionfish9606]

I failed to make a gui-rs app in the many other frameworks. but this nicely works !! thank you.

[@JXQU3]

Really helpful!

[@alessio750]

what is the theam used? btw great tutorial dude

[@adsick_ua]

I'd suggest you changing your logo as it is not readable. Think of it in the future.

[@creativcoder]

Thanks for the suggestion, will look into it

[@learntry9074]

Thank you.. see you in 7b :)

[@tristansantiago7151]

This looks really cool. It reminds me of a windows widget.

[@chiragsingla.]

I love your voice

[@joegriffith1683]

anyone know the extension/setting which automatically displays the type next to each variable and argument? (the light greyed out text)

[@creativcoder]

That's type inlay hints in rust analyzer vscode extension. Just type Ctrl + Shift + P then toggle inlay hints

[@hermannpaschulke1583]

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?

[@creativcoder]

Yeah had to switch back to X11, because obs (recording software) doesn't like wayland :)

[@codeitlikemiley]

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.

[@creativcoder]

It's almost there, the libraries still need a fair bit of polish tbh

[@cakemaster12345]

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...

[@creativcoder]

Correct, there'll be a follow up video on same soon.

[@kagenao2336]

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!

[@creativcoder]

Thank you, means a lot. Sure, will fine tune my rec setup

[@kingpenguin1905]

dude awesome. you earned a sub

[@CaioDanielNunesSantos]

Thank you

[@dog1509]

Really looking forward to the second part.

[@creativcoder]

part B: kzbin.info/www/bejne/iaepgZedfNytirM

[@CT-cx8yi]

This is just what I have been looking for. Thanks!

[@jdssl]

The best tutorial!!!

[@irfnrdh]

this is my first day learn rust and I love it thanks for the tuts

[@samansamani4477]

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]

About 16mb in release. You can reduce it further by following a few applicable ones in: github.com/johnthagen/min-sized-rust

[@samansamani4477]

@@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 😅

[@creativcoder]

@@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.

[@samansamani4477]

@@creativcoder well I build your project in windows and its worked without problem, except just there was 2 progress bar

[@creativcoder]

@@samansamani4477 better to open an issue on github repository with a screenshot. I'd be able to help better

[@adsick_ua]

Great job, keep the level and sure people will be donating to you

so it took me hours to develop the same as this 28 min video :D

[@creativcoder]

Yeah, that's the realistic time. I had to speed things up to not bore people watching 3-4 hour of a video :D

[@ChatterboxBS1]

Very nice!

[@creator0f_in1quity]

Hi! What the operation system you use?

[@creativcoder]

I used Ubuntu till ep 8, but now I use arch btw :D

[@moose43h]

Wow

[@ursochurrasqueira]

amazing tutorial

[@alihusham1560]

isn't YEW better and faster than this?

[@henrylang699]

faster? it calls web technologies from wasm lol

[@alihusham1560]

@@henrylang699 oh so EGUI does not depend on javascript at all?

[@cyanfroste5559]

what vscode theme are you using?

[@creativcoder]

That's Bearded Theme Arc: marketplace.visualstudio.com/items?itemName=BeardedBear.beardedtheme

[@bankoleogundero9446]

How big is the final binary?

[@creativcoder]

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

[@theeagleseye4989]

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

[@creativcoder]

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.

[@theeagleseye4989]

@@creativcoder thank you very much..

[@stomah9832]

“image ui”

[@NehaSharma-ld9rx]

This is good! 👍

[@aurorapaisley7453]

App::setup is missing??

[@creativcoder]

Yep, in the recent video I have explained how to fix that: kzbin.info/www/bejne/e4CsmaaIrc2JbpI

[@dagher.a247]

Great work 👏

[@benz201forever]

I use SLINT for my gui

[@benz201forever]

it's formerly sixtyfps

[@creativcoder]

Yeah, it looks promising for embedded platforms

[@theeagleseye4989]

Can you make some tutorials on druid?

[@creativcoder]

Will do

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.

[@TheGraemi]

The voice could be better.

[@creativcoder]

Agree, I generally try to speed up repetitive parts of code. Thanks for the suggestion, will try to keep things realtime for code sections.

[@creativcoder]

Thank you, will look into it

[@ino3809]

not wayland?

[@creativcoder]

obs had trouble getting along with wayland, so x11.

[@somethingelse5842]

what the system are you using?

[@somethingelse5842]

In the left corner, i see "app,places,vscode"

[@creativcoder]

That's Ubuntu 21.04 with Theme: Mc-OS-Transparent-1.3 [GTK2/3] Icons: McMojave-circle-grey-dark [GTK2/3]