WEBVTT 00:00:00.001 --> 00:00:03.200 I'm always on the lookout for a good Python UI framework. 00:00:03.200 --> 00:00:07.020 In this episode, we're going to focus on one called DeerPyGUI. 00:00:07.020 --> 00:00:12.720 DeerPyGUI is a fast and powerful graphical user interface toolkit for Python with minimal 00:00:12.720 --> 00:00:18.140 dependencies. It's created by Jonathan Hofstad and Preston Cothran, and they're here to tell 00:00:18.140 --> 00:00:24.620 us all about it. This is Talk Python To Me, episode 348, recorded November 18th, 2021. 00:00:24.620 --> 00:00:42.840 Welcome to Talk Python To Me, a weekly podcast on Python. This is your host, Michael Kennedy. 00:00:42.840 --> 00:00:47.480 Follow me on Twitter where I'm @mkennedy and keep up with the show and listen to past episodes 00:00:47.480 --> 00:00:53.860 at talkpython.fm and follow the show on Twitter via at talkpython. We've started streaming most 00:00:53.860 --> 00:00:58.780 of our episodes live on YouTube. Subscribe to our YouTube channel over at talkpython.fm 00:00:58.780 --> 00:01:03.280 slash YouTube to get notified about upcoming shows and be part of that episode. 00:01:03.280 --> 00:01:08.840 This episode is brought to you by Sentry and TopTal. Please check out what they're offering 00:01:08.840 --> 00:01:11.060 during their segments. It really helps support the show. 00:01:11.060 --> 00:01:17.060 Let me tell you about a new project I'm working on. It's a YouTube series called Python Shorts. 00:01:17.060 --> 00:01:22.600 This series will consist of fun and quick videos teaching you one amazing thing about Python. 00:01:22.600 --> 00:01:27.520 They're usually less than five minutes long and put a practical spin on topics you might have been 00:01:27.520 --> 00:01:39.600 and counting the number of times an item appears with collections.counter. I already have a list of 00:01:39.600 --> 00:01:44.680 about 100 videos to create over the next year in this series, so there will be many more to come. 00:01:44.680 --> 00:01:48.620 And if you have an idea for one, please shoot me an email or tweet and I'll add it to my list. 00:01:48.900 --> 00:01:53.820 If these sound fun, please subscribe to my personal YouTube channel. Just visit talkpython.fm 00:01:53.820 --> 00:01:58.460 slash python dash shorts to see the playlist and there you can click on my face and subscribe. 00:01:58.460 --> 00:02:03.100 You may already be subscribed to Talk Python's YouTube channel. That's where we do the live 00:02:03.100 --> 00:02:07.180 streaming of the recordings, but I decided on my personal one. So be sure to subscribe there too 00:02:07.180 --> 00:02:11.840 if you want to get these videos. Thanks for listening and thank you for supporting all of my work. 00:02:12.360 --> 00:02:17.020 Let's get to that interview. Jonathan Preston, welcome to Talk Python To Me. 00:02:17.020 --> 00:02:18.100 Hi, glad to be here. 00:02:18.100 --> 00:02:24.980 Hey, it's great to have you guys here. I'm very excited to talk about GUIs and UI frameworks and 00:02:24.980 --> 00:02:30.120 stuff like that. I think Python needs more of it and we're building some cool projects, 00:02:30.120 --> 00:02:35.160 frameworks there. It'll be fun to talk about it. We're going to talk about DeerPyGUI, 00:02:35.500 --> 00:02:39.640 which is one of these frameworks tries to have a quick getting started story. 00:02:39.640 --> 00:02:40.460 That is correct. 00:02:40.460 --> 00:02:45.020 Let's just get into your stories and hear a little bit about you since there's both of you, 00:02:45.020 --> 00:02:48.560 maybe not too extended, but Jonathan, how do you get into programming in Python? 00:02:48.560 --> 00:02:57.160 I got into programming when I was around 13 years old. My stepdad and mom got me a C++ for dummies book. 00:02:57.160 --> 00:03:05.080 And worked with that for a while until just as a hobby project or as a hobby thing. And once I got to 00:03:05.080 --> 00:03:10.720 college, I went to mechanical engineering, which is also where I met Preston. They typically like to 00:03:10.720 --> 00:03:15.980 use MATLAB, which everybody knows isn't a real programming language. The indices start at one. 00:03:15.980 --> 00:03:16.700 Of course. 00:03:16.700 --> 00:03:21.920 As an alternative to that, ChemCurls Python. It had a lot of the same features, actually a lot 00:03:21.920 --> 00:03:28.220 more features than MATLAB and it was free. So didn't have to pay for the MATLAB license. 00:03:28.220 --> 00:03:33.360 Yeah. MATLAB is expensive for people who haven't messed with it. It's like really expensive outside 00:03:33.360 --> 00:03:34.360 the student story. 00:03:34.360 --> 00:03:41.380 It is. And you have to use their entire environment and everything just to, just to use it. So aside 00:03:41.380 --> 00:03:46.900 from that, on top of that, with the Raspberry Pi, it was into electronics and things like that. And 00:03:46.900 --> 00:03:52.660 the Raspberry Pi are able to control the GPIO pins using Python. Naturally, I just started playing 00:03:52.660 --> 00:03:57.460 with Python from there. And yeah, that's pretty much where Python came into my picture. 00:03:57.460 --> 00:04:00.020 So you said you were in chemical engineering? Is that what it was? 00:04:00.020 --> 00:04:00.620 Mechanical. 00:04:00.620 --> 00:04:06.120 Mechanical. Okay. I was in chemical for a little while and they said that, I asked if I could take 00:04:06.120 --> 00:04:09.980 a C++ class. They said, you can as an elective, but you have to take Fortran because that's going 00:04:09.980 --> 00:04:13.840 to be the most important language you ever learned. I thought, I'm just jealous. MATLAB is not that 00:04:13.840 --> 00:04:15.600 amazing, but I'll tell you what, it's better than Fortran. 00:04:15.600 --> 00:04:22.020 That is very true. We occasionally have to use Fortran at work with our FEA programs, 00:04:22.020 --> 00:04:26.280 finite element analysis programs with Abacus. You're able to extend it with Fortran. So 00:04:26.280 --> 00:04:30.220 occasionally we have to look at a little bit of Fortran to do that. And it's, yeah, it's ugly. 00:04:30.220 --> 00:04:32.720 Yeah, for sure. Preston, how about you? 00:04:32.720 --> 00:04:38.620 Mine was mostly junior year in college, MATLAB course. Incidentally enough, that's why it's not 00:04:38.620 --> 00:04:43.700 a real programming language. I moved from that directly into Python. I thought when I started 00:04:43.700 --> 00:04:49.860 my first job and I just started working with C++ after that and then tailed into a little bit of C, 00:04:49.860 --> 00:04:54.180 not much. Right on. And what are you all doing now? Sounds like still engineering work? 00:04:54.180 --> 00:04:58.580 Yeah. So I'm doing engineering. So I'm doing mechanical engineering. I'm doing design on 00:04:58.580 --> 00:05:04.960 threaded connectors for oil and gas industry, mainly designing the seals and threads that hold 00:05:04.960 --> 00:05:08.380 production tubing together down hole that actually sends the oil up through the well. 00:05:08.380 --> 00:05:14.060 Wow. So you must be talking about a lot of pressure, talking about materials that would 00:05:14.060 --> 00:05:16.920 like to destroy rubber and other things as well, possibly. 00:05:16.920 --> 00:05:24.620 Yeah. So I guess that, that tails into coding. Mainly we, or I use most of Python to just extend 00:05:24.620 --> 00:05:27.140 that because like we were talking about for scripting and stuff like that. 00:05:27.140 --> 00:05:28.600 Yeah. Jonathan? 00:05:28.600 --> 00:05:35.160 I started out in the same position and slowly moved into the software side of things. A lot of that's 00:05:35.160 --> 00:05:40.700 working with Preston, some of the other mechanical engineers on extending some of those applications 00:05:40.700 --> 00:05:47.640 like Abacus and that choosing Python or extending AutoCAD and that's C++. So there's that side of 00:05:47.640 --> 00:05:51.640 the day-to-day work. And then the other side is we actually have some internal software that 00:05:51.640 --> 00:05:59.800 we work on one for inspecting connections without contact. So using lasers and robot arms and all 00:05:59.800 --> 00:06:04.440 that stuff to basically just take measurements instead of having to go out and manually doing 00:06:04.440 --> 00:06:12.120 it. This, this can be on an assembly line and most of that's in C++ and C. We do use our library, 00:06:12.120 --> 00:06:20.280 DeerPock GUI for a lot of the prototyping and some of the tooling for the project, but for projects in C and C++. 00:06:20.280 --> 00:06:25.800 Sure. I don't think I've really covered mechanical engineering on Talk Python properly. What's the 00:06:25.800 --> 00:06:31.880 story with software automation and that kind of stuff? Is it mostly using programs like sounds 00:06:31.880 --> 00:06:36.120 like this Abacus one versus writing your own software, doing your own automation? 00:06:36.120 --> 00:06:45.160 A large part of mechanical engineering is, at least in our field, is stress analysis and computational 00:06:45.160 --> 00:06:51.960 fluid dynamics, fluid flow type problems. And as far as software goes, it's usually in relation to that. 00:06:51.960 --> 00:06:57.800 Like Abacus is, as an example, a software package for stress analysis. And then there's other ones, 00:06:57.800 --> 00:06:58.600 OpenFoam. 00:06:58.600 --> 00:07:02.120 Yeah, OpenFoam. You, you wrote some solvers at your first job for that? 00:07:02.120 --> 00:07:09.080 Yeah, that, that's correct. We took some electives while we were in college and some of those were for 00:07:09.080 --> 00:07:13.240 writing these solvers. And most of those you could write in whatever you want. Those professors didn't 00:07:13.240 --> 00:07:16.840 actually care. And a lot of times I wrote in Python on there. Most of the time it was Python, I would say. 00:07:16.840 --> 00:07:22.920 Yeah. What's the story for packages, PyPI type of things in your space? 00:07:22.920 --> 00:07:25.000 As far as what we used or what we used? 00:07:25.000 --> 00:07:30.920 Yeah. Is there a lot of stuff out there? I know, for example, astronomy is filled with libraries, 00:07:30.920 --> 00:07:34.120 like AstroPy and whatnot that people could just grab and use. 00:07:34.120 --> 00:07:38.040 For mechanical engineering, I don't know if there's NumPy or NumPy. 00:07:38.040 --> 00:07:38.280 Yeah. 00:07:38.280 --> 00:07:38.680 Yeah. 00:07:38.680 --> 00:07:43.000 But as far as specific to mechanical engineering, I really don't think there's any. There may be a few 00:07:43.000 --> 00:07:47.160 FEA solvers, but I don't think they're maintained or well documented for sure. 00:07:47.160 --> 00:07:52.360 We typically found that a lot of engineers end up staying in the MATLAB realm and not really venturing 00:07:52.360 --> 00:07:59.960 into any more hardcore languages. So they end up using all, because a lot of them want symbolic math, 00:07:59.960 --> 00:08:05.240 integration and ODE solvers and all of that. It's all right there in MATLAB. And then the companies 00:08:05.240 --> 00:08:07.320 typically pay for it. So you're in that realm. 00:08:07.320 --> 00:08:12.280 And once some group gets embedded in there, it's just going to stay in that space unless somebody 00:08:12.280 --> 00:08:16.840 takes some effort. Yeah. All right. Awesome. Thanks for that background. Although we're not here 00:08:16.840 --> 00:08:21.480 exactly to talk about deep dive in mechanical engineering, it is cool to get a look. Let's talk 00:08:21.480 --> 00:08:29.000 about your project, your PyGUI. So when I think of the GUI graphical user interface space 00:08:29.000 --> 00:08:37.480 in Python, there's TK-Enter, there's PyQt, there's a few other things, but they all have some kind of 00:08:37.480 --> 00:08:41.640 oddity about them. There's not like one framework that people just like, yeah, we're just going to 00:08:41.640 --> 00:08:47.000 use that thing. It's not like a Swift and Objective-C Coco controls would be in say, 00:08:47.000 --> 00:08:51.560 an iOS app or something, where it's really clear. Just generally use that one. Where did you guys get 00:08:51.560 --> 00:08:55.720 started working on GUIs and Python? What was the goal with the Geopy GUI? Like where does it stand 00:08:55.720 --> 00:09:02.440 out? Where does it fit in this space? I got started in UIs working at one of my internships while I was in 00:09:02.440 --> 00:09:09.880 school. And we were using this package, which I think I already mentioned once, open foam for CFD. 00:09:09.880 --> 00:09:16.840 And it didn't have a front end interface at all. It was a C++ solver that just pretty sure just output 00:09:16.840 --> 00:09:21.640 text files in the end. I don't remember. It's been about six, seven years. So I wanted to build a UI so 00:09:21.640 --> 00:09:27.080 that the other engineers could use it. And at that time, I was just getting into it. So I used to Kentr 00:09:27.080 --> 00:09:32.920 because, you know, it's a Python. And then also used VTK, if I remember correctly. That would, 00:09:32.920 --> 00:09:37.800 I would say that's the first experience I had with it. And then our senior design project, 00:09:37.800 --> 00:09:42.840 being pressed were also on the same team for that, was to build an arc welding 3D printer. 00:09:42.840 --> 00:09:46.120 It actually created things by doing arc welding. Right. 00:09:46.120 --> 00:09:49.640 Rather than printing some other sort of material out of it. 00:09:49.640 --> 00:09:55.960 Right. Yeah. It was a MIG welder. I was on the software side of that. Preston was on a lot more 00:09:55.960 --> 00:09:58.200 of the physical side. We should put them in the software for now. 00:09:58.200 --> 00:10:04.360 Yeah. Anyway, built, that was the goal of the project. And we used some open source 00:10:04.360 --> 00:10:07.720 slicing software. I don't remember. It's like Slicer 3D or... 00:10:07.720 --> 00:10:13.160 It had a three for the E. Yeah. Slicer and it had three for the E. And we basically modified that 00:10:13.160 --> 00:10:19.480 and ran it in a headless mode and built a UI on top of it using Tkenter. And I want to say we used 00:10:19.480 --> 00:10:25.160 Pygame to be able to access OpenGL. And at the time we were using legacy OpenGL. Those are first 00:10:25.160 --> 00:10:31.720 experience with graphics APIs. Yeah. Which, you know, OpenGL is pretty neat. It was certainly 00:10:31.720 --> 00:10:36.600 good when it first came out. It was as good as anything else. But I feel like it hasn't been 00:10:36.600 --> 00:10:42.680 getting the same amount of growth and adoption, maybe as some of the other frameworks, DirectX and Metal and 00:10:42.680 --> 00:10:43.320 so on. 00:10:43.320 --> 00:10:50.680 DeerPyGUI uses DirectX, Metal and OpenGL at the moment. So we've been using a lot of them over the last few 00:10:50.680 --> 00:10:58.040 years. And the biggest reason for that is just that the hardware's changed since those APIs were 00:10:58.040 --> 00:11:01.240 created. And they no longer directly match the hardware. 00:11:01.240 --> 00:11:08.840 DeerPyGUI came out of trying to basically build something better than direct OpenGL access. What'd 00:11:08.840 --> 00:11:11.400 you say? Or direct framework access? 00:11:11.400 --> 00:11:15.960 DeerPyGUI not quite. It came more out of a, I guess, going back to answering where 00:11:15.960 --> 00:11:20.920 where DBG itself came from. We had a previous project that we worked on, a commercial project 00:11:20.920 --> 00:11:28.360 on engineer sandbox. The program had an embedded Python interpreter in it. And you basically created little 00:11:28.360 --> 00:11:35.240 mechanical engineering apps. And we could create one in, I don't know, an hour or two. And it was just 00:11:35.240 --> 00:11:41.160 this collection of apps. And over time, it started to get a little annoying to have to recompile it, 00:11:41.160 --> 00:11:45.720 especially before we added Python. We added Python because we were getting tired of 00:11:45.720 --> 00:11:49.720 recompiling it every time we want to add an app or modify something and have to redeploy. 00:11:49.720 --> 00:11:55.000 From there, we embedded Python. And it was very limited. You were able to create a few 00:11:55.000 --> 00:12:01.640 small apps. You couldn't, it really wasn't a full GUI library. What happened is we were trying to sell it. 00:12:01.640 --> 00:12:06.600 Didn't really work out. We can never really catch traction. And we had some users and customers, 00:12:06.600 --> 00:12:11.960 but most people weren't really interested in it. And developers aren't really interested in paying for 00:12:11.960 --> 00:12:19.400 libraries or any SDK. Most of them just wanted to be free. So that just kind of fell out. And we gave 00:12:19.400 --> 00:12:23.240 up on that after that. That's a tough place to be, right? You want to put a lot of energy into building 00:12:23.240 --> 00:12:29.320 tools and making stuff for people. How do you put enough time into it if people just want it to be free? 00:12:29.320 --> 00:12:36.920 Maybe what we got to do is maybe the world is the VS Code model where there's large companies that have 00:12:36.920 --> 00:12:42.840 other motivations for creating it rather than directly funding through that. But that's a deeper 00:12:42.840 --> 00:12:44.600 conversation that we have to solve. 00:12:44.600 --> 00:12:47.160 Selling to developers in easy is the key point there. 00:12:47.160 --> 00:12:48.280 Yeah, sure. 00:12:48.280 --> 00:12:53.560 So we did keep it in house and we continued. We still have apps written in it at our day job. 00:12:53.560 --> 00:12:56.680 We ended up revisiting it because it didn't do everything we wanted to do. And we said, 00:12:56.680 --> 00:13:01.800 this time let's target developers from the beginning. So it's not going to be very limited. It's going to be, 00:13:01.800 --> 00:13:06.680 should be able to do most things you can do in any other UI library. And on top of that, make it free. 00:13:06.680 --> 00:13:14.280 And that's where your PI GUI came from. And between those stages, we came across the library 00:13:14.280 --> 00:13:17.160 or in GUI, which I'm not sure if you're familiar with, but... 00:13:17.160 --> 00:13:19.720 Yeah, I'm not familiar with it. What is this? 00:13:19.720 --> 00:13:20.840 It is a... 00:13:20.840 --> 00:13:28.600 It is an extremely popular immediate mode graphical user interface for real-time applications. 00:13:28.600 --> 00:13:30.840 It's usually used. 00:13:30.840 --> 00:13:31.720 C++. 00:13:31.720 --> 00:13:32.840 Yeah, it's C++. 00:13:32.840 --> 00:13:33.960 Yeah, yeah, yeah. 00:13:33.960 --> 00:13:38.840 But it's kind of a weird, I mean, it's an immediate mode interface and there's not many, 00:13:38.840 --> 00:13:43.640 I would say there is no Python user interface that's like that. And if you look at it... 00:13:43.640 --> 00:13:47.800 Maybe we should talk about the different modes real quick, since you bring it up. 00:13:47.800 --> 00:13:53.000 This immediate mode versus retained mode. What are those two worlds? What does that mean? 00:13:53.000 --> 00:13:53.720 I take this one. 00:13:53.720 --> 00:13:57.720 So I don't want the internet to jump on me here because there's a lot of... 00:13:57.720 --> 00:14:04.280 A little bit of argument there, but there's a few key points, I think, that really make it stand out. 00:14:04.280 --> 00:14:11.720 One of those is that the stage is not retained. If you have a slider that controls a float, 00:14:11.720 --> 00:14:17.880 it doesn't... You don't have to basically have a float stored on your side and a float stored in the UI, 00:14:17.880 --> 00:14:22.280 and you're constantly having to deal with keeping them up to date and things like that. Instead, 00:14:22.280 --> 00:14:27.000 the library itself doesn't store that at all. Now, the way it's implemented is a little different, 00:14:27.000 --> 00:14:29.720 but I'm talking about from the user side of using an immediate mode library. 00:14:30.760 --> 00:14:36.840 It doesn't retain any state. The other big thing is that, at least with, especially when it's on GUI, 00:14:36.840 --> 00:14:44.040 is the UI items and widgets are submitted every frame. So 60 times a second. And that gives you a 00:14:44.040 --> 00:14:48.760 credible amount of dynamicism, I guess you'd call that. To be able to do a lot of things, 00:14:48.760 --> 00:14:52.920 and completely redo the UI on a per-frame basis, you can... 00:14:52.920 --> 00:14:58.120 Yeah, as opposed to something where maybe you say a text box goes here and a button goes there, 00:14:58.120 --> 00:15:01.560 and then you set the text to the button, and then the button knows what its text is. 00:15:01.560 --> 00:15:05.240 This is almost like a game loop type thing where it... 00:15:05.240 --> 00:15:05.880 Right. 00:15:05.880 --> 00:15:11.240 Each time, like however, whatever the frame rate is, 50, 60, 200 frames a second, it's like, 00:15:11.240 --> 00:15:13.880 draw the UI, draw the UI, draw the UI, right? 00:15:13.880 --> 00:15:19.880 Yep. And the interesting that that kind of 60 frames a second can lead into what we just put in a few 00:15:19.880 --> 00:15:24.920 weeks ago talking about not redrawing the GUI every 60, every frame. 00:15:24.920 --> 00:15:30.760 Right. That's a good point. One of the issues we had, especially early on with some users complaining 00:15:30.760 --> 00:15:35.560 as well, do you need to update everything every frame 60, 60 times a second? 00:15:35.560 --> 00:15:41.400 So we did recently add in 1.1, the ability to basically stop, only update if there is some 00:15:41.400 --> 00:15:46.040 user input, whether that's moving the mouse or resizing the window, things like that, because 00:15:46.040 --> 00:15:51.320 a lot of people, they'd complain to be more energy conscious with having your GUI run all the time. 00:15:51.320 --> 00:15:56.840 Which you might care about, say, on a laptop or a tablet, but less so if you're plugged into the wall. 00:15:56.840 --> 00:15:57.960 Right. Yeah. 00:15:57.960 --> 00:16:03.480 Yeah. Interesting. Yeah. And even some of the new, what are they, ProRes displays, 00:16:03.480 --> 00:16:09.320 like the new MacBooks and stuff? Like the entire display will slow down if stuff is not happening. 00:16:09.320 --> 00:16:15.160 And I wonder if maybe if you had a GUI app that was refreshing the screen a lot, maybe it would 00:16:15.160 --> 00:16:17.800 prevent it from actually going into a slower mode. 00:16:17.800 --> 00:16:21.800 Look and do that. Variable refresh rate plays into the software actually rendering. 00:16:21.800 --> 00:16:27.080 Yeah. Yeah. Yeah. I don't really work at that level, so I don't really know for sure, but all in the same 00:16:27.080 --> 00:16:32.920 space, I'm going to go back to the app. This portion of Talk Python To Me is brought to you by Sentry. 00:16:32.920 --> 00:16:37.560 How would you like to remove a little stress from your life? Do you worry that users may be 00:16:37.560 --> 00:16:43.720 encountering errors, slowdowns, or crashes with your app right now? Would you even know it until they 00:16:43.720 --> 00:16:48.360 sent you that support email? How much better would it be to have the error or performance details 00:16:48.360 --> 00:16:53.960 immediately sent to you, including the call stack and values of local variables and the active user 00:16:53.960 --> 00:17:00.600 recorded in the report? With Sentry, this is not only possible, it's simple. In fact, we use Sentry on 00:17:00.600 --> 00:17:06.680 all the Talk Python web properties. We've actually fixed a bug triggered by a user and had the upgrade 00:17:06.680 --> 00:17:12.040 ready to roll out as we got the support email. That was a great email to write back. Hey, we already saw 00:17:12.040 --> 00:17:18.280 your error and have already rolled out the fix. Imagine their surprise. Surprise and delight your users. 00:17:18.280 --> 00:17:25.080 Create your Sentry account at talkpython.fm/sentry. And if you sign up with the code talkpython, all one 00:17:25.080 --> 00:17:30.200 word, it's good for two free months of Sentry's business plan, which will give you up to 00:17:30.200 --> 00:17:36.120 20 times as many monthly events as well as other features. Create better software, delight your 00:17:36.120 --> 00:17:42.920 users and support the podcast. Visit talkpython.fm/sentry and use the coupon code talkpython. 00:17:42.920 --> 00:17:50.840 It looks to me like that some of the, there's some similarities from the I am GUI in terms of the 00:17:50.840 --> 00:17:56.680 UI look and feel, but then you've got the retained mode versus immediate mode and things like that. 00:17:56.680 --> 00:17:59.800 What's the relationship between these? I'm GUI itself. 00:17:59.800 --> 00:18:04.920 I'm GUI itself just outputs. You can read as read me, but outputs and optimize vertex buffer. 00:18:04.920 --> 00:18:10.280 It sends basically the coordinates and everything needed to draw the UI, but it is up to you to take 00:18:10.280 --> 00:18:16.440 that and actually do something with it and render it. We use that. We use I'm GUI to basically create 00:18:16.440 --> 00:18:21.160 those vertex buffers. As far as the retain mode stuff, originally we were doing more of a one-to-one 00:18:21.160 --> 00:18:29.720 wrapping with that library. And we started to hit some performance issues with Python itself, just because 00:18:29.720 --> 00:18:34.840 the second, if you're having to do a lot of conversions between maybe the Python types and 00:18:34.840 --> 00:18:40.200 the C and underlying C types that can slow things down. Also just the GIL gets in the way with a lot 00:18:40.200 --> 00:18:46.280 of different. So what we did with the retain mode is we basically just created a barrier between that, 00:18:46.280 --> 00:18:52.360 where we do go against the immediate mode style thing. And we have, we do keep up with things like the 00:18:52.360 --> 00:18:56.840 the underlying value is just the floats, the ends, the strings, whatever it is. 00:18:56.840 --> 00:19:01.960 So it goes back to a more retain mode, which is what every other library is that most Python users would 00:19:01.960 --> 00:19:07.320 be used to. The float actually stores a, sorry, an input text has its underlying string and you can 00:19:07.320 --> 00:19:09.480 get that value, set that value. 00:19:09.480 --> 00:19:15.640 So a lot of UI code, you don't even need to have some variable that holds the thing. You might just 00:19:15.640 --> 00:19:19.080 put it in the button and if you need it back, you could get it from the button potentially. Right. 00:19:19.080 --> 00:19:25.640 Right. Yep. And that's how it works. So I guess one of the only other things that's neat is underneath it, 00:19:25.640 --> 00:19:30.600 it is just a raw, I'm pretty sure probably using smart pointer and you can actually link a lot of these 00:19:30.600 --> 00:19:36.200 widgets together to when they're truly controlling the same value. And you can get some pretty cool effects 00:19:36.200 --> 00:19:42.360 with that to where directly moving this slider is updating the plot and there's not some update 00:19:42.360 --> 00:19:47.320 code that's having to happen or any callbacks. It's just that they're truly the same value. 00:19:47.320 --> 00:19:53.000 And because we're updating 60 times a second, you're able to see those changes live, which is pretty 00:19:53.000 --> 00:19:58.360 neat. And you can create some pretty cool stuff with that. Yeah, that's fantastic. Before we jump into some 00:19:58.360 --> 00:20:03.800 of the details, if you visit the GitHub page, which of course I'll link to, let's maybe just talk through 00:20:03.800 --> 00:20:07.720 some of the features. I was going to go to the gallery, but maybe the features is a better place 00:20:07.720 --> 00:20:12.280 to start. And you guys have this engineering background. It feels like a lot of what this 00:20:12.280 --> 00:20:19.240 creates and allows us to build real easily has this engineering visualizing aspect to it. Right. 00:20:19.240 --> 00:20:23.640 Yeah. Yeah. So maybe talk us through some of the features and things you can do. So for example, 00:20:23.640 --> 00:20:30.360 one of the things you have, you can see right at the top of the feature section is the I am plot stuff, 00:20:30.360 --> 00:20:35.320 which looks like really interactive and dynamic plots and graphs and pie charts and so on. 00:20:35.320 --> 00:20:43.320 Yeah. It's another immediate mode interface that the guy that wrote it, Evan Peasant, I'm not sure 00:20:43.320 --> 00:20:46.840 how to pronounce his last name, who also happens to be located here in Houston, wrote it on top of 00:20:46.840 --> 00:20:51.800 on GUI and tried to model that immediate mode interface. So again, you get all the same dynamic 00:20:51.800 --> 00:20:57.080 features that you get with GUI itself. And that's why you can see on here a lot of the, just how crazy 00:20:57.080 --> 00:21:03.480 dynamic it looks, right? With the live QCAP clearing and everything you see there. And obviously we, 00:21:03.480 --> 00:21:08.840 again, built on top of it because we have to go from that immediate mode to retain mode style. And 00:21:08.840 --> 00:21:15.400 it, you have multiple axes, you have drag and drop support, custom drag and drop support. There's a lot 00:21:15.400 --> 00:21:20.280 of series you don't see there, candlesticks, shaded series, stem plots. 00:21:20.280 --> 00:21:27.720 Yeah. One that looks really good is this one down here that has full zoomed out graph and then a graph 00:21:27.720 --> 00:21:34.040 below it that as you pan around and zoom in, you can actually, it's like a high level and then a low 00:21:34.040 --> 00:21:39.640 level or zoomed in detail view of what you're exploring there. Yep. And that's pretty obituary 00:21:39.640 --> 00:21:44.840 than the demo. Well, it's actually not technically built in. That's a query region. So you have to 00:21:44.840 --> 00:21:50.440 set up another plot with the same. Also, it looks like they have animations and stuff. The one below 00:21:50.440 --> 00:21:56.520 it sort of just cruising by without any interaction. So are you able to just feed it live data and it just 00:21:56.520 --> 00:22:02.120 keeps refreshing 60 frames a second or something? Yeah, that's exactly how it's working because it's, 00:22:02.120 --> 00:22:07.800 again, already updating 60 times a second. All you're doing is changing the data and it just by 00:22:07.800 --> 00:22:12.280 default, you basically get an animation. If the data changes, it's going to re-render it no matter 00:22:12.280 --> 00:22:18.040 what. And so then it gets a different picture, right? Yep. It's worth noting that it's only 60 frames a 00:22:18.040 --> 00:22:22.680 second. If you, if you use VSync with your, with your screen, it actually runs as fast as your screen 00:22:22.680 --> 00:22:27.640 can run. So 144 to whatever hertz your monitor is on. Oh, interesting. 00:22:27.640 --> 00:22:33.320 It depends on your GPU and everything else. Yeah. We'll control the render loop so you can actually 00:22:33.320 --> 00:22:37.560 slow it to whatever exact frame resolution you want. You could 30, whatever you want. Right. You 00:22:37.560 --> 00:22:43.400 probably can't exceed your monitor, but you could slow it down or do something if you need to chill it out. 00:22:43.400 --> 00:22:44.440 You can, it just won't. 00:22:45.320 --> 00:22:50.440 The effect of, the effect of people seeing it, they won't see it. Right. Yeah. And that, yeah, 00:22:50.440 --> 00:22:55.080 that's really cool. Cross platform. Yeah, it is cross platform, but I was going back there. There are 00:22:55.080 --> 00:23:00.760 some cases where we will turn VSync off to just test how fast certain things are happening. Right. 00:23:00.760 --> 00:23:05.000 Because you want to know what's the performance upper limit of this, regardless of the screen. 00:23:05.000 --> 00:23:08.920 the screen. And a lot of people love to send us messages with that while we're trying to do 00:23:08.920 --> 00:23:14.360 something like update a texture or something as fast as they can and trying to get 300 or 400 frames a 00:23:14.360 --> 00:23:19.160 second. But it was pretty neat to see that. What else should I highlight in here? These are all, 00:23:19.160 --> 00:23:22.840 there's a bunch of graphs. I think people really just need to go see them, but there's, 00:23:22.840 --> 00:23:29.000 there's nice heat map looking things. There's some statistical stuff. Anything else you want to shout out on the. 00:23:29.000 --> 00:23:33.800 Yeah, there's some candlesticks. We've seen some great interaction with some APIs through some actual 00:23:33.800 --> 00:23:38.520 cryptocurrency interfaces people have done. They made crypto wallets, which is pretty cool. We've seen some of that. 00:23:38.520 --> 00:23:42.520 Right. Yeah. So we've seen probably maybe 10 of those. So it is a lot of people seem interested in that. 00:23:42.520 --> 00:23:45.480 Interesting. Yeah. So people are using 00:23:45.480 --> 00:23:51.320 DearPyGUI to build something like a dashboard trader application. 00:23:51.320 --> 00:23:52.760 A lot of dashboards. Yeah. 00:23:52.760 --> 00:23:58.280 We can pull in a comment from the audience, Mr. Hypermagnetic. Hey, good to see you again. 00:23:58.280 --> 00:24:03.640 I've always been curious why not use HTML for desktop GUIs. And then also adds that these are 00:24:03.640 --> 00:24:07.720 definitely nice looking graphs and user interface, which is cool. Maybe I'll let you all take a shot 00:24:07.720 --> 00:24:12.040 at answering that question for you. If you got that, if not, I could throw something out there as well. 00:24:12.040 --> 00:24:16.520 Because we got a ton of Electron apps that fit that realm. 00:24:16.520 --> 00:24:17.880 That's what I was going to bring up with Electron. 00:24:17.880 --> 00:24:24.760 And VS Code and other things, Slack and whatnot. I think there's a couple areas that you would care 00:24:24.760 --> 00:24:31.080 about. One is you probably are not going to be getting 300 frames a second refresh rate with HTML. 00:24:31.080 --> 00:24:37.400 There's a lot of layers in there. If you want to take advantage of the GPUs in like deep ways, 00:24:37.400 --> 00:24:42.600 if you want to push a mesh of objects in there and then have them re-rendered, that's not really what 00:24:42.600 --> 00:24:48.920 HTML is for. The native integration also gets tricky. I don't know about Geopie GUI, 00:24:48.920 --> 00:24:51.960 but you want to integrate with the menu bar and other stuff, right? 00:24:51.960 --> 00:24:59.560 Yeah, we need the hardware access. Now you can use WebGL, but basically you'd be using HTML just to 00:24:59.560 --> 00:25:05.320 create that GL canvas. And then after that, it's the same thing as what we're doing now. So you could 00:25:05.320 --> 00:25:10.840 do that. I think we have some sample projects where we use that. You can get 60 frames a second higher, 00:25:10.840 --> 00:25:15.480 but again, you're just using HTML just to get to the canvas. And then after that, the HTML is gone. 00:25:15.480 --> 00:25:16.840 Yeah, you'd use it for anything. 00:25:16.840 --> 00:25:24.920 Let me see here if I can get a quick read on say like VS Code here. Hold on. A little activity monitor 00:25:24.920 --> 00:25:25.320 doesn't. 00:25:25.320 --> 00:25:32.440 If I happen to run through the browser, there's your text stat becomes considerably deeper when we're 00:25:32.440 --> 00:25:33.960 trying to be as light as possible. 00:25:33.960 --> 00:25:37.800 Yeah. Yeah. If you want to do a lot of the stuff that we're seeing on the screen here, 00:25:37.800 --> 00:25:42.680 you're almost down to rendering directly on canvas. And then at that point, there's not a huge value 00:25:42.680 --> 00:25:48.200 for the HTML side of thing because you're just drawing pixels anyway. So to wrap that up, 00:25:48.200 --> 00:25:54.120 I'm a trap hypermagnetic says I've seen performance issues with electron versus more native apps. 00:25:54.120 --> 00:25:59.560 Antonio out there. Hey, Antonio. Good to see you. Loves these plotting features. He's also in the oil 00:25:59.560 --> 00:26:06.200 and gas industry. So very, very cool. Great. And following up on that, John says there's also a 00:26:06.200 --> 00:26:11.640 limitation to threading and concurrency, which you definitely have more control, right? Very quickly. 00:26:11.640 --> 00:26:16.200 So for example, like I just launched VS Code and it's doing nothing. And there's one, 00:26:16.200 --> 00:26:22.200 two, three, four, five, six, seven, eight, nine, 10 processes running VS Code, which quick math 00:26:22.200 --> 00:26:28.040 across those looks like something like 350 megs of RAM. I don't know what your pipe would take, 00:26:28.040 --> 00:26:30.280 but I suspect it would be far lower than that. 00:26:30.280 --> 00:26:31.160 It should be much lower. 00:26:31.160 --> 00:26:37.720 So you're multi-processing and so on. It's pretty neat. Although Python itself is not known for its 00:26:37.720 --> 00:26:42.680 massive, taking advantage of multi-core stuff because of the deal. Still, you got a little 00:26:42.680 --> 00:26:47.160 more flexibility. Cool. It's always interesting to think about. Now, let's see, let's scroll down and 00:26:47.160 --> 00:26:53.560 look through a few more of these pictures here. So you've got this node editor and this node sounds like 00:26:53.560 --> 00:26:56.120 a core thing in this UI framework. 00:26:56.120 --> 00:27:03.320 Yeah. That's another one of those libraries that somebody had built on top of GUI. It's usually 00:27:03.320 --> 00:27:07.880 just a single file and a pretty light. A lot of people made some really cool stuff with that 00:27:07.880 --> 00:27:12.280 because you could put any widget that's in the UI library in these nodes. 00:27:12.280 --> 00:27:16.280 So let me take a shot at trying to describe what this looks like for people listening. 00:27:16.280 --> 00:27:20.760 You can check out under node editor on the GitHub page. It almost looks like a database diagram 00:27:20.760 --> 00:27:25.480 where you've got relationships between these nodes. But instead of just having table info, 00:27:25.480 --> 00:27:31.240 you've got graphs, you've got XY values, you've got other little bits of computation and stuff that are 00:27:31.240 --> 00:27:35.800 visually in the nodes that are also connected together. That looks pretty cool. 00:27:35.800 --> 00:27:40.760 Kind of like a data flow thing, which is an actual picture you're looking at. It is a tool we built here 00:27:40.760 --> 00:27:46.200 at work to prototype some of the systems that we're working on here. We took a little piece of that as 00:27:46.200 --> 00:27:51.080 a snapshot. But yeah, it's a pretty cool feature. A lot of people do a lot of cool things with it. 00:27:51.080 --> 00:27:58.760 So it was the idea I could build a little section that will take in some, let's say, fluid flow rate and then 00:27:58.760 --> 00:28:03.320 apply some algorithm and visualize that. But then it also is an output value that can be flow 00:28:03.320 --> 00:28:09.480 passed on to some other simulate part of a simulation that's also showing up there and stuff. Is that my understanding? 00:28:09.480 --> 00:28:14.680 Yeah, that's it. And you can redirect the inputs from one to the output of the other 00:28:14.680 --> 00:28:24.280 or whatever widget that are being connected, whether it be a slider and input or radio box, any of those. 00:28:24.280 --> 00:28:29.160 And it's a pretty low level. Some of this stuff can be a little bit misleading when you look at it and 00:28:29.160 --> 00:28:35.000 it looks like it should just come around out of the box. And most of these are not. For instance, the this node editor that you're looking at 00:28:35.000 --> 00:28:40.840 in general, you create these nodes. And when a user tries to grab one of the pins and link it to another one, 00:28:40.840 --> 00:28:46.360 another one, the callback is ran and it's up to the actual user to decide whether to make that link 00:28:46.360 --> 00:29:01.800 where it's given information about where it came from, where it's trying to connect. So it's really up to the user to make something with it. It's pretty low level. And you'll notice that with a lot of these, even in the plots, they're low level. And it's meant for the user to wrap on top of and build more complex. 00:29:01.800 --> 00:29:04.360 I don't know. Because we want it to be as generic as possible. 00:29:04.360 --> 00:29:11.400 There's an example of Tetris, like who doesn't love Tetris, of course. What is this last one here? Several tools to help developers. 00:29:11.400 --> 00:29:15.000 There's a lot of built in tools. 00:29:15.000 --> 00:29:20.840 As far as it's like tab, tab views and list views and stuff like that. Or what are we talking about? 00:29:20.840 --> 00:29:35.000 As an example, like you create whenever you go to create the UI, you may create a window and then add a group and then a collapsing header and then a button. And you have this parent relationship. One of the tools is the item registry. And when if you just type in the command show item registry, 00:29:35.000 --> 00:29:46.440 you get this basically tree view where you can look through all the items in your UI, click on it, see information about the state of it. Is it visible? Is it clicked on? Is it hovered? That's one of them. 00:29:46.440 --> 00:29:48.280 Most of these use for debugging. 00:29:48.280 --> 00:29:49.080 Yeah, it's mostly. 00:29:49.080 --> 00:29:53.240 Yeah, it's tricky to get a view into that kind of stuff in the UI, right? 00:29:53.240 --> 00:29:53.800 Right. 00:29:53.800 --> 00:30:01.960 Obviously, you can print out something or set a breakpoint and see it. But a lot of times they're hierarchical and whatnot. And the right visualization of that makes a big difference. 00:30:01.960 --> 00:30:18.680 Another great one is to say, if you're loading a texture or a couple of textures into the texture registry, preparing them to be added to a widget, you can use the texture registry viewer to actually go in and inspect your different resources. Like you can preview it before you actually use it. 00:30:18.680 --> 00:30:20.040 Oh, that's really cool. Yeah. 00:30:20.040 --> 00:30:23.320 And with fonts, you can inspect fonts and other things like that. 00:30:23.320 --> 00:30:29.320 Is DeerPy GUI primarily focused on 2D UIs? Or does it have a 3D component? 00:30:29.320 --> 00:30:35.160 Right. So we are currently it's 2D, but we are working on a 3D engine to go with it. 00:30:35.160 --> 00:30:43.720 But the UI won't be 3D, but there will be 3D widgets and we can have support for that now, but it's not hardware accelerated. The actual 3D engine we're working on will be. 00:30:43.720 --> 00:30:54.280 Yeah, cool. So for example, like all these charts that are on the GitHub page that are active and moving, like I can totally imagine that one of it is spherical or it's, it's modeling. 00:30:54.280 --> 00:31:00.120 You know, it's spikes that represent peaks of some kind of measurement all over the place and you want to look at it from different directions and whatnot. 00:31:00.120 --> 00:31:09.960 Yeah. And I think at the bottom of the readme you can see some examples of users that have already skipped ahead and hacked into some 3D work. 00:31:09.960 --> 00:31:24.520 Yeah. Like there's a gallery section that people should check out. One of the things I really like to do when I hear about a new UI framework or some tool that does UI graphical stuff is to just go look at the screenshots and go, what I want my app to look like this. 00:31:24.520 --> 00:31:37.800 Maybe that looks pretty cool. Let me take the time to learn it. Honestly, it blows my mind. There's a lot of UI frameworks out there that don't have a single screenshot of what your whole job is to build pictures. Show us some pictures. 00:31:37.800 --> 00:31:40.040 Yeah, really important gallery part of it. 00:31:40.040 --> 00:31:51.400 Yeah, the gallery is looking really good. So one, it looks like almost the first one is almost like an AutoCAD thing. It looks like some kind of turbine or something is there. Maybe you know more about it. You guys can see them. 00:31:51.400 --> 00:32:02.260 One of the users made it wasn't sure what they were working on. We helped them a little bit with getting access to the underlying OpenGL context because that was on Linux, but not sure what they were working on past that. 00:32:02.260 --> 00:32:12.440 This next one looks like some kind of modeling system. Another one of those user saw a user with it. We snapped the photo and again, no idea what they were doing with it. Just looked cool. 00:32:12.440 --> 00:32:21.280 Definitely looks cool. Bunch of left-hand side, right-hand side elements here. Almost looks like it could be modeling some sort of machine learning thing, but I don't think so. 00:32:21.440 --> 00:32:24.620 Yeah, definitely some kind of interesting model here. 00:32:24.620 --> 00:32:25.620 It might have been. 00:32:25.620 --> 00:32:38.680 Some really nice visualizers here for, it looks like maybe looking at some astronomy stuff, which is great. And then a game and some more drawing tools. Yeah, here is this maybe a ray tracing? 00:32:38.680 --> 00:32:47.560 No, that was just a Phong, just a Phong render that we're working on when testing some of the earlier versions of the 3D engine we're working on. 00:32:47.940 --> 00:32:48.560 Mm-hmm. Okay. 00:32:48.560 --> 00:33:00.280 So that's just some of the early prototypes. And we thought it was a pretty neat picture to do. And you can do that now if you just kind of, like that other user did, just hack in and get access to the OpenGL context or GrimDirect tags. 00:33:00.420 --> 00:33:18.840 Okay, so one of the things it sounds like you can do is work with your PyGUI, but when maybe there's some low-level thing you need to do, like a shader context or some weird graphical thing, if it's not directly supported, you can just go, all right, let me just get straight to the OpenGL context object. 00:33:18.840 --> 00:33:20.080 All right. 00:33:20.460 --> 00:33:37.740 That's correct. And for now, that's the way it's done. But one of the things that we've been working on, and a lot of the users have been around a while and know this is, like I said, right now, the backends are Windows, we're using DirectX 11. 00:33:38.460 --> 00:33:49.180 We're Linux, we're using OpenGL, and for Mac, we're using Metal. That was early on, that was probably a bad decision. So now we've been working on replacing the backend with Vulkan across the board. 00:33:49.580 --> 00:34:02.860 And part of that would be that we'd be able to directly support giving users access to the GPU there. Because one of the things with the library is we do want it to be cross-platform and not have to change the code, pretty much not have to change the code at all across the platform. 00:34:02.860 --> 00:34:02.860 Right. 00:34:02.860 --> 00:34:14.000 Right now, with us using different backends, we wanted to expose access to compute shaders. But when you're on Windows, you'd have to write in HLSL. When you're in Mac, you'd have to write it in whatever the language is, Metal. 00:34:14.700 --> 00:34:31.920 And then in OpenGLSL. So by switching to the Vulkan backend, we're going to be able to expose that and use the same thing across the board. And that's part of one of the big things that we've been working on. And it's taking a lot of time, but in the 3D engine itself is also going to be written in Vulkan. 00:34:31.920 --> 00:34:34.080 I see pictures of that too, by the way, on the... 00:34:34.080 --> 00:34:35.660 Okay, where do I find those? 00:34:35.660 --> 00:34:40.160 Go to the very top. You might have to actually click on my name, but it's dp3d. 00:34:40.160 --> 00:34:43.580 Oh, got it, got it. Okay, so it's a separate repo up there. 00:34:43.580 --> 00:34:46.140 It will be combined. It's just while we're prototyping. 00:34:46.140 --> 00:34:47.540 Sure, sure. Right here. 00:34:47.540 --> 00:34:52.680 And by the way, nice GitHub profile. Your nice readme looks good. 00:34:52.680 --> 00:34:57.520 Yeah, here you go. So the DeerPy GUI 3D engine. Pretty neat. 00:34:57.520 --> 00:34:59.840 Oh, look at that. Yeah, you do have some cool pictures in here. 00:34:59.840 --> 00:35:01.080 That will be... 00:35:01.080 --> 00:35:02.920 And that's the stuff you need, true 3D stuff. 00:35:02.920 --> 00:35:05.320 Yeah, that's true 3D, real time. 00:35:05.320 --> 00:35:11.380 Let's go back just for a minute on this cross-platform business, because I think this is worth thinking about. 00:35:11.380 --> 00:35:17.620 First of all, I was really impressed that you had support for DirectX and Metal and OpenGL, 00:35:17.620 --> 00:35:23.640 because that means on Windows, you get the best option there, which is DirectX. 00:35:23.640 --> 00:35:30.680 On macOS, especially in the new Apple Silicon ones, if you want to take advantage of the GPUs that are built in there, 00:35:30.720 --> 00:35:32.820 the best way to do that is Metal and so on. 00:35:32.820 --> 00:35:35.280 But yeah, those APIs are super different. 00:35:35.280 --> 00:35:42.480 So if you're going to expose them, say, here, let me just hand you the low-level context and talk straight to it. 00:35:42.480 --> 00:35:50.240 Well, setting them up for getting locked into one or the other, plus also having to learn Metal and or learn DirectX and all that, right? 00:35:50.600 --> 00:35:53.620 And again, that's part of the reason we are switching to Vulkan. 00:35:53.620 --> 00:35:55.620 We will leave those backends as legacy. 00:35:55.620 --> 00:35:58.700 Legacy is a bad word, but you'll be able to switch to those backends. 00:35:58.700 --> 00:36:04.380 But if you're really wanting to do the low-level stuff and wanting to access the 3D engine, you will have to use Vulkan. 00:36:04.380 --> 00:36:06.520 Yeah, so tell people about what this Vulkan thing is. 00:36:06.780 --> 00:36:13.340 I've heard of it as a way to have one API that talks both DirectX and Metal and OpenGL or something like that. 00:36:13.340 --> 00:36:14.940 Is that sort of the deal? 00:36:14.940 --> 00:36:20.360 OpenGL, DirectX 11, and I guess that's the two main ones. 00:36:20.360 --> 00:36:27.960 The older, I guess the previous generation graphics APIs, and those are used to, they go through the driver and they talk to your GPU directly. 00:36:27.960 --> 00:36:36.540 Like I said earlier on in this, that basically the hardware has changed considerably since those APIs were designed. 00:36:36.540 --> 00:36:37.680 Very, very different. 00:36:37.680 --> 00:36:45.240 So it's a lot more work on the driver developers to have to go from, here's how the hardware works, to here's the API we had. 00:36:45.240 --> 00:36:55.720 So the move over the last five or six years has been towards these lower-level graphics APIs like Metal, DirectX 12, and Vulkan. 00:36:55.720 --> 00:36:59.280 And these are considerably lower-level. 00:36:59.280 --> 00:37:04.800 Just as an example, to get a triangle on the screen in DirectX 11, it's maybe 300 lines of code. 00:37:04.800 --> 00:37:07.600 In OpenGL, it's maybe 100, if that. 00:37:07.600 --> 00:37:11.240 To do it in Vulkan, you're easily at 1,000, just getting a triangle on the screen. 00:37:11.240 --> 00:37:11.660 Really? 00:37:11.660 --> 00:37:14.580 I was already feeling bad that it was 300 in DirectX. 00:37:14.580 --> 00:37:17.820 And I can just remember the OpenGL code. 00:37:17.820 --> 00:37:18.940 Set the scale. 00:37:18.940 --> 00:37:20.060 Set the transform. 00:37:20.060 --> 00:37:21.580 Set the viewport. 00:37:21.580 --> 00:37:23.120 All of those things. 00:37:23.400 --> 00:37:25.900 It's not easy programming type of work. 00:37:25.900 --> 00:37:27.860 So Vulkan is even lower than that, huh? 00:37:27.860 --> 00:37:28.500 Right. 00:37:28.500 --> 00:37:31.000 Vulkan and DirectX 12 are really your lowest level. 00:37:31.000 --> 00:37:33.460 But DirectX 12 is just Windows. 00:37:33.460 --> 00:37:40.980 And with these APIs, you're able to utilize so much more in terms of what your GPU is capable of. 00:37:40.980 --> 00:37:42.860 But you have to manage a lot more. 00:37:42.860 --> 00:37:47.860 And that's part of why even the 3D engine and that switch in the back end is taking as long as it is. 00:37:47.860 --> 00:37:52.060 Because the driver developers do a lot less for those APIs. 00:37:52.060 --> 00:37:57.960 As an example, in DirectX and OpenGL, you can say I need a texture and load it with data. 00:37:57.960 --> 00:37:59.400 And that's it. 00:37:59.400 --> 00:38:00.460 And you can do it as many times as you want. 00:38:00.460 --> 00:38:04.940 And Vulkan and DirectX 12, there's a max number of times you can do that. 00:38:04.940 --> 00:38:08.020 I think the low number is maybe 4,000 allocations. 00:38:08.020 --> 00:38:15.980 So it's up to you to instead allocate one big block, manage it yourself, and not keep doing that, as an example. 00:38:15.980 --> 00:38:21.840 Right. You end up with those sort of maps, right, where this square is the actual whole picture or something else. 00:38:21.840 --> 00:38:28.520 But to the right of it might be some other thing that you load all into one texture and you viewport into it or something. 00:38:28.520 --> 00:38:29.060 Yeah. 00:38:29.060 --> 00:38:30.920 Yeah, that doesn't sound fun. 00:38:30.920 --> 00:38:35.460 It could be fun, but also you pull your hair out. 00:38:36.020 --> 00:38:43.140 Another one of the things that the new APIs have changed is actually having to synchronize between the GPU and CPU and DirectX and OpenGL. 00:38:43.140 --> 00:38:51.220 When you swap the buffers, execute this draw, whatever you're doing, your main loop where you're doing that, you don't have to wait until it's finished. 00:38:52.080 --> 00:38:54.700 It's automatically synchronized between the GPU and CPU. 00:38:54.700 --> 00:38:55.020 I see. 00:38:55.020 --> 00:38:57.080 With the new APIs, that's not the case. 00:38:57.080 --> 00:39:03.620 You typically, you have to actually add in barriers and fences between the different operations and just a lot of stuff. 00:39:03.620 --> 00:39:06.540 You typically have more than one frame processing at a time. 00:39:06.540 --> 00:39:12.200 You can actually utilize multiprocessing, which is a problem right now with Python because of the GIL. 00:39:12.360 --> 00:39:15.600 So even though Vulcan has that, you can't really utilize it yet. 00:39:15.600 --> 00:39:18.920 Maybe the no GIL stuff will gain traction in it. 00:39:18.920 --> 00:39:20.040 It won't be a problem anymore. 00:39:20.040 --> 00:39:21.260 One can hope. 00:39:21.260 --> 00:39:26.760 So when I'm looking at this Vulcan page here, I see Windows, Switch, Stadia, Linux, Android. 00:39:26.760 --> 00:39:28.320 I don't see macOS. 00:39:28.320 --> 00:39:31.240 Is it still support Mac or what's the story there? 00:39:31.240 --> 00:39:38.720 So the Molten VK is a layer on top of metal so that you can use it for Mac. 00:39:38.720 --> 00:39:41.140 It's not directly supported. 00:39:41.140 --> 00:39:42.280 You know how Apple is. 00:39:42.700 --> 00:39:43.720 You got to use Objective-C. 00:39:43.720 --> 00:39:45.200 They don't want you using C++. 00:39:45.200 --> 00:39:46.180 It's not as supported. 00:39:46.180 --> 00:39:47.260 It's the same thing. 00:39:47.260 --> 00:39:48.560 They deprecated OpenGL. 00:39:48.560 --> 00:39:51.760 And as of right now, there is no direct support for Vulcan. 00:39:51.760 --> 00:39:53.900 So Molten VK is the... 00:39:53.900 --> 00:39:56.700 See, it's like an intermediate layer between metal and Vulcan. 00:39:56.700 --> 00:39:57.320 Right. 00:39:57.320 --> 00:39:59.280 Talk about possibly leaving metal in. 00:39:59.280 --> 00:40:00.700 Yeah, we... 00:40:00.700 --> 00:40:01.460 As a support. 00:40:01.460 --> 00:40:02.940 It's a possibility too. 00:40:02.940 --> 00:40:03.980 Leaving... 00:40:03.980 --> 00:40:06.280 It breaks your perfect abstraction though. 00:40:06.280 --> 00:40:06.880 Yes. 00:40:06.880 --> 00:40:07.220 Right. 00:40:07.220 --> 00:40:09.120 What are you going to do though? 00:40:09.120 --> 00:40:09.980 Pretty cool. 00:40:09.980 --> 00:40:11.360 Metal's already doing that right now. 00:40:11.360 --> 00:40:13.720 Some of the formats for the textures aren't supported. 00:40:13.720 --> 00:40:15.180 That's a good point. 00:40:15.180 --> 00:40:15.940 It's a little annoying. 00:40:15.940 --> 00:40:16.680 Yeah. 00:40:16.680 --> 00:40:18.440 Everyone's a snowflake over in the Mac world. 00:40:18.440 --> 00:40:19.360 That is correct. 00:40:19.360 --> 00:40:21.300 As I say on my Mac. 00:40:21.300 --> 00:40:21.560 Okay. 00:40:21.560 --> 00:40:22.180 Let's see. 00:40:22.260 --> 00:40:27.700 One of the things I liked when I was looking through here is you've got a nice getting started tutorial. 00:40:27.700 --> 00:40:32.360 Maybe we could talk just a little bit about just what the code looks like to get some stuff on the screen. 00:40:32.360 --> 00:40:34.960 But you also have some video tutorials. 00:40:34.960 --> 00:40:37.440 Jonathan, I know you put some of these together. 00:40:37.440 --> 00:40:38.720 A while back. 00:40:38.720 --> 00:40:39.840 They're a little outdated. 00:40:39.840 --> 00:40:41.340 They're 06. 00:40:41.340 --> 00:40:42.280 06. 00:40:42.280 --> 00:40:43.140 Which is pretty old. 00:40:43.140 --> 00:40:45.120 But we need to recreate them soon. 00:40:45.120 --> 00:40:47.100 As someone who creates a bunch of videos. 00:40:47.100 --> 00:40:50.400 They're very tricky to keep them in sync. 00:40:50.400 --> 00:40:53.700 You can't just edit a few words or change a thing here. 00:40:53.700 --> 00:40:54.800 It's different. 00:40:55.200 --> 00:40:55.440 But yeah. 00:40:55.440 --> 00:41:05.500 So people want to learn through the video style they can go through and watch some of these and get a sense of simple plotting or working with tabs and stuff like that. 00:41:05.500 --> 00:41:05.680 Right? 00:41:05.680 --> 00:41:06.220 Mm-hmm. 00:41:06.220 --> 00:41:06.640 Yeah. 00:41:06.640 --> 00:41:08.240 Most of the things are there. 00:41:08.240 --> 00:41:10.060 Documentation still is a bit. 00:41:10.060 --> 00:41:13.780 But with video tutorials and our read mirror, it's still a little bit lacking. 00:41:13.780 --> 00:41:15.820 There's still some stuff that's undocumented that we're having to add. 00:41:15.820 --> 00:41:23.640 But that's part of the point of the demo is you can see how all those, you know, most of the features are there and you can see how to code them. 00:41:23.640 --> 00:41:24.080 Yeah. 00:41:24.080 --> 00:41:25.180 But that's no excuse. 00:41:25.180 --> 00:41:27.340 That's for us not in doing it for the docs. 00:41:54.060 --> 00:41:58.460 I went to Toptal to hire a solid developer at a fair rate to help create those mobile apps. 00:41:58.460 --> 00:42:01.860 It was a great experience and I can totally recommend working with them. 00:42:01.860 --> 00:42:07.320 I met with a specialist who helped figure out my goals and technical skills that were required for the project. 00:42:07.320 --> 00:42:10.600 Then they did all the work to find just the right person. 00:42:10.860 --> 00:42:13.200 I had short interviews with two folks. 00:42:13.200 --> 00:42:17.360 I hired the second one and we released our apps just two months later. 00:42:17.360 --> 00:42:25.620 If you'd like to do something similar, please visit talkpython.fm/Toptal and click that hire top talent button. 00:42:26.020 --> 00:42:27.560 It really helps support the show. 00:42:27.560 --> 00:42:28.160 That's true. 00:42:28.160 --> 00:42:30.120 That's true. 00:42:30.240 --> 00:42:35.300 But also contributing to the docs and contributing to a tutorial or something like that. 00:42:35.300 --> 00:42:37.460 That's also a good way for people to contribute. 00:42:38.040 --> 00:42:39.200 That's a very good way. 00:42:39.200 --> 00:42:43.820 Are you all open to having contributors and PRs and other things along those lines? 00:42:43.820 --> 00:42:44.180 Apps. 00:42:44.180 --> 00:42:44.980 Yeah. 00:42:44.980 --> 00:42:48.300 I had a bunch of PRs and welcome to join the Discord. 00:42:48.300 --> 00:42:52.580 We're in there all the time talking to people about when they're working on different spots in the API. 00:42:52.940 --> 00:42:59.200 The problem is, you know, most of the users are Python users and libraries written in C and Objective-C and things like that. 00:42:59.200 --> 00:43:03.320 So it's just a little bit of a disconnect there where a lot of users would like to help. 00:43:03.320 --> 00:43:06.280 And when they go over to the library and see it's that, they go, oh, right. 00:43:06.280 --> 00:43:06.880 You know what? 00:43:06.880 --> 00:43:08.400 Actually, I wanted to work on a Python project. 00:43:08.400 --> 00:43:11.500 We have this problem in a lot of the very popular places. 00:43:11.500 --> 00:43:13.640 People want to contribute to Python itself. 00:43:13.640 --> 00:43:16.060 And often that means C, not Python. 00:43:16.060 --> 00:43:17.380 And darn it. 00:43:17.380 --> 00:43:19.080 People want to contribute to Jupyter. 00:43:19.460 --> 00:43:23.280 But a lot of times that means JavaScript, not Python. 00:43:23.280 --> 00:43:24.360 Like, oh, come on. 00:43:24.360 --> 00:43:27.880 But yeah, that's kind of what it means to build tools sometimes. 00:43:27.880 --> 00:43:31.640 You guys have the demo fired up on your screen here. 00:43:31.640 --> 00:43:36.560 Maybe you want to just talk us through a couple of the highlights and how we get this thing going. 00:43:36.560 --> 00:43:37.300 Sure. 00:43:37.300 --> 00:43:39.540 Got to keep in mind that not everyone can see what we're seeing. 00:43:39.540 --> 00:43:41.600 So you can see the demo. 00:43:41.600 --> 00:43:48.920 And we modeled this after GUI's demo and some of the other demos we saw of people doing similar things where you can see all the different features. 00:43:49.240 --> 00:43:53.940 So if I pip install DeerPyGUI, is there just a command I run to just get this going? 00:43:53.940 --> 00:43:55.460 It's one of the modules. 00:43:55.460 --> 00:43:58.220 You have import DeerPyGUI.deerPyGUI. 00:43:58.220 --> 00:44:00.240 And then you have import DeerPyGUI.demo. 00:44:00.240 --> 00:44:01.720 And there's just one command show demo. 00:44:01.720 --> 00:44:04.920 So you could even do that from a REPL if you wanted, right? 00:44:04.920 --> 00:44:05.860 Yeah, you can. 00:44:05.860 --> 00:44:07.280 And do that right away. 00:44:07.280 --> 00:44:09.280 So you can kind of see a lot of different widgets. 00:44:09.280 --> 00:44:11.580 Just your typical UI widgets that you have. 00:44:11.580 --> 00:44:13.740 Yeah, go back to the widgets real quick for a sec. 00:44:13.740 --> 00:44:14.360 Yeah. 00:44:14.440 --> 00:44:15.780 So you've got a lot of nice ones. 00:44:15.780 --> 00:44:16.920 You've got buttons. 00:44:16.920 --> 00:44:18.160 You've got checkboxes. 00:44:18.160 --> 00:44:19.840 You've got radio buttons. 00:44:19.840 --> 00:44:22.400 You know, like you can only select one versus checkboxes. 00:44:22.400 --> 00:44:28.940 You've got drop-down combo boxes, text, text with placeholder hint, I guess. 00:44:29.340 --> 00:44:35.000 One of the areas that you have a lot of UIs around is the slider, what do you call them? 00:44:35.000 --> 00:44:36.360 Slider float, slider ints. 00:44:36.360 --> 00:44:41.000 It's like a thing that has a number, but then as you slot, you can not just type in it, but 00:44:41.000 --> 00:44:43.900 you can drag it around and actually scale it. 00:44:43.900 --> 00:44:47.460 I see this a lot in the Adobe Tools Audition. 00:44:47.460 --> 00:44:49.880 You can go on if you want to change something. 00:44:49.880 --> 00:44:54.100 You can click on a number and just move the mouse instead of typing to the number. 00:44:54.680 --> 00:44:58.940 There was a lot of these other things because, again, this is really meant for a lot of 3D 00:44:58.940 --> 00:45:00.480 engines and content creation. 00:45:00.480 --> 00:45:04.020 A lot of color maps and things like that. 00:45:04.020 --> 00:45:05.340 Let's see what else. 00:45:05.340 --> 00:45:07.040 Text input, a lot of stuff here. 00:45:07.040 --> 00:45:10.660 And remember, I told you a lot of the back ends are the same exact numbers, so you can get 00:45:10.660 --> 00:45:12.040 things automatically like this. 00:45:12.040 --> 00:45:13.200 All of these are linked together. 00:45:13.200 --> 00:45:13.780 All right. 00:45:13.800 --> 00:45:18.660 So what you're doing, there's like three text boxes, one that's plain text and two that 00:45:18.660 --> 00:45:19.700 are passwords. 00:45:19.700 --> 00:45:23.680 And as you type in one, they all, it's not real practical for passwords, but as you type 00:45:23.680 --> 00:45:26.620 in one, it'll show you in the different locations. 00:45:26.620 --> 00:45:29.020 So we're showing different flags, just different flags. 00:45:29.020 --> 00:45:29.420 Yeah. 00:45:29.420 --> 00:45:31.100 How do you create that binding between them? 00:45:31.100 --> 00:45:31.780 Is that... 00:45:31.780 --> 00:45:32.680 Well, that's what I'll tell you. 00:45:32.680 --> 00:45:34.040 There is no actual binding. 00:45:34.040 --> 00:45:36.040 They're truly the same value underneath. 00:45:36.040 --> 00:45:40.760 Whenever you go to create this, let's say you call this item password one. 00:45:40.760 --> 00:45:44.900 And when you go to create the second one, you can specify a source as password one, and 00:45:44.900 --> 00:45:49.160 it will just, rather than have its own value, it will just truly use a pointer to the other 00:45:49.160 --> 00:45:49.400 one. 00:45:49.400 --> 00:45:50.640 And that's why all these... 00:45:50.640 --> 00:45:50.920 Yeah, yeah. 00:45:50.920 --> 00:45:51.380 That's really cool. 00:45:51.380 --> 00:45:52.960 So that's how they stay in sync is... 00:45:52.960 --> 00:45:53.140 Yeah. 00:45:53.140 --> 00:45:54.800 Because they just, they are the same data. 00:45:54.800 --> 00:45:55.620 Yeah, exactly. 00:45:55.620 --> 00:45:55.980 It's free. 00:45:55.980 --> 00:45:56.740 It doesn't cost anything. 00:45:56.740 --> 00:45:58.100 There's no callback that has to run. 00:45:58.100 --> 00:46:02.940 A lot of basic, simple plots for just pretty simple stuff. 00:46:02.940 --> 00:46:03.580 Let's see. 00:46:03.580 --> 00:46:05.340 Again, these are linked in the same way. 00:46:05.340 --> 00:46:05.900 Okay. 00:46:05.900 --> 00:46:06.400 Yeah. 00:46:06.400 --> 00:46:06.680 Yeah. 00:46:06.680 --> 00:46:07.080 Yeah. 00:46:07.080 --> 00:46:10.680 So I encourage people, if they want to think about this framework, 00:46:10.680 --> 00:46:16.580 is create a virtual environment, pip install Geopi GUI, and then do the import command to 00:46:16.580 --> 00:46:17.060 run the demo. 00:46:17.060 --> 00:46:17.760 Yeah. 00:46:17.760 --> 00:46:18.700 Yeah, really. 00:46:18.700 --> 00:46:20.040 Date pickers. 00:46:20.040 --> 00:46:23.420 But some of the cooler ones that, you know, you want to see, I mean, I can show these. 00:46:23.420 --> 00:46:25.600 These are all pretty typical on most UI libraries. 00:46:25.600 --> 00:46:26.240 I don't know. 00:46:26.240 --> 00:46:27.380 Some of the ones... 00:46:27.380 --> 00:46:28.180 That's on the knobs. 00:46:28.180 --> 00:46:28.920 That's true. 00:46:29.220 --> 00:46:33.280 Some of the ones, I guess, we have a table API, which... 00:46:33.280 --> 00:46:34.380 Oh, that's nice looking. 00:46:34.380 --> 00:46:35.540 Pretty cool. 00:46:35.540 --> 00:46:37.020 You're able to... 00:46:37.020 --> 00:46:39.520 These examples are just showing text, but you can put any widget. 00:46:39.520 --> 00:46:40.420 You can put plots. 00:46:40.420 --> 00:46:42.320 You can do all kinds of stuff. 00:46:42.320 --> 00:46:46.620 So, yeah, with the table one, probably, if people think about it, like, it probably would 00:46:46.620 --> 00:46:48.380 be called a grid in a lot of frameworks. 00:46:48.900 --> 00:46:53.700 It's kind of a read-only Excel type of view, but very colorful and nice. 00:46:53.700 --> 00:46:54.180 These aren't read-only. 00:46:54.180 --> 00:46:56.400 These can be any widget you want. 00:46:56.400 --> 00:46:57.380 They're more layout. 00:46:57.380 --> 00:47:00.700 Oh, so you can put, like, a graph in one of the cells? 00:47:00.700 --> 00:47:01.580 Yeah, you can put a plot. 00:47:01.580 --> 00:47:02.720 You can put a node editor. 00:47:02.720 --> 00:47:04.620 You can put anything you want in these. 00:47:04.620 --> 00:47:08.880 It's best to think about a table as more or less a layout, essentially just giving you 00:47:08.880 --> 00:47:10.740 columns of rows where you can put anything in it. 00:47:10.740 --> 00:47:11.200 Oh, yeah. 00:47:11.200 --> 00:47:11.480 Okay. 00:47:11.480 --> 00:47:12.080 That makes sense. 00:47:12.080 --> 00:47:12.580 Yeah. 00:47:12.580 --> 00:47:15.260 And you can see here, this sorting one, you can kind of see. 00:47:15.260 --> 00:47:16.720 You've got a checkbox in here. 00:47:16.720 --> 00:47:18.960 I think there's an input at different things. 00:47:18.960 --> 00:47:21.840 Tables, school, like I said, there's tons of plots. 00:47:21.840 --> 00:47:22.520 Yeah, there's lots. 00:47:22.520 --> 00:47:24.100 Anyone wants to put in the mouse. 00:47:24.100 --> 00:47:26.580 And we have that example that you saw in there. 00:47:26.580 --> 00:47:27.120 Oh, yeah. 00:47:27.120 --> 00:47:31.920 You even have that detail, high-level and the detail graph in there. 00:47:31.920 --> 00:47:32.500 That's cool. 00:47:32.500 --> 00:47:33.600 Do you have trees? 00:47:33.600 --> 00:47:34.640 We do. 00:47:34.640 --> 00:47:38.000 Stuff with textures and the high-performance flip stuff. 00:47:38.000 --> 00:47:40.960 The, for those that haven't seen, where's that? 00:47:40.960 --> 00:47:41.920 The node editor. 00:47:41.920 --> 00:47:45.540 So, those that are unfamiliar with that, I ran out of room here. 00:47:46.360 --> 00:47:48.160 You know, this is for these node editors. 00:47:48.160 --> 00:47:50.220 That node editor is exactly what I expected. 00:47:50.220 --> 00:47:54.120 So, you've got these three little boxes with different bits of information or graphs, and 00:47:54.120 --> 00:47:55.780 you just drag and connect them. 00:47:55.780 --> 00:47:56.800 And, yeah, that's fantastic. 00:47:56.800 --> 00:47:59.080 And you can put any widget in the library in these. 00:47:59.080 --> 00:48:01.740 So, it's not limited to just, you know, a small subset. 00:48:01.740 --> 00:48:06.100 And then, again, with the drawing API, your typical stuff that you're used to and other 00:48:06.100 --> 00:48:09.980 drawing APIs, being able to draw a line, a box, a cube, things like that. 00:48:09.980 --> 00:48:16.320 And then, also, some support for a lot of 3D operations, things like perspective divide 00:48:16.320 --> 00:48:19.900 and depth clipping and all that to help support these type things. 00:48:19.900 --> 00:48:26.660 Let's maybe round out our conversation here by talking a bit about, just give us a sense 00:48:26.660 --> 00:48:29.380 on what it looks like to write some code. 00:48:29.380 --> 00:48:35.020 So, there's not, I'm guessing there's not a graphical designer type of thing, like Xcode 00:48:35.020 --> 00:48:36.560 storyboard or whatever. 00:48:36.560 --> 00:48:37.960 We're not big fans of those. 00:48:37.960 --> 00:48:38.500 Yeah. 00:48:38.500 --> 00:48:39.700 You do this through code. 00:48:39.700 --> 00:48:39.800 Yeah. 00:48:39.800 --> 00:48:42.620 You build up your UI through code and layout elements. 00:48:42.620 --> 00:48:42.720 Right. 00:48:42.720 --> 00:48:48.440 Just give us a sense of how do I get, like, a text box and a button or something on the 00:48:48.440 --> 00:48:48.680 screen. 00:48:48.680 --> 00:48:50.920 What does the code story look like? 00:48:50.920 --> 00:48:53.800 We talked about the 100 lines of OpenGL or whatever. 00:48:53.800 --> 00:48:57.380 So, pretty much every DPG app, you just import DPG. 00:48:57.380 --> 00:48:59.760 We do it as DPG most of the time. 00:48:59.760 --> 00:49:05.440 From there, you'll create a context, which basically sets up the I'm GUI context, sets up 00:49:05.440 --> 00:49:09.200 I'm nodes, sets up our internal context with all the different settings and state. 00:49:09.580 --> 00:49:14.460 Oftentimes, these lower level frameworks, they have to go and get some context from the 00:49:14.460 --> 00:49:17.700 graphics card itself and, like, get that from the operating system. 00:49:17.700 --> 00:49:20.040 And I'm sure that kind of wraps that stuff all up. 00:49:20.040 --> 00:49:20.660 Absolutely. 00:49:20.660 --> 00:49:23.400 And then from there, you typically create the viewport. 00:49:23.400 --> 00:49:25.200 And again, that's platform specific. 00:49:25.200 --> 00:49:27.320 On Win32, we're using Win32. 00:49:27.320 --> 00:49:29.080 We're using X11 on Linux. 00:49:29.080 --> 00:49:32.600 And on Map, we're using Carriover or whatever it is. 00:49:32.600 --> 00:49:34.240 We'll touch that one in about a year. 00:49:34.240 --> 00:49:35.320 You got it working. 00:49:35.320 --> 00:49:37.180 And there you decided to stay away from it. 00:49:37.180 --> 00:49:39.420 Got it working and walked away from it for a while. 00:49:39.420 --> 00:49:42.920 So, the viewport is basically like an empty window? 00:49:42.920 --> 00:49:43.440 Right. 00:49:43.440 --> 00:49:45.640 It's your actual operating system window. 00:49:45.640 --> 00:49:46.300 Got it. 00:49:46.300 --> 00:49:47.680 We call it a viewport. 00:49:47.680 --> 00:49:50.620 And from there, you can create something like a window. 00:49:50.620 --> 00:49:51.740 There's these root objects. 00:49:51.740 --> 00:49:54.040 A window is like the I'm GUI window that you see below. 00:49:54.040 --> 00:49:57.200 The blue window that you would see on a demo, things like that. 00:49:57.280 --> 00:49:59.560 floating windows within the main viewport. 00:49:59.560 --> 00:50:03.420 From there, to just add something like a text widget, it's dpg add text. 00:50:03.420 --> 00:50:04.540 dpg add button. 00:50:04.540 --> 00:50:06.020 dpg add input text. 00:50:06.020 --> 00:50:08.480 Whatever the widget is. 00:50:08.480 --> 00:50:16.560 And you can impose the hierarchy of parent-child relationship with context managers kind of the way that you could just use. 00:50:16.560 --> 00:50:26.780 If I'm going to create a window, one of the windows, one of multiple possible windows, instead of creating a window object and say window add this or that, you would create a context manager and just do a bunch of ads. 00:50:26.780 --> 00:50:27.460 Because. 00:50:27.460 --> 00:50:28.980 Then it all just goes to that window. 00:50:28.980 --> 00:50:29.640 Right. 00:50:29.780 --> 00:50:34.440 Again, we're not object oriented, which kind of also sets us apart here. 00:50:34.440 --> 00:50:39.040 If you weren't using the context manager, that same operation would be dpg add window. 00:50:39.040 --> 00:50:46.820 And it returns either an ID or you can put the ID in with the keyword tag equals whatever your ID is. 00:50:46.820 --> 00:50:49.060 Then you would push to the container stack. 00:50:49.060 --> 00:50:52.760 And then when you're done adding items, you pop it back off. 00:50:52.760 --> 00:50:54.520 The context manager handles that for you. 00:50:54.520 --> 00:50:54.880 Right. 00:50:54.880 --> 00:50:57.020 So it's adding the window, pushing it and popping it. 00:50:57.020 --> 00:50:59.480 And if you wanted to do something, like I said, it's not object oriented. 00:50:59.480 --> 00:51:01.240 So when you do add button, you don't get a button back. 00:51:01.240 --> 00:51:04.620 You get a handle to internal button. 00:51:04.620 --> 00:51:07.560 And then you use that handle and you can store it. 00:51:07.560 --> 00:51:09.580 Just say B equals dpg add button. 00:51:09.580 --> 00:51:14.720 And then all the various commands, you would use that handle to control it. 00:51:14.720 --> 00:51:18.440 If you want to say, get the checked state of a checkbox. 00:51:18.440 --> 00:51:18.720 Right. 00:51:18.720 --> 00:51:19.340 Get value. 00:51:19.340 --> 00:51:20.020 Yeah. 00:51:20.020 --> 00:51:22.360 Or configure everything you did when you created it. 00:51:22.360 --> 00:51:25.640 When you started off, you can modify later on using configure item. 00:51:25.800 --> 00:51:29.320 And then you just pass in that handle and go from there. 00:51:29.320 --> 00:51:29.800 Cool. 00:51:29.800 --> 00:51:32.520 Is there an event loop type of thing? 00:51:32.520 --> 00:51:33.100 There is. 00:51:33.100 --> 00:51:39.220 So after you've created the viewport and you add your widgets, you would do set up Deerpy GUI. 00:51:39.220 --> 00:51:42.000 And what that runs is that starts up the second thread. 00:51:42.000 --> 00:51:42.840 We have two threads. 00:51:42.840 --> 00:51:44.120 We have the rendering thread running. 00:51:44.120 --> 00:51:47.120 And then we have a callback thread where all the Python's at. 00:51:47.120 --> 00:51:48.640 So that's what set up Deerpy GUI does. 00:51:48.640 --> 00:51:54.240 Show viewport actually shows the viewport and starts basically the platform specific event loop. 00:51:54.460 --> 00:51:56.340 From there, start Deerpy GUI. 00:51:56.340 --> 00:51:57.640 That is your event loop. 00:51:57.640 --> 00:52:04.660 If you actually want to see the event loop, you would just do while is Deerpy GUI running, render Deerpy GUI frame. 00:52:04.660 --> 00:52:04.920 Right. 00:52:04.920 --> 00:52:07.100 And you could do everything you want inside of there. 00:52:07.100 --> 00:52:09.260 And then when you're completely done, you destroy the context. 00:52:09.260 --> 00:52:10.540 Looks super straightforward. 00:52:11.100 --> 00:52:15.280 One thing that I don't see here is the callbacks. 00:52:15.280 --> 00:52:20.520 So like when the slider slides or the button clicks, is there some way to hook that action? 00:52:20.520 --> 00:52:22.700 Like obviously the save button is going to need some. 00:52:22.700 --> 00:52:23.940 Yep. 00:52:23.940 --> 00:52:24.900 It's a callback. 00:52:24.900 --> 00:52:26.680 It's a keyword for callback. 00:52:27.000 --> 00:52:29.060 And basically it can have three arguments. 00:52:29.060 --> 00:52:32.920 The sender, which will send you the ID of the item that called the callback. 00:52:32.920 --> 00:52:42.060 The second one is app data, which for us that can be either the value or if the callback's related to window resizing, it'll be the new size. 00:52:42.380 --> 00:52:44.980 It's just data that DPG sends you. 00:52:44.980 --> 00:52:51.640 And then the third argument, user data, is user can pretty much put anything they want, then it'll get passed through. 00:52:51.640 --> 00:52:55.800 And it's useful for a lot of people that are creating OFB wrappings around the library. 00:52:55.800 --> 00:52:56.540 Yeah, nice. 00:52:56.540 --> 00:53:01.520 Is there one callback that handles all the events and then you do like a switch statement? 00:53:01.520 --> 00:53:02.960 It's really up to the user. 00:53:02.960 --> 00:53:10.860 You can have a different callback for every one or you can have one master callback where you just check the sender and do different operations based on what called the callback. 00:53:11.320 --> 00:53:12.560 You have a little bit of freedom there. 00:53:12.560 --> 00:53:20.140 We do have callbacks you can attach to inputs such as the mouse or the keyboard or the window resize. 00:53:20.140 --> 00:53:21.880 Like you mentioned, we have callbacks to set up. 00:53:21.880 --> 00:53:26.820 It is nice to be able to say, when this button gets clicked, do this. 00:53:26.820 --> 00:53:27.800 And that makes it real simple. 00:53:27.800 --> 00:53:34.620 But there's also times that you might want to, I want to capture all the button clicks and then do some common thing regardless of which button gets clicked. 00:53:34.620 --> 00:53:37.200 It's nice to have that flexibility to go either way. 00:53:37.200 --> 00:53:38.040 That's the biggest thing. 00:53:38.100 --> 00:53:44.680 We try to be as flexible as possible and allow really geared towards a lot of people wanting to wrap and create their own kind of interfaces. 00:53:44.680 --> 00:53:46.260 So there's a lot of freedom. 00:53:46.260 --> 00:53:53.920 So I noticed that you have this, you call it the viewport, this like window that comes out of the operating system. 00:53:53.920 --> 00:53:57.840 And then the DeerPy GUI windows live in that space. 00:53:57.840 --> 00:54:02.600 Is there a way to simulate it looking almost like the DeerPy GUI window is the whole thing? 00:54:02.600 --> 00:54:09.260 Could I not show the title bar of the one window and then maximize the inner window to fill it? 00:54:09.500 --> 00:54:11.140 You can undecorate the viewport. 00:54:11.140 --> 00:54:12.560 There are settings for that. 00:54:12.560 --> 00:54:20.340 And then we have a command that's set primary window and you can basically set one of the, whatever I'm doing, one is the primary one and it'll fill the whole viewport. 00:54:20.340 --> 00:54:21.100 And you get that. 00:54:21.100 --> 00:54:22.480 But you can't necessarily move them. 00:54:22.480 --> 00:54:25.200 When you do that, you can't have multiple viewports at the moment. 00:54:25.200 --> 00:54:26.700 We're still working on that. 00:54:27.240 --> 00:54:30.860 Is there like modal dialogues and that kind of stuff in there? 00:54:30.860 --> 00:54:32.440 There is modal dialogues. 00:54:32.440 --> 00:54:34.200 There is file dialogues. 00:54:34.200 --> 00:54:39.920 A lot of people still tend to just import to Kenter and use their file dialogue because a lot of people don't like ours. 00:54:39.920 --> 00:54:40.540 It's right. 00:54:40.540 --> 00:54:42.020 The context menus. 00:54:42.020 --> 00:54:43.880 Yeah, it looks great. 00:54:43.880 --> 00:54:48.420 Like I said, people who are possibly interested should check out the gallery on the GitHub page. 00:54:48.420 --> 00:54:51.160 That's a good litmus test of what does it look like if you want to use it? 00:54:51.160 --> 00:54:52.060 I think it looks pretty good. 00:54:52.060 --> 00:54:52.640 I like it. 00:54:52.640 --> 00:54:52.800 Sure. 00:54:52.800 --> 00:54:54.680 We're getting close to the end here. 00:54:54.840 --> 00:54:57.680 One thing, we talked a lot about the future stuff already. 00:54:57.680 --> 00:54:59.820 Maybe we don't really need to go into that. 00:54:59.820 --> 00:55:03.420 We've got the Vulkan backend, the 3D engine and stuff like that. 00:55:03.420 --> 00:55:10.480 One of the things that I always want to do with a GUI is put it into my taskbar or put it into my macOS dock. 00:55:10.480 --> 00:55:16.980 And I want to be able to give a binary thing to a user and not tell them about virtual environments and pip install and all that. 00:55:16.980 --> 00:55:21.860 What's the deployment story about giving somebody a distributable version of this app? 00:55:21.860 --> 00:55:26.980 So a lot of users have used some of the tools, Pi, Pi 2. 00:55:26.980 --> 00:55:28.220 Like Pi Installer or Pi 2. 00:55:28.220 --> 00:55:29.220 Things like that. 00:55:29.220 --> 00:55:29.400 Yep. 00:55:29.400 --> 00:55:37.560 We did early on when we first started the project, had a batch file and some batch files that packaged it up for you. 00:55:37.560 --> 00:55:42.080 Actually created the executable and everything so we could hand them around here, embedded the Python interpreter and everything. 00:55:42.080 --> 00:55:45.540 We did remove those, but we do eventually plan on adding back. 00:55:45.540 --> 00:55:48.260 So we really don't like having dependencies on other libraries. 00:55:48.260 --> 00:55:51.740 So even though you are using that now, we would like to bring back that. 00:55:51.740 --> 00:55:52.640 It wouldn't be that hard. 00:55:52.640 --> 00:55:53.460 We already do that. 00:55:53.460 --> 00:55:57.500 When we develop it, we are using an embedded version of Python and an executable. 00:55:57.500 --> 00:56:00.500 We're not actually using this. 00:56:00.500 --> 00:56:01.180 What is it? 00:56:01.180 --> 00:56:02.160 This utils. 00:56:02.160 --> 00:56:03.880 And we're not using any of that. 00:56:03.880 --> 00:56:07.960 We're actually just using the Python C API directly and embedding it. 00:56:07.960 --> 00:56:20.860 Yeah, just as a sidebar, one of the things I really think would benefit Python as a community is if there was just a built-in Python-M package or build executable or whatever. 00:56:20.860 --> 00:56:26.360 And out the other side comes a .app, a binary Linux app, or a .exe. 00:56:26.360 --> 00:56:27.860 And you just hand it out, right? 00:56:27.860 --> 00:56:31.860 There's so many scenarios where people would like a tool that they would like to be able to share. 00:56:31.860 --> 00:56:34.260 I feel like it's a bit of a chicken and egg thing. 00:56:34.260 --> 00:56:36.060 People aren't doing that very frequently. 00:56:36.280 --> 00:56:38.440 So why do we need that feature? 00:56:38.440 --> 00:56:41.500 Well, they're not doing it because it's so super hard and fragile, right? 00:56:41.500 --> 00:56:45.660 If it were as easy as pushing a button, I think maybe people would do it more. 00:56:45.660 --> 00:56:46.340 So I don't know. 00:56:46.340 --> 00:56:46.640 Anyway. 00:56:46.640 --> 00:56:47.720 Absolutely. 00:56:47.720 --> 00:56:54.740 That was one of the original reasons for our engineer sandbox project way early on is we did do the tools in Python, but we couldn't hand them to people. 00:56:54.740 --> 00:56:57.820 We had to tell them, we got to install Python and then pip install this. 00:56:57.820 --> 00:57:00.660 So the idea of that one was we were able to just hand them that. 00:57:00.660 --> 00:57:02.740 A little bit wrap up on the audience side. 00:57:02.820 --> 00:57:06.720 Mr. Hypermagnetic once again says, very nice design and similar to small JS libraries. 00:57:06.720 --> 00:57:07.140 Yeah. 00:57:07.140 --> 00:57:07.640 Nice. 00:57:07.640 --> 00:57:08.040 Appreciate it. 00:57:08.040 --> 00:57:08.740 Looks good. 00:57:08.740 --> 00:57:09.620 Last thing. 00:57:09.620 --> 00:57:16.080 I always am interested how these projects gain traction, how people find time and energy to put into them. 00:57:16.080 --> 00:57:22.160 And one of the ways is for companies that use them or people that use them to sponsor you guys. 00:57:22.160 --> 00:57:29.740 So you guys have a sponsor option here, which is part of the GitHub sponsor story, right? 00:57:29.740 --> 00:57:30.860 We have GitHub sponsors. 00:57:30.860 --> 00:57:37.140 I think that's actually a pretty big deal because it used to just be like, oh, you put a PayPal donate button or something on there, which is fine and all. 00:57:37.480 --> 00:57:40.820 This is an awesome feature that they, I guess, Microsoft added. 00:57:40.820 --> 00:57:42.460 I assume that they're the ones that did it. 00:57:42.460 --> 00:57:43.320 Yeah, it's pretty good. 00:57:43.320 --> 00:57:48.860 We do have the GitHub sponsors open collected and buy me a coffee. 00:57:48.860 --> 00:57:49.440 Yeah. 00:57:49.440 --> 00:57:52.860 So this is a part-time project for you guys, not full-time. 00:57:52.860 --> 00:57:56.260 It sounds like you're doing mechanical engineering work full-time. 00:57:56.260 --> 00:58:00.920 And then also this both at work, but then also bringing it out to the community a little bit. 00:58:00.920 --> 00:58:01.780 That is correct. 00:58:01.780 --> 00:58:05.320 If it directly applies to something we're doing at work, a bug or something, we'll add it here. 00:58:05.320 --> 00:58:12.120 But for the most part, it is at home at night, you know, after our families are in bed and working on it there. 00:58:12.120 --> 00:58:13.280 A labor of love. 00:58:13.280 --> 00:58:13.980 Awesome. 00:58:13.980 --> 00:58:14.700 And it's great. 00:58:14.700 --> 00:58:19.980 It's great to see more UI frameworks and more UI innovation in the Python space. 00:58:19.980 --> 00:58:21.180 So thanks for doing that. 00:58:21.180 --> 00:58:25.660 Now, before we get out of here, let me ask you all the final two questions. 00:58:25.660 --> 00:58:28.820 If you're going to write some Python code, what editor do you use? 00:58:28.820 --> 00:58:30.100 Typically PyCharm. 00:58:30.100 --> 00:58:31.800 Yeah, pretty much PyCharm. 00:58:31.800 --> 00:58:35.580 And then a notable PyPI package, something you've run across. 00:58:35.580 --> 00:58:36.260 Like, oh, this is awesome. 00:58:36.260 --> 00:58:37.040 People should know about. 00:58:37.040 --> 00:58:39.540 Typically just numpy is about the only one. 00:58:39.540 --> 00:58:41.840 NumPy is about the only one to use. 00:58:41.840 --> 00:58:43.100 We like to reinvent the wheel. 00:58:43.100 --> 00:58:44.160 Viewer dependencies. 00:58:44.160 --> 00:58:44.940 Right on. 00:58:44.940 --> 00:58:48.120 Anthony out in the audience says, I'm guessing, question mark. 00:58:48.120 --> 00:58:54.100 Does DearPython GUI play nicely with third-party libs like Nutka, PyInstaller, and so on? 00:58:54.100 --> 00:58:55.700 PyInstaller, I know it does. 00:58:55.700 --> 00:58:58.240 Nutka, I do not believe it does. 00:58:58.240 --> 00:59:03.640 And then numpy or anything that supports the buffer protocol, you can use in a lot of our functions. 00:59:03.640 --> 00:59:04.940 Very nice work. 00:59:04.940 --> 00:59:06.220 Final call to action. 00:59:06.220 --> 00:59:10.300 People want to get started with DearPyGUI or maybe give back to it. 00:59:10.300 --> 00:59:14.360 Sorry, and Anthony says, it was a statement, not a question. 00:59:14.360 --> 00:59:15.180 Thanks, Anthony. 00:59:15.180 --> 00:59:16.220 Nice. 00:59:16.220 --> 00:59:17.760 Yeah, final call to action. 00:59:17.760 --> 00:59:19.440 People want to get started with DearPyGUI. 00:59:19.440 --> 00:59:20.240 What do they do? 00:59:20.240 --> 00:59:23.440 Just pip install and run the demo on the readme. 00:59:23.440 --> 00:59:25.120 You can also join our Discord server. 00:59:25.180 --> 00:59:26.180 There's about a thousand. 00:59:26.180 --> 00:59:27.160 Go through the reason. 00:59:27.160 --> 00:59:28.060 Read the docs for sure. 00:59:28.060 --> 00:59:29.000 Read the docs. 00:59:29.000 --> 00:59:30.920 Contributing would be nice. 00:59:30.920 --> 00:59:34.440 We're still in the middle of refactoring a lot of things internally, so it may be a little 00:59:34.440 --> 00:59:34.800 hard. 00:59:34.800 --> 00:59:38.560 But other than that, also just sponsoring really helps out, makes it worth it. 00:59:38.560 --> 00:59:40.980 Jonathan, Preston, thanks for being here. 00:59:40.980 --> 00:59:41.980 Appreciate it. 00:59:41.980 --> 00:59:42.560 You bet. 00:59:44.000 --> 00:59:46.620 This has been another episode of Talk Python To Me. 00:59:46.620 --> 00:59:48.380 Thank you to our sponsors. 00:59:48.380 --> 00:59:50.040 Be sure to check out what they're offering. 00:59:50.040 --> 00:59:51.460 It really helps support the show. 00:59:51.460 --> 00:59:53.780 Take some stress out of your life. 00:59:53.780 --> 00:59:59.260 Get notified immediately about errors and performance issues in your web or mobile applications with 00:59:59.260 --> 00:59:59.560 Sentry. 00:59:59.560 --> 01:00:04.560 Just visit talkpython.fm/sentry and get started for free. 01:00:04.560 --> 01:00:08.140 And be sure to use the promo code TALKPYTHON, all one word. 01:00:08.880 --> 01:00:12.680 With Toptal, you get quality talent without the whole hiring process. 01:00:12.680 --> 01:00:16.440 Start 80% closer to success by working with Toptal. 01:00:16.440 --> 01:00:21.040 Just visit talkpython.fm/Toptal to get started. 01:00:21.040 --> 01:00:23.080 Want to level up your Python? 01:00:23.080 --> 01:00:27.140 We have one of the largest catalogs of Python video courses over at Talk Python. 01:00:27.140 --> 01:00:32.320 Our content ranges from true beginners to deeply advanced topics like memory and async. 01:00:32.320 --> 01:00:34.980 And best of all, there's not a subscription in sight. 01:00:34.980 --> 01:00:37.880 Check it out for yourself at training.talkpython.fm. 01:00:37.980 --> 01:00:39.780 Be sure to subscribe to the show. 01:00:39.780 --> 01:00:42.560 Open your favorite podcast app and search for Python. 01:00:42.560 --> 01:00:43.880 We should be right at the top. 01:00:43.880 --> 01:00:49.020 You can also find the iTunes feed at /itunes, the Google Play feed at /play, 01:00:49.020 --> 01:00:53.240 and the direct RSS feed at /rss on talkpython.fm. 01:00:53.240 --> 01:00:56.660 We're live streaming most of our recordings these days. 01:00:56.660 --> 01:01:00.080 If you want to be part of the show and have your comments featured on the air, 01:01:00.080 --> 01:01:04.460 be sure to subscribe to our YouTube channel at talkpython.fm/youtube. 01:01:04.460 --> 01:01:06.360 This is your host, Michael Kennedy. 01:01:06.360 --> 01:01:07.640 Thanks so much for listening. 01:01:07.640 --> 01:01:08.800 I really appreciate it. 01:01:08.800 --> 01:01:10.720 Now get out there and write some Python code. 01:01:10.720 --> 01:01:11.200 I'll see you next time. 01:01:11.200 --> 01:01:11.420 Bye. 01:01:11.420 --> 01:01:11.920 you 01:01:11.920 --> 01:01:12.420 you 01:01:12.420 --> 01:01:12.920 you 01:01:12.920 --> 01:01:13.420 you 01:01:13.420 --> 01:01:13.920 you 01:01:13.920 --> 01:01:14.420 you 01:01:14.420 --> 01:01:14.920 you 01:01:14.920 --> 01:01:15.420 you 01:01:15.420 --> 01:01:15.920 you 01:01:15.920 --> 01:01:16.420 you 01:01:16.420 --> 01:01:16.920 you 01:01:16.920 --> 01:01:17.420 you 01:01:17.420 --> 01:01:17.920 you 01:01:17.920 --> 01:01:18.420 you 01:01:18.420 --> 01:01:18.920 you 01:01:18.920 --> 01:01:19.420 you 01:01:19.420 --> 01:01:19.920 you 01:01:19.920 --> 01:01:20.420 you 01:01:20.420 --> 01:01:20.920 you 01:01:20.920 --> 01:01:21.420 you 01:01:21.420 --> 01:01:21.920 you 01:01:21.920 --> 01:01:22.420 you 01:01:22.420 --> 01:01:22.920 you 01:01:22.920 --> 01:01:23.420 you 01:01:23.420 --> 01:01:23.920 you 01:01:23.920 --> 01:01:24.420 you 01:01:24.420 --> 01:01:24.920 you 01:01:24.920 --> 01:01:25.420 you 01:01:25.420 --> 01:01:25.920 you 01:01:25.920 --> 01:01:26.420 you 01:01:26.420 --> 01:01:26.920 you 01:01:26.920 --> 01:01:27.420 you 01:01:27.420 --> 01:01:27.920 you 01:01:27.920 --> 01:01:28.420 you 01:01:28.420 --> 01:01:28.920 you 01:01:28.920 --> 01:01:30.920 Thank you. 01:01:30.920 --> 01:02:00.900 Thank you.