Python Tkinter GUI Design Using ttkbootstrap - Complete Course

tkinter can help you create GUI apps with python quickly and easily and with the ttk bootstrap Library it's simple to make your tkinter apps look amazing in this course John Elder will teach you how to use ttk bootstrap he will show you how to use all the main widgets to make your decanter apps look modern and awesome what's going on guys John Alder here from tcincture.com and in this video I'm going to talk about modern tea kinter design with ttk bootstrap all right guys like I said in this video we're going to look at modern GUI design with something called ttk bootstrap now I've talked about different sort of modern libraries out there in the past custom ttk for instance this is a little bit different this is very complete and very robust whereas custom ttk is still kind of new in getting some of the Kinks worked out of it works great but still doesn't support all the widgets and things like this this supports all the widgets and then some adds some new ones it's really cool but before we get started be sure to grab your totally free PDF copy of my Kinder widget quick reference guidebook thing is awesome over 150 pages with all the Kinder widget attributes grab your free copy today just head over to tkenter.com forward slash widget-book enter your email address and I'll send that right out to you so this is ttk bootstrap and if you're familiar with bootstrap it's a CSS framework for websites it's probably one of the most popular CSS Frameworks in fact if you go to getbootstrap.com you can see you know here's a page on bootstrap buttons for instance you have this sort of very distinct look to things if you look at nav bars you know you can have nav bars for websites very distinct looking thing one of the most popular CSS Frameworks on the internet so basically what this package does is it takes that and sort of applies it to kinter which is very cool so you can see I've got just a couple of examples pulled up here this is a dark theme there's dark themes and light themes so you can see very cool the buttons here in fact let's try and there we go zoom in a little bit so you can see there's like dashes around the buttons you can have outlines or solid these things look more modern these things look more modern your check boxes and your toggle switches look better even the entry widgets and the spin boxes look better the date picker looks cool very cool so you can see there's all kinds of different themes to choose from this one's called Vapor it's very purpley uh you can check out the light themes there's a bunch of them very cool flatly Journal litera and what's great about this is you could pick a theme or you can build your own and there's resources here to actually build your own theme so we'll get into all that in the future minty right pulse Samsung so in this video I want to just sort of walk you through what this is how you can get started and all the good things so just head over to ttkbootstrap.readthedocs.io and if you click on getting started this is how you pip install it just your regular pip install ttk bootstrap from your terminal we'll get it done in fact if we head over to our terminal I could just pip install gtk bootstrap and that's really all we need to do boom boom and it's ready to go so if we click on the tutorial here and kind of look into this using it is very simple it's very much like using your regular kinter widgets so what you're going to do is you're going to come here and when you import this thing it the docs are telling you to import ttk bootstrip as ttk I don't recommend that you do that because you know we use ttk stuff for other things the dtk library that comes with kenter I don't think you want to name it that so I would name it something like uh TB or something to tkinter bootstrap or ttk be something like that just to distinguish it as bootstrap and not ttk but you could do it as ttk if you want like the docs say you also want to import these I'll talk about those in a second here and if we come down here to use these things a regular button we would just call a button well instead of that you call attk or ttkb whatever you named it up here button right and then instead of giving it a style like you would with your widget you give it a boot style so instead of using style for all your widgets you use boot style that's really kind of the only thing and you can see they're using these constants here we've imported these constants you can also use different things you can use quotation marks like we've done in regular videos all the time in fact you can see you know you can see you could use quotation marks with dashes without dashes with with spaces without spaces with commas without commas or just the constant capital letters whatever you feel comfortable with so that's kind of nice and really that's sort of all there is to it everything else is just like using bootstrap as normal for the most part so when you start it you could create a regular root TK instance or you could use a window instance which is slightly different and they kind of recommend so we would probably use that like I said we're going to get into this in the next few videos we're going to start building stuff out with this in this video I just want to kind of give you a very brief overview and to pick a theme it's just as easy as whenever you either if you use a window instance you just pass in the theme equals and then the name of the theme or if you use the regular old way of doing it you just create a style equals ttk.style and then pass in the name like I said we're going to probably be using this window thing going forward when we use this but we'll get into all that later and that's kind of all there is to it now if you come up here to the top and look at the style guide you can see see all of the different things you could do with this so right off the bat the colors that this offers are the basic bootstrap colors this sort of blue green light blue orange red light and dark right I'm sure you can override those but those are the basic ones that come with bootstrap right so if you've used bootstrap on websites you're familiar with this color scheme already very cool and I'm just going to go through here and show you what these all look like so the check buttons these are the basic check buttons very cool the combo box much more modern looking date entry a little calendar picker tool very cool there's a date picker pop-up with a calendar very awesome right just your regular entry box you could colorize and do things with that's cool there's this flood gauge which is not in regular kinter right sort of a progress bar buttony looking thing very cool right just one of the few things that are extra in this over regular kinter it's got your basic frame it's got your basic label your basic label frame right but you can colorize these label frames which is very cool yeah you know menu buttons look better there's this cool meter right which is not regular in kinter so that's cool that's a little extra thing you could have you can see it has dashes or solid or whatever very cool notebooks sort of the tab thing in Pinter but a little more modern looking a paint window move those around progress bars look better right very cool you can also have striped ones definitely more modern looking right radio buttons different colors uh you can have a scale zoop zoop very nice irregular scroll bar a separator the most popular kinter Widget the separator is just a line uh size grip where you can like move things around ah very cool uh your spin boxes we've looked at these preview right boom very more modern much more modern looking tree views very cool and then there's some stuff on Legacy widgets we don't really care all that much about that so you can click here and read on the API there's even more stuff in here so if you want to do a color Chooser is information on that there is color drop dialogue very cool all kinds of cool stuff in here there's a regular dialog box font dialog pop this thing up very useful message boxes look better right message dialogue there's a query box this little thing very cool just all kinds of stuff you could look in Styles Colors theme definitions and there's also a style Builder right this is a different app that you need to pip install we'll get into all that too very cool helps you build your own Styles and themes and things like that I hear some stuff on boot style anyway all kinds of cool stuff you can look through here if you're interested we're going to be going through all of this because I think this is very cool and I'm going to be building a bunch of videos on this in the coming you know days and weeks probably create a course on it too but uh very very cool lots of fun very easy to use and uh definitely check it out so that's ttk bootstrap very cool like I said we're going to be getting into this in the coming videos and should be a lot of fun and uh I'm excited so now we're going to actually dive in and start learning how to use it so in this video we're going to do just a very basic app to get it up and running show you how to get an app up and running I'm going to show you how to do labels and buttons in this video as well as a little function based on the button so we can click this and it says goodbye World hello world Goodbye World hello world Etc so very basic but it allow us to see the different types of buttons we can use and the different ways you can configure labels and buttons and all that good stuff so head over to our code I'm using the Slime text editor and the get batch terminal as always I've got a file I'm just calling it TB underscore intro PB short for ttk bootstrap I guess TV whatever and this is our basic kinter starter code that we would always have root TK instance you know your icon you set the size and you've got your main Loop so your ttk bootstrap app is going to be a little bit different than that so first things first we need to make sure we actually have ttk bootstrap installed on our system so head over to your terminal and just pip install ttk bootstrap I've already got it so it's gonna be like hey you've already got it but if you don't it'll go ahead and install and you should be good to go so first we need to come up here and import some things that come with ttk bootstrap so first it's from ttk bootstrap dot constants we want to import everything and I'll show you what those are in just a second you don't necessarily have to do this but you may want to you may not I'll explain what that means in just a minute so we also need to import ttk bootstrap itself so we want to import ttk bootstrap as and I'm going to call this TB now they suggest you import it as ttk but if you're going to use ttk or if you're you know going to get confused by that I suggest you just import it as something else TB short for ttk bootstrap or you might want to import it as ttkb you know whatever floats your boat I'm just gonna go TB it really doesn't matter but you need to import it as something so that you can use it so okay in a normal kinter app you have your TK instance now you can do that with ttk bootstrap but they don't suggest that they suggest something else instead they say you should go TB dot window and then inside of here you can pass whatever theme you want so you can go theme name equals and I want super hero I'm gonna use the superhero theme so there are a bunch of themes you can use head over to the ttk bootstrap docs that's a ttkbootstrap.readthedocs.io and you can come over to themes click either light or dark I want dark and then here these are just the themes so if you want solar you type in solar if you want superhero you type in superhero Darkly Darkly you know you get the idea so go ahead and pick one I've picked superhero I think that looks kind of cool that's neat now we can click on style guide we're going to look at that in just a minute too but first we can come back over here and if we just go ahead and save this and run this again python TB underscore intro.pi we get an error because I forgot an equal to sign it looks like yeah right there so this should be root equals so now I'll come back over here give this another try we have another error man I'm on fire today this should be ttk boot strap there we go all right one more time we see right off the bat we have a different color background now when you pick a specific theme every widget you use is going to be colored and shaped and whatever based on that theme so sort of keep that in mind so let's start out with a label so I'm going to call this my underscore label and this is going to be a TV DOT label and now it's TB here because we imported this as TB there so if you import it as something else this would be whatever you imported it as same thing up here with the window thing and these all act pretty much the same as your basic into your widgets so you can set the text any way you want I'm just going to say hello world you can also set the font in the normal way that you would so I'm going to say helvetica and give this a size like 28. now here's where it gets a little bit different you have this boot style attribute here and this is where you get to pick whatever however you want to style this thing so gtk bootstrap comes with the same basic color scheme that the bootstrap CSS framework comes with so let me just copy and paste these in real quick put these on another line you have the default primary secondary success info warning danger light and dark so light and dark they are how they sound one's light one's dark the default is just the default it's usually like white or something primary is blue secondary is gray success is green info is a light blue warning is yellow I think and danger is red and you could see these if you want head over to the style guide and they're listed here so primer is this dark blue secondary is gray green sort of light blue yeah warning is looks like orange I guess and dangerous red and then light and dark so those are sort of the colors you can choose from so let's say let me put this on another line so we can see this we could just start out with the default and see what that looks like now I've got this in quotation marks and that's perfectly fine but up here we imported these constants so if you want you can use just the constants which are all capital whatever right I tend to not do that because I'm used to putting them in quotes like regular kinter and regular ttk stuff so I will usually just go like this and you know do it like that either way works whatever you're comfortable with but if you want to use the constants you have to import them up there if you don't you don't have to import it at all so all right let's go ahead and my underscore label dot pack this guy and this gives us a pad y of like 50. you really push it down the screen so let's save this and run it see what we have here and boom we get this hello world in this sort of default light color now this is white in default in this theme that color might be a different color in a different theme so just sort of keep that in mind so if you're using a light themed theme I'm guessing that's probably going to be black as the default instead of white so you just have to play around with your specific theme to see what's what so we can come back over here real quick and play around with this if we want if we wanted to change this to jit danger for instance then if we save this and run it we're gonna get red text right so that's cool now there is another attribute you could play around with when it comes to labels in your boot style and you use multiple attributes you just put a comma in there and then do the over the other one you want so we can also do something called inverse and this will just sort of reverse whatever your color is and give you sort of a blocky looking background so if we save this and run it's kind of interesting we see now the whole thing is like this square of the inverse color so the text was red now the block is red and the the actual text color is white itself so that's kind of cool keep that in mind if you want to do something like that and when it comes to labels that's pretty much all there is to it so you could inverse or not and then you pick your color so okay that's cool now let's create a button let's call this one minor scroll button and this is going to be a TB dot button and just like the label pretty much everything about this thing will act the same way a regular kincher button acts except you have this boot style attribute all the TB widgets have a boot style attribute that's sort of the main difference so here we could set the text we can set this equal to click me right whatever and then we want to add a boot style and set that equal equal to First what color do we want this to be well let's go primary this time and see how that looks so let's get my underscore button yeah pack give this a pad y of 20 push down screen a little bit let's save this in run see how this looks and so you get this primary color blue click me you'll notice when you click on it there's little dashes around it that's kind of neat all right there we go so there are several different attributes you can play around with in the boot style for your button so here we have primary let me just put this on another line here so we can see we can change this from a regular button to an outline so this is kind of cool and let's change this from primary to info success let's see what success looks like I always wanted to know what success looks like and you see now it's outlined right that's what that outline attribute does and of course the color is green if we hover over it it turns back into a blocky thing when you click it you get the little white dashes so that's kind of cool you can also sort of make it not really even a button at all you can make it just like a look like a link right so instead of outline we could put just link here save this and run it now you're just going to get flat out text but if you hover over it it kind of changes color like an HTML link and again you can click it like normal so that's kind of cool I'm going to go ahead and change that back to outline very cool now buttons do things and to do things with a button in kinter you give it a command and the same thing works with ttk bootstrap you give it a command so let's create a command called changer we don't have that just yet so let's come up here and create it let's define changer and here outside of here let's create a counter and set it equal to zero just for fun and then let's set our counter plus equal to one every time we click the button and let's run some logic let's say if counter modulus 2 equals zero that means it's divisible by two that means it's even let's change our label underscore label dot config and set the text equal to hello world just go ahead and copy this else let's set the text equal to Goodbye World so if it's even it'll say hello world if it's odd it'll say goodbye world right so the main thing I want to show you here is this dot config use dot config in kinter to change things on the Fly later on in your app and that same thing holds true in ttk bootstrap so if you're worried about that same exact thing there so nothing to worry about there we can go ahead and save this and run it one last time we can click me uh oh we need to make our label Global so let's come up here and say Global counter there we go now we come back here and run this guy quick this Goodbye World hello we're all goodbye World hello world so there you have a very basic app with ttk bootstrap like I said it's very similar to using regular Canter or ttk widgets just a couple little things really the boot style thing is the main difference you're going to deal with on a day-to-day basis when you're using this and uh pretty cool in this video we want to look at check boxes and there are lots of different options for check boxes with ttk bootstrap you have your regular check box that you normally have you got a little check box there you also have these tool buttons where if you click on it it sort of unhighlights or if you click on it again it highlights and you have the same thing with outlined there you go and we also have these round toggle buttons and square toggle buttons so we're gonna look at all of these in this video very cool and uh really easy to use so I've got our basic kinter starter code I'm calling it check buttons.pi and I've got our theme set to superhero and I've imported gtk bootstrap as TB and first thing let's just create a simple label so let's go Miner score label and I'm just going to use a regular kinter label for this and let's just say uh click the check box or check button whatever below and you know just for fun let's give this a font of helvetica and like a size of 18 and then that's my underscore label dot pack this guy and I'm gonna give it a pad y of let's bring it down 40 from the top and then 10 from the thing below it okay so first things first let's create a check button and remember from regular cancer whenever we create a check button check box it's called a check button in kinter we create a variable and I'm going to call this var1 and I'm going to set that equal to an INT VAR and an end VAR is akinter variable right it's an integer variable and the reason why we want integers because when you click a check box we want it to be either a one or a zero so if it's checked it'll be a one if it's not checked it's a zero that allows us to run logic very easily to say hey if it's one do this if it's not one do something else right so we'll set up an invar for that and then I'm going to create a check box I'm just going to call it my check whatever and this is going to be a TB dot check button all right and so let's give this a boot style of I'll say primary remember those are our colors right primary secondary info success danger all that stuff right so that's really all we have to do there and let's set the text equal to uh check me out check button check and then let's set the variable to that var1 we just created and then we want to give this actually let's put start to put these on separate lines because it's getting a little hard to read so our variable is going to be var1 we want to set the on value so what is it when it gets checked we'll set that to one we want to set the off value to zero so if it's not checked give it a zero and then let's give this a command of and I'm going to call this Checker and what this does is it'll run a function called Checker every time we click the button right so okay we'll create that in just a second for now let's go my underscore check dot pack and give this a pad y of like I don't know 10 or so to push down screen a bit so all right let's come up here and Define our Checker function and for now let's just pass so let's save this and run just to make sure that's working okay so let's head over to our terminal I'm in my ctkinter.com directory and let's run python check buttons dot pi and when we do we get this little thing here says check me out there's a little box we can click it it's blue or not all right and if we want to change the color remember we know how to do that we just come up here to our boot style and let's say we want to turn it green that would be info if you're not familiar with the colors take a look at the documentation or check the previous video in this playlist where I talked about all the colors so we can come back over here real quick just run this guy again and now when we click on this it's that light blue that's what info is we could say danger for instance save this and run it right now it's red so okay that looks good so let's change this back to primary I like primary and if we want to play with this function we don't necessarily have to but if you're not familiar with how to do check buttons in kinter just very quickly we can say hey if var1 dot get that will get whether it's a one or a zero if it equals one then we can say I don't know my underscore label dot config and set the text equal to checked right else we can set this equal to unchecked right so save this and run it now when we click this we check hey it's checked when we uncheck it it's unchecked right so a very simple example but in this function here you could do anything you want so we're just changing the label obviously you would do something else whatever you want to do you do it in this function so okay that's the check button very very easy to use but there's also something called a tool button which is a square box it looks like a button but you can toggle it on and off and it changes color from the color to a muted version of that color or gray if you uncheck it so two buttons are really easy again I'm going to go VAR 2 equals int VAR because we always want to use it an INT VAR with these guys and let's just call this my underscore check two and this is going to be a TB dot check button again right but the boot style will now change a little bit so first what color do we want this well let's say we want danger which is red so to change it from a check button to a tool button all we have to do is type in tool button right these all can stay the same if we want so I'll just kind of copy these to make this quicker instead of R1 it's obviously going to be var2 but everything else will stay the same now we can my underscore check to dot pack and give this a pad y of like I don't know 10 or something push it down screen a little bit uh that looks good except oh we forgot text so here let's say text equals tool button all right give this a comma okay let's go ahead and save this run it see how this looks all right now we got this tool button you'll notice if we hover over it it changes color that's kind of cool right if we click it boom now this is checked and uh it stays red now we can click it again and move our Mouse away and now it becomes unchecked again and it still changes color when we hover very cool so that's the tool button you can also do a tool button with an outline instead of this solid color right super easy to do that in fact I'm just going to copy this whole thing and come here and say outlined tool button and just paste all this in here and let's change this to var3 my check three set that to three and instead of saying tool button let's say outlined tool button and here same thing we have this we have tool button but we also then pass in a third thing called outline and that's all there is to it now we can oh we gotta change this to my check three okay save this head back over here run this guy now we get this cool outline button same thing if we hover over it it changes color if we click it it becomes solid if we unclick it it goes back to outline and uh very cool okay next we want to look at round toggle buttons a little bit fancier but uh pretty cool I'm just going to go ahead and copy all of this stuff and paste it in here and let's change this to var4 my check for it's this Devar for and come down here and change that to var4 but now let's change this boot style from danger color let's mix it up let's change it to success I think that's green and instead of a tool button and outline we want a round Dash toggle and here let's call this for the text round toggle all right and yeah that's all there is to that let's go ahead and save this head back over here run this guy again and now we have this cool round toggle button if we click it it changes to Green because success is green very cool and you'll notice it's not changing here because we didn't dial in the function for this but uh very cool again this is green because over here we called success if you wanted to color it different color you just change the color of that so very cool finally we have the square toggle button and it is very much like the round toggle button let's just change this to five call this my check five bar five and my check five and here let's call this Square toggle button and you will never guess how to do this we change this from round to square very difficult and let's get crazy here let's change this to warning I think that's yellow or orange or something like that so yeah that's all we have to do that's the only difference there save this run it now we have this cool Square toggle boom we click this changes to what is that orange I guess very cool so those are check boxes tool buttons outline tool buttons round toggles and square toggles with ttk bootstrap very easy to do all of these things and much much nicer looking than the regular kinter check button that you're probably used to but works pretty much the same as the kinter check button all right like I said in this video I want to talk about resizing buttons not just the size of the button but also the font on the button you can see here's a regular button here's a bigger button now this is a little tricky and that's why we need to talk about it so we've got our basic starter code I'm calling this button underscore size.5 because why not and we're importing ttk bootstrap as TB this has to be installed so you have to pip install it if you haven't and I've set the window to superhero and it's 500 by 350. so let's start out by creating a button and I'm just going to call this my underscore button and this is going to be a TV DOT button because we've imported dtk bootstrap as TB and I want to set the text as I don't know hello world now normally to change the size of a button we would give this a font we would go font equal and I'd say like helvetica and then I maybe make it size 18 and that would make the whole button bigger to compensate for the size of that font but if we try this my underscore button dot pack let's give this a pad why like 40 push it down screen save this head over to our terminal I'm in my ctcinter.com directory and let's run python button underscore size.5 and we get an error right unknown option font and it doesn't even know what that is so we obviously can't do that now we can get rid of that and with regular kinter we can change the size so we can set the width to like uh 30. if we save this and run it you see we get this longer button now this is I believe in font right so it's font characters 30 font characters this is not pixel so if you have a bigger font it'll be bigger characters and the button will be a different size which is kind of weird now uh this might be what you're looking for if you just want to change the size and not the font you can use with you cannot use height there is no height attribute so we can try and change this to 20. if we do we're going to get an error again and it doesn't know what height is right so what can we do well first off let's just get rid of this hyphen width I want to change the font almost always when I want to make a button bigger is because I want the font bigger on the on the button so how do we do that well we have to use a style right and this is also a little bit tricky now I have a video on Style with Kinder I'll link to it up there you can check that out if you're not familiar with style this is a slightly different use of style and I'll show you why in just a second so first of all let's change our boot style and let's make this uh success which I think is green let's save this around just to make sure yeah so we've got a green button and we want to make it bigger so how do we do that well like I said we have to use a style so I'm going to call you can call it anything you want I'm going to call it minor score style and this is a TB dot style widget okay so there's our style now we need to configure it so let's go my underscore style dot configure and inside here first we have to name it so I usually call these my DOT t button now whatever widget you're doing it's going to be T the widget so t button T label T check button Etc like I said I got a video on this you can check it out if you're not familiar with all this style stuff so there we go my t button and then we can do whatever we want so let's give this guy a font and I want to say hell vedica and then size 18. then down here in our button we have to say hey use that style so we'll set style equal to and let's put these on another line because it's starting to get a little bit hard to read and we just set that equal to my dot t button which is what we called it right here so you would think this would work and it sort of does but sort of not so let's take a look at this sure enough our button is bigger our font is bigger but wait a second this is a primary color what's going on here remember we set this as success not primary what's going on well it's overriding the uh I don't know subclass maybe that sound right I don't know it's doing something right that we don't want and it's because we called this my that's sort of what I would normally do but instead of that you need to name it what color system thing you're using right so we're using success so we need to call this success.t button and then down here when we reference it it's success dot t button now if we save this guy head back over here run it again we get our success right well that's cool and that works but what if you want to use something besides the primary secondary success info color scheme if you head back over to our documentation you remember there's all kinds of things you can use you could use outline you can use Link well I guess that's the only two things you could use outline and Link how do we use those well super easy we just add them here with another dot so if we want this to be success and outline we just type in outline now notice this is capitalized if you do lowercase won't work right it has to be capitalized that's the convention here so the name of your color that you want to use success and then whatever you want to do with it right and then we can come down here and again call success dot outline okay now if we save this guy head back over here run it again we get our success outline button it's now bigger and that works great now we can also give this more width right so we can come back over here and like we did earlier we could you know set the width equal to 20 or something come back run this guy again and now we have a wider Button as well that's it and that's all there is to it so a little complicated a little bit tricky but once you understand the tricks here and those are mainly just in the naming convention right there it's a piece of cake okay so in this video we want to look at using combo boxes with ttk bootstrap and you can see we can click on this and I've got it set up two ways one where if we select the thing we can click the button and it will update the label the other way we can just use a binding and say click on Wednesday boom it says you picked Wednesday so we're gonna look at all of this stuff in this video so I've got a file I'm just calling it combo dot Pi it's a regular starter code that we always have we've imported ttk bootstrap stb I set the theme name to superhero and we're ready to go so let's create a label I'm going to call it my label and it's going to be a tb.label and remember we're importing it as TB that's why this is TB dot whatever and we want to put this in root and I want the text to say just for now hello world and let's give this a font of helvetica with a size 18. so okay that's good let's underscore label dot pack this guy and let's give this a pad y of say 30 to really push it down the screen okay so now let's create drop down options and I'm just going to create a variable called days and this is going to be a python list and so we can go Monday Tuesday Wednesday Thursday this is very exciting Friday Saturday we should probably capitalize Saturday it's the most important day and Sunday so we've got this python list and we're going to use that to insert into our combo box to have the options that drop down whenever we click on the combo box right basic combo box stuff so now let's create combo box and up here let's say create label we don't want the label to be jealous that it didn't get its own comment right so let's go my combo call this anything you want and this is going to be a TV DOT combo box and we want to put it in a root and let's give this a boot style of say success to make it green and if you're not familiar with this color system check back the previous videos in this series I go over all that in great detail so we want to also set the values to days and that's just this list we created right there and really that's all we need so let's now my underscore combo dot pack this guy and let's give this a pad y of 20. now let's go ahead and save this and run it just to make sure this is looking okay so I'm in my cetekinter.com directory and let's just go Python combo.pi and when we do we see this drop down list it says it has all these listed when we click on them nothing happens and you'll notice by default it's blank so we can set that to anyone we want by default so let's go ahead and do that let's say set combo default and we do that the same way we do it as in regular kinter we just call my combo Dot current and we pass in the number of the thing we want to show up so python lists always start at zero so if we want Monday it's zero if we want Tuesday it would be one right so we could set that to zero let's go ahead and save this and run it just to make sure that's looking okay and sure enough now it says Monday there instead of it being blank and you notice that it's green that's the success color we can change that by changing it to primary or danger or info or any of the other the default whatever you want for your color so okay that's good so now let's create a button to where when we select one of these and click the button something happens this text up here changes super easy to do that let's create a button and I'm just going to call it my underscore button and this is going to be a TV DOT button you want to put it in root we want the text to say click me whatever let's give this a command of clicker and let's give this a boot style of I don't know danger we'll make it red right so then let's my underscore button dot pack this guy and give him a pad y of 20. okay so now we've got this clicker command and we need to create it so that when we click that button something happens so let's come up here to the top and let's define Clicker and what do we want to do we just want to change our label so let's go my underscore label dot config and let's just change the text and I'm going to create an F string and say you clicked on and then we can pass in my underscore combo dot get and that will get whatever we have selected so let's put our exclamation mark on there and okay we should be good to go let's go ahead and save this and run it see if that worked so we can click on Friday you clicked on Friday and that's all there is to it super simple now we can also bind this thing so when we so that we don't need a button at all we could just click on here say we click Wednesday the text will change to you clicked on Wednesday right so how do we do that well same way we do it with regular enter let's come down here and let's bind the combo box so once we do this the button will be pretty much irrelevant we won't need to click it anymore but I'll just leave the button there for now so let's go my underscore combo dot bind and then inside of here this is always the format you have an action and then a command of some sort and let's say click underscore bind or something like that and this is the function that will get called whenever we click the combo box and inside of here we just use two sets of these angular brackets and we pass in combo box selected right and the C is capitalized and the S is capitalized the b in box is NOT capitalized and I see people make that mistake all the time so make sure that's lowercase so combo box selected and this function will get called now we don't have this function yet so we need to come up here and create it and let's create binding function and so let's define our click bind now this is a binding and with all bindings we need to pass an event because a click is an event and that needs to get passed to the function now we're not actually going to use that for anything but it still needs to get passed because the binding will send that extra info and if the function doesn't see it you're gonna have problems so now we can just copy this whole thing and paste that in there and let's give this guy a comment too create I don't know button click function good enough okay so that should do the trick let's save this and head back over here run this one more time so now when we click on here and let's pick Saturday hey you clicked on Saturday if we click Wednesday you clicked on Wednesday and if we click this again nothing happens because it still says Wednesday and that function will get called and it'll just say you clicked on Wednesday which is what it already said so it doesn't look like it's changing But whichever way you want to do binding or using a button super easy with ttk bootstrap and it's all there is to it in this video we're going to look at the entry box for ttk bootstrap now this is super useful because you're always going to use entry boxes and there are a few different little things you need to know about it so we're going to dive into it in this video so I've got our basic starter code that we've always got I'm calling it entry underscore widget.pi and we've imported ttk bootstrap you've got a pimp install that if you haven't yet and then we've set the superhero theme and that's pretty much it so let's come down here and create an entry widget so I'm going to go my underscore entry and that's going to be a TB dot entry widget and the reason why it's TB is because I'm importing ttk bootstrap as TB up here and we want to put this thing in root and that'll be fine for now so let's go my underscore entry dot pack and let's give this a pad why of like 50 to really push it down the screen so now I want to create a button to where whenever I type something in the entry box and click the button it does something it does something with that text so let's just call this my underscore button and this is going to be a TV DOT button you want to put it in root and let's give this a boot style of like I don't know danger or something make it a red button I don't know and maybe outline as well just for fun we want the text to say click me I don't know and we want the command to equal I don't know let's just say speak something like that now we'll create this function in just a second so let's go minerscore button dot pack and give this a pad y of 20 to push down screen finally let's create a quick label let's go minerscore label and this is going to be a tv.label I want to put it in root I want the text to say I don't know hello world for now or even just nothing at all yeah let's leave it nothing at all so let's go my underscore label dot pack and give this a bad y of 20 push down screen a little bit okay so now when we click that button we want this speak function to run and let's just take that my underscore label and then dot config it and set the text equal to an F string and let's say you typed and then we put in Brackets and then we can call my entry whatever we typed into my entry so let's go my entry dot get and just put that up on the screen so let's go ahead and save this and run it see what this looks like head over to our terminal I'm in my C T kinter.com directory and let's run python entry widget dot pi and when we do we get this basic entry box we could say John elder or something like that here we see click me we click it it says you typed John Elder very simple so here's your basic entry box now we didn't do any styling to this we didn't change anything about it this is just the sort of default view right so that's fine maybe that's what you want but we can play around with this so let's do that let's head back over here and the first thing we could do obviously is let's get this a boot style as you do with all dtk bootstrap things and then we can add a color scheme here so your basic color schemes are primary secondary success info warning danger light and dark so that's for basically all widgets in ttk bootstrap we understand that we've looked at this before so let's say I want green that's success we could do that save this run it again and we misspelled boot style [Laughter] so let's go boot dial there we go now if we save this and run it again we get the box outlined in green green is success pretty cool what if we want to change the size of this thing well we do that the same way we would with a regular Kinder entry widget we just set the font equal to and let's say I want to change the text to helvetica and let's say we want the size 18 that will make 18 size text which will definitionally make the Box correspondingly big to 18 size text so that's one way we can do it save that and run it now we've got a bigger box right you typed hello now this text is uh sort of light colored light like gray something like that whatever the color that is we can change that as well let's start to add these on separate lines so we can read this easier and to do that normally with a kinter entry widget you would set the foreground to whatever color but with this we need to set the four round you need to spell it out so we can use any sort of HTML color code so zero zero three six six zero something like that or we could just you know say red or green we want it to be the same color so hey there whatever now it's green right hey you typed hey there very cool that's one way to do it we can also set the width attribute so if we come back here and instead set the width to let's say five now this is characters it's not pixels so our text is size 18 so that's 18 sized characters so keep that in mind so it's not a great way to do it but you know that's conturso you can see now it's much smaller I could go on two three four five that's five characters six so it's exactly five characters in width so you go like that if you want I don't know kind of weird I just like changing the font text finally we can make this into like a password protected deal uh let me change this to 15 and we do that using show so we could say hey show these characters whenever somebody types and we could put a little asterisk or whatever so we can run this guy again now when we type we get nothing but Stars when we click it the actual text still comes through it doesn't come through as stars it comes through as whatever you text so I I typed in John Elder here and click this it says you type John Elder this is just for like appearance sake right so that's cool we did stars but you know you could do anything you want I could put you know ampersands or whatever whatever you want this will show now we get a bunch of ampersands I'm gonna go ahead and change that back because that's just plain weird so that's the entry widget for ttk bootstrap super simple acts almost exactly as you would expect it to just like a regular entry box and uh yeah pretty cool in this video we're going to look at this flood gauge very cool we can start it we can stop it we can increment it by a few when we do we can get the correct position it's at 67. and this is something new and different that just comes with ttk bootstrap obviously there's no flood gauge in regular kinter so this is kind of exciting and really fun so we're going to dive into that in this video so I've got a file here I'm just calling it flood.pi it's our basic ttk bootstrap starter code that we always have we imported ttk bootstrap stb you got to pimp install that if you haven't already we've set the window theme to superhero and pretty much everything else is normal Kinder so let's come down here and create a flood gauge and I'm just going to call this my gauge call it anything you want and that's going to be a TB dot lud gauge and it's TB dot because we've imported ttk bootstrap as TB up here so TB goes there and we want to put this in root and we want to give it a boot style and you're going to use any of your bootstrap color styles I'm going to pick success that's green I believe you could pick primer very secondary danger info a light dark all the regular colors that you have to choose from now we can also set the font for this so I'm going to make the font a little bigger just so it's easier for us to see I'm going to set that as helvetica and give it like a size 18. now here's where it gets a little bit different so right off the bat I want to give this a mask of POS short for position right now we can keep track of the exact position of our flood Gauge by passing in just like if it was an F string you know you kind of do an F string like that it's not an F string but we put then a percentage sign after it this will automatically update with the current position as it moves up and down right so you don't have to do that but if you want it to sort of keep track of what it's doing on the flood gauge itself that's very very useful so we could do all kinds of different things we can set the maximum for instance so you know you might want this to be a hundred or you might want it to be 50 or you know whatever you want I'm just going to put it 80 for now just for fun we'll play around with this and then you could also set the Orient and by default this is going to be horizontal there you go so if you're going to do horizontal which is left to right you don't have to put your Orient in there you could just leave that out but if you want to do it up and down then it would be vertical and we'll play around with this and change it up in a bit so finally we can set the value that we want to start on so you might want to start it at zero obviously you could just leave this one off if that's the case but if you want to start at a certain level you could put it right there so now let's underscore gauge dot pack this guy and let's give this a pad why like 50. there you go so let's go ahead and save this head back over to our code and run this guy I'm in my cetkinter.com directory and let's run Python flood.pi and when we do we see pos position of 10 percent it's sort of 10 up and there we go so okay that's cool now this is kind of small we can make it a lot bigger if we want and we do that by playing the pack value so we could go fill equals x that's X left and right and I suppose we should capitalize it but not sure that matters so okay let's save this and run it and now you're going to see this is massively all the way it fills all the way left to right so okay that's you know kind of not great so we can also give this a pad X of like I don't know 20 to give it padding on each side make it a little bit nicer to look at I suppose okay so there we go so I kind of like that we'll just leave it like that so all right now let's create a button that we could start it and stop it and add some incrementation and also I'm going to change this from 10 back down to zero because I don't know I don't really need to start it at ten percent so there you go so let's create a start underscore button and that's going to be a TB dot button we want to put it in root we want the text to say start and let's give this a boot style of like danger and outline so it'll be like red outlined and let's give this a command of starter and we haven't created that yet but we will in a second so let's start unscrew button dot pack and give this pad wide like 20 push down screen a little bit now I'm just going to copy this a couple of times and this one we'll call a stop button and we'll have the text say stop and we'll give it a command of stopper I don't know and then this one will be uh we'll call this Inc for increment Inc and this will be increment and here let's call this anchor I don't know or incrementer there we go so now we want to create these three functions starter stopper and incrementer so let's come up here and let's define starter and we want to pass and let's define stopper and we want to pass and let's define incrementer and we want to pass so okay to start it's very easy so let's start the gauge we just call my underscore gauge dot start that's it now to stop it same thing we call my underscore gauge dot stop very complicated and to increment it we just call my underscore gauge dot step and then we say what steps do we want so I want it to go every 10 right so when we click the button it pops up 10 and then it stops so we can go ahead and save this and let's run this and it should work out okay let's see what we got so here we have start stop and increment so let's start and you can see it just one at a time goes like that we could stop it by stopping and now we can increment so 52 62 72 and then once it gets to the top it just starts on over again right so that's kind of cool and there we go now one thing I'll mention is how it comes to the end and then it starts over at zero that's because of the mode so you can change that if you want when you define the flood gauge so here we can set the mode to and the default is determinate right that means keep on going basically but we can change it to indeterminate if we want if we save this and run it you'll see this sort of uh ping pongs back and forth from start to finish so we go start and you can see one it looks different the gauge itself is not full but when it hits the end boom it pops back down and it keeps going and it keeps counting so we're at now 180 100 200 240 and it's going up to 80 which is what we set our value our max value at so this is kind of weird you may want that for some reason same thing works with increment it will Bop back and forth as you increment it so just sort of keep that in mind I'm going to change it back to determinant because indeterminate it's just you know freaking me out so let's come down here and let's create a label now so my label this is going to be a TV DOT label we want to put it in root and we want the text to say I don't know position something like that and now it's my underscore label dot pack give this a pad live 20 push it down screen a little bit so with this label we want to update it every time we hit the increment button to show us exactly what position we have and you can use this to get the position of anything even when it's in starting and stopping but we're just going to do increment one because that's easiest so we can come up here and go minor score label dot config and set the text equal to and I'm going to create an F string and go position and then pass in this is going to be my underscore gauge dot variable dot get so that will get the current position that's that variable and this gets created automatically with the with the widget and it keeps track of that automatically so you can at any time see where your position is in your flood Gauge by calling the name of your gauge dot variable and then dot gets or like an entry box dot get it right so let's go back over here try this guy again we're at position zero let's increment at one and it says boom 10 20 30 40 50 60 70 and when it hits 80 boom it starts over at zero and again we can start and stop here and now it's 34 if we click it again boom 44 so any position it currently is at it will keep track of that so very cool and very interesting now just to make sure here we can come back over here and make sure that this is a number it's supposed to be a floating Point number but let's see if we can add 10 to it just to make sure so if we increment it boom now it goes to 20 because it's 10 plus 10 right so 30. 40 and we're good to go so it's definitely a number you could do numbery things with it you don't have to convert it from a string like sometimes you have to do with things and that's very cool so I'm gonna get rid of that so that's the plug gauge pretty cool fun little widget and I'm really happy to see these little extra things popping up in in ttk bootstrap and makes it a lot of fun to use and all kinds of cool things you can do with this and that's all there is to it in this video we're going to look at this calendar widget for dtk bootstrapping technically it's called the date entry widget and I'm going to show you how to use it how to get information from it some interesting things you can do with it and should be a lot of fun all right so I've got a file I'm just calling it dater.pi and it's our basic ttk bootstrap starter code that we always have so we're importing ttk bootstrap as TB not as ttk but stb because that's the way I like to do it and pretty much everything is the same as regular Canter let's come down here and create a date entry widget so I'm going to call this my date and this is going to be ATB dot date entry widget we want to put it in root and just like everything else in ptk bootstrap you can give this a boot style and pick any color you want so you know primary secondary danger info light dark all the basic colors that come with ttk bootstrap if you're not familiar with those colors check the previous videos in the series and learn all about that so I'm just going to do Danger let's do red all right and for now let's just leave it at that so let's go my underscore date dot pack and give this a pad y of like 50 to really push it down the screen so if we save this and run it head over to our CTC kinter.com directory and around python data dot Pi we get this widget and it's red because we set the boot style to danger and we click on it it's got red here and we can click on a certain thing and when we do it updates in this box here so if we click on the 13th it updates to the 13th and that's cool so one thing to keep in mind is this is basically an entry box so when we want to get whatever's in here we have to get the entry box for this widget I'll show you how to do that in just a second but this is basically it so this is cool and we can play around with different settings in this you know what the default start date is and things like that so let's go ahead and look at that but first let's say somebody clicks on February 14th now it says 214 23 here how do we programmatically get that and do something with it in our program right well super easy let's come back over to our code and I'm going to create a button I'm going to call this my underscore button and it's going to be a TB dot button you want to put it in a root we want the text to say get date something like that we can give this a boot style of let's say danger and outline so it's red but outlined and let's give this a command of I don't know 80. something like that whatever so we don't have this function we'll go ahead and create it but first let's my underscore button dot pack this guy give this pad y of 20 push down screen a little bit finally let's create a label so my underscore label and this is going to be a TB dot label you want to put it in a root we want the text to be nothing for now and let's minor Square label dot pack this guy and give it a pad of Y of 20 push down screen now maybe we do want to put something here so let's say you picked something right so okay we've got these things now let's come up here and create that function so we want to Define dati all right so let's say we want to grab whatever the person selected as the date and update this label with that information how do we do that well we can grab the date and to do that let's go minerscore label dot config and let's set the text equal to now I'm going to create an F string and I'm going to say you picked and then we want to pass in something into this label and what do we want to pass in well remember we called our calendar my date so that would be my date dot entry dot get and this is just the dot get that you would use for any entry box in kinter right we're just getting whatever's in there so let's go ahead and save this and run it make sure that worked and back over here run this guy so let's say we select again 14th Valentine's Day it's my birthday coming up all right we click get date and it says you picked 214 2023 now what exactly is this returning is this returning a date a date time object what well actually this is just returning a string so you can't do date time stuff to it unless you convert it into a date time object which we can do that if you want but just keep in mind this is not an integer it's not a float it's it's just a string of text right so okay that's cool now let's configure this thing a little bit so by default it just opens up to whatever date the day is so today is the 31st of January so if we you know run this guy again we could see it just says 131.23 that's just today's date so if you want to set a specific date either when it opens or programmatically or whatever you could do that and to do that let's head back over to our code and when you define your widget right here we can set the start date we can set that equal to something now this is actually a date time object this is not a string so in order to use date time stuff we need to import date from python so let's come up here and go from date time we want to import date so now we can create date objects and we can use them so here we just want to call the date function create a little date object thing and here we can set the date to whatever we want now the format is going to be year so 2023 let's say we want the month of two which is February and we want the day of 14. so if we save this and run it we see by default now it shows up as 214.23 if we click this at 214 23 is selected now of course we can still change it to say the ninth if we click the date it says hey you picked the ninth so that's cool so one other thing I want to point out look at this it starts on Sunday right Sunday is the first one listed in this very first column and it goes Monday Tuesday Wednesday Thursday Friday Saturday we can change that we can change with the default start date so maybe your calendar you want it to start on Monday right that's not unusual so how do we get Monday to be the First Column well Sunday is technically the sixth day of the week in Python so it starts at Monday zero one two three four Saturday is five Sunday is six so we could change What's called the first week day to change that First Column so just up here in our quote our code here where we Define our widget I'm just going to set the first week day to zero so remember Monday is zero it's sort of like a python list right they start at zero and so in the world of python Monday is zero or at least for this widget right so if we want Monday that's Zero by default this is going to be six which is Sunday but we want Monday so just change it to zero so we save this head back over here and run it and we click this now we see Monday as the First Column listed and Sunday's way over here so okay that's cool nice that you can change that very quickly and automatically all right so that's basically pretty much all you can do with this which is very cool already but let's say you want to instead of having a thing pop up like this when you click on it maybe you want a button that you can say hey pick the date and you don't want this whole thing on the screen but you still want the functionality of this thing how do you do that well we can do that too let's head back over to our code so up here at the top we can from ttk bootstrap dot dialogues so this is basically a dialog box we want to import query box right so if we save this now let's come down here and let's create a second button let's call this minor score button now actually let's just copy all of this because that's going to be easier so let's change this to my button two and here let's say get calendar Maybe and instead of Danger let's call this I don't know success just change the color a little bit and let's just change the command to thing because I'm being lazy so now we can come up here and let's define thing and let's just set some variable I'm going to call it thing or Cal let's call it cow short for calendar and we could set that equal to just a query box right which is what we imported right here so now let's update our label let's go actually let's just grab this and pop this out instead of my date.entry DOT get this is going to be Cal dot get underscore date because up here we're getting that entry box because this whole date entry widget has sort of been created for ttk bootstrap but underlyingly it uses the date entry ttk widget right and that thing to use it and grab a date use this get date function right so we're going to be using that for this query box so we would call get date right so okay that works let's go ahead and save this and run it see what this does so here we've got this get calendar when we click it boom up Pops our own brand new independent of this thing over here date entry calendar thing and you'll notice the color is primary I'm sure you could mess around with this change color I didn't even try but you would probably want to do that or just understand that it's going to be primary one of the two so now I'm going to click on January 12th when I click on that boom it updates to 1 12 23 and so we get the date there we can change it again to the 20th boom it updates to the 20th now we can still use this guy up here and February 10th click get the date boom February 10th so you know whichever of these two methods you want to use if your program is more suited to have this thing right here pop up on the screen and you know just always be present then use this right totally fine if you don't want this whole thing up on the screen all the time and you just want to call a calendar whenever you want to call a calendar then use the second method hit calendar boom up it pops do your thing and you're good to go so that's the date entry widget for ttk bootstrap very cool super useful very very nice looking I mean this thing looks great super useful super functional and pretty easy to use in this video we're going to look at frames and labels with ttk bootstrap now this may sound a little boring but there's a couple cool things here that you're going to want to know about so it should be pretty cool so I've got a file I'm just calling it framer.pi it's our basic ttk bootstrap starter code that we've always got got the theme name set to superhero and let's come down here and create a frame so I'm going to call this Miner score frame and this is going to be a TB dot frame because we're importing ttk bootstrap as TB and we just want to put this in root now we can give this a boot style equal to all of the other boot style options we've looked at so you could change the color to Danger primary secondary info success light dark all those things so I'm just going to start out with light see how that goes so let's go minerscore frame dot pack give this a pad y of like 40 or so really push it down the screen so okay we've got this thing but there's nothing in it so let's just put some stuff in it so let's build a quick entry form so I'm going to call this my entry and this is going to be ATB dot entry and we want to put this in my frame so to put things in frames you just reference them like that and let's give this a font of helvetica and size 18 just to make it bigger so that it expands our frame a little bit and let's go my underscore entry that pack give this a pad y of like 20 and a pad X of 20 to push down screen inside the frame okay so let's also create a quick button so let's go my underscore button and this is going to be a TB dot button we want to put it in my frame as well I want the text to say click me all right and we can give this a boot style of anything we like so I'm just going to give this a dark color and let's give this a command of I don't know thing or something like that we'll create this function in just a second so let's get my underscore button yeah pack give this pad wife 20 and also a pad X of 20. okay so I'm going to come up here real quick and create that function and for now we'll just pass okay last but not least let's create a label so this video is about frames and labels and we've got labels in ttk bootstrap we've already used them in past videos but I'm going to talk about them a little bit because there's something cool about them that you're going to want to know about so let's call this minor Square label and this is going to be a TB dot label and let's just put this in root let's put it outside of the frame and let's give this a text of hello there something like that and it's also give it a font of helvetica and a size 18 to make it nice and big and then that's my underscore label that pack this guy and give him a pad y of 20. so let's just save this and see what we've got so far so head over to your terminal I'm in my ctkinter.com directory and let's just run python framer.pi and when we do we've got this Frame this it's a light color frame we've got a button that doesn't do anything we've got an entry box that doesn't do anything and we've got a label that just has the default text which is in this theme light colored so okay that's pretty much what we would expect now we can change the color of the label we already know how to do that we just come down here and let's give it a boot style of anything we want we could say success if we want make it make it horribly green and ugly save that run it and we've got now green that's the success color right so okay that's cool but we can also do something else with these labels we can invert them so that's really kind of cool so let's come back over here so we could just give this a boot style of inverse so inverse so all right let's go ahead and save that see how this looks and now it's inverted it's got like a little background around it right so that's kind of cool right so it looks ugly like that but in this instance to make it look cooler I would probably give this a light theme like that save that and run it and now it kind of matches that that's kind of cool so this gives you a lot of flexibility to make your app look a certain way if you needed to and uh very cool now we can also change the color of the frame if we want which you know you probably would want to do that so instead of light let's make it dark whatever go ahead and save it run it and you can see now it's dark that's kind of cool right the button kind of disappears so you would probably want to change the color of your button change the boots down there now you can use all of the boot style colors for both of these labels and Frames like I said so you know info success danger primary secondary uh what are the other ones like dark there's a couple more you check the prior videos in this series to uh check those out if you're not familiar with them yet but very cool now one thing I want to mention a lot of themes have background colors so you may not be able to match the theme color to the frame and there are times when you just want a frame to be invisible and you want to be able to do stuff in that frame for instance like if we're packing everything on the screen but we need to grid certain things I would put them in a frame because then you can Grid in a frame right we've done this lots of different times so if that was the case you just wanted to make it invisible what you could do is head over to your code and instead of making making this a TV frame just make it a regular bootstrap frame right so then you just have to get rid of the boot style because regular T Contour frames don't have a boot style so I'll just comment that out if we save this head back over to our terminal and run this now we've got the frame but it's invisible and we could do things like grid inside of it or whatever you want so keep in mind even if you may be using the dtk bootstrap Library you can still use the stuff from old kinter if you want or ttk if you want to you just have to import it like normal so very cool those are frames and those are labels that's pretty much all there is to frames and labels it's not that exciting I get it but very useful you know something you're going to use in every app that you ever make so I thought I'd talk about it in this video we're going to look at the menu button and these are the menu buttons so uh we've got you know I've got this danger colored one and we can change the color I click primary it changes the primary secondary danger info we can do outlines that looks pretty cool outline secondary ooh outline danger and you can see the little text updates every time I click something so that's what we're going to look at in this video so I've got some starter codes we've always got them calling it menu underscore button dot pi and we're using the superhero theme for ttk bootstrap we've imported the library right there and here we go so how do we build these things well they're a little complicated but not too bad so I'm just going to create a variable I'm going to call it my underscore menu and this is going to be a TV DOT menu button and it's TB because I've imported dtk bootstrip as TB and we want to put this guy in root let's give it a boot style of like warning I think that's orange maybe I don't know whatever and then let's give it some text and let's just have it say things I don't know this is the text that's going to appear before you click on anything so before it's opened or clicked on that's the text it'll show up so things all right whatever so then that's my underscore menu dot pack and let's give this a pad y of like 20 really push it down screen so let's save this and run it just to see if that worked should have so let's head over to our terminal I'm in myctkinter.com directory and let's run python menu underscore button and when we do we get things when we click on it nothing happens because we haven't told it to do anything yet so okay that looks good head back over here and I'm gonna push this down a little bit give it a 50 instead of 20. Okay so we've got this guy but now there's nothing inside of it now to put things inside of our menu button we need to create basically a little menu inside of our menu button so let's create basic menu and call this anything you want but I'm going to call it inside underscore menu because you know if we called it menu is it the menu button is it the menu It's Complicated so I'm just going to call it inside menu because it's inside of our menu button but you know call it anything you want so this is going to be a TB dot menu and then we need to pass in my underscore menu which is just what we named our menu button up here right this whole thing so okay that looks good now we can add items to our inside menu right so first these are supposed to have variables assigned to them I don't use the variable because I just find you don't need to we have to add a label we can use the label as the variable but if you need to use a variable you call the same thing you want I'm going to call it item underscore variable because you know it's an item we're adding to the menu and then we just give this a string VAR right this is just akinter string VAR variable thing right you're probably familiar with those so now we need to create a list of items that we want to put in our menu and then sort of loop through that list and add them to our menu so let's do that with for Loops let's go for X call it anything you want in and now let's just create our python list of things we want so I want to put different colors in there different boot Styles so when we click on it we can change it so we'll start out with adding primary we could do secondary like that we can do danger that's the red color we could do info you can also change these to be outline instead of solid so let's go outline primary and outline secondary and just do a few of these because it's pretty boring the outline uh what say danger Maybe and what outline info I think that's good enough so we need a colon at the end of this because We're looping right this is a for Loop there we go now what are we doing as we Loop well we're adding things to our inside underscore menu and what are we doing we're adding actually a radio button all right you can add a check button but that gets a little goofy we want a radio button because we only want to select one thing at a time so all right add a radio button and then we're giving them a label of X which is what each of these will are right and now if you want to give the variable you can add the variable of our item underscore VAR I never really use that but if you wanted to you could and that would be how you do it so okay that looks good so the last step we need to sort of associate the menu with the menu button so let's associate the inside menu with the menu button so to do that we just call my underscore menu which is the name of our you know menu button and then inside of here we're going to assign the menu to it and what menu are we going to assign we're going to inside our inside underscore menu okay so let's go ahead and save this and run it see if that worked we ran through that pretty quickly so python menu button.pi and now when we click on this boom we see each of these things very cool but when we click on them nothing happens so how do we get it well it does put a little check box next to it so that's fun so how do we get it to where you know when we click on a thing it does something well that's a little tricky but it's not too bad now normally we would come over here and we would assign a command equals something so let's come up here and create a command called stuff right and what do we want to do well we want to take whatever X that we clicked on and pass it into here as an X and we want to do something with it right well normally you would call stuff but we also want to pass in that X right well whenever you want to pass things in to a function from a button which is essentially what this is in kinter you can't just do that you need to create a Lambda so if we create a Lambda Lambda and now I know this looks like a capital l but it's actually a lowercase you would think that this would work but it doesn't and I'll show you why so let's come up here and let's just print X or better yet let's come down here and create a label real quick so I'm just going to call this Miner score label this is going to be a TV DOT label we want to put it in root we want the text to equal nothing right now and then that's my underscore label dot pack this guy and give it a pad y of like 40 to really push it down the screen but now let's come up here and let's configure our label so minor Square label dot config and we want to set the text equal to X for now right so let's run this and see what happens this is not going to actually work so here when we click on primary boom it's outline info which is the last thing if we click on secondary boom it's outline info which is the last thing why well think about it as this thing is looping it adds X into our function up here well it does it for primary primary gets passed in and it does it for secondary secondary gets passed in danger info outline Ally and outline until it comes to the very last thing outline info it passes it into the function and then boom X becomes outline info now we don't want that it's overriding all the older ones that went in so how do we change that well super easy we just come up here and let's inside of here say x equals x that's all we have to do that should fix this so here I'm going to make a little F string and I'm going to say U selected X okay so let's save this and run it and see if that works it should so now when we click this thing when I click primary boom it says you selected primary when I click info it says boom you selected info when I select outlying danger boom you selected outline danger now this doesn't update yet we have to change that but at least we're passing the right thing and this is why I don't use a variable with this why do we need a akinter variable we've got the label we can do things based on that label if we want we could do any logic we want so that's just my rant finally we want to change our my underscore menu we want to dot config it we want to set the boot style to X so that will change the actual color because when we defined our menu button we set the boot style to warning so here we can update that boot style with whatever we clicked on in the button in the drop down and so that should be fun so let's run this guy one more time see if all this worked so now we click primary boom it changes to Blue primary secondary Danger info we got the outlines I like the outlines the best I think those look pretty good so outline primary outline secondary outline danger like that one outline info so that's it that's menu button now you can play around with the size of the text and the colors of the background and the foreground and all that using a regular style widget and I've got videos on style widgets earlier in the playlist I think the button video we did we also talked about style so you can watch that if you want to change the the backgrounds of this of these things but uh yeah pretty cool and pretty easy so that's menu button with ttk bootstrap and that's all there is to it in this video we're going to look at the meter widget in ttk bootstrap this thing is awesome and very customizable we could do all kinds of stuff with this you can see I've got it going up to 120 you could change that to whatever you want you can see there's these sort of dotted outline you could also make that solid you could change the color you could change the text you can increment it by any amount here I've got five percent you can step up by any amount here I've got ten percent step down you can do by buttons you could do it by dragging and dropping and that's we're gonna look at in this video all right so I've got a phone I'm just calling it meter dot pi and it's their basic ttk bootstrap sort of code that we always have and you can see we're using the superhero theme we've imported ttk bootstrap as TB and the rest is just basic stuff so all right let's go ahead and create a meter so I'm going to call this minor square meter and this is a TV DOT meter widget and again we're calling TB dot because we've imported ttk bootstrap as TB now inside of here there are tons of attributes that you can play around with so just to get started we want to put this in root and let's give this a boot style of like danger to make it red and again all your ttk bootstrap colors are available here so primary secondary danger info success light dark all the other ones are available so okay let's just my underscore meter dot pack this guy let's give this a pad y of 50 to really push it down screen now one thing you're probably definitely going to want is the subtext so let's go subtext equals and I'm just going to say um hekinter learned this is a meter on how much tkinter we have learned so let's go ahead and save this and just see what we have right out of the box here so let's head over to our terminal in my ctkinter.com directory and let's run python meter dot pi and when we do we get this empty zero this empty circle with a zero in it says decanter alarm so okay if I click on this nothing actually happens so we don't have much going on here if I click on this nothing happens so first let's play around with being able to click on this and drag and drop you have to specifically set that up so let's come here and I'm just going to put all these things on separate lines so they're easier to read and to do that we type in interactive so do we want to make it interactive yes we do right so let me just do this because we're going to do a lot of these so let's save this and run this and see what we have here so now when I click on this I can drag it and drop it and you can see by default it goes up to a hundred and that's very cool so if I leave it off it just you know stays where it is so all right that's interesting what if we want something next to the number so 75 maybe we want to make this 75 percent or maybe on the left side we want to put a dollar sign what do we do to change the basically the label inside the main label oh we could do that we can just change the text right to anything we want so if I wanted a percentage we could do that we could also do text left you know if we wanted a dollar sign we could do that so if we save this and run it you can see in tiny little text we get this dollar sign and percentage sign and you could play around around with the font size and we'll look at that maybe a minute but I'm going to take off that dollar sign because that's silly but just keep in mind that's how you would put that that would be text left obviously so I'm just going to comment this one out so we can create a meter type by default this is set to full we can also have it semi so let's go ahead and save this take a look at what this looks like and here you see it's not all complete right it's just semi so that's a little weird I'm gonna go ahead and put it back to full but I'm also going to comment can be semi all right we can play around with the stripe thickness and I'm just going to set this to let's say 10 if we run this now we get the sort of dashes right so that's cool I really like the look of that and again you can change this to any number you want you know we could do I don't know 50 to make it really well let's just see really big so one two three four five right whatever maybe you want uh just five make it real skinny right so you get these like almost tick marks that's cool personally I like ten but uh anything you want you can do that we can change the meter size so let's send this to 200. if we save this well let's change it to 400 make it really big you can see whoa we've got a really big meter size now right that's cool likewise you can make it smaller by just you know make it get smaller so I'm gonna put this at uh 200 or so save this run It Go very nice and just that easy we can give this thing some padding right so let's go padding equals and let's just blow it out let's say 50. can't really tell the difference maybe it's padding on the outside probably so leave that at 50. we can set the amount used so let's say we'll set it to 20. this is sort of like the default what it is when it starts right up all right so by default boom it's just already at 20. all right so that's interesting we can also change the amount total and let's say I put it at 150. so before we had it at 100 100 now it's 150 as as high as it'll go so so if we run this you can see it's still at 20 by default if I drag it all the way up 130 140 all the way up to the top is 150. Right personally I would always keep it at 100 because you know you're usually doing like a hundred percent a lot of times when you're using a meter of some sort it's a percentage but if you need it for any other thing that's how you do that and uh very cool now there are lots of other things you can play around with this very quickly let's head over here to the documentation we could go to ttkbootestrap.readthedocs.io if you click on the style guide It's not that useful come down here to meter it just shows you basically the basic functionality so I should mention you could also change the subtext color and that's just with subtext Style so let's just come down here give it a sub subtext style of let's say I don't know success something like that save this run it and now the subtext is that green success color that is hideous right so uh let's just give this um I don't know let's call it dark let's say light I think that's maybe by default with this theme yeah so by default that's light colored very cool so like I said there's not much stuff right here but if you want the information on this you can go to the API section up here and then come down here in the widgets module click on meter and then here we get the API documentation which is much more complete so these are all the things you could play with so Arc range you could do amount total we did that amount used widget size meter size boot style we did that meter type Fuller semi we did that meter thickness we did that show text interactive we looked at that stripe thickness we looked at that text left text right text font if you want to change the font size for the text in the center you could use that subtext we use that subtext style we just did that subtext font again you could change the size of that if you want so Dash size 10 and then we have step size we'll take a look at that in just a second so pretty straightforward that's how to make it look certain ways now how do we actually use this so let's say I drag this around and I end on 78 I need to know that it's at 78 programmatically how do I do that how do I know what it's at further how can I change it by like maybe clicking on a button to increment it a certain amount how can we do that well let's take a look at that now real quick super easy and let's come down here and let's create some buttons so I'm going to call my underscore button and this is going to be a TV DOT button we want to put it in root we'll have the text to say click me and let's say five right so we want to click it and move the thing five so let's give this a command of clicker I don't know and that's my underscore button dot pack this guy give it a pad y of 20 push down screen a little bit and now let's create this clicker function now first let's just there's several there's a couple different ways you could step it up or down or you could set the amount used attribute of the wages so if we want to just create a counter real quick Let's Go Global counter and let's also just really quickly set this up here Global counter and let's set the counter equal to five or something to start out with and then inside of here let's say my underscore meter dot configure and then we want to set the amount used to our counter and then every time we click it we want to increment our counter so let's go plus equals five right now if we want to keep track of that let's keep track on the button so that's my underscore button dot configure and let's set the text equal to Let's create an F string and let's say click me and then inside of here let's pass my underscore meter so to see what the meter is actually set on at any given time you can call the amount used VAR so this is a variable and this needs to be a period so this is a variable sort of like a kinter variable that will keep track of this so to get it we need to dot get the amount used for so okay that looks pretty good except oh this should be amount used not amount user anyway all right so let's go ahead and save this and run it see how this looks okay so we started at 20 we want to click me five boom it goes to five percent now it does not go to 25 because we just didn't program it to do that we could easily have set the counter at 20 to start with and then incremented at 5 but we didn't do that anyway you get the idea 5 10 15 20 25 30 35 40 45 50. all the way up now if we hit 100 and keep going this will just keep going so it keeps spinning right so we can programmatically fix that if we want and also let's set our counter at 20. just because and then to fix that we would just come into our thing here and let's just say what let's go if counter is less than or equal to 100 then do all this stuff and I'm just going to tab it all over all right that looks good oh let's save this and run it we start at 20 boom it goes to 25 30. all the way up to 9500 we keep clicking at 100 it doesn't go past 100. so that's one way you can do that so that's how to sort of increment it manually if you just want to set the amount used and you could do that there's nothing wrong with that there's sometimes you probably would want to do that but there are even better ways to do that we can step so let's grab this and let's copy and paste a couple more buttons in here and I'm gonna call this my button two and my button three so then here as our text instead of Click me five let's say Step Up and here instead of Click me five let's say step down and let's give this command of up and let's give this one a command of down so all right let's go up and create these two functions so let's define up and let's define down so here we can step up in any amount so let's just go my underscore meter dot step and then inside here we pass however many places we want to step so if we want to step 10 we could just do it like that same thing with down it's the exact same process instead of 10 though it's let's say we want it to go negative 10. right just that easy and uh kind of all there is to it now let's make this a little bit bigger so these all fit 570 has come back over here and let's see let's run this guy now one weird thing about the steps that still didn't quite fit uh we started at 20 if we step up from here it'll go backwards so it goes ten five it's zero now to go four again in 10 in steps so just sort of keep that in mind so if we run this again and we want to step down again it goes the opposite direction so if we start actually let's just start at zero here just to make this easier to follow so amount used let's put this at zero okay so now if we run this guy again and again not quite big enough so if we step up boom 10 20 34 56 78 90 and then it just goes back down again right so we're stepping up now we can step down boom and this one once it hits zero it keeps going negative right so again you could programmatically change this with an if statement like we just did with the first function I'll leave that to you guys so very cool right and even when we're stepping up and down we can still grab this guy and move it around all right and as always you can still always no matter which one of these you you use you can always find whatever the current thing is like for instance right now it's 82. we can always grab that just by referencing this amount used VAR and then getting it like that so very cool and uh a lot of fun I don't know about you guys but this is one of the things that makes me really like ttk bootstrap it's these little things that have been added that aren't a part of regular kinter this meter thing is really cool I mean you can do all kinds of cool stuff with this and it's really easy to use and very configurable as we could see we could change all kinds of stuff with this and it's pretty easy to use in this video we're going to be looking at notebook tabs with ttk bootstrap and this is what we're doing here we've got these little tabs here and on each one we can have different stuff and we can style them different ways and all that good stuff and that's what we're going to look at in this video so we've got our basic starter code that we've always got I'm calling it MB dot pi and we're importing ttk bootstrap we've pip installed that obviously and we're using the superhero theme so let's come down here and create our notebook now these things are tabs but it's called a notebook so it's kind of weird we're just going to name this my underscore notebook and this is going to be a TB dot notebook and it's TB here because we're importing ttk bootstrap as TB and we just want to put this in our root window and let's get this a boot style of and I'm going to give this blue style of dark now you can use all your boot style colors for this primary secondary info success danger dark light and all that so keep that in mind and that's really all we need to do now that's my underscore notebook dot pack this guy and I'll give this a pad y of like 20 to kind of push it down screen a little bit so the trick to this thing is you add frames as the tabs right so you create a frame you put whatever you want in that frame and then you add that frame to The Notebook so let's create a frame I'm going to call it tab one right and this is going to be a TB dot frame you can also use a regular Kinder frame but it's going to be kinder colored so we want to use tp.frame and we want to put this in my underscore notebook so I'm going to copy this and let's create a second one and I'm going to call it tab 2. so we've got these two frames now we just need to put stuff in them so let's just play around with this I'm going to create a label this is going to be a label we want to put it in tab one right so the text is going to say my awesome label all right it's a very awesome label and you know just for fun let's give this a font of and let's say helvetica and like a size of 18 to make it nice and big and then we could just my underscore label dot pack this guy and let's give this a pad y of like 20 push it down screen inside the frame a little bit and then we could play around with this let's create a text box I don't know this is going to be my text and it's going to equal a regular text box now notice this is not a ttk bootstrap text box just a regular text box that's fine uh we can put it in tab one as well and let's give it a width of like 70 and a height of like 10 just to sort of expand it a little and again we can my underscore text Dot pack this guy and I'm going to give it a pad y of like 10 maybe a pad X of ten two just for fun mix it up and finally let's create a button just one little button and this is going to be a TB dot button we want to put it in tab one again and want the text to say click me or something like that and let's give this a boot style of like danger and outline so it'll be red outlined okay and then finally that's my underscore button dot pack this guy and give it a pad y of like 20 push it down screen a little bit so we've got our first tab our first frame filled out now let's create our second one and I'm not gonna be as elaborate with the second one let's just create a label in fact I'm just going to come up here and copy this guy and instead of calling it my label let's call it my label one or probably my label two would make more sense and then this is going to say this is tab two all right capitalize that and instead of putting it in tab one right here let's put it in tab two so okay that looks good now let's add our frames to The Notebook now we haven't added them yet so we've got this tab one and tab two and to add them we call my underscore notebook dot add and then we just say hey tab one and we want to give this some text so I'm just going to say tab one let me copy this guy paste it again call tab two and on this one we're gonna call Tab 2. right and that's it so this text is the little text that's going to be on the little tab at the top of our notebook a little panel thing uh so there we go all right that looks pretty good let's head over to our terminal I'm in my ctkenter.com directory and let's try on python NB dot pi and boom here we go so we've got tab one and tab two inside of tab one we've got our label we've got our text field we've got our button that doesn't actually do anything but it looks good and tab two we have just some text that says this is tab two now I've got this set to the Dark theme for this notebook and this looks pretty good right so when you click a tab it highlights otherwise it's sort of muted and dark I like that but you can use all of your boot Styles so if we come up here to where we Define this thing instead of dark if we want to say info for instance I don't really like the boot style colors with this and you'll see why here see here it is now it looks like Tab 2 is highlighted like we've selected Tab 2 but we haven't it's the one that hasn't been selected yet but it's the one with color so it doesn't really make sense when we click on it we're now on tab two it says this is tab two but tab one is the one that sort of looks like it's highlighted so it's it's very confusing and it's not just this boot style it's any of them that you pick so if we change this to danger for instance we're gonna get the same sort of weird thing going on the non tabbed tab is the one that's highlighted which you know is kind of weird so I just sort of keep that in mind I get around that myself by just using you know dark or light uh it's still going to get the same thing with light if we see here let's look at this but it's not quite as bad right let me click on this it's still in my mind isn't great now you might be thinking what if we call like danger outline what happens there well we're getting there so you can't do that it would be kind of fun if you did if you could but uh no so I'll keep this at dark go ahead and save this we'll take one more look at this I think that looks pretty good and very neat in this video we're going to look at progress bars and they're very similar to The Floodgate we looked at a few videos ago and you can see we've got this progress bar I've got it set to striped you could also set it to solid and we've got it sort of the green color and we can increment a few things at a time we can stop we can do auto every second boom boom I've got it moving 20 and that's kind of cool we can just go automatically Zoop like that and keeps going and going all kinds of cool things you could do with this and that's what we're going to look at in this video so I've got some basic starter code of calling it PB dot Pi short for Progress bar I guess and uh we're importing ttk bootstrap as TB I've pip install that and we're using the superhero theme so it's that sort of Dark theme so okay let's just come down here and create a progress bar I'm going to call it my progress this is going to be a TB dot progress bar and it's TV DOT because up here we imported ttk bootstrap as TB so there we go and now there's all kinds of different attributes you can use for this thing we'll just sort to start walking through all of them here we want to put this in root we want to give this a boot style of you know anything you want so let's say danger that's the red color you can use all your ttk bootstrap colors for this so primary secondary info success danger light dark all the rest of them so we'll just do danger that's that red one and that's solid you can do striped if you want just by passing a striped but for now let's just do solid see how that looks now like I said we can change all kinds of things here so we can start out by setting the maximum length so let's go maximum and let me just put these all on separate lines so we can read them easier and I just want to make this a hundred if you wanted to make it 200 that's the maximum sort of number it can go to so from zero to 200 from 0 to 100 whatever I'm just going to put 0 to 100 we can also change the mode so just like the flood gauge thing we looked at a few videos ago we can set the mode Now the default is determinate and the other option is indeterminate we'll look at both of those we'll set it to determine it for now you don't have to put the mode on there if you don't put the mode it'll just be determinant by default but we're going to play with it so I'm going to put it on there and let's see what else we got we can change the length of it like how physically big it is so I want to say length equals let's say make it 200 nice and sort of long now that's not to be confused with the maximum so it might be a length of 200 like you know that big versus a length of 100 versus a link of 50 so it's 200 but it still only goes to 100 it's just the you know the bar will be physically bigger right and we can set the value to start with so if we want to set this to like 20 right out the box we could do that so let's go ahead and my underscore progress dot pack this guy give it a pad y of like 40. really push it down the screen let's just save this and run it see what we got here so we head over to my terminal I'm in my ctkinther.com directory and let's run pythonpb dot pi and when we do we get this solid red bar you can see it's 20 because we set the value to 20. so it's already got 20 on there and you can see it's you know yay length so that's kind of cool we can make it bigger we can make it smaller so that's cool so let's go back here very quickly and let's just change this just so you see to 300 and let's set the value to Zero by default on the sky again see now it's much longer the length of it is an additional 100 so that just makes it bigger so okay now what can we do with this thing so let's create some buttons so first I'm going to create a frame real quick to put these buttons in so let's call this minor score frame this is going to be a TV DOT frame and we want to just put it in root and then that's my underscore frame dot pack this guy give them a pad y of like 20 push down screen a little bit so let's say for aim and let's say progress bar and then let's come down here and create some buttons so I'm gonna call this minor score button this is going to be a TB dot button we want to put it in my underscore frame I also have the text say increment 20. and let's give this a boot Style of I don't know info make it blue or something I don't know hey let's also give this a command of uh increment so let me copy this we'll need to create this function in a second and for now it's my underscore button dot grid this guy so we'll grit this in the frame and we'll give it a column of 0 and a row of zero and for good measure let's give this a pad X of 10 to space it apart from the other buttons we're about to create so let's come up here and let's create this function let's say increment 20 and so I'm going to Define increment now let's say we want to increment this by 20. now there's a couple of different ways to do it I'm going to suggest an alternate way than the sort of standard way you might think so the standard way is just to call you my progress dot step and then say how much you want to increment it so we could just do that this doesn't work great though as we'll see here so let's come back over here let's run this guy our button is blue if we click this boom it goes up 20 40 60 80 100 oh it goes back to zero it doesn't stay at 100 when you use step and to me that's kind of annoying when it gets to the end I want it to stay filled out at the end so I can see it's done right it's just sort of in my mind that should be the way it works it shouldn't just go back to zero it's very unsatisfying right you get to 80 and then instead of Boom all the way closing it just disappears so I don't love this so I tend to not use the step method here so let's go ahead and get rid of that what you can do is call the value so let's go minerscore progress and then pass in the value attribute and then we could just plus equal 20. so it takes whatever the value is currently starts out at zero and it adds 20 to that so if we save that come back over here run this guy now every time we click this it's just going to add 20 20 40 60 80 100 it gets to the end it's all filled out it looks great I like it to be filled out at the end like that it just makes sense to me does it make sense to you it should be filled out at the end so I tend to use this method now uh it's pretty cool and that's pretty easy now let's create a quick label down here so that we can get the current value so let's come down here and let's just uh create a label and I'm going to call this underscore label this is going to be a TV DOT label I'm going to put it in root want the text to equal nothing to begin with and uh we'll just leave the boot style off for now because we don't really care what it looks like and let's dot pack this guy give him a pad why of 20 to push down screen a little bit so now if we want to Output what the current value of our progress bar is how could we do that well we come up here and let's just get current value so that's going to be minor Square label dot config and we want to set the text equal to whatever our current my progress bar is and we just pass in that same value attribute right so every time we click the button it will increase it by 20 and then output that onto the screen so if we save this and run it so we get boom it says 20 down there 40 60 80 100 very cool now I can barely read that so we're going to make this a little bigger just for fun let's come down here and let's give this guy a font equal to like helvetica and size 18. so okay that's cool so that's just increasing it you know buy a certain amount right so we've set it to 20. we could set this to any number we want ten five one zero well not zero but you get the idea so very cool very quickly let's change this to 120. so the maximum is 120 just to sort of differentiate this and the length right so if we run this real quick we're just going to see of course the the length of it's the same but now it goes 20 40 60 80 100 120 right so the maximum has changed so I just wanted to point that out in case there's any confusion there I'm going to change this back to 100 so all right what else can we do well we can have this thing automatically start and just go before we do that though let's look at this determinant thing right so if you want to do indeterminate what this will do is well one it'll change the the shape of it and let's change this from danger to Danger striped just for fun it'll change the shape of the progress bar how it's filled it'll just make a little line but it'll also continue so once you get to 100 it'll then go back down again so indeterminate means it goes up and down which you may want for certain things so if we run this we could see that right after that you can see it's different because it starts out with something and then 20 40 60 80 100 click it again boom goes down to 120 140 161.8 it just keeps adding right because we're adding in our function if you wanted to have it hit 100 and then go back down to zero you could do some logic to do that um I don't think we're gonna do that that's basic logic you would do that in here once you just run a if statement if value equals 100 then you know instead of this plus equal 20 it would be minus equal 20 right so you could do that but you get the idea so okay that's determined kind of weird I don't use it all that much but there are certain circumstances you may need to use it so what else can we do well let's have a button where we can click it and it just goes right it just kind of like starts at zero one to the other nine ten eleven all the way up to 100 very quickly so let's come down here I'm going to create this I'm gonna grab this button and let's go let's grab a couple of these so I'm gonna go my button one one two two three three we'll set this one to say Auto and let me take this command off for now this one will be stop and this one will be start and again let me take this command off and for start let's create a command called start and we'll create this function in just a second we also need to change these columns so this would be column one column two and column three so okay let's come up here and let's create just start so let's define our start function and here we could call our progress bar so my progress and then we could just say dot start and then we can pass in the increments that we want it to move so let's say 10 right so if I save this and run it and I click Start it goes all the way up and then we're still in indeterminate so it just will keep going back and forth right so if we close this let's change this back to determinant save this and run it now when we click Start it just goes Zoop and it just it keeps going now you could set some logic in here that says hey if it ever hits 100 stop but uh I'll leave that to you how do we get it to stop if we want to we've got this stop button it doesn't do anything well let's look at that right now so let's come down here to our start button or to our stop button and let's give this a command of stop we come up here let's create a stop function so we Define stop and to stop this guy we just call my underscore progress dot stop pretty simple so if we save this and run it we can start it and boom stop it just goes back to zero start stop same thing here we can increment 24 to 60 80 we click stop boom it goes back to zero now this doesn't update after that because our stop function doesn't have that on there but you could put that in there if you wanted I suppose you could just grab this and I'll put it right there so very cool and uh pretty easy now what if you wanted to Auto increment at a certain interval based on a certain time well we could do that let's come up here to this Auto button and let's create a command called Auto and to do this we're going to use the python time Library so let's import time it just comes with python we don't have to install it or anything we can just import it and let's come down here and let's Auto so Define Auto and I'm going to create a for Loop so let's go 4X in a range of say five so we want to do 20 increment blocks so 20 40 60 80 100 there's five of those in a hundred right so we're going to Loop through five times right so we can just uh grab this guy right here and and paste him in so that will do that and we also probably want to Output our current value so we'll do that and then we can time dot sleep and we want this to happen every second now if we run this this isn't actually going to work uh let's see if we run this so if we click Auto it just sort of the whole program freezes until it finishes so in five seconds boom there it goes now that's not what you want at all we want it we want to see the progress as it goes right so to do that we have to call something I don't know if I've talked about this definitely not on this channel we can call Root dot update underscore idle tasks and this is just a function that will do what it says it will update the idle task so instead of waiting until the thing is completely done it'll do them one at a time so we could say uh update one at a time not all at once or something like that and here we could say uh increment one second time whatever so now if we save this and come back over here it'll go one two three four five you know every second boom it will do that so that's kind of cool I like that when we stop it still does that here we can uh still doesn't like that and this starts over as well just keeps going as you click it you're going to want to put some logic in there that stops IT at 100. I'll leave that to you it's trivial so very cool very easy to use not a whole lot of options here you set the maximum you set the link you set the current value you can get this value anytime you want just by calling value like this and you can assign things to that value just by using a assignment operator like any old Python and you can set this mode to determine it versus indeterminate whatever floats your boat and uh very cool in this video we're going to look at radio buttons for ttk bootstrap now we're going to look at the actual buttons these round things we're also going to look at radio buttons like the actual buttons here so you can click and it'll go from one to the other they act in the same way as radio buttons but they look like actual buttons so that's what we're going to be looking at in this video so I've got some basic starter code that we've always got I'm calling it rad dot Pi sure for radio I guess radio button whatever we're importing ttk bootstrap as TBF pip installed that already and we're using the superhero theme so let's come down here there's a few different ways to make radio buttons and I'll show you a couple different ways in this videos but I like to create a python list that'll have all the things that I want to make buttons for and we just Loop through that and create buttons for each one but I'll show you a more manual way to do it also later on in this video so let's uh create radio button list so I'm going to create a list called toppings and this is going to be pizza toppings or something so let's go pepperoni and we'll just do a few of these we also want cheese pizza and and we also want what veggie pizza or something like that so it's just a basic python list nothing really interesting to see here but now we also need to create akinter variable keep track of everything so we want to know when you click on a button which button you've clicked on so we need to enter variable for that and Kendra has these special variables you can have string vars or int bars we're going to use a string bar for this so I'm going to call this my underscore topping and we're going to set this equal to a string VAR just like that and that's all there is to it so now let's Loop through the list and create radio buttons so let's go for topping in toppings right so remember Toppings is our python list we're going to Loop through it for each topping in there what do we want to do well let's create a TB dot radio button and notice the B and button is lowercase I have a tendency to want to make it uppercase but it's lowercase and we want to put this in root and now we have to pick a boot style and just like everything in ttk bootstrap you can use all your basic boot style styles so primary secondary info danger uh dark light all the things so let's create uh let's do danger so danger is red so we'll create red ones and then now we need to set a variable well we know what our variable is we've defined it right here as my topping so let's pop that in there now we also want to designate the text what is going to say on the actual radio button itself what text should it be well I think it should be topping right so for pepperoni it'll say pepperoni for cheese it'll say cheese for for veggie it'll say veggie now like I said there's lots of different ways you could do this you can use a list of tuples and then you know have a different name and a different thing you know so instead of pepperoni it might be pepperoni and one cheese and two veggie and three you know so you might put the name here and the the variable there like I said there's lots of different ways to do radio buttons they all work with bootstrap so we're going to do it this way and we also need to set the value the value will also be topping so whenever somebody clicks on it what do we put in this variable well we put whatever that topping is right so my topping the variable will become pepperoni my topping the variable will become cheese Etc so okay that looks good now we can also dot pack this right here if we want give this a pad while like 20 push down the screen a little bit and that looks good now notice we didn't name this we didn't go like my underscore button equals like we normally would since We're looping through here we don't need to do that and since each of these have a variable we don't need to distinguish between each one they're all going to be the same right so if we click on one that means definitionally the other ones can't be clicked on that's what a radio button is you can only click on one at a time so we can do it this way so okay that looks good now there's a couple of different ways to figure out which one you've clicked on you can either create a button and then whenever you click that button it'll sort of like submit it and then you can do something or you can add a command right to the radio button we're going to do both here just so I could show you kind of uh how to do that so let's create button and let's just call it my underscore button this is going to be a TB dot button we want to put it in root I want the text to say something like click me all right and let's give this a command of uh clicker right so we're gonna click the button and run this clicker function so before we do that let's my underscore button dot pack this guy put it on the screen give it a pad y20 kind of push it down screen a little bit so while we're at it let's also create a label so we can output when we click on something we can output it on the screen hey you clicked on whatever pepperoni right so I'm gonna call this Miner score label it's going to be a TB dot label we want it to be in root and we want the text to start out saying you selected colon nothing right so then let's go minerscore label dot pack give this guy a pad y20 push down screen a little bit okay so now we've got this clicker function we need to create so let's come up here and create it so let's go clicker function and let's define Clicker and here we just want to change the label so let's go minerscore label dot config and we want the text to say let's create an F string and let's say U selected and then let's put in a variable so what variable well it's this variable right here right our string bar variable so we want to uh my underscore toppings dot get this right and that's a function so put your brackets there so that's all there is to it let's go ahead and save this and run it make sure that worked so head over to our terminal I'm in my cetkinter.com directory and let's run Python rad.5 and when we do we get pepperoni cheese veggie that looks good you selected nothing when I click on veggie you can see it's red because we selected danger the boot style of danger is red right now if we click this button it says use selected veggie and we're good to go that's all there is to it so cheese cheese pepperoni so that's awesome very easy but what if you don't want to use a button right what if you just want to click cheese and have it automatically update well very very simple so let's come down here and right here in our button we've given it a command of clicker we can just take that thing and apply it to the radio button itself so come up here inside of our radio button pop that in there command equals clicker save it head back over here run this guy one more time and now when we click cheese boom it says you selected geez very cool you selected pepperoni so just depending on the flow of your program what you need it to do you might want to have a button so if somebody's like filling out a form or something and there are other things in the form you want them to fill out name email address whatever you probably don't want them to click this button and then boom it submit the form right you would want to click this button select pepperoni finish filling out the rest of the form and then click a order button or whatever boom then it says pepperoni so you could use either way just depends on what you're doing so okay that's cool so now we've got these things working but when it comes to radio buttons there are actually buttons too These are nice little round things you could sort of toggle but you could do the same thing with buttons themselves so how do we do that well I'll show you how to do that right now and there's actually two different styles you can use in bootstrap to do that so let's come back over to our code and let's uh create actual radio buttons radio button buttons there we go actual radio button buttons all right so this is a good way for me to also show you a second method to do radio buttons you know up here we created a list of all of the buttons we wanted and then we looped through it here wow that might be overly complicated if you've only got one or two things you want as your radio button thing so you might want to just create the manually so how do you do that well we can we could do that I'm going to call it radio button one and radio button two and we'll just set that equal to a TB Dot radio button just like before and we want to put it in root now we make them into actual buttons with a boot style so let's set the boot style equal to and let's change up the color I'm going to call this info color but to make it an actual button we call the tool button boot style and that will create an actual button and we have to do the same thing as the other radio buttons we have to set a variable so let's set that equal to minor Square topping again because remember up here we did the same thing right we also need to set a text what is the button going to say well I'm just going to say radio button one right there we go we also need a value right so I'm just going to say uh radio button one and we also need to give this a command of clicker so when we click on it we want to run that clicker function right so I'm going to copy this whole thing and we actually also need to rb1 dot pack this guy give it a pad y of 20. now I did this on its own line you could also do it at the end of it but nah I like to do it on their own lines when you're doing them manually so all right let me get rid of that and paste this thing in again and let's call this rb2 and this is also going to be a tool button we can also do the second style of ttk bootstrap tool button and that is an outline so I'll show you both of them this one is just tool button this is tool button and outline right so again same variable but instead of radio button one we want it to say radio button two and for the value it also wants to be radio button two okay so let's rb2. hack this guy make sure we put him on the screen give them a pad white of 20 to push down screen a little bit save this head back over here run this guy one more time and now we have two buttons down here and they're actual buttons and it's the info color this sort of light blue this one is the regular one it's solid right when you hover over it it changes to dark blue this one is outlined when you hover over it it changes like that but it's outlined otherwise so that's kind of cool and the same thing occurs if we click this one it says you selected Rio button one and this one is unselected if we click this one boom it says here at radio button two and this one gets unselected because with the radio buttons you can only have one at a time likewise if we come up here and click cheese boom these two buttons both become unselected because these are all the same radio button series I guess you would call it and again it says you selected G so veggie cheese pepperoni radio button one veggie radio button two cheese whatever you like all the different things and that's all there is to it so those are radio buttons with ttk bootstrap very simple very straightforward just remember you use the same sort of functionality as a regular kinter radio button the only real difference is you had a boot style and it changes the color otherwise you just treat them like any other radio button in kinter and there you go we're gonna look at sliders with ttk bootstrap and these are technically called scales but that's silly it's a slider I know it's a slider you know it's a slider this is a slider but of course it's called scale and this we're gonna look at in this video so you can see we can move this back and forth and when we do the number changes down here uh we can make these horizontal we can make them vertical we change the colors we can do all kinds of fun things and that's what we're going to look at in this video so I've got a file I'm just calling it slider.pi because this is a slider not a scale it's a scale but anyway we've got our basic starter code that we've always got we've imported ttk bootstrap as TB at pip install ttk bootstrap way back at the beginning of this course and you can see we're using the superhero theme so to use a scale let's just create a scale slash slider I'm going to call them sliders but they're technically scales and let's just call this minor score scale and it's going to be a TB dot scale and we want to put it in a root and we want the boot style to be any of the colors that you want to use so we've got primary secondary warning info danger dark light all the regular boot style styles and I'm just gonna go uh warning now we can set all kinds of different options and attributes for this we'll get into that in a second for now I just want to put this on the screen and take a look at it so minor score scale dot pack let's give this a pad y of like 50 to really push it down screen so let's head over to our terminal real quick I'm in my ctkencher.com directory and let's run Python's slider.pi and when we do we get this little slider it moves back and forth and you know it doesn't really do anything right now but it's on the screen and it is glorious we have a slider so okay let's look at some of the attributes we could play around with here and we can come down here I'm just going to put a comma and put these each On Their Own Line first we can give this a length now I know this kind of looks like a capital l this is a lowercase L Sublime just does that and we can set this to anything we want now this is the physical link so you know it was like this big before 200 would be twice as big right so we could save this run it take a look and see what that looks like and now suddenly the slider is twice as big now that does not mean it goes from zero to 200 this is just the physical length it's just like 200 think of it as pixels 200 pixels right I mean we could get crazy with this and why not let's make this let's go 400. oh yeah that's right so now we see it goes all the way the length of this thing almost very cool so all right that's length very useful we can also set the orientation so that's just Orient and by default it is horizontal that's you know side to side we can also change this to vertical go ahead and save this might even be too big for our app nope and now it goes up and down down and up all right so okay that's cool I'm gonna go ahead and change this back because because I find that annoying the horizontal so side to side now if you wanted to go side to side you don't have to put Orient equals horizontal obviously because we did that earlier it defaults to horizontal just by default so okay now we can set the from and the two so you know what do we want to start at zero maybe or 10 or 50 or 100 or whatever you wanted to start at and we use the from underscore attribute and it's from underscore because from is a like a python keyword so we can't use from so it's from underscore I'm going to set this to zero and then we could set the two equal to whatever we want so 100 200 whatever I'm gonna put it at 100 for now now we can't actually see this yet because we don't have anything to see what the scale is so let's fix that real quick let's create a label and I'm going to call this Miner score label and it's going to be a TV DOT label we just want to put this in root we want the text to equal nothing to start out with and let's underscore label dot pack this guy put him onto the screen and now what we could do is give this scale a command sort of like a button when you press it so I'm going to call this command scalar I don't know whatever so now we can create that function to do something every time we move the slider around so let's define scalar and now a normal function you don't have to do anything but with this you have to pass in an event because every time you move the slider around that will push an event into this function and the event that it's pushing is the position so whatever it happens to be that's what it'll be so what do we want to do well let's change the minderscore label dot config let's change the text on that to something else well what do we want to change it to let's change it to minor Square scale dot get and that will allow us to get the current position and then output it to the latest let's go ahead and save this and run it now remember we've set it from zero to a hundred so that's sort of interesting if we run this guy and we grab this you'll see well first that's very little but it's 10.36294 300518134 right that's a very long decimal number and we don't love that so but you will notice it goes from zero zero point zero all the way up to 100.0 so that looks good so first let's come down here to our label and let's give this a font of say helvetica and like size 18 make it nice and bigger now also let's take off this from in this too so if we run this again you're going to notice that we didn't set a from in two so now it's just from 0 to 1. and it's all these very very long decimal numbers so what can we do here well first let's give this back up from zero to one but now we can come up here and wrap our myscale.get in the int function this is just the python integer function this will convert anything into an integer so if we do that and run it that should get rid of all the decimal point numbers and just give us one two three four five seven nine ten up to 100. very cool so moving right along let's change this to 500. right now again this won't change the physical length of the slider this is the from to two so now it goes up to 500 right oh so you might be thinking well okay that's great to put these numbers on the screen but what if we want to actually do something based on where the slider is well of course then you would just do it in this function right so instead of putting this label thing here you might say you know if uh my underscore scale dot get is less than 50 you know do something else do something else right you would do logic in there so that's how you would do that so okay moving right along we can change this I'm going to put this back to 100 because scales should go from 0 to 100 in my mind right zero to a hundred percent that sort of makes sense and we could change this around if we wanted to get fancy put a little percentage sign there if we run this I'm just messing around now for fun oh it's outside of the quotation mark put it in the quotation mark see getting sloppy all right so save this and run it now it very fancily says 74 percent all right I don't know totally useless but fun nonetheless so what else can we do with this well the only other really interesting thing there are some other things you could do with this but the only really interesting thing is you could set the state to disabled right so if we save this and run it now it doesn't work at all and if you wanted to enable this you would create a button or something that when you clicked it it would set this to normal right so normal or disabled those are the two options there and again if we run this guy one more time now it's enabled again and we can play with our glorious slider once again and that's all there is to it so that's the slider pretty easy scale that's the scale pretty easy I don't know why they call it a scale it's obviously a slider but uh yeah pretty fun in this video we're going to look at the scroll bar with ttk bootstrap and there's several different things we can do with this we can make it sort of square we can make it kind of rounded we can change the color and do all the things that's we're going to look at in this video so I've got a file I'm just calling it scroller.pi and it's our basic Kinder starter code that we always have we've imported ttk bootstrap as TB I pip installed that many videos ago in the series we're using the superhero theme and that's pretty much it so let's start out by creating a basic frame so I'm going to call this my underscore frame and this is going to be a TB dot frame though I suppose you could use a regular Kinder frame because we're not actually going to look at this we want to put it in root and it's just going to be used as a container to hold the things to put a scroll bar in so we're not really going to see it or anything so it could be a ttk bootstrap frame or a regular Kinder frame really doesn't matter and so it's my underscore frame dot pack this guy let's give it a pad y of like 20 push down screen a little bit so okay now let's create a scroll bar and I'm going to call this my underscore scroll and this is going to be a TB dot scroll bar and we want to put it in my underscore frame right so here we can give this an Orient of let's say vertical we want it to go up and down right otherwise it would be horizontal and here's where we can do some different things let's give this a boot style of and you can use all your regular boost styles with this primary secondary light dark info success danger whatever color you want all the Regular Boot styles that we've looked at in all these other videos in the series so you know whatever you like there let's go danger to make it red and annoying looking I don't know you could put it I would probably use dark with this superhero theme but I'll just do danger for now just to make it obnoxious and uh funny looking now the only other option you have as far as boot Styles is you can leave it like this and it'll just be a square scroll bar like a normal default scroll bar or you could make it round and it'll be slightly rounded so we'll we'll do round for now maybe we'll play with this in a minute so okay now we need to pack this guys let's go monitor scroll down pack and we want to put this on the side of let's say the right side and let's give it a fill of Y so Y is up and down vertical okay so now let's just uh create a text widget so we have something that we can you know scroll right let's go text widget and I'm just going to call this Miner score text and this is going to be a regular text widget because I'm not sure there is one with ttk bootstrap but it doesn't matter we're just gonna use a regular text widget and we want to put this in my underscore frame and let's give this a width of like I don't know 30 and like a height of 25 and now here the important thing is and let me put this on another line we want a y scroll command of underscore scroll dot set and let's also give this a wrap of none so there's no word wrapping inside the text box and while we're at it let's give it a font of helvetica and like a size of 18 so the font's nice and big so this y scroll command will set our my scroll scroll bar this guy right here as the scroll bar for this widget right this is just basic hinter scroll bar stuff has nothing to do with ttk bootstrap you would do this for any sort of scroll bar using regular kinter or ttk or this or anything else so all right that looks good so now let's minor Square text that pack this guy and I don't think I want to give it any sort of padding because we don't want the frame to show here we just want the text widget to show so we won't give it any padding okay so finally we need to config the scroll bar once we've created it we always need to then config it so let's go my underscore scroll dot config and let's give this a command of my underscore text Dot y View and that'll sort of associate our scroll bar with our text widget right so here we set it and here we give it a command so that whenever we move it it knows to move this guy right here so okay let's go ahead and save this and run it head over to our terminal I'm in my ctcincter.com directory and let's run Python scroller.pi and when we do we get this annoying red scroll bar and if we type some stuff here we could see the scroll bar moves and we can scroll and notice it has a slight roundedness to it right so that's cool if we want to take that off we can come up here to our boot style and our scroll when we defined it and just take off that round if we save this and run it you see now we have just the regular sort of default Square scroll bar whatever you like that's pretty cool so let's play around with this very quickly one more time instead of Danger let's change this to dark and I want to bring that round back and this is probably what I would do if I was actually making an app using this color scheme because I don't know I think that looks kind of modern and cool having it dark like that and there we go so that's a scroll bar now if you wanted to change this into you know sort of down here horizontal you would just change your Orient to vertical and this instead of Y it would be X and instead of this y view it would be x view right so Y is up and down X is left and right that's really all there is to it also this instead of Y scroll command it would be obviously X scroll Command right so basically just change all the Y's to x's and you've got yourself a horizontal scroll bar instead of a vertical one so those are scroll bars with ttk bootstrap very easy very cool and uh pretty fun in this video we're going to look at the separator this line thing here and the size grip this little dotted thing in the corner here that allows us to do this and that's what we're going to be looking at in this video so I've got a file I'm just calling it sep.pi short for separator.pi I guess and we're importing ttk bootstrap as TB at pip installed that long ago in this series uh we're using the superhero theme and that's pretty much it so let's come down here and let's create a label real quick I'm just going to call it label one and it's going to be a TV DOT label and it's TB because we imported ttk bootstrap as TB and we just want to put this in root let's just have the text say label one no big deal let's give this a boot style of I don't know let's say light and let's label one dot pack this guy give it a pad y of like 40 really push it down the screen so I'm going to grab this and I'm going to copy and make another one and we'll call this one label two and this will just say label two so in between these we want a separator those separate tour so I'm gonna call this my underscore sep and it's going to be a TBE dot separator and we want to put it in root and here the main thing that you can do with this is give it a boot style and this allows you to change the color of the separator that line right and that's really all a separator is it's just a line and so you can use all your regular boot Styles dark light primary secondary info success danger any other ones I forgot so I'm just going to make this danger so it's red and nice and easy to see let's go my underscore sup dot pack and we're going to play around with this a little bit more because there's a couple of things you can do with this but for now let's just save this and run it make sure this looks okay let's head over to our terminal I'm at myctkinter.com directory and let's run pythoncept.pi and when we do we get label one label two and this tiny little separator now you'll notice it's very small by default and it's actually a little hard to change the size of this I'll show you how to do it but it's not as easy as you might think or hope or expect it to be so let's first before we do that there is one main thing we can change about this we can change the Orient so by default it is horizontal right and you don't have to do Orient equals horizontal obviously we just saw that by default it's already horizontal but if you want it to go up and down you just change it to Vertical so if we save this and run it now we have it going up and down right so okay that's cool I'm gonna go ahead and change this back to horizontal now the question becomes how do we change the size of this thing and when you're using pack we can change it to fill equals x and x is left to right if you were doing this vertical up and down you would change this to Y right but we're doing it horizontal we'll put fill equals x now if you do this you'll notice we run this it stretches the entire size of the app which may be what you want maybe not so how do we change the size from not very little or very big but some other measure how do we do that now normally with kinter you would use a width attribute so you would come up here and you would just say you know with equals 200 or something and that'd be good to go not so with the separator with that we need to use pad X so pad X gives padding on either side on the x-axis right so if we gave it a pad X of let's say 10 that would take just a little bit off of each side right so if we run this you can see just a little bit off the edge it doesn't go all the way to the end right so we would have to play around with this based on whatever you want so if you gave it say 100 and think of these as pixels 100 pixels see now it's you know got 100 on each side so just play around with that and uh you know get it to the size you want it's not a great method but it's sort of what we have right so that's the separator very simple the only other option is just change the boot style right and uh so instead of danger maybe we would say info right so save this and run it ooh ah now it's sort of light blue all right so okay that's the separator now let's look at the size grip and I don't find this to be all that popular but you may find some use for it so we'll look at it real quick let's create this guy I'm going to call this my underscore size grip very original this is going to be a TB dot size grip we want to put it in root and same thing you can give this a boot style of whatever you want so I'm just going to stick with the same color scheme here so info will make it info color that light blue and that's pretty much it so now if we my underscore size grip.pack this guy and just put it on the screen we can see if this worked and we see it's right here in the middle of our app because that's where we packed it right but if you grab this and sort of hold your mouse button down you can resize it from there now of course you could also do it from the corner but Back in the Day apps used to have these little grippy things on the corner and so if you're old enough you'll remember that maybe you put the size grip thing in the corner or for some weird reason you need to resize your app from inside of the app like this and you just want to put your size grip right in the middle of the screen that's how you do that but how can we put this in the corner well we're packing this guy so we would have to use anchor and the pack statement here so I would put this in the Southeast Corner SE so South is all the way down east is all the way over right and then that will sort of get us there if we save this and run it it won't quite work you'll see it it puts it over here but that's not you know exactly what we want we want it down in this corner so what we could do is give this a fill equals both and then make sure it's expanded so we could go expand equals true so that should jam it down into the bottom right corner if we run this sure enough there it is now we can do that and it looks like it should and we're good to go so I put two widgets in this video we usually just do one widget per video but you know these are kind of lame widgets the size grip you're never going to use that you might but I've never used it I've been using kinter for years and years and years I've never actually used a size grip same thing with a separator you might use a separator there might be some visual reason for you to put a line in your app very easy to use though and that's all there is to it in this video we're going to look at spin boxes and this is a spin box you can see you can just click it and sort of spin through each one uh we can have it where when we click the button this label changes or we can have it whenever we just spin it the label changes as well and that's what we're going to look at in this video so I've got a file here I'm just calling it spinner.pi it's our basic enter starter code and I've imported ttk bootstrap as TB I pip installed that many videos ago we're using the superhero theme and that's pretty much all there is to it so let's start out by creating a spin box so I'm gonna go spin box and I'm going to call this Miner score Spin and this is going to be a TB dot spin box and it's TB dot because we imported ttk bootstrap as TB and we want to put this in root and we want to give this a boot style and here you can use all the different boot style colors that we've looked at in all the other videos in this series so primary secondary info success danger warning light dark all those things uh let's just go success here make it nice and green and weird and then that's my underscore spin dot pack this guy and give it a pad y of like 20. now there are several different things you can do with this first let's make this a little bit bigger let's give this a font of helvetica and a size of 18 so it's nice and big and we can see this now also I'm going to put this on a separate line so it's easier to read you can do spin boxes a couple of different ways you can have words and other things in there or you can have numbers so we'll start out just with numbers so if you want to designate a range you could just go from underscore equals and let's start at zero and let's go to let's say 10 right so that's really all we have to do let's go ahead and save this and run it head over to our terminal I'm in my ctkinter.com directory and let's go python spinner dot pi and when we do we see right away we get this sort of empty looking spin box it's not empty if we actually click it it starts at zero and then it goes to one two three four five six seven eight nine and ten all right so we can go back down again and back up again so that's to and from and now you'll notice when we started this there was nothing listed here I'll talk about that in just a minute too but before we do that let's look at the other way to do this using words so here let's go spin box list and here we can just create a python list I'm just going to call it stuff because you know I have no imagination and let's go John and April and Bob and Mary so in order to use these we just use a values tag and set that equal to our stuff right one thing to note when you add a value it will override your from and two so we can leave that on there it'll just override it so here let's go ahead and save this and run it and when we do we click this now it says John April Bob and Mary so one thing you'll notice like I said it's blank when it starts and also the text seems to be highlighted what's up with that well with spin boxes you can delete the thing that's in there and add your own thing right you just type it in so now it's John April Bob Mary and Tim all right so that's one sort of weird thing about spin boxes personally I've never found a use for that but I don't know maybe you would find some sort of use for that but we can disable that if we want by setting the state of the spin box so let's come down here and set a state of and let's set this to read only so now when we run this we won't be able to change it anymore by typing but also you'll notice it's not highlighted right so if I click on this and hit delete and try to type something in nothing happens right so that may be what you want as a default sort of thing I usually would use that for my spin boxes because I don't want people changing them at runtime so that's kind of interesting now what about this thing where when we run this it starts off being blank well maybe that's what you want maybe not you can set the value of this if you want head back over to our code and let's set the value let's say set spin box default and we're actually going to need to do this underneath the spin box because we can't set a default before we've created a spin box so here we just call my underscore Spin and we can not set this guy and you can set this to anything you want so I'm going to set this to John by default so that's the first item in our list so that's what I want to set it as by default so now when we come back over here and run this guy boom right off the bat John is listed and we can cycle back up all the way through it spin up spin down all the good things very cool so okay that's cool but how do we decide if something has been selected and by selected I mean it's the thing showing in the spin box right now so for instance April how do we get April out of here somebody has spun up to April well we can dot get our thing so there's a couple of different ways to do this let's create a button and it's just going to be my underscore button and it's going to be TB dot button we want to put it in root we want the text to equal click me and we want the boot style to be that same success green and then let's minor square button dot pack this guy give it pad y 20 push down screen a little bit now here we want to give this also a command and I'm going to call this spinny right and so now we can come up here to the top and create this function so let's define spinny and here we can do something but first let's come down here and let's create a label so this is going to be my underscore label it's going to be a TV DOT label we want to put it in root we want the text to equal nothing right off the bat and let's give this a font of alvetica and like a size 18 so it's bigger so that we can read it and then let's my underscore label dot pack this guy give him a pad y of 20 push down the screen so now what we want to happen is when we click this button we want to change the text of this label to whatever is in the spin box well to do that we just come up here to our function and we might underscore label dot config this guy and we can set the text equal to my underscore spin dot get and many things in Canter you can dot get them and same thing with spinbox so that's cool you can also set a string VAR to your spin box and get that but I find that sort of useless it's just an extra step so what I'll do is I'll just myspin.get whatever the spin box is so let's go back here run this guy one more time and here if we click me for John boom it says John there if we spin it up to Bob and click it boom it says Bob if we hit Mary boom Mary and not to leave out April boom April so that's how you can use a button and our button is blue it's interesting I thought we put that as success oh I misspelled success boom there we go so that works for the button but what if you don't want to use a button what if you just want to use the spin box itself well you can give your spin box a command so let's put this on another line and we can just call our spinny function same exact function or you can use a different function really doesn't matter so now when we run this guy hopefully our button is green yes it is instead of clicking the button if I just spin this up to April boom it says April when I click this thing again boom Bob so it's the actual little spin box toggle things that determine when the function gets called when that command runs right and there we go so that's spinbox pretty easy pretty straightforward not a whole lot of bells and whistles here personally I don't really use the spin box all that much but it certainly has a place in some apps and if you need it that's how you use it piece cake okay in this video like I said we're gonna look at the tree view for ttk bootstrap and I'm not going to get into the tree view in great detail I've got other videos on that I'm going to take some of my older videos that I did on the tree View and uh put them into one big video and I'll post that in a few days so if you want to get into a deep dive on the tree view you could look at that but for now I'm just going to show you how to make a basic Tree View how to do the ttk bootstrap styling and stuff that you would expect for this thing and that's what we're going to look at in this video so here we've got a tree View and you can see it's just this box thing with rows and columns and we got first name last name email address I just kept it very simple we got some dummy data first name one last name one email one Etc so that's what we're gonna look at in this video so we've got a file I'm calling it tree underscore review.pi it's our basic interest order code we've imported ttk bootstrap as TB as always we pip installed that long ago we're using the superhero theme and that's pretty much all there is to it so let's go ahead and just Define The Columns that we want in our tree View and I'm just going to call this columns and this is just going to be a little Tuple here and we want first underscore name then we want last underscore name and then let's just go email so very simple all there is to it so now let's create a simple tree view so I'm going to call this minor Square tree and it's going to be TB dot Tree View and it's TB dot because up here we imported ttk bootstrap as TB and here we just want to put this in root and we want to select a boot style and these are the same boost style colors that we've used for all the ttk bootstrap widgets right so you have primary secondary success info warning danger light dark all the things so I'm just gonna go success so that's that green color and then we want to set the columns to whatever our columns are going to be well right here we defined our columns as columns so we're going to set columns equal to columns and here let me put this on another line we want to show and we want to show the headings now this will show you know the headings at the top of each column which we haven't actually defined yet but that'll do that so okay that looks good so now we're we want to show these headings we have to define the headings right so let's go my underscore tree dot heading and then here we just designate each column so the first one is first underscore name that's this thing right here but then we put a comma and then the text for that heading is going to be what let's go first name so you notice this is more like a variable name and this is more like the text that's going to show on the tree view so you know it's capitalized got a space in there looks nicer right so let me just copy this and we'll do this a couple more times so we have first name we also have last name and here I'll change this to last name and then this one will be email and I'll switch the text for this to email address make it look nice and pretty okay so that looks good so now let's create some sample data right now normally you would have real data but you know we don't have any real data this is just a tutorial so I'm going to go ahead and create some so let's create a python list that's empty and now let's fill it with some fake data so let's go four in in range of 1 through 20. so we're gonna have 20 rows right and then for each row we want contacts dot append and it's contacts.append because well let's change this to contacts all right so we're going to append into this empty python list what do we want to append well let's create a list here so let's choose F strings and for each one I'm going to say the first name and then just pass in a number so that'll be n that's this guy right here so for each one of these so the first time we Loop through this the N will be one the second time we Loop through this the N will be two three four five every time we live through here this n will change so this will allow the data that shows up on the tree view to be first one first two first three for each row right so all right that looks good for that now we also need to do the same thing for last so let's go last in and we also need to do the same thing for email so let's go email and at address.com right all right so just some basic dummy data we'll cycle through and do 20 rows of that so now all of this fake data has been appended to this python list now we just need to put that list on our tree view right so we can do that right here and let's do another loop let's go for contact in contacts right and it's contacts because that's the name of our list here contact singular because we just make that one up that's how loops work and then let's go my underscore tree dot insert and we want to put this at the zeroth spot so from zero to end and then what value do we want well whatever that contact is okay so all right that's really kind of all there is to it let's go ahead and save this and run it let's head over to our terminal and then my cetkinter.com directory and let's run python tree underscore view dot pi and you know what we forgot to pack our tree view onto the screen why didn't you remind me so let's see where we created our tree view right here we obviously need two minor Square tree that pack this guy let's give this a pad y 20 push down screen a little bit so all right that should work now head back over to our terminal run this guy again and there we go and that's all there is to it right so we've got first one first two first three we can use our Mouse little scroll button to scroll down this guy and there we go so here we have our columns first name last name email and everything looks great now this whole thing is green because that's the Boost style we selected right so we could go danger right save this run it and now we've got the nice red horribly ugly right tribute so that's really all there is to it now like I said we're not going to dive deep into how to use tree views because with ttk bootstrap you just use your tree view like you would in a regular kinter widget right just use all the same attributes that the regular Kinder widget treeview has and uh you're good to go so there's nothing specific to ttk bootstrap that you need to change except adding a boot style to change the color basically right and like I said I'll put I'll try and put together a deep dive of the tree view because it's really interesting I could do 40 or 50 videos on it alone there's all kinds of cool stuff you could do with it in fact I have in past videos on my other codemy.com channel so I'll put together a bunch of those videos and one big video uploaded to this channel sometime in the next few days or so if you're interested in doing a deep dive on the tree view then of course if you wanted to make it into a ttk bootstrap preview you just do what we did in this video to use a ttk bootstrap preview in this video we're going to look at message boxes for ttk bootstrap so we click this button boom a little box pops up it's got a little message a little title a little icon we can click yes or no if we click no hey you click no if we try it again and click yes hey you click yes now there are a bunch of these different dialog boxes that you can use you can ask questions you can show warnings you can give info all that stuff we're gonna look at all of that in this video so I've got our basic starter code that we've always got we're using the superhero theme we've imported ttk bootstrap as TB we pimp installed that many videos ago and the first thing we need to do here is import something so let's go from ttk bootstrap dot dialogues so this is basically a dialog box right so we want to import message box now there are other things you can import like message dialogue we don't need that for this video but it's a similar sort of pop-up box and maybe we'll talk about that in another video so okay now the next thing you're going to notice is this root icon bitmap now this is the little icon that shows up when we run this file so if we say this I'm calling this Mbox dot Pi head over to our terminal I'm in my ctcinter.com directory and let's run python Mbox dot Pi that icon is this little icon right up here we've designated that's the icon right so when we have a message box pop up it will have its own icon but it'll just show the default ttk bootstrap icon unless you make a little bit of a change right here so we need to copy this line and let me say uh message box icon here and it's the same exact code we just studied a default equal to this right now you might think hey do we need this line anymore yeah we do we can comment this out and if we run this again we're going to get no icon basically here just the default thing right so we have to keep both of these lines it's really kind of weird I I have no idea why that's the case uh but let's say right here main app icon and then here we've got the message box icon so okay that's good so now let's build out this app so let's create a button I'm just going to call it my button it's going to be a TB dot button we're going to put it in root we want the text to say click me and let's give this a boot style of I don't know danger to make it red and a command of I don't know clicker all right so so every time this button gets pressed we want to run the function clicker so we don't have that yet we'll create that in just a second but for now it's my underscore button dot pack put this guy on the screen let's give this a pad y of 40 to really push it down the screen so there's our button and here we need to Define our clicker function here and we'll do that in just a second now I also want to create a quick little label so I'm going to call this Miner score label this is going to be a TB dot label we want to put it in root we want the text to equal nothing for now and let's give this a font of I don't know like helvetica size 18 just to make it bigger so that we can read it easier and then let's minor Square label dot pack and I don't know give this a pad YF 20 push it down the screen a little bit probably don't need to do that but okay so now we've got this function called clicker and every time you press this button we call this function so what do we want to do well let's create a dialogue so I'm going to call this MD short for message dialog or MB short for message box whatever it doesn't really matter at all and this is going to be a message box now here we have to designate what type of message box we want so uh let's go yes no there's like I don't know eight or nine of these will go over all of them in a second but for now we'll just do yes no and let's create a list of these so let's go yes no and I'll add these as we go through them all so here we could say uh display some message here this is going to be the message that pops up in the middle of the box so whatever you want to display in your message box type it in there and then here is the title so this will go on the title bar up at the top right so okay that looks good now for now let's just run this and see what we have so let's save this head back over to our code run this guy again so here we've got this thing we click it boom it says display some message here here's the title you'll notice there's our little icon up there and we have a yes or no well if we click no what happens well we don't know yet so what does happen well let's come down here and uh display button click right so let's go my underscore label dot config and we want to set the text equal to and I'm just going to create an F string and then I'm going to say you clicked and then inside of here we're just going to go MB so whatever you clicked here will get assigned to this variable and it will output right there so let's go ahead and save this head back over here run this guy again so we click me so now when we click yes it says you click yes when you click no it says you click no right so basically if you click yeah no it's returning the word n o capital n o now this is just a string now you can do stuff based on that right so you could do an if statement right so let's go if MB equals no then you know we could print no or whatever you wanted to do else you would you know print yes like whatever you wanted to do you could do right there right so let me just comment all this out because it's kind of silly but this is just an example of how you can do stuff logically based on what the person selects right now each of these things we're going to talk about yes no is the first one there's lots of different message boxes each one returns a different thing so you have to know what it returns in order to do your if else logic correctly and we'll see that in just a second so all right but for now I'm just going to let's copy this and just we'll just print out you clicked whatever just to see what each of these things do so okay the first one was yes no we looked at that one the next one is okay right so we'll just type in message box dot okay if we save this guy and run it and click here now it says the button is just okay if we click this it says you click none now this actually Returns the word none right so it's a string it's just none you would dig your logic if you know MB equals none do this else do something else right so okay that's kind of interesting I guess the next one is okay cancel so let's come down here and okay cancel you'll never guess what this one does right maybe you will guess it does okay or cancel right so if you click OK it says you clicked OK if you click cancel it says you click cancel right so it's returning okay or cancel all right so that's okay cancel now obviously whatever you want to do in your app that's going to determine which of these you use right if you want to give the user the ability to cancel or click OK you would use OK cancel if you want them to answer a question yes or no you would use yes or no right if you just want to give them a message and have them close it you might just use okay right it just determines it just depends on what you're trying to do in your app right so okay the next one is show info so actually this is show underscore info in regular kinter it's show info without an underscore and in ttk bootstrap for some reason it's show underscore info I'm not sure what's going on there but that's what it is so again we can come up here and here it says displace the message here but it has this little icon this little info right you're showing info this is the little info icon right and if you click OK it returns none so okay maybe you want the little icon info icon to pop up if so you would use show info right we also have show error all right so this one's actually kind of interesting right uh because if you know if you're doing error handling in your app and you want to show an error that's popped up you would probably want to use this and this is nice because I don't know if you could hear that or not it made a little ding it went dating a little warning Ding and it also has this big red X like warning right so that's interesting if we click OK it returns again none so all right that's cool so okay that's cool let's show error and we also have show underscore question so we can change this one to show underscore question save this guy go to the screen it's getting unruly run this guy again and here we get this little question mark and we get yes or no now if we click yes here it says yes if we click no it says no again you'll hear you'll hear maybe you'll pick it up on the microphone a little Ding and ding right so that's what that does so all right that's cool oh that was interesting let's run that again I probably should have mentioned that if you click yes it returns yes if you return click no it returns no if you come up here and click the little X it does none so keep that in mind that's the case for all of them as well so okay that's cool I'll start another line here and the next one is show underscore warning show underscore warning is very similar to show underscore error so let's run show underscore warning save this guy run them again but instead of a big red X you get this sort of uh warning like uh for like uh almost like a traffic sign but with an exclamation mark and when we click OK it's none I'm gonna click the X here it also returns none so all right so we've got one two three four five six seven I feel like there's one or two more so what about what else do we have so we did yes no we also have yes no cancel so this is very much like yes no yes no cancel but instead of two buttons you have three buttons which is kind of interesting so if we run this guy we get yes no and cancel if we click yes you click yes we click no you click no if we click cancel we get cancel and again if we click the X we get none so all right that's interesting finally one more we have retry and cancel all right so this is kind of interesting we have retry cancel and I'm guessing you could probably guess what this one's gonna do all right it's not rocket science here we have retry and cancel and if we click retry it Returns the word retry and if we click cancel it Returns the word cancel so that's pretty much it and none if you click the little X in the top so those are message boxes very very useful very cool very easy to do and uh it's kind of all there is to it if you want to learn more about these you can go to let's see ttkbootstrap.readthedocs.io and click on API and then come down here to message box and it has each of them listed here so here's the okay one here's the okay cancel one and it has all the different little attributes you can play around with right whether the ring whether to ring the bell or not the title The Message we've already did those two so you can come through here and read all these if you're interested but we pretty much hit the main points and that's all there is to it in this video we're going to look at the color Chooser for ttk bootstrap and that's this guy right here you can see oh it's very neat looking and if you can click on this boom it'll pick a color give you all the data we can click OK and now we're going to change our color to that color let's change it to Blue whatever it doesn't matter what you do with the color that you choose that's kind of irrelevant but I'll show you how to get the actual information you can see the RGB value and the hex code and all that good stuff so that's we're going to look at in this video so I've got a file I'm just calling it CC dot Pi short for color Chooser I guess dot Pi answer basic interest art code that we've been using we've imported ttk bootstrap as TB we've installed that many videos ago and we're using the superhero theme so let's come down here and I'm just going to create a quick button real quick I'm going to call it my underscore button and it's going to be a TV DOT button we want to put it in root we want the text to say click me all right uh let's give it a boot style of danger to make it red just for fun and let's give it a command of of CC short for colored Chooser I guess right and we don't have this function yet we'll create it in just a second so that's my underscore button and Dot pack this guy put it on the screen and let's give this a pad y of like 40 to really push it down the screen now underneath this I want a label so I'm going to call this my underscore label just so that I can show you the output of the color Chooser what it returns so for now let's just create this as a TB dot label put it in root and give it a text of nothing for now and actually let's make this font bigger so it's easier to read so I'm going to make this helvetica and like a size 18. so okay let's go my underscore label yeah pack this guy and give it a pad why like 10 push down screen a little bit so okay now we've got all this set up let's define our CC function color Chooser and call it anything you want I'm just calling it CC so in order to use the color Chooser first we have to actually import it up here at the top of the screen so let's go from ttk bootstrap dot dial logs because technically this is a dialog box it's a little box that pops up right and then dot color chooser we want to import color Chooser dialog and you'll notice the capitalization the C is capitalized this C is capitalized and this D is capitalized so color Chooser dialog and now that will allow us to use it now it's kind of weird since we're kind of importing everything from ttk bootstrap why do we have to import these dialogues separately I don't know you just have to right that's how that works and so let's create a color Chooser so I'm going to call it my underscore color call it anything you want and this is going to be a color Chooser dialog all right now in order to show this onto the screen have it pop up we call my underscore color dot show all right and that will show it so strictly speaking this will work but it won't really do anything after you know we run it so let's save it and run just to make sure this is working headed back over to our terminal I'm in my cetkinter.com directory and let's run python cc.5 when we do we get this thing oh it says message box we have to change the title we could click this hey it pops up that's great but if we click on one of these colors and click OK nothing happens it's not actually returning anything so how do we get it to actually return something well first let's come up here and change this to color or Chooser for the title right and let's come down here and to capture what it returns we can create a variable or we could just call a function so let me comment this create color chooser and then Show color chooser and then here let's say return color Chooser info all right so how do we do that well let's just create a variable call it colors and we're going to set this equal to my underscore color which is our color Chooser what we defined right here and then dot result now this will return three things and I'll show you what those three things are in just a second but for now let's output to the label so remember we have this label called my underscore label so let's dot config this guy and set the text equal to Colors whatever is returned here right so let's go ahead and save this and run see what we got here so we click this and let's pick a nice screen now you'll notice it returns Hue saturation and Luminosity hsl it also returns red green blue RGB right you've probably heard of RGB and color things in the past that stands for red green blue it also Returns the hex code now this hex code is useful this is really what you want the hex code because anytime you're using colors you want the hex code right if you want to change a color use the hex code I mean you could use these things too but they're not commonly used for that but just for now let's just click OK and see what it returns and you'll notice it returns a string of numbers now that's not that useful let's come up here and pick the most top rightest color and that's Hue of 0 150 red of 255 green of 0 0 and uh this hex color code so now when we click this you can see it returns these three things and if we run this again and click on this again and you can see the RGB is the first one so 255 0 and 0. that's this column right here 255 0 and 0. then we have hsl 0 150 0 150 and finally we have the hex color code ff000 ff0 so that's cool but how do we get each of these individual things it's returning three of them how do we get each individual one well super easy there's a little function you can call but instead of calling colors you can call the thing you want so say for instance dot hex so here let's go dot hex Dot hsl and Dot RGB so here if we just want the dot hex we can do that save this run it here let's click click the red again and boom it's just returning that hex right so if we wanted the RGB instead of dot hex we would call Dot RGB all right so if we save this and run it I know very exciting if we click this pick this color again it's just returning to 255 0 and 0. same for hsl we could just go you know hsl and that will return the hsl so I like the hex you're almost always going to use the hex so that's what we want to return now let's change the background color of our app to chosen color right so let's just be goofy and play around with this we could just root dot configure and set the background to you know whatever we want so colors dot hex whatever we're returning here so let's go and save this and run it this is kind of a goofy example of why you might want to use this but I don't know you could do it like this and let's change this to this pink whoa there we go our background is now pink we could do orange that's orange we could do blue and you could do this for anything right any widget you could change the color so if you wanted to change the color of your button you'd do the same thing right just configure your button set the background color to you know that hex color code right there and that's all there is to it so kind of a goofy example but you know I don't know there's lots of different things you would use this for and I can't go over all of those examples there's thousands of them so there's just one little simple example on how to use it the main thing you really want is just to understand to get the color code out of here you're going to call your colors.x now we went colors.x you could just as easily instead of creating this variable right here you could just go you know uh let's see it's come in here and go mycolors.result dot hex right if you wanted to just string along an object oriented sort of thing with this which is our color Chooser right we called it my color and it returns a result and that result can be a hex or an hsl or an RGB right so really either way that works but I find it cleaner and easier just to create a variable right here add this in here and then just call colors.x to get the hex code all right this is gonna be a very short video but a very cool video and that's because we're gonna look at the scrolled text widget and that is just what it sounds like a text widget that is built in with a scroll bar look at that right so in the past we had to create an actual scroll bar widget and add it to a text box or add it to a frame or add it to whatever in ttk bootstrap there's actually a widget built into it that has a scroll bar right there and you could do a couple cool things with it you could hide it you could show it you could have it you hover your mouse over it appears or doesn't appear very cool and very easy to use that's what we're going to look at in this video now I don't know 10 videos ago or so I did a video on scroll bars with ttk bootstrap and you could use scroll bars in the normal way that you would with Kinder or you can if you're using a text widget you can just use this little trick I'm about to show you right now so I've got a file I'm calling it scroll underscore text Dot pi and we've got our basic ttk bootstrap starter code that we always have I've imported gtk bootstrap as TB we're using the superhero theme and everything else is pretty much rudimentary so to use this we actually have to import it first so let's go from ttk bootstrap dot scrolled we want to import scrolled text now you'll notice the S and the T and scrolled text are both capitalize everything here is a lowercase so that's all we have to do we just have to import it now I know we imported pretty much everything here in ttk bootstrap as TB but we still have to for some reason import this guy as well so let's come down here and let's create a text box so text widget and I'm going to call this my underscore text and now normally this would be a TB dot you know text widget but not this time this time we're calling just straight up scrolled text and that's because we imported that right there right so we want to put this in root and now we can give this a height of let's say 20 and a width of like I don't know 110 and let's also give this a wrap of word this is basic text widget stuff we want our words to wrap completely we don't want to get to the end of the line in the text box and have a word get cut off mid word and have half the word on one line and the other half of the word on the other line below it we want to wrap the entire word down to the line below so there we go so really that's all we need so let's go underscore text Dot pack let's give this a pad why like I don't know 15 or so push down screen a little bit so let's head back over to our terminal and run this guy I mean my cetkinter.com directory and let's run python scroll underscore text fi and we have a typo because we of course need an equal to sign there okay so button equal to sign come back clear the screen run this guy again all right and there we go boom you'll notice it doesn't appear now but if we start to type and you know we gotta get to the end and keep going you can see over there on the right it's adding the little scroll bar thing and we can scroll up and down and it is fantastic and that's all there is to it so there's one thing I want to show you about this in addition we can also give this an auto hide of true now by default Auto Hide is set to false as we just saw when we ran it the scroll bar was there even though we didn't even need it until we started typing text and then it kind of you know popped up or whatever if we set Auto Hide to True head back over here run this guy you'll notice there is no scroll bar at all until I hover over and then it kind of appears same deal if we start to type a bunch of stuff you'll notice the scroll bar isn't automatically showing up it's been hidden it's Auto Hide It Auto hide it it's Auto auto hided and but if we move our Mouse over boom then it pops up and we can use it now some people might like that some people might not personally I I don't know I don't really care for that it seems a little confusing uh I want the scroll bar to just always be there so what I would do is leave that off or you could set this to Auto Hide equals false save this head back over here run this guy again and we're going to get just the default thing where the scroll bar is just already there always and as you kind of move down a little scrolly thing appears and uh very cool so what else can we do to this well we can use all of our boot Styles if we want boot Style and you've got all of the boot styles that we've been talking about throughout this series primary secondary info success danger light dark any other ones that I might have missed and I probably want to spell boot style right and this won't change the text box itself but it will change the scroll bar color so if we head back over here and run this guy again now our scroll bar is red because that's the danger color right very cool and very neat now if we head over to the ttk bootstrap documentation at ttkbootstrap.readocs.io and then click on API and let's see here if we scroll down here you can see there's a scrawled frame and a scrolled text if you click on scroll text you can see some code and some things here if you want to read more about this you can see you can add boot style you can also add padding you'll notice you can designate vertical or horizontal bars so you can have a v bar or an H bar the V bar is default we've just been looking at that but if you wanted to add an H Bar for a horizontal one you could do that let's head back over here and let's go H bar equals true and this just takes true or false it's Boolean so if we come back over here run this guy again see now we've got horizontal and vertical and if we scroll all the way over let's see now this one sort of appears and works very cool so that's the scroll text widget it's so much easier than creating a scroll bar and physically adding it to your text widget or to a frame or whatever very awesome very easy to use and that's all there is to it in this video we want to look at scrolled frames for ttk bootstrap and it's very similar to scrolled text boxes if you saw that video you're probably good to go on this you're going to pick this up almost immediately if not it's going to take like 30 seconds to explain this should be pretty easy so this is what we're going to build just a very simple app with a frame on it that has a scroll bar and I just threw some buttons in here just to have something inside of it and you can see it Scrolls all right so ttk bootstrap makes this incredibly easy in the past with regular Canter you had to create an actual scroll bar and kind of add it to a frame it was very sloppy very kind of hard to do with ttk bootstrap there's a widget that just comes with it and we could just use it and it's really easy so that's we're going to look at in this video so I've got a file here I'm calling it scrolled underscore frame dot pi and it's our basic ttk bootstrap starter code that we always have I've imported ttk bootstrap as TB we're using the superhero theme and everything else is pretty much normal as usual so really the only kind of weird thing is we have to import this scrolled frame in order to use it so let's go from TGK bootstrap dot scrolled we want to import scrolled frame and you'll notice the S and the F in frame are both capitalized but the scrolled in this is lowercase so that's really all we have to do so let's create a scrolled frame and I'm just going to call this my underscore frame and this is going to be a scrolled frame now normally we would go like TB dot scrolled frame something like that right with regular ttk bootstrap but since we're importing this as scrolled frame we just use scrolled frame right there so we want to put this in our root and just like the scrolled text box you can set the Auto Hide so I'm just going to put this to false it's false by default if you want to actually hide the little scroll bar until you hover over it we'll look at that in a minute you would put true there but otherwise we're good to go so uh you could also put a boot stop but I'm just going to leave it as the default for now we'll play with that in just a minute so let's go my underscore frame dot pack and let's give this a pad y of 15. and let's also give this a pad X of 15 and just for fun I want to expand this to basically the whole size of our app so let's just go fill equals both and expand equals yes so that will pretty much blow it up to the entire size of our app so in order to see this in action we need to put something in it so I'm going to create some buttons let's create some buttons and I'm just gonna do a quick for Loop here so let's go 4X and range and I'm going to put 20 of these buttons so we'll put 21 here and this is just going to be a TV DOT button we want to put it in my underscore frame and let's give this a boot style of what info something like that change the color to light blue for the buttons and let's have the text say and let's make this into an F string and let's just say I don't know click me something like that and let's just also put the count so we'll put X in there and then let's just pack this guy give it a pad y of like 10 to space these out a little bit so okay now normally I would never ever ever pack on the same line that we're creating the button but in this case since we're doing a for Loop it just sort of makes sense so let's go ahead and save this and run it see how this looks so let's head over to our terminal I'm in my ctcantor.com directory and let's run python scrolled underscore frame dot pi and when we do we see we've got a bunch of buttons from 0 to 20 and we've got this Frame and that looks good now this is sort of transparent it doesn't seem like there's anything there that's because we use the default boot style right so we could change the color of that if you want so let's do that real quick up here in our frame let's just give this a boot style of I don't know let's go dark so if we save this head back over here run it again now we get a slightly different colored frame that's all there is to it so you'll notice the scroll bar right here that I'm dragging and dropping that is there by default because we set the autohide to false if we set that to true we could come back over here run this guy again and now the scroll bar is gone unless we hover over it and boom there it is and if we scroll down and then scroll our Mouse away again it disappears again so maybe you like that maybe you don't I'm not a huge fan of that but uh you know whatever and like I said we could change the boot style to anything we want if we wanted to change this to Danger this is going to look god-awful but we could change the whole frame to red and then the scroll bar is also red it has little red arrows and things and I don't like that one bit let's just go ahead and change that back to dark and I'm also going to change this back to false for the Auto Hide so that is really all there is to it let's go ahead and save this or you know what let's change this to light I don't know just playing around right now run this again Ah that's not great looking but whatever so that's really all there is to it much easier than the old kinter way of having to actually create a scroll bar adding it in setting the configuration stuff it was just a hassle ttk bootstrap makes this so much easier so you have your scrolled frame or your scrolled text box like we did in the last video it's basically the same thing but instead of a frame it's a text box so you can type words and stuff in it and very very useful and very cool in this video we're going to look at toast messages what are toast messages well if you look down there but um there it is right there sort of the bottom of the screen Fades away we can click it again a it pops back up little message little icon next to it little Windows thing and that's what we're going to look at so I've got some basic hinter starter code that we always have I'm calling it toasty.pi because we're doing toast messages and we're importing ttk bootstrap as TB we're using the superhero theme as we always do in these videos and everything else is pretty much the same so in order to use these we actually have to import these this is a little extra thing in ttk bootstrap so we can do that pretty easily let's just go from ttk bootstrap dot toast we want to import toast notification and notice the T and the N are capitalized that's kind of important so let's come down here and let's create one of these things I'm just going to call it toast and this is going to be a toast notification again capital T capital n and then inside of here we can give this a title so I'm going to say my toast title whatever and there's a bunch of different attributes we can play with after title obviously we want a message and we could say this is a toast message all right there we go and then we can also set a duration if we want so this is in milliseconds so if I want three seconds that would be three thousand milliseconds right there we go and we could also give this an alert this can be either true or false I'm going to do true and this will just give a little ding a little like system Bell whenever the alert pops up you may want that you may not I'll put it on there I don't even know if you can hear it with the microphone set up here but you know what a normal Windows system ding is you know goes ding you know just it'll do that so we'll put that as true and then finally you could put a position and this is going to be a tuple and it takes three things horizontal vertical and anchor so if you don't put a position at all if you leave this completely off it'll just show up in the bottom right hand corner of your screen now that's a little bit of a problem for me because I've got two monitors set up here and I'm recording on the left Monitor and the default monitor is my right monitor so it'll show up on the right Monitor and you guys won't be able to see it so I'm going to move it over 1900 and 15 pixels by 30 pixels and instead of it being in the bottom right I want to put it in the bottom left and so that's the Southwest now for the anchor position this last thing now this is a string and it could be all of the normal sort of directional things in kinter north south east west Northwest NorthEast Southwest Southeast Etc right so all of those normal things you can use so we'll just put that like that and that looks good now we need something to trigger this thing so I'm just going to create a little button I'm going to call this my underscore button and it's going to be a TB dot button we want to put it in root we want the text to equal what click me all right and let's give this a command of I don't know clicker something like that and we'll create this function in just a second for now let's minor square button dot pack this guy onto the screen and let's give this a pad y of 40 to really push it down the screen a little bit okay so now we can come up here and let's create that function real quick that clicker function and in order to show your toast notification your toast message you just call the name of it in this case it's toast dot show underscore toast and that's a function and that's all there is to it so let's head over to our terminal m m i c tinter.com directory and let's run Python toast.pi and when we do we've got this button here if we click it boom it pops up after three seconds it fades away now I'm going to do it again without talking see if you can hear the little alert ding probably not but one two three boom it fades away so that's kind of all there is to it now we can take out the duration if we want to save this and run it see what happens then we click this 1001 1002 1003 1004 1005 1006 1007 1008 1009 just seems to be going on and on if we click it it disappears or if we click somewhere else in the app nope we have to actually click the thing itself so if you don't have a duration it'll just be there kind of forever right and also we could play around with the position remember this is horizontal and vertical so if we want it to go up more I don't know we can make this 300 or so we run this now it's going to be way up here so you can position this anywhere you want on a screen remember your screen isn't like everybody else's screen so you may want to keep that in mind when using a position but you know pretty cool and you see a mitos title has a title here and bold we've got this little Windows icon and pretty simple so remember just import it up here in this first line toast notification from TDK bootstrap.toast I know up here we kind of imported everything why do we have to keep importing separate things I don't know it's just the way it is but uh pretty simple again just to use it we call it toast notification got your title your message your duration let me uncomment that out alert and position and of course you don't have to do a position otherwise it'll just default into the bottom right hand corner of the screen I believe yeah uh yeah and that's all there is to it all right so that is ttk bootstrap in a nutshell so I hope you enjoyed this video if you want to learn more about ttk bootstrap and kinter in general be sure to check out myteacinter.com YouTube channel and of course check out tkhinter.com think about signing up for membership there you get all my courses for one low price and while you're there be sure to grab a totally free PDF copy of my kick your widget quick reference guide book this thing is awesome has all the kinter widget attributes spelled out in great detail grab your free copy today just head over to tkenter.com forward slash widget-book enter your email address and I'll send that right out to you oh yeah I think that's it my name is John Elder from teakinter.com and I'll see you in the next video

Channel: freeCodeCamp.org

Views: 157,439

Keywords:

Id: 0tM-l_ZsxjU

Length: 203min 58sec (12238 seconds)

Published: Tue Jul 18 2023