Segmented Buttons - Tkinter CustomTkinter 9

what's going on guys John Al from tk.com and in this video we're going to look at segmented buttons for custom kter and python all guys like I said in this video we're going to look at segmented buttons for custom kter but before we get started if you like this video want to see more like and be sure to smash like button below subscribe to the channel give me a thumbs up for the YouTube algorithm be sure to grab your totally free PDF copy of my Kinder widget quick reference guide book this thing is awesome over 150 pages with all the Kint widget attributes grab your free copy today just head over to tk.com widget dbook enter your email address and I'll send that right out to you and while you're there think about membership ink.com you get all my ker courses all my future courses for one low price use coupon code YouTube to get 30% off membership if you're interested okay in this video we're going to look at the segmented button for custom ker and this is a little bit different and I don't think there's a widget like this in regular ker but you can see it's just one big button that's segmented and there's different things in it and we click on each thing something else happens so that's what we'll look at in this video so let's head over to our code I'm using the spime text editor and the get bash terminal as always and as always you can find a link to the code in the pin comment section below as well as a link to the playlist with all the other videos in this custom kter Series so check that out if you haven't so far so I've got this file I'm calling it ctk segb button. and it's our basic custom ker code that we always have so let's come down here and let's just create a button so I'm going to call this mycore seore button segmented button and this is a customer. ctk segmented button and we want to put it in root and we want to give it some values of something now you could just create a python list right here or you can create a variable calling it whatever you want so I'm going to call it mycore values and let's come up here and create that list and I'm just going to go John April and Wes so here let's say our button values and here let's say create the button like every button we need to give this a command so I'm going to call this clicker or something called anything you want now we don't have this yet we'll create it in just a second so let's come down here in mycore seore button. pack let's give this a pad y of like 40 to really push it down the screen now let's come up here and let's create our function and so we just want to Define that clicker function and for now let's pass now this is a little bit different than a regular button now you don't have to do it this way I'll show you two different methods but what you can do to make this a lot easier to use is just pass in a value here now this value is going to be whatever the person clicked on of each of these things so if they click on John this value will be John and then we can use this value inside of here when we get to that so for now let's just go ahead and save this and run it make sure this looks okay head back over to our terminal I'm in my center.com direct directory and let's run python ctk seg button and when we do we see this button here and it says John April West now one thing you'll notice is none of these are highlighted by default and you probably want it that way so if we click on John nothing happens April West but if you want one to be like this highlighted already sort of selected already by default we can do that let's head back over here and just come down here and let's set default uh selection and here we just call mycore seore button. set and then just pass in whatever we want so if we want John you just type that in like that let's go ahead and save this and run it again and now we see JN is selected by default now you may want that you may not this is actually a little tricky because we'll see in just a second when it's selected and you click on it nothing happens you have to click something else and then come back and click on it before it sort of activates the command that runs that function that we created so we'll look at that in just a second how we can maybe get around that or maybe not so okay that's cool now let's see if this thing can actually do something let's come down here let's create a label and I'm going to call this mycore label and this is going to be a customer. ctk label we want to put it in root we want the text to equal Nothing by default and let's give this a font of helvetica and like a size 18 make it nice and big and then let's mycore label. pack this guy give it a pad y to like of 20 to like push it down screen so okay we've got this label there's nothing on it but now we want to come up here and anytime somebody clicks on our button we want to change the label so let's go mycore label. configure and we want to set the text equal to and let's create an F string and let's say hello and then whatever they clicked on so that's going to be our value right remember we passed in this value just by default this is built to pass a value when you click and it's called value and we can sort of capture that in this way so okay let's go ahead and save this and run it again now again you'll notice JN has clicked by default if I click on this even a few times nothing happens but if I click on April it says hello April down here if I then go back and click John it says hello John so that's because like I said we set this button set to John if we take this out if I comment that out and we run this again now none of them are selected but now if I click John it says hello John right away I don't have to click off and then back again I just sort of keep that in mind so that's using that value that we passed in you can use the good oldfashioned doget that ker usually uses so we can call myor sore button doget now we're calling this by doget and we can do that but we still have to pass in the value you might be tempted to take that out but you need to keep it in there because this thing by default is sending something so it's expecting something to be sent here so you just have to kind of keep that in there but we don't have to necessarily use it we can use the dog get method that I that we just coded so here we could say John April West it still works the same so really just whatever you're comfortable with you can use this doget method but really you have to pass in a value anyway so I don't know I just probably would keep using the value it's easier that way you won't forget oh yeah I have to pass something in here in fact we could take this off and see what happens let's try this we could go mycore seore button. get that's a function if we save this and run it we can click on something and ah we get an angry error it says clicker takes zero positional arguments but one was given and that's just because like I said this ctk segmented button when you click it it sends a value so we could call this anything we want we could call it X and then here we could just call X doesn't have to be value right we save this and run it let's clear the screen and then we click on April it says hello April so I like to use the word value just because you know that's what it is but really you could like I said name it anything you want so that's pretty much all there is to this button now we can modify this and customize it to look all kinds of different ways and that's what we'll look at at the rest of this video but as far as the functionality goes uh this is really all there is to it and just remember you can create this list here or we could just instead have copied this whole thing and pasted it right here just like that that works perfectly well too but for me that's not very elegant it's getting a little sloppy and your list may be very long and so it's just easier to break it off into two things a variable here and then just pass it in like that so very cool very easy and uh very useful so now let's come down here and let's play around with this button so like everything in custom ker you can customize it in all the normal ways if you've been watching these videos you know most of the ways you can customize this this button has a couple of curve balls that are different from other widgets and we'll go over those but we'll just start out by changing the width let's change the width to say 300 and the height to say 100 if we save this and run it these buttons are much bigger now right okay okay that's cool we can change the font to match right so if we want to change this to helvetica and like size 18 go ahead and save this and run it and now the text is bigger to sort of go with the bigger button size so that's cool like all of these things we can change the corner radius and I'm going to start out by setting it to one to make it very square right very angular if we save this and run it you can see now they are very Square likewise change this to like 50 or something to make it more curved and rounded and see now it's nice and rounded that's kind of cool and you'll notice it changes the rounding inside of the selection too right when you click it or when you just hover so that's kind of interesting let's go ahead and change this back to I don't know three or something so Corner radius we can change the Border WID so let's go border underscore width and let's set set that equal to like five or something just so it's sort of easily identifiable and you can't really tell until you click it but now this border right here is thicker you know the gray right between the the button and the end of the thing here so that's your border width what else can we do we can change the color so let's change the FG color of the whole thing and let's change this to red or something obnoxious and don't worry we're going to make this look absolutely hideous by the time we're done but but you'll notice now sort of the background color is red now this is called FG which is short for foreground color foreground in my mind is usually the front color but I don't know this looks like the background color to me but whatever that's how you change that color right so what else do we got we can change the selected color so whatever thing is clicked on what do we want this to be let's say green it's pretty ugly right let's save this and run it now when we click on one of these boom it is green it the hover color is still changing and we can change that but uh when it's selected that's that color there very cool speaking of let's go ahead and change the selected uncore hover uncore color and we can change this to purple I don't know and I'm using words here but like everything in this you can use your hex color codes right if you know those but words are easy so we're just going to go ahead and call it purple so here we go and when we click this it's green but if I hover over it it's purple if I hover over these they're not purple because this is just the selected hover color so okay that's cool we can change the unselected underscore color and let's set that equal to what say pink save this and run it whoa now the ones that haven't been selected are pink by default their hover colors are little different but that's something we can let's see speaking of that we can change the unselected hover undor color and what do we want this to be so orange maybe I don't know running out of colors here save this run it again by default they're pink if we select one this selected is purple but these are orange when you hover them these are the unselected hover colors as soon as we click one the hover color turns to purple but while they're unselected the hover color is orange right uh what else can we do we can change the text color so let's just change textor color and let's set that equal to Yellow that's going to look very nice I think oh misspelled something uh text there we go save this head back over here clear this screen yikes that is hideous so now the text color is yellow uh we can set the state of these we can enable them and disable so let's go ahead and set the state to disabled it's normal by default and when it's set to disabled the button won't work at all right so I'm clicking on things I'm hovering over things it's like completely dead now you'll notice the color of the text has been sort of grayed out when it's disabled we can change that color as well so come back over here and this is going to be the teex tcore colorcore disabled and let's set that equal to I don't know blue or something save this guy and run it likewise the thing is still disabled but the text color is this weird funky bright blue color that's pretty bad I'm clicking like crazy nothing's happening all right so that's cool we can by default like I said this state is normal so I'll just go ahead and set it back now when we run this the text color goes back to Yellow it's not blue anymore because the button's not been disabled and of course it still works and hovers and does all the things so finally there's a weird one here that you don't see in a lot of other widgets it's called dynamicore resizing and what this will do is resize the button based on the size of the text so by default it's true so let's set this to false and let's change our font size to like 58 make the font really big and if we save this and run it you can see the words no longer fit on here and the buttons are the size that they are if I try to resize the app the buttons stay the same so that's not great but you may want that for some reason by default this is set to true and you'll see the difference if we run this while it's true well right off the bat the buttons have been resized to fit the text and now if we kind of scrunch them the buttons kind of change sizes a little bit that didn't happen before when it was set to false but basically the big thing is the text fits on the buttons now and it's dynamically done that automatically like I said that's set to True by default you don't have to put that on there and it'll just do it you know if for some reason you've got a very strict goey that you don't want changing around you could change this Dynamic resizing to false I guess there's some instances where you might want that but for the most part you're just going to want to leave that alone leave it true by default and allow it to resize as it is so that's the segmented button very very cool very useful kind of neat a little bit different than your regular kter stuff and that's all there is to it so that's all for this video if you liked it be sure to smash like button below subscribe to the channel give me a thumbs up for the YouTube algorithm and be sure to grab your totally free PDF copy of my kter widget quick reference guide book thing is awesome over 150 pages with all the kter widget attributes grab your free copy today just head over to tk.com widget dbook enter your email address and I'll send that right out to you and while you're there think about membership ink.com you get all my ker courses all my future courses for one low price coupon code YouTube to hit 30% off membership if you're interested my name is John aler from tk.com and I'll see you in the next video

Channel: Tkinter․com

Views: 6,325

Keywords: customtkinter segmented buttons, segmented buttons customtkinter, customtkinter segmented button customize, tkinter.com, john elder, john elder tkinter, john elder tkinter tutorial, john elder customtkinter, john elder customtkinter tutorial, custom tkinter, python gui

Id: BHa-WakZ31c

Length: 15min 45sec (945 seconds)

Published: Tue Oct 10 2023