Transcript

Hey guys, it's Landon from RH in the survey Open Source project. In this short video, I'm going to just demonstrate to you a couple of the. Custom tkinter controls I've I've developed. And they and they integrate well with TK bootstrap which is a. And add on for tkinter. Lot of people call it kinter. They say the T is silent. I call it Tkinter. It's the built in GUI library for Python. One of the one of the complaints people have about Tkinter is that it's ugly and and kind of old and you can actually develop really beautiful web app. I'm sorry, desktop applications. With the library and TTK, bootstrap means you can theme them and they're very modern looking. Uh, and and tkinter has a. Canvas widget that basically allows you to do custom drawing and hit detection so you can essentially build any kind of component that you want. And so I've done that here. So the with the components I'm going to show you are are not. What's the word I'm looking for? They're not assembled from existing Tkinter components, they're actually custom drawn on the Tkinter canvas widget, so they're fully customizable. So they have at the top is I have a a ribbon component I've created. It's like the ribbon you get in Microsoft Word. And it's a little bit different, but it's similar concept. So you can see I have ribbon tabs here. And then these are our button, what I call button panels that organize similar buttons. And then I have button groups. So there's different kinds of button groups. And you could easily use icons. I haven't. I'm gonna do a demo that uses icons because that's what you more commonly seen ribbon, but you can see when you hover over it gives you a tool tip. That tells you what the buttons for, um, so that's the, the ribbon component. And it stores the ribbon in an XML format just like a Microsoft Office ribbon. And you can set, you can configure all of this stuff, you know, the default size and the and the, the width of the margin and all that kind of stuff is fully customizable and you can configure all that in. In a in a TOML file. And then down below I have what I call my graph navigator component. So I made this to navigate a what's called a triple store, but it can be used to, it can be used to navigate any kind of tree data or graph data so. If you had like an application that had a family tree and it's just it's just a graph navigation component O in the in the center you have the root node. So in this case, just this little example I have, Python is the root node and then it will display the connected nodes. So the nodes that are connected to this node. And you can see as you hover over those, there's a hover state and it gives you a little tool, little tool tip with the name of the connected node. And then in the center here gives you the the count the number of connected nodes. Uh, and then, uh, these are the, the, the connections. So these are the edges in the graph. And you can see as you hover over though you get you get the tool tip with the connector and you can also select connectors. And then if you double click on a node, it becomes a central node. So if I double click on web development, that's the central node and it's telling you there are three. 3 leaf nodes here, right? And then if you want to go back. Come over here to have navigation. We could say move back a node. So now I'm back to the beginning. That we can select a node and then move forward to that node. Man. And we can go back to the start node. OK this is you can zoom this zoom in, zoom out, zoom extents. You can center the graph, you can pan, you can pan and mouse scroll the graph. And then you can, you know, you can delete nodes. So it's it's read write, it's not just read. So you can, you can all you can do. Let's see, uh, we want to you can delete and duplicate the selected nodes. Do you want to delete Yeah, so. Anyways, it's a, it's a I wanted to, uh, kind of a, uh, intuitive way to navigate graph structures because I have a triple store application and so I created this, I call it a graph navigator control, and this is all available open source. And a fully configuration. You can configure everything in a TOML file, so this is just a demo application. So you can use the ribbon control independently. You can use Graph Navigator control independently. And it's open source, fully configurable, so it's all written into center with TTK bootstrap layered on top.