001-Python Live stream Graphic User Interface Arduino-STM32 :Set the Connection GUI (Tkinter)

hey everyone welcome back so this is the first video of this tutorial and this is the one where we start playing a little bit of the gui so let me put an enter here and this is the gui that we are going to create a very simple one with us two drop menus and some bottom uh we are going to go through a lot of details so you will understand what's going on and how we are going to manage this but if you would like to learn how to create this gui in a very good way just stay tuned and follow this video this video is a part of the tutorial where we are going to use python to create a user interface and communicate with a microcontroller and as you can see we do have a bunch of steps to go here this is the first video where we are going to create the initial user interface to set up the connection so in general all the code is written on github so you just have to follow you don't need really to type just understand the logic we are going to use python and the text editor is vs code finally it will be quite hard for you if you don't have any knowledge of python to follow up with this video but i will try to explain and to go as much as possible in details then for this tutorial this time first of all we need to go through a little bit the gui management logic so i explained to you how the logic will be built for the whole guides that we are going to see in the next tutorial so you have an understanding about what we are doing from code perspective then we are going to start coding setting up the root view after that create the connection class so we are going to use classes and also create the static widgets the one like label and after that create the option menu widgets and finally create the buttons so let's jump quickly and take a look on the general gui management logic okay so first of all we are going to use the tkinter this is a python library it's something standard which is really good so you don't have to download nothing for this moment so we do have our pc we would like to have our python gui we wrote a bit of code and we do have our root so the root is a widget so don't mistake me this is a widget and this is the widget that will create all the other widgets so be aware that the root is one of the most important one the solidarn that you will build on it all the others graphics all that they call widgets so after that on top of the root we are going to create frames we are going to manage our interface our graphic interface using frames and why using frames because frames are kind of a local routes so we need to have these local routes and after that we will going to create the widgets but here even a frame is a widget but i'm referring to widget here as the other static or even dynamic component that we are putting together there and why we are creating a frame because one of the things we can loop through a frame to get all the other component inside is a kind of apparent for that widgets and this will help a lot to manage the gui and also the logic when we will need to get data extract data or even to manage the graphic itself and also there will be some situation where we will create another frame put some widgets but also putting a frame inside the frame because we need to have other element inside the frame that we will need to manage so in general this is the picture we were going to create a route but on top of the route we will be managing through frames so we can access easily the data or the component that they are inside understanding where we are going hope this is clear but if not we are going through the code and we you will see directly how we are going to manage that so we don't need to spend more time we can go and job setting up our review and start our coding we are going to start by creating the files that will manage our um our classes so the first of all let's create the master dot py so master here dot py this is the file that we'll just call the main route and we'll run it but the most important here we will create another one we call it the gui master here where we create a lot of classes later on and we call it gui master dot py so first of all let's go through the gui master and initializing the our first class so before that we will uh we are going to use the tick inter so from tkinter what we are going to import we import everything so import everything like this and after that what we can do is put here the class name what we call the root gui and we just put here and make the definition of the initialization function so we call here the init function we don't need to have the known here that we have here like this and the first thing that we had to do is putting self is equal the tk so it's a capital t k by just doing this one we are initializing it's not self itself the truth this is what we are going to call later on just by using this we are initializing our roots so let's go now to the master here and from the gui master import so we do have only one function here and that's the gui the root gui what we are going to do we are calling root master this is the one that we will control everything and that will be equal to the root gui here and we don't need to input nothing because this class will need nothing and what we can jump directly and try to do is go for the root master like this dot root and what we can put is the main loop and just doing this so if i go here and put python master i don't think have where i am here so let me check again so let's open in the terminal so if i put python and put master like this what did happen is we do have our gooey here this is the root guri that we do have here that's perfect but there's one thing that i quite really advise you to do extremely important to make is to go and put at the end of this file on this one really at the end and whatever the code that we are we are going to continue and we are going to put if name here is equal to main like this just a moment here and what we need to do we can run the root gui um class okay let's put this one like this and equal to equals else if would be wrong so what's going on here is that um what we want to do is this class is never executed only when it's called by the master file and what's happening here if i keep this one what may happen with other code is the code will be executed also in the gui master so by doing this because when i'm executing the master here this file itself will be a main file when the others will be called with their name so python when it would be going to run the file it will check here so i am in this file and am i in the main file no so i will not be running anything but of course because this one is the main it will be run and there will be no issue at all okay so let's run it again and see what's this wonderful root that we do have yeah it's nice but this is not the size that we want at the beginning and we need to work on quickly to see you'll see how quickly we can improve this one and have a better view for this so let's go and we go to the gui master so here what we can do is just what we can put is self dot root again and dot title so we can make a small update so what we put here is serial communication for example we can change the name and you can see quickly what would happen so by running this we will have here serial communication written here so now what we need to do we will do a little bit of aesthetics just changing a little bit the size as we want and also configure a little bit the background color just for you also to get familiar with how to modify this route let's go here and put self-detrude again else dodge route and what we put dot geometry and what we can put so now this is a number that i worked on so you can play a little bit with it so this is the width and this one will be the height and that will be 120 and finally to change the color or the background color so i'll put here and the root and i will put config what we can put this is a bg for the background equal and i put white okay let's save and run you can see let me show it in the screen you do have now a very clean with a size that we need of a nice a gooey roid gui okay that's good so let's go now to the next step so we created the the the main route one and we can jump and create the next frame that we are going to manage and this is about the communication frame the one that will connect with the microcontroller so what we can do here is create another class that will be managed separately from the root gui let's put here class and we will call it the communication gui or com gui and put here and as usual create not here but yes we can create the um the initialization function so we go for init like this i will remove the noun and the pass and i'll keep the pass for the moment and so the first of all what we are going to put is the frame here so we are going to to build the frame and after that i will create another function the one that i call um publish so the one that will be using for publishing so i'll put here publish which will put the component on the grid so i'll put publish here and i usually i would be using the self and putting pass for the moment so this is something that we create but here as an input for this frame what we will need is to have another extra parameters that we can input here is the root so we will need to have the input of the root and what we call here so let me remove the bus let's go self the truth it will be equal to the root so we will be keeping the root with us and after that after that what we can make is also put create the frame so it will be self dot frame so this is how we and this is where where how we are going to create a frame and in and in python it's a level frame and the root of that frame will be simply the root here and we will give it a bit of text let's say text will be the communication manager the com manager for example and also we would like to have a little bit of padding the padding is the distance that you do have with the other element output pad x is equal five we'll see later on and also pad y is equal to five that that's something fair and to change the background we can put is equal to white okay so let's put same so it will be uh simple to understand but when we do this you will check here this is not going to to work until we go to here and what we need to make is put that the before that before the communication master we need to have the cam gui also included here and what we can do is com master is equal so to initialize with the um class so we put com gui here and we need to add the root which is the root master dot root so now we are passing the root to this new class so saving here but still even we run like this let's run it and see nothing will appear simply because there's two things it will at the end even of this part of the video nothing will appear but i will explain why because we need to publish this one so what we need to do here is to start by putting a grid for this one so let's go here and put a self dot frame here that we will have and we need to put it in the grid so put it and place it inside so what we need to put is we just make it's row equals zero so i want the row zero of the root and also in the column zero also because this is something that we would like to have at the really highest top left and the row span how many rows we would think would take let's say rows one will be equal three so it will be equivalent to three rows and also from the column itself column span it will be equal also to three this is this is not an arbitrary choice uh i would rather maybe it ahead and different way of doing it or oh span and column span one one but this time we will use this one and finally we will add it a little bit of paddocks here i say let's start by x here it is equal to five and this is to keep a little bit of distance against the main root and also the pad y we'll put five okay but even with this even with this we should not expect we will not yeah as i said will not expect to see nothing because there is nothing inside and as far as there is nothing inside the frame will not appear so now that we created a frame and prepared it we can jump and add some static widget within the data frame itself okay so we do have the publish here let's start also before that putting self dot publish and this will allow to immediately publish whatever the element that we do have here so publish will be at the end so with this one and also we need to put this gui here the communication gui class also within this list so we don't have anything running inside this file in a way that we don't want to have it so let's run here and take it look so as usual we don't see nothing and let's start by adding the labels or the really passive element that you do have so let's take the first one and to declare the label so i will add directly the curve so don't need to enjoy my slow writing and we can see so first of all i put self.label and about com that's the name i will give it and it will be a label the root of this label will be the self dot frame and that would be the frame and that the gui and the text will be available ports because within the level we will check all the list of available columns that we have connected and after that the background white the width 15 and the anchor will be at the west means i would like my text at the left okay so we do have this so let's save and after that we just need to put it in on the grid and put a position for that so let's put this one here so we go to the publish one and we add this so we put the label and the backcom grid column one row two so that's where we want to have this one so just to repeat again so what we are going we are doing right now is we created the frame we created the label and then we put self.publish which is a method that will be used here to greet everything okay so let's run it pretty quickly the result yeah i need to save before normal so let me here run it and let's check we do have our label here with available port ready and you can see there is the com manager as a text and it's big enough to hold this nice label so now what we are going to add is a second label here and you will see it simple as the first one we just we call here let's put the label i have the text so we don't wait in writing so don't forget we would like to have the cell.publish method at the end and we do have here the root and the board rate that we will be selecting same we would like the text to be at the west or left and at the end what we need to add here at the publish will be to put it in the grid but don't forget again very important step here in the grid just for you to understand how i'm using the script so it will be same as a column one but the first one will be row two the second one will be row three so let's save here and put so you will see now that i have my available port in the row number one sorry no column one row two because i kept this one empty after that i do have the other one in column one but row number three which means in the other hand i could put one and two but whatever the number will be the one and the next one so now we do have both levels of the passive element ready here that we can use directly good so we finished adding these labels and i hope you you could understand that's very simple but just for you to go step by step at this level to understand what's going on how we are setting up the gui so we finish this two really passive element we are going to add now the uh option menus and this is a little bit more work so we set up everything from the passive element and we are going now to create like the drop menu or the option menu and to do that i'm not going to add it in the initialization function here because that's a little bit heavy that we will have here and just to keep our maintainability quite high and we will have a simple code to manage because as you can see we already have a lot of lines here to manage just by putting declaring this variable so i will create a new here method so i will call it dev com for the port that we would like and option menu and that will be calling only the cell so that's really helpful to to work with this and what we are going to do first of all is to create a dummy list we'll call it the comms and we will put here just a bar like this and also another com3 that i'm adding com3 because i do have a com3 but that can change from computer to another that's typically random okay that's the the that will what we would like to have in our option menu in the dropping list that we will see so this is what we would like like i can add here a bunch of columns other ones so i put um nine and seven usually the computer doesn't generate one two three directly so i'll put four and here five just seek to to have a list but i can let me change also because the the order is important i'll put like like here so you will see the list will appear in this um numbering after that i'm going to create so let me add it directly here so you can see it i'm going to create a new variable that will be it's an object actually based on a string valve this is a very important object when you're going to manage with gui because this is the object that will allow to stock information and to input information within the um object of display so that's very important to manage this one correctly so what we are going to do is saying that my click of com this the click and the back column or the list of columns that i do have which is string bar the first element that will be displayed will be becomes this list the number zero okay and after that so i do have this variable that i declared within this two element and declared and then set to a certain extent after that i can use that one to create correctly or properly my option menu so let's go here to the option menu and go check for it so i will call i will have a new variable here self drop dot com here this is the drop menu it's option menu to add the menu option for the the dropping menu and after that i always have to set up say what is my route and here my root is the frame related to these this here this scrum gui and after that i'm adding the self.com this is the string that will be managing the input and output data so if i would like to read the data and we will see it later on we are going to use this variable and this star comes is the whole list that we will have okay so that's the most important step and after that just this is for from a gooey setup perspective you may even skip this step it's just we are putting the width of the gui for that level finally just as a part as usual to continue so we put it here as a cell the drop so what we can do if you would like to greet it and put it in the grid so let's so make it a little bit intuitive and we can see together so we put it dot com here is column one row two so for this one the drop here if we would like to do it that would be agreed exactly so we would like it in front of the console if i put like this agreed it will be column two row two so it's quite simple easy and clear so let's put like this and i know it will not work because even it will generate an error because i have to call my here put a self dot and that will be the com menu that you need to call the method and to see this let's do it quickly here you are you can see that i do have my drop menu the first one is this dash here and you can see come three two and six so we do have our drop menu but you can see it's a little bit tight but let's continue with that we will update a little bit later on so now we set up the com menu we can add the number of the baud rate that we would like to select let's go here and add another function that we can maintain easily and let's call it dev we call it board option menu like something yes strange names as i like calling them okay so as usual we need to create the string var object and put it in a certain variable okay we do have it and it's a different name and we need to be sure to have those names because we will need them later on to extract the data and create the whole list and then i'll be adding because it's no meaning to write it here the law of the boards that are all possible for the serial that we do have and the serial for python unfortunately it stops here where the stm32f1 can go to one thousand one million volt per second which is really awesome okay so and after that we can exactly copy paste the same logic so let me copy paste the same logic here okay and let's go not here here yeah i forgot to add this one and for just aesthetics to keep things quite nice let's put this one like this and we do have the width and you can understand that will be exactly the same thing to put it in the grid to see how it's maintainable easy to manage so i will put here and great like this the grammar that's wrong like this and it will be for this one it will be column two i think so far it's very easy so let's go we do have an error of course because i simply forgot to add this so to add to add this self like this and dot we put this menu because this will create the object and what did happen is i didn't create the object and just publish it and they say hey man why you are showing me this object without creating it or doesn't exist let's try to run it now and we do have this com available port that we will detect later on and the list of all the object but something is strange i'm not seeing this one as the first one but let's go quickly and check and you can see this is because we didn't use the set command let's go here we can copy exactly the same thing from here we're not going to use the click under barcom we are going to take this clickbd here and from the perspective of we're not going to use com we are going to use pds 0. let me take this here and pds position 0. so let's save run again i think this is a good mistake this is something that show us well that's working and we do have this just dash here so that's perfect okay just for now for aesthetic purposes i'd like to add a little bit of things feel free not to do it but just to have a beautiful view for this um drops so what i would like to do is to add some paddings like just a self padding here i'll be adding where that will be yeah here some parameters so i will always keep the publish at the end because i'll be creating adding things and from the padding perspective from the to have a nice one i will add some padding same only for the grid one for the upper one so it will create a little bit of space let's come here and it will create for everything so let me delete this one so this will create a little bit of space between the element just to to make the eyes easier to see and better like like this one a little bit better it's not really very interesting but just from aesthetic perspective and for you guys to play a little bit more to see which one convinced you okay so we finished the drops now we can jump and add a little bit the bottom that will make the action going on okay let's go to the final step to add the bottom and preparing the logic okay so uh i guess you can expect directly so let me make this one here close all of this one so it's easy to see and maintain so now we created the option menus we are ready we can add the bottom so let's go here for the first button and this is the refresh button so we will need two button one to refresh the uh the the comps or the port that we do have and want to perform the connection so let's go and add here the button so i forget this one so same we will have the button refresh we will use this frame the text will be refresh and the width of this bottom will be 10 and that that's quite very simple thing and after that to publish this all to put it in the grid it will be a really straightforward and you can imagine if we can put it so we go to the publish here and we just add the bottom here and you can see the column will be column three because this is column one this is column two and this is column three row number two so let's save and if i do like this you can see the bottom it's really simple and straight forward then we are going to add the other and final bottom to this uh frame and that will be the one that will make the connection so this is the bottom that will connect let me bring it and copy directly here so let's go to this place and same as that but there is one different thing that you have this one will have a state disabled yeah so we will have a disabled state right so i'll explain to you so this is the bottom connect so btn.connect and if i go here you can imagine you see now how it's simple when you structure the job that we do have how simple is to create the the gui so connect and it will be the row number three let's take a look i hope that i wrote it correctly if wrong i will yeah and we do have this connect button that is disabled and why this is disabled because first of all i'm not allowed to push connect when i don't have selected my my board and the port that i would like to connect to and i would like i would need to put some logic here and this logic will be triggered each time i'll be changing this um let's say this option menus and that will help me to control that what we are going to do right now is to add some functions to explain what's going on so first of all let's go to the um option menus that we do have whatever the baud rate or the uh for the com the columns itself and what we add here very important we put comment this is a comment that will be initiated each time so we will need and it will be a method it will be a self dot connect control that's what what we can call it so it's a connect control but we need to go here and put put it for the moment so the connect control okay and we will put a pass on it for the moment itself and we can add here passages or let's put a print connect control oh my god connect control just just for us to see the behavior that's going on and it will be exactly the same so for this one connect control here and we go also for the option menu we need also to add the command each time not to publish exactly when i create this um widget and each time i go for it it have to update and to check so let's quickly close all this because i don't need to publish anymore and also close this just to have a clean view of what we do have let's go on this one and if i select something i have an error they are saying it needs to have two inputs for to be sure that it's working well so i guess probably there is something wrong on this let me have a quick check saying what they're saying take one position but two were given okay so what i can add here just i put uh like like no no uh other i'll put other here it should be fine with that let me run it again and let's check yeah we do have each time we click here we do have logic that's perfect that's exactly what we need for the moment because that will be in the next video how we will manage this logic okay but also we have two buttons we need to associate some function to the bottom that we created and those functions are really important because one will be refreshing this one we need to keep refresh what we do here so to call it comment or to call a function from the um the bottom is always we put a code on a command and we put say self.com and under bar refresh that's the function that we will be calling it will be also defined here let's put def here and we call it as we said that will be the com dot refresh like this and it will be having itself it should be good so let's put print and say this is a refresh just for the sake to be sure and let's save check that everything goes well let's run here and we bring it if i refresh it's refreshing that's perfect that's really good so final one is to add a comment where is it to the connect button so for this one so this one we cannot able we're not able to connect but what we will do is just we will put just a moment self serial com or serial connect that will be much easier to do to get there so let's put yourself dot serial and connect this well that will make the big thing and there will be serial connect so let's copy this one so we don't have an error okay we put here and we put a def we put call it serial connect for the self and print here connect and just to get back to you guys why it says i'm receiving two element for the connect control because the connect control is coming from the option menu and the option menu when it calls a command it sends also the variable the string valve that we created just to be true with that and let's remove the stat here well that's only for now for purpose of testing okay so we do have this button so if i put refresh is refresh connect is connect okay so we do have our gui ready for the next step the gui is here we need to put a little bit of logic and also start the connection with the serial command thank you you

Channel: WeeW - Stack

Views: 1,201

Keywords: python, threading, thread, arduino, arduino serial read, Python Pyserial, Python arduino, Python UART communication, Python MCU UART communication, STM32 PYTHON, PySerial, Python GUI, tkinter, MCU, Matplotlob, Python plot chart, plot figure, plot, figure, widget, tkinter plot figure, Python OOP, Object Oriented Programing, Signal filter, numpy, scipy, python threading UART, Python Arduino data streaming, Control arduino using python, Use Graph in Tkinter, Python CSV, python arduino csv

Id: u3NnzRIwjH8

Length: 37min 9sec (2229 seconds)

Published: Fri Jul 23 2021