Python Tutorial - How to Display Serial (Arduino) Data on a Scrollable Tkinter GUI

hello everyone so this is going to be a tutorial on how to make a gui using python specifically we're going to be looking at reading in data from one of the available serial ports on your device so we'll start out here be importing a few modules one of them being tkinter which is the gui library so we're using a little bit different syntax here and basically what this allows us to do is it allows us to access any of the classes and functions within tkinter without having to add like tkinter to to the beginning to um to call those classes so that'll be convenient and it'll just save us a lot of time and then a couple more uh if you watched the last video we use this to access a list of all the available ports on our device and then this third one funk tools um which we'll see we'll see later why we need that um and just like the last video we're going to go ahead and create a list of all the available ports right off the bat all right and then we're going to also again create a blank serial object here that we will add to later so the first thing we're going to do is create an instance of our tkinter object so this is going to be at kind of the top of the widget hierarchy so we'll just call this root um tk so this will be blank and then to start we'll just like create a background color here so we'll use the config method and then you'll see here there are a bunch of different parameters that we can set so we're just going to start by setting the background color all right and then to make sure this continuously runs we'll create um just a while loop that runs forever and we'll throw root root.update in there so there are actually a few ways to make this to create this loop but i think this is really the most intuitive way at least for this tutorial so we'll just do it this way and let's just run this and see what we get okay so we just get there we go a blank window so this is kind of where we'll be working from and we'll make this larger and add a bunch of different things so but this is a good start so the next thing we're going to want to do is create a list of our available ports so just like the last video we'll just make a for loop here that loops through each entry in our ports list and we'll create a button so we'll just name this com button even though this is going to get overwritten each time we enter this loop so there are a few different inputs that we'll use here the most important right off the bat is we need to name the the parent widget i guess so in this case it's just root because that's the only thing that we have so parent widget root and then we'll create um we'll label this button and we'll name it just whatever the port name is we'll set the font and i've already goofed around with this a little bit so um i know kind of what looks decent for this tutorial and i'll just say calibri in 13. and then button height just put one and then width for this font size to make sure we fit everything on the button make it 45 and then we'll come back to this later but first we want to make sure we stack these all one right on top of each other so we'll set the row where this will be present and we'll just set it equal to the index of the button so then these will stack like i said one right on top of another and in the uh in column zero so far left all right let's just see what we get when we do this okay so you see here we just have a a window of a bunch of buttons here and we can click on these or whatever but right now that it doesn't do anything when we click on them so what we want to do here is we want to throw a command into the inputs here and this is going to be kind of weird but we can't just uh use a normal or use the normal like command or function syntax here we have to use this funk tools module to help us out so the first input here we need to put the name of the function and we're just going to make this up for now we haven't we haven't created this function but we're just going to call it init com port and then we're going to have to put the actual input name and uh input value of that function okay so let me zoom out here so we can see a little bit more uh we'll call that good all right so now we need to declare this function and i'll explain why we have to use this syntax after i make this function so we'll go up above the loop here and basically what we want this to do is when we click on the button we want to send the index of the button that we clicked back into this function so we can pick out which com port we're trying to open up so this is actually going to look a little bit different than the last video i made um regarding you know opening a serial port because uh in that video we were we were inputting the actual name of the port and in this uh case we're just picking out the index of our list so input here is going to be index from our button and what we're going to do is we're going to declare a current port variable and that's going to be the string of the selected port from our list all right okay so if we were to output this here let's just try this and see what pops up okay so in this case this com3 is what we're going to want to pick because that's where i have this arduino hooked up to that's passing data in via usb so if i click on this it it spits out this com3 uh usb serial device so that's good let's close this so um that's good but but what we actually want is um if we go back up okay anyways what we actually want is the the name of the port and not that full string so what we can do we know that they're well here let me run this again we know that um when these are listed that every time right after the port name there's a space after and that's the first space in the string so what we can do is we can just find the substring uh that we that we need to um actually open this port up i guess so what we're gonna do is we're gonna split this string off at the first space so well first of all let's go ahead and print this new variable and let's see what we get oh you make a mistake here [Music] oh it's my bad so this is comport.split or currentport.split so now if we hit if we hit the button it takes just everything before that first space in that string so this now we can actually use as an a parameter in our serial object so we can do is we can set this as the port variable all right so it's a little bit more painful than for than the way we did it before um just with the user input and the terminal but um it gets the job done so so we're good so um the other variable we need to make sure we set here is the baud rate so just like in the last video the baud rate that's uh that the arduino is outputting at is just 9600 and then we can go ahead and open up this port after we declare all this so we'll go ahead and just comment this out and i guess we're not going to see any we're not going to see any actual output when we do this but we can go ahead and click this oh another error oh my bad it should be open all right so now when we open this up no input in the terminal but we'll see later if this works all right so now that we've kind of handled that back end stuff we'll go ahead and we're going to create a window that um this data can exist in on our gui so first thing we have to do is create a canvas an instance of our canvas object so just like the button or parent widget would be root i messed with this a little bit before so our width will set to just 600 height to 400 and then we'll have the background just be white on this canvas and then we also want to set this in our grid so since all of the buttons are in the first are in the first column there and they just go row by row we want to throw this into the second column to the right of all those buttons so we'll put uh row equals zero column equals one and then since we want to have this uh sit right next to all those buttons and those buttons the the rows are very slim we want to make this span a bunch of rows so we don't want this to be confined to just the first uh first buttons row so i'll show you if we do it without the row span i'll show you what this looks like okay so you see this is sharing the same row as this first button which we don't want to do we want to have all these buttons lined up right next to the canvas so there's a few ways to do this and i think the easiest way to do this is to just set your row span in this with this widget to be let's just say arbitrarily a hundred rows so now if we do it this way then all these buttons exist right next to the to the canvas because this is allowed to span up to 100 rows okay so that looks good the next thing we want to do the reason that we're creating this canvas is because this this canvas widget allows you to have it's going to allow us to have many rows of data beyond what we can see just on the screen so if we didn't use this canvas widget basically we would be confined to as many roses could populate this window right here but the canvas allows us to exist outside of that which will obviously be helpful when we're when lots of data is pouring in so we want to be able to scroll up and down when we get this data in the window so now that we've created the canvas we want to create a scroll bar for the canvas so we'll call this vsb for just vertical scroll bar and we'll create an instance of our scroll bar object here in the root we'll set the parameter orient to vertical and then we need to make this create this command and the input here is data canvas dot y view so what this basically does is this makes sure that when we move our scroll bar that change is going to be reflected on the canvas so this value is going to be sent over to the data canvas to make sure that it adjusts accordingly based on the location of our of our bar okay and we need to place this row or this scroll bar somewhere and we're gonna put it in the second column so on the right side of our of our canvas there all right and we'll do the same thing we'll do roll row span equals 100. all right let's see what this looks like okay it's very small right now oh you know what i need to add so we're going to add this parameter called sticky so what this does is it uses like your cardinal directions to move within one of your grid spots so in this case we want to stretch our scroll bar out the full length of or the full height of that canvas so we'll use this sticky parameter and we'll pass in ns which stands for north south so that'll stretch it out for us okay so now we see it's the full length of this window here so that's good it's kind of unique syntax but it works so now we need to add a parameter to our data canvas so i'm going to say datacanvas.config and plug in y scroll command equals vsb.set so now what this does is basically the opposite of of this command what it does is it takes the location within the canvas that's being viewed inside of our window and it sends that back to the scroll bar so the scroll bar can uh exist in the correct location um yeah so that's good so now what we need to do within the canvas this is going to seem really redundant but we need to make a frame within the canvas and what this is going to allow us to do is um it's going to keep our incoming data organized in a row as it comes in so now we'll create a window within that canvas and what's going to be in that window is the new frame that we just created which again is going to allow us to to organize that data in a nice row and we're just this anchor means we're going to anchor it to the top left corner of our canvas and this input 10 0 are basically the coordinates on the canvas that we're going to uh start our frame so at 10 pixels in uh in from the from the left because we're anchoring it on the northwest corner of the canvas okay oh my bad this is create window all right so let's see what this looks like right now okay so we have our scroll bar here it's empty because our window isn't any larger um than our canvas right here so there's no scroll bar necessary right now okay so if we hit our com port here it opens the port up but we're not there's no function that's feeding data into this window right now so that's what we need to do next so um we're going to create a function that's going to exist in this loop next and we're just going to call that kind of an obvious name check serial port so this function is gonna check the serial port if there's any data in the buffer it's going to just post it to to our canvas there and just keep appending keep appending um to the to the bottom row um so and writing this function the first thing we want to do is we want to check to see both if the port is open and if there's anything in the port so initially when i was testing this out i figured it'd be sufficient to just check the buffer because if the port wasn't open i figured there wouldn't be anything in the buffer but it doesn't work if you just if you just use this input here so it's important to check both of its open and if there is or any bites in the buffer so first thing we want to do is read in this packet that's uh in the buffer if there is something in there oop recent racket so we'll call it recent packet and then we'll just re-line okay and like we talked about in the last video um this data is going to be encoded as a unicode so now we need to decode this for the for the purposes of you know displaying it in our in our gui so we'll call this one recent packet string and we will decode this from unicode and then what we're also going to do is strip one of the n line characters just like we did last time all right so now that we have a string here um for whatever was in the buffer now we want to actually post this to uh to our canvas so we'll create what's called a label and we we're not actually even going to name this um so this will be within our data frame that we created up here that's like its parent widget um we'll set the x or the text of course to our recent packet string um we want to set the font i think we used calibri yeah 13. we'll make sure the background color of this is white so it all looks consistent and then instead of using grid here we can just use pack and this will this will horizontally stack all of our labels as they come in so so that way we don't have to actually index what row this is going into um that would just kind of be a pain and add more variables so this pack function is kind of helpful in that way so let's see what this looks like all right so the arduino is on and it's sending data through the usb so i'm going to go ahead and click on this and you see we start getting temperature values in all right so we'll see what happens when we get to the okay you see our scroll bar is not working here yet so we actually need to add a function within our while loop here um that makes sure that the scroll bar is updated each time around so i'm not going to try to pretend that i know what all this syntax uh represents but this is what allows our scroll bar to to refresh each loop here so we'll see now that this will update after each packet and will be able to scroll up and down all right so you see our scroll bar is now getting smaller and smaller and going up as more packets come come in so now what we can do is scroll down and you see once we get to the bottom this thing still just keeps moving up towards towards the top as we get more packets in so now i can scroll anywhere in here and see what we got so so yeah that's all i have this um this definitely wasn't exhausted this was just kind of showing some of the basic uh basic widgets within tkinter and kind of how to tie that in um with the back end if you will to to read in our serial data here so that's all i got thanks

Channel: Von

Views: 2,705

Keywords: Python, Serial Port, Com Port, Arduino, Data Parsing, Receive Data, Transmit Data, USB Transmit, USB Receive, USB Serial, CSV File, VS Code, Visual Studio Code, Visual Studio, Python Tutorial, Learn Python, Python Basics, Python Automation, Python Files, File IO, Automation, Serial Data, RS232, Teensy, Development Serial, Development Boards, Dev Boards, Tkinter, Tkinter GUI, Tkinter Python, Python GUI, GUI, User interface, Python User Interface, Python Serial

Id: -SoEHsNKVpw

Length: 28min 39sec (1719 seconds)

Published: Fri Jan 15 2021