Simple, Portable, Immediate mode UI with egui

I think e GUI might actually be one of the most requested GUI Frameworks that comes up anytime I talk about something that runs on the web anytime that I deal with something that talks about UI and Bevy anytime I talk about UI and Native applications someone always comes up with hey what about igui and there is a reason for that while personally most of my UI experience historically has been on the web for example the web doesn't embed well everywhere right you still need a browser to be able to view something egui takes a slightly different approach yes igui can render to the web but the web isn't necessarily its primary platform egoi tends to function really well when integrated with say Bevy so what is igui igui is described in the readme as a simple fast and highly portable immediate mode GUI library for rust igui runs on the web natively and in your favorite game engine which is a link to a large list of targets that you can have if you build an eagerly app now there are the sort of official Integrations such as e-frame which is the one that we'll probably be looking at the most today then there's third party integration such as Bevy e GUI or igui for a number of different rendering engines including igui for nanu which we've also talked about on the channel before igui is designed to be integrated with things so it's no surprise that writing your own egoi integration is right here in the readme because not only being the easiest to use the rust GUI Library one of igui's targets is that you can use e GUI anywhere you can draw textured triangles now textured triangles should set off Sparks in your head if you've been following any of the Shader videos that I've been doing because textured triangles are something that we deal with a lot on the GPU so there's a focus on being easy to use and being simple which in contrast to the web itself the web itself is not necessarily simple and it's not specifically simple in the way that igui means simple which isn't just simple to understand but also portable and embeddable igui does run on the web though and you can see that in the example here which is running in the arc browser we've got widgets and windows and things we can click and drag we've got radio buttons and state and check boxes and links that we can click we've even got date Pickers which are notoriously complicated to implement in the land of UI there's graph plotting and custom widgets which we'll cover in a second components that you might expect such as color Pickers or progress bars we can click and drag as an interaction pattern to change values we have drop down menus and combo boxes so there's plenty of different components that we can use to build up an interface that said I'm trying to right click right now and I can't so if I go up to the top bar menu and I open the developer tools we can see that or maybe you can't because it's not zoomed in far enough now hopefully you can see that this entire UI is built inside of a canvas element so when we render egoi to the web we are giving up on the accessibility that we get by default with Native HTML elements as well as things like CSS Etc this is a GUI framework that renders to sort of GPU textures and that doesn't mean we don't get things like keyboard access for example if I start hitting tab you can see the selection move across first the top and then the right hand side it's important to note that e GUI has recently integrated access kit as of 0.20 now that doesn't mean it's fully integrated it doesn't mean that that's the most accessible GUI framework available but it is integrated and there are things if we check out the back end like this experimental screen reader feature so while we do lose some of the Native accessibility components of rendering on the web there is work being done to sort of grab those back and if you run e GUI on desktops access kit actually does integrate with desktop level apis for these accessibility concerns there are different modes that you can run egoi in for example right now if since we're looking at the background debug stats we're in reactive mode which if I move the mouse cursor you can see that we get total frames painted increasing and if I stop moving the mouse the total frames painted stays relatively stable if we go to continuous it just keeps rendering everything over and over igui has the ability to render complex components like tables for example here's an example that renders a bunch of control points that lets you draw a bezier curve we can even do things like set up syntax highlighting in text components with different themes like themes dark themes setting the colors of individual elements we can Implement our own context menus with right click and complex interactions like drag and drop are a thing that also work as well basically if you need to build a UI with e GUI you should have a fair amount of confidence now that you can build that UI with igui that said for example I'm on dribble on the right here if I do say a search for UI for example we're going to get a lot of beautifully defined UI elements whether those are headers or elements on a phone or elements on a website for example like this getting e GUI to look the way you want is going to take more work I think than it would take on the web and I think this is generally true of all Native desktop UI toolkits so egoi is not alone here but e GUI being built on top of the GPU has access to quite a bit of power and the way that I use egoi the most is often with Bevy inspector igui which uses the reflect traits that Bevy provides to expose different entities components and their values in an inspector for you if you want a quick debug interface inside of your Bevy application or game this is one example of a time when you don't necessarily need a marketing site level of design for example you just need something that can work inside of a developer environment and E GUI is really good at this so then it's useful to look at the goals of the egoi project we've gone over a couple of them already but it's nice to see that there's a list here for where to place e GUI compared to other sort of ecosystem approaches right when would I use igui over leptos or you or something like that so we're looking for the easiest to use GUI Library this I think is incredibly important when the GUI is not the most important thing that you're building for example like we just looked at with Bevy inspector e GUI we want the debug interface and we hear about say writing shaders or building our game not about building a GUI to interact with the game it targets 60 hertz now I believe that we're only looking at one to two milliseconds to paint a frame in igui in general with the possibility of even more optimization in the future so if you think about the frame budgets that we have on the web for example we're looking at 16 milliseconds one to two milliseconds to do those paints is not that big of a deal so we've got easy to use friendly portable easy to integrate and you can see a theme developing here it's it's supposed to be easy it's supposed to be simple it's supposed to be something you can reach for and then work on later right and going back to sort of the way things look by default a native looking interface is not one of igui's goals so if you're looking for something that looks like a Mac OS app on Mac or iOS device or something like that egoi may not be the thing that you want to use and if your layouts get too advanced or too flexible you may be looking at needing the web platform or something like that that can support your needs rather than e GUI who explicitly has a non-goal to be too powerful or too complex or too flexible and I think this does really impact the library in a positive way so when should you use e GUI the authors say that it aims to be the best choice when you want a simple way to create a GUI as we go gone over already or when you want to add a GUI to a game engine such as bevue Inspector ikui if you're not using rust don't use igui if you want native UI don't use igui if you want something that doesn't break when you upgrade it don't use egoi because igui still hasn't hit 1.0 I think we're at version 0.20 as of the recording of this video so reach for E GUI when you're writing something that's interactive in Rust that needs a simple GUI this makes igui really good for building a quick GUI on top of some procedural generation in Bevy for example one use case that I'm planning on using ego E4 in the near future is for admin tools for a software as a service platform that I'm working on so instead of spending a bunch of time building a web interface to my database I'm going to try to use ingui to build out those admin tools so I can focus Less on the actual interface and more on building the product and because that UI is going to be an admin interface the only people that are going to see it are me or other people that I give admin access and it is important also to notice that you can customize the look of igui for example here with this tiny Pomodoro Timer it just might take more effort than you expect coming from other ecosystems so here's an example of building a custom component that replicates a toggle interface you can see that there's four steps here for a given custom widget some of which may be more effort than you're used to in other ecosystems we have to decide a size for the widget we have to allocate the space for it we have to handle any interactions that would occur and we have to paint the widget so first we have to decide the widget size right and just before we continue I have the demo app running on the right hand side here we are building this custom widget right here this is the toggle button now in the demo it says this toggle switch is just 15 lines of code but I'm not sure where they got that from I think they might just be talking about this toggle UI function so step one decide the widget size UI here is a mutable reference to the EU UI we get the spacing the interact size times Y and we multiply it by a vector of 2 and 1. so we're scaling the spacing basically we need to allocate that size on the screen so we can use the UI allocate exact size with the desired size that we just created and we include the fact that we want to be able to detect clicks so we want to be able to when we click that toggle button switch it back and forth that gives us a rectangle and this mutable reference to a response variable and because this is immediate mode we can just detect immediately whether response was clicked or not and because we've specified on in our function arguments as a mutable Boolean we can set on to because this is a toggle button either true or false depending on whether it is currently true or false and then we have to mark that data as changed here we're defining some accessibility data for screen readers defining this as a checkbox with the on State and then finally we need to actually paint it to the screen so if the rectangle know that we're going to draw this inside of is visible then we're going to ask the ego eui to animate a Boolean between 0 and 1 for how on it is if we click this you can see that it animates back and forth and that's that zero to one value animating back and forth we've seen some support for theming so we grab the style that we want based on whether the current rectangle is actually hovered or not for example and that gives us access to some visuals which you can see as BG stroke or BG fill or foreground stroke the coordinates that we need to actually draw into are Absolute Screen space coordinates so we do need to use rect which comes from this allocate exact size on the screen to actually get the place that we're going to put this we can calculate the radius of the circle again this circle is the toggle we can calculate the radius which is half the height by doing half the height of that rectangle that we've allocated we grab the painter and we draw the rectangle with the wreck that we were given the radius the background fill and the background stroke we can determine where in the toggle the circle that we're drawing should be by lurping which is a function that you should be familiar with from the Shader work from the left hand side to the right hand side of the rectangle and this is where we use our zero to one value based on how on it is so we're animating the off to on value from 0 to 1 over a period of time we calculate the center of where the circle should be based on that x value that we're animating as well as the center of the Y value of the rectangle and then we use the painter to draw a circle at that location with the appropriate values and finally we return the response and that's how you build out a custom sort of widget or component or whatever you want to call it inside of e GUI so I hope this gave you some insight into what eue is it's a very commonly requested video and the place that it occupies in my mind is the place that they intend it to occupy when described in the readme it's for quick simple guise that I don't really care about the visuals for I just need something thing so that I can interact with the thing that I'm actually working on and this means it's really good for things like embedding inside of Bevy but it's less good for building web apps with the expectations that modern users have it's also not as good for end user desktop apps because end users people who aren't developers often expect say a Mac OS app to look like a Mac OS app on Mac OS and that is explicitly a non-goal for E GUI so I really like igui I do use it it has a place in my toolkit it is not my default GUI choice I often build for the web so I use web tooling more often than not but I hope you enjoyed the video and I'll see you tomorrow in the next one have a great rest of your day

Channel: chris biscardi

Views: 44,127

Keywords: rustlang, egui, ui

Id: 1zucERQjg0Q

Length: 13min 44sec (824 seconds)

Published: Wed Jan 18 2023