 Hi everyone once again welcome to this LPS course we will be continuing our lecture on TK we finished talking about tickle I hope you have all the things well understood now now we will talk about TK actually we are we are actually discussing TK for last two lectures today we will be continuing that but before we go into like today's topics itself I am going to give you a brief overview of what we talked about some of the things may not be very clear in the last couple of lectures, but then we will see how I can clarify those points so let us do a recap so mainly like we talked about the TK fundamentals so the GUI essentially we fundamentals actually basically there is concept of event the event is any operation or movement using mouse or keep keep at nowadays even like the finger moments on that screen things like that are also like you can call it as an event but traditionally what we meant was one of all the mouse moves like I don't know whether you can see that there is a dark moving over or some kind of keep at presses is an event on a window and then the move itself you can say that it is moving the mouse from one point to another point that it constitutes a move and then the key press is basically any key either the mouse keys the particular one like the right click left click or middle click or a key on the keyboard you can also add additional stuff like the role rolling of the mouse things like that so the main thing that we will be talking about in TK is how do we develop applications that can capture these GUI interface and work with them to achieve whatever the that you want to actually one more execute a particular command so the other concept is also regarding the windows the window is any specific area of the terminal usually for the triangle and it is bounded by a frame so we will talk we will see what is the thing and then widget is the other concept which is part of the window that does a specific task basically it has a shape and it does a specific task so these are the two points that you want to understand basically the regarding this in most of the textbooks and things like that they use window and widget like as synonyms but in this class I want to separate these out and basically window is a collection of widget and how we will define it you will see this again and then most of the things that we will be worrying about is regarding the widget and how do we enable the widgets and how do we work with widgets how do we assign commands to widgets how do we create with this things like that that is all covered under this TK or toolkit so here is a brief look at the concept so you can think of this entire region being a window okay so the window includes actually if you look at it there are four widgets as such so there is a frame which is probably the widget number one no actually the widget number zero and then you have this is number three and then you have this portion of this window which is itself is a widget that we call it as widget number one we will see like I mean we have already seen like how these things are defined but anyway and then there is another piece here which is also embedded here that is the widget number two and then the third piece which is basically this is all the directory name send them this is widget number three in fact you can also think of this structure here as another widget four so altogether now you get like active five widgets in this particular window so remember this concept we will come back to this essentially like I mean so and each one has a different function as I mentioned so for example this one is what is called the banner widget it just displays the banner the frame widget essentially like outline for thing and then this is the menu a widget which contains like the what are the menus different menus here it is file and help and then the main display widget which is this one plus there is a menu bar widget which is essentially make sure that this crawl bar and move up and down okay so that is the basic concept of windows and widgets so in a sense widgets are objects instances of classes so now we are introducing a new term called classes that represent buttons frames and so on so if you look at here actually this could be we can make this as a button and we know already that there is a frame okay so the first thing you will need to identify in the need to do is to identify the specific class of widgets widget that you would like to instantiate so for every class of widget we have an equivalent command which we will talk about it little later in fact we covered this in I think lecture number two or lecture number one rather so classes are important because they determine the president if there are multiple bindings to a single event so what are these bindings essentially the bindings are essentially like I mean once you have an event you can trap that event and then you can make the widgets perform certain functions based on the event the event could be like a key press moving whatever it is basically like you can make it perform certain things and to determine like I mean how these go when there are multiple widgets involved the class actually can be one of the so we will see like whether we want to and by the way the multiple bindings are legal and will result in multiple outputs which is also pretty much okay for example here there is a cursor move from one place to another place and cause of windows to become active as well as some command that may start running within that window so both of them are simultaneously having activated and both of them are running simultaneously perfectly okay sometimes we want to be specific so this is again something that we covered in the last lecture and then couple of other points to note is the widget command itself is deleted when the widget is destroyed so any command associated there with the widget solve like something is on so where is this command what is this that is also we covered but I will talk about it in the next slide and then one thing to note is the state of the element of the widget of the state of the particular window it should be readable modifiability and this is the principle that we operate with within the this framework so again like what is the state state is basically like once you get an event how do you respond to it and that is the state and then that state is essentially what we will be talking about so like the structure of the TK application we talked about this basically the widget hierarchy which I will cover once again and then there is one tickle interpreter which basically interprets all the tickle coding underneath these widgets and there is just one process you can have more than one application in that process but it is only one process in in particular and then we already talked about the widget basically again widget and windows are synonyms kind of most of the cases we will say like I mean basically it is even though it says particular look and feel it is basically we define very strictly as it has the widget is a as physical shape and it has a single purpose okay I mean this is the same thing that I talked about here shape and a task okay I will just add this thing physical shape and then a singular purpose so widget classes implemented are these ones I will also like cover some of this in the next slide too but think of this is frame label button check button radio button menu button even button has like so many different classes and we have menu as another one message entry text canvas scroll bar scale list box and talk about so we will be talking about some of these things basically writing a text we will talk about we will talk about canvas what we can also is we already talked about frames and buttons other things like the menu button and things like that have specialized items of these buttons themselves so you can actually look it up on those things and then we will also probably cover the top so let us see how do we create a windows or create a widget or basically an application so we need to create the main window using the WM command and then the top level actually like there is also a top level a command called top level to create the top of the then we define widgets within that window again for this I want you to remember the widget hierarchy where we started with the thought and then multiple dot txt or frame things like that basically like there is a whole bunch of these hierarchy that we talked about so remember that basically and then that is how we are defined and the way that we define is we start defining widgets one at a time so here saying that frame is another one widget basically with a size and then we can use back place these are all like command names so we can do that and then we can also create other classes of widgets whether within the hierarchy or at the top level whichever one based on the application needs we create these other widgets with the buttons dialog box and then we define the commands that can be run on these widgets using the dash command option okay so this is the this is something we talked about and then we also bind events to commands using the bind command so the events are again like those key presses and things like that so the we can call this button but maybe we see a run and then this run gets activated only if the key is pressed on top of that run so that is the event that we trap and then run particular command and then that is denoted by this command and then once we do this and we create this the graphical picture as to how this application looks like and then we go ahead and do the depend all the procs within whatever we are coming up with inside this the graphical picture so all of them we have to define which are declared in all the previous sections so with that actually like we saw some examples but let us see like I mean so the top level widget is again the dot and any other widget is defined as hierarchically from that dot so dot and then x a under x you have y under y you have actually like under x you have and here but like this then you have z and then under a you have y which is not the same as x of x dot a dot y here x dot a dot z so particular widget and then how do we configure widget this is another thing that we saw this is using the config command or configure command so the beauty of this command is the it is the same command that is also you can use it to query the particular configuration for example here as you know like I mean window is dot x and we give this config command and then say like background make it red so now the command goes and actually like configures the this particular window with the background color of so now if you omit this red and then just give x config dash background that returns this string and you can say that basically like this is the background and then that is said to background that is the dash background and then actually the background color is determined by f of e4 c4 x or in and then it is actually red the actual color red so it gives you like all these information one thing we notice you know I can query these but you know these things are just noise I don't want to do any of these I only want to know what is the background color and I want to know just red so how do we do it so here there are there is one additional function that got defined which is actually it is a synonym for config get called see get and see get basically when you when you give that command with the dot x and what is the option which is background you directly get just x just red so it is a very handy command policy get so give that in mind and then we can actually in fact if window is already configured we can actually change the existing configuration of the widgets using perfect amount so again some of the popular classes of commands also the objects essentially in the windows button radio button menu canvas frame text this box now I also talked about tags essentially the tags are objects associated with the text widget essentially and then the each tag is referred to via a name chosen by the programmer each tag can have a number of different configuration options the things like fonts colors etc that are there will be used to format text can be put in as a tag even though like I mean the tags themselves our objects having a state they don't need to be explicitly created they will be automatically created the first time when the tag name is used okay so here the text for example and the tag is on figure highlight line background yellow font and really raised basically does that to the text window as defined in this command then we also talked about this binding order essentially which is what is multiple bindings match anymore as I mentioned everything goes in parallel but we can make it most specific which is one binding figures for tags and it follows the default order of the tags this is the digit class top level then all but we can change the tags with the bind tags command so again we can also like bind a particular tag to a particular window so one thing we notice here is like just a general tag is text for using these highlights and all that but in general any tag can be bound to a particular window and reclassify that window into a different one okay so here like I mean we can say like bind tags not be my button and then we can also say that it is bound to this particular actually like I mean so this is who all so that is what we are doing the bind tags for and we can we can also like I mean if you want to skip a particular tag we can just say break and then that can actually skip some names tags as well I am going to refer to the textbook for the exact definition of the bind the tags essentially like it is a widget class name basically like a button or whatever it is and then so that is where it is bound to so that is what we covered in the last lecture today we will talk about some new topics in the tk class basically and again we will use some examples to illustrate how tk works for these ones so here is an example for a calendar or it is called tk camp okay so we first initialized the global variables without basically months generally separately all the months of here then we can execute this command called date the date actually returns these this whatever this particular string which is like the day the month the date and then the time the time zone and then the year so we take the month as the index one of this string can anyone tell me like I mean why this is one actually this string starts from zero so this is one and then the index for index number five denotes the year so again we count here from here this the exact date is actually two this entire thing is three this is four and this is five so now we get like month and the year now we can expand the abbreviation that date gave us basically for so now we can say that in this loop we can set we can find out like I mean which month it is so basically like run it through this and then essentially like we are seeing whether there is a match for or any particular month that we got here in this so the way that we are doing it is essentially like a string match where we do like dollar month because we can go with the the whatever like this this particular month that we read in with all these things and we just do a string match and when we do this multiplication actually this can result in a zero or one based on whether it is matching or not when it is matching we capture that and then the you know we break the loop so here we define some menus the menu action basically which is called a do menu that is what we are defining which is we just set the month to dollar and this is the global month essentially and then we basically configure these windows essentially got it and then we configure with that particular month so now this will generate it here this number and possibly this year now we need to generate the calendar output so we can run this program for Cal and then collect its output so to show calendar that is the next prog that we are going to write which is having the global as month year and months which is passed from the top level into this program as you know which is already set all these things so now we do a list search of the month with the month itself and then we make it plus one essentially so this will give you the index plus one this is essentially like the actual month representation so as you know here this index actually is 0 1 2 3 but in reality generally is 1 2 3 4 a plus 3 4 right so we need to add that from that index so that we get the actual month and then we use the Cal program where we pass the Cal problem this month the number of the month and then the year and then we basically get the whatever the result is and then here like I mean we just define from error conditions also just to make sure that it doesn't error out and now for the same window essentially like there the it's a text box window we will talk about that in the next one we delete and then insert the output of the Cal right here essentially like set Cal is here only where is in there when is that the error which is set to error but otherwise it was set to the calendar from the Cal function now we set up the top of widgets basically we set up the frame and then we pack how to define that and then we have a menu button and then that is the dot md so here the same thing so that it is configured as the month but we have another menu item which is defined as a window under this form md which is called the m and then that has a width of 12 and we just pack that towards the left now how do we populate this one that's for essentially like I mean we say like for each month in m basically then we add a command to get the label and put it in so now we have to look at this picture we have this is all that we set now we need to get to the date and then we can see the calendar so now for the the the year again we essentially like I mean we have a variable called year and this five and then basically that is where we can enter the year and then these do similar kind of things basically we set up a button called C calendar that is this button here C calendar and then that also has a text width and various parameters so this is a this is a text command which is a text window and then we pack and then we say the initial display is show calendar okay so this is one full example of a typical calendar or a pk calendar I think like you can try this out first at your free time and then see how it works and then pretty much then it will become self-explanatory so a few more things basically this is something that we already talked about the C get widget essentially like we did we say like C get foreground it just gives the black again as I said earlier it is very easy you know much much more easier than doing wdw.w configure and dash foreground this gives all kinds of jump right we do not need this now the as similar to Perl the E and V array contains the environment variables so E and V home in the editor things like that so you have like multi-line area text area widget essentially like I mean that the text widget essentially the text widget is essentially a multi-line text area widget with a number of features thousand and one features you can do editing and you can use emacs key bindings you can do scrolling from manual and from code x and y axis and it has a flexible text formatting multiple fonts and monthly colors are supported text tags that we talked about earlier and then also selection manipulation selection is something one command that we talked about in the last class I will explain some more either in this class or later on and it also arranges text and embedded widgets in lines the lines can wrap but cannot flow so what are some special widget commands set get delete select mark tag search see window y view x you bind these are all special widget commands for the text widget and then the configuration options we have a state that we can define height and weight height and width the spacing one spacing two and spacing three and then what are the state tabs and then we can say like insert background and or select the text that is there inside the text widget have the following things one is called index which is essentially like a line dot character so if you have like the high lines and then say like I mean line starts at one and character starts at zero so this is something like one two three four five and then this is zero through what I will say 18 and then now you can actually go exactly to say 53 and then you can read out this number of chapters and then we can also do mark basically a name for an index essentially so you can say like I mean T mark set my place 6.23 so it will exactly let do that and then tag is also like I mean you can use tag to find the ranges of text for example you can say like the tag add my words 6.23 6.30 so it will go to the specific location and then perform this function just called the add and then same thing so this tag will be very useful and as I said basically the tag is one thing like I mean it is not a permanent command basically the state is saved so a tagged text can also be configured and we can use configure command to configure the tag test and then the tag text can also have bindings we can bind certain e-strokes to that particular command and then we can call it to execute certain things and then usually the text widgets can serve as the geometry managers for other widgets so here is one quick example essentially which is using also this new command called image so using the image we create a photo file photo and dash file called bar.gif which is this one now we say basically like t.l image image 1 and then t window create 1.5 to t1 and then that brings up this window here so then now we come to the syntax coloring mini editor so the tk emacs does not customize syntax coloring using the regular expressions like emacs i like 9 package it still has one text widget one scroll widget and can read and save files about 100 lines of well-convenced code is available through this through this program so we come to tk emacs basically like for all machines routine so here also like I mean we see basically like for all matches we give a pattern and the script with the w option so first of all we determine the number of lines in the widget which is scan in w through end and if you count the number of lines it has some value basically and then for every line we increment the line and then basically like and do a using regular expression we kind of find what is there and then basically like we generate that as a mark set command and then we pass it down and then move on and here is the do color souping essentially which is for all the array names and for the all the syntax pattern arrays called name we go ahead and delete the tag and then basically do the tag first last okay and now we load that file for loading the file essentially we call the file and then we set the file as file open and then we just want to insert that particular data and then the right file is essentially like when you open the file and then just write it so here we define all the colors and basically all the form that we wanted okay so continuing with the text widget the tag text can be configured so that is using this dot t tag configure my words foreground right and then the tag the text can have bindings essentially so if you have a text like this it can actually bound to the my word don't list that list so it need not you don't have to do it explicitly and then the text widgets can serve as geometry managers or other widgets we will also see this basically how this works and then the syntax coloring many because the pk emacs does customizes does customizable syntax using coloring of coloring using regular expressions like emacs highlight 19 package it is a one text widget one scroll widget one read and write save files and then about 100 lines of well talking in the code what is the rationale behind the tk emacs so here is another one for all matches routine so here we define that for all matches w pattern script and then we do a scan basically like to see whether that exists here we just calculate the number of lines essentially and then in this loop essentially we get the end and then we add the one point to it and then the do color routine basically does the coloring here is specifying for each of the arrays you also specify the syntax pattern and then we basically we can go ahead and delete the tag itself and then we configure with some configuration values so the do color routine essentially the same if it works the same way basically like we delete the that particular file and then we fail except a file open to the dollar file and then until the end of line in the file for the dollar w insert and insert n and then so that will be the read of the thousand lines and then the right file same thing where basically we do the opposite this is the right file w file and then we do f open log dollar file with the w permission so here you see basically let me show you this open file and then we basically whatever we collect in that window we just say puts and then the dollar w and then we just close that file so we take a look at some of the emacs how it behaves in terms of other other thing so one is the set syntax pattern or types which is gets all the also numeric characters and then set syntax colors types yellow that checks for that syntax pattern directives again syntax colors or directives and purple come that is another thing then the syntax patterns for new line types essentially and then therefore that we but here essentially like we can see that once we have the the syntax patterns new line so syntax pattern new line types essentially has all these various types whether it is character it is a short or integer long unsigned signed float and then we declare the color essentially as yellow and then the syntax pattern is the regular alphanumeric and then if all these are commands also and then following the commands again it is a alphanumeric and then we also specifically look for certain syntax pattern to do so star of star here so this is one thing so now we actually it comes to setting up so in this one actually we are reversing the process a little bit so in the previous example I mentioned that actually do all the frame and build all the GUI and then go back and fill up the procs in this one we actually like did all the procs of them and then now we are going to do the windows so here we set up the widgets basically we call it text widget dot t and then basically we give several other things why scroll command insert background and width width and height so specify all these things and then we pack it and then we are just from the left side and then we just expand it to fill essentially and then we also give some configuration items we configure as tabs 32 64 96 and then configure background is black and then foreground is white so we will come to see like I mean why we need to be shorty and then we also generate a scroll bar and then that is on the right side and then we essentially start doing the key bindings so we do the control l for color of this particular window and then control s is to write the file and save the file essentially and then control x we bind it to exit so if you want to exit this particular window we just type control x and so the exit corresponds to this dot t and now if you run this the demo basically both the file and the top level wm title is te max file name and do the dot t and then now we can bring up the I will talk about the canvas widget but we will probably like see the the actual example in the next lecture okay so canvas widget is another type of widget which is used it is used for drawing primitives and essentially like what this text is doing forwards so it is basically it is just an open-ended rectangle where whatever you can draw and then that drawing is getting captured so here again for this particular widget there are specific commands basically add tag bind create delete d tag find focus we will talk about this also like in greater detail get tags item configure and move and post script we also have like the other widget configuration option which is close enough scroll region x scroll increment and y scrolling so essentially the canvas move can be drawn on so here we can draw a smiley face with all the various things and then basically coloring inside so in order to create this we create a noble basically 3 3 200 fill yellow that is this one essentially and then outline is black which is the curve of the outline and then we also have another one 50 50 60 70 eyes each one we create exactly their location and then we create an arc which is for the smiley faces for mouth that is also done and then we create this to squeaky arcs the tiny arcs which is the next so this way we create this smiley face now each of these drawing primitive is an item in the numeric index so when we create that oval it returns the number for it and so the items can be tagged as in the text widget so you can just say item configure to and then tags yes tag is eyes and then same thing eyes so we tag these two ovals as eyes and then we can also search items within this canvas widget and using this find closest so if you give a find closest and gives it give a coordinate and then basically it returns to which is the left eye left eye and right eye and then items and tags can also have some bindings you can say like I mean dot see bind eyes enter and then you can say being and then outgoing or if you say like if you press leave then it will unlink so all these kind of things so I want to end at this point essentially I think and then next lecture we will take upon the furniture arrangement as a program and how we can design it and how we can execute it using tk so I think that is pretty much it you will summarize as we go along and then thank you once again or listening in thanks