How to Plot Real Time Serial Data on Python GUI??

[Music] hi welcome to online chat or Vegas from JCR allows for more information and to download the source code of this video you can visit us at www.piofl.com visit [Music] us we also provide online training helping technical assignments we also do freelance project based on data science python machine learning matlab etc so if you have any such requirement then you can let us know by contact contacting us through our website which is www.hyken.com so let's start so here we show you we have this hardware which this is arduino hardware the code is written like that like that it is continuously sending the voltage of this potentiometer to serial port of the computer so we will write a program to display that particular data on Python GUI so let's come back to the original one okay now let's open spider so we are using a spider in order to write the code we create a new project file and first let's save it so let's save it with a real time plot GUI so in a last video I think we talked about how to plot real time serial data on a Python plot so in this we will move forward with the with GUI so in order to save a little time we will be installing the core we will be coping pasted from a previous region code and will be explaining this it and some of the part will right so first of all as far as import is concerned so we will import matplotlib provide a special package in order to support plotting on plotting on GUI so you can access that one like backends TK AGG so in this in this I should say module there is a figure canvas TKG which provides support for displaying the data owner GUI ok so will we have written all the files and then we are using tkinter because it is a Python GI ID so we'll be using creating gy using TK and then numpy and then serial module is used to communicate with the serial port ok so now let's write the code for main gy so first of all we need to create the object so TK equals to I should say root it goes to TK dot TT all right so it will create a root object and I can say planet no error and then I should say root dot title so I can say a real-time plot and then wrote or configure there is up like how what should be the size of the this gy so that can be use these two parameter like geometry and the background so in route configuration we in the background as blue and we are making Juma to 900 by 600 pixels okay so let's make it to 500 okay now in order to run the GUI this command through dort main loop so actually what is happening and this GUI enter is like a loop itself okay so when we run it our main loop keeps on running which displays all the widgets on this GUI like buttons and etcetera so let's test it let's run this one okay here it is so this window is open up GUI now will populate this particular window with the help of plots and all those things okay so y-axis should be let's close this so we can make it to seven hundred to five hundred fine now we will click create a figure object create plot object on GUI okay so for that first of all what we will do will create this figure object so and then that canvas will create a canvas to plot the data so actually how it is working first of all we create a figure object say and then we created the access for subplot we've set its title I should say title is serial Ashley or serial data and the next level is sample and why level because we are displaying the voltage okay now then we are limiting X limit okay why hundred because we are targeting to display only the elements so it should be a moving plot kind of thing and then we have limit y-axis because voltage will be varying from 0 to 5 volt only so let's make it 2 minus 0.5 to 5 so that we have a visualization of 0 as well and most important thing because we are interested to display our running plot that means you are changing the lines within that plot so there are two ways like we cleared the previous plot and then create a new one so in that case whatever we have written that goes off and it looks kind like a window is updating itself contrast we don't want that kind of plot we want a plot to be static that means access to be straight again only the lines within the plot should be wearing so that is why we got this lines object from the plot which can access this so it gives a array in which we can set exadata and the wide attractant rustling now we have created the canvas so figure canvas TK a GG so for corresponding figure and with the master obviously the root because we want to display it on on the root window and then we created it place and then we created the graph so these are the commands to display the graph on G Y so let's run it and see how it looks like yeah so a plot window has appeared up on this GUI now the next task is to create two buttons so we will be creating two button when we push the start button so plot should start up and when should press close button so the plot should close ok let's close it and now we will create buttons so because we want to create two buttons so we will be using TK tinker widgets of button right and then okay so we have these two buttons so root dot update is to update them whatever we have put previously then start so we have to take a dot button but it's saying undefined function okay TK dot button and then start function so it is creating because we want a function to be plotted as soon as you press this start so we have created our function plot start yeah we will use this value afterwards first of all let's talk about only this one and then we have placed it at this value X is 100 and Y cost of 500 so our total size of the is 700 and figure size is 600 so we can make it to 500 and then this width this is the width and high so it could be okay and v could can remain 6 and 600 okay that should be 500 and height is 400 that's it similarly axes horizontal values and Y is vertical that's fine and here so we are putting this a stroke button with respect to this start button so there are two value are two functions which get the particular object ax value and its width so this start that is the this version info and then W info underscore X so this gives the exposition location and then W info required with it gives the it gives the its weight its object with and then we are adding plus 20 there and we are adding plus 20 there and at the location y ok so now we want a particular function to be executed as soon as we press this star gonna so information of that function is created here Weah create this lambda function otherwise this function run as soon as we started and then another lambda function of stop but or to stop the plot is being created here okay so this command will give desired result when we update the gy otherwise sometimes they create observed result okay so this is about placing the button now we will start in this serial port because as soon as this window should start so it should open a serial port so that can be open here like s equals to s r dot serial and here we have to provide the comport so our Arden is connected to comm 8 and baud rate is 1 1 5 2 double zero right like several oh oh it's fine and then we create okay all the flush whatever input data and garbage input it as it should flush out so this is all about GUI which we have created so let's run it once ever it doesn't throw an error yeah because we have not defined the function so - maybe due to that let's close it okay there was no error but didn't display the buttons yeah comet access is denied before yeah one more thing if you run it and if you have not closed the serial port properly so in spider the variables are created here so if you run it again it may throw this error like comb or access is denied because it is already open so one suggestion is you clear all the variables prior to running the window again okay so let's run it I think these values are not being displayed the buttons their locations may be somewhere they are misplaced so let's check it let's close this one and clear all the variables at 700 by 500 we see this 500 and height is 400 okay Y value I am putting at 500 okay I don't think it should be hundred only Oh the y axis should be 600 500 shook well these are not overlapping anything is not overlapping X is not say I make it 50 okay they are coming over here yeah it is only 500 so I can't make it to 600 it should be 400 400 and then this one okay yeah you are just appearing at the end of this board because its height is also 400 so I should say 450 so sometime it becomes our little confusing let's leave it otherwise we'll try another that's right okay so we have now two buttons start and stop okay now we can move forward with writing our code so first of all we will create a function which will be executing now their problem in our last video we talked about using a while loop and then it keeps on plotting but there's a problem with this G why if we use infinite loop or a loop there so what happens it freezes the window okay and only that loops keeps on running and nothing else no other buttons key works and nothing else works so there's a option to it root dot after so what happens if we create a function and then we can execute that particular function at a regular interval of time with the app of dot after c'mon so that's what we are going to do here so first of all we will create a function deff plot sick or I should say plot data and it is taking nothing and then we will create some variables in global like condition okay so why condition because if condition is true we will be plotting which we can make it true at the start of the start button and the condition is false which will make it at the eyes impressing of the stop button so that we can have a variation only start and plot will start showing the data on a stop plot will stop it okay so I will write if condition is ghost because for true then it should plot it so plot it means first of all we get the data a goes to AZ dot serial read okay so let's get this one so here what we are doing we are first reading the data serial data and then we are decoding it because as we said we want to display only the hundred values of the data okay now we have here we are manipulating the data so we need to create a global data as well so let's make a data request for NP dot array we are creating an empty array and this charting and then we are creating a condition equal to false as well as I starting ok so now let's have a let's understand it this one so if condition is true it will read the serial port it will decode it and then it will append the data in it and till the length is less than 100 and when data length is greater than 100 we are shifting the next hundred values to the previous 99 values and on the 100th location we are putting the current serial read data value so this is how we can shift entire plot to the backwards so that is a very easy trick so because everything is a kind of array so we are simply like shifting the arrays and then we are updating that it at this is important why this is important because we are as we said we only want to change ok it is a local variable data here we have to defined it as well global now I think we things in condition is also variable you know so lines dot we are changing X data values because the x-axis should be and the equal number of samples should be there in x and y so X data should be equal to we are generating x axis from this one and then we are putting all the data on the y axis that's what we are doing here okay now we will now we will create two other function which we have created for these buttons like plot start and plot stop so we will create here def plot start so in this plot start we will access global condition and then we will make condition equals to true because only then a plot will start and what we also do as soon as you will start the condition we will if there is some garbage data is there at this Airport we will also flush it ok and then we'll make it plot stop so again global condition and will make condition is custo Fox that's it I hope that's fine and I said okay there's no use of this time I said we will be using another one because we are not using while loop while loops keeps on changing the things so what we'll do there is a condition root row after so after one each millisecond so but and then this shows the milliseconds the interval time and next is the function which function we want to plot so we want to execute this plot data at regular interval time so plot underscore data right so what will happen this will keeps on running and after one millisecond it will keep on executing this particular particular function and once it is inside this function it has to run consciously otherwise what Allah will happen it will remain there so we have to write the function here as well yeah so root dot after those debt function will execute once and then one comma so we want to plot this function again okay so it seems fine that's create all previous variable is if there is any and let's test it okay so there is no error everything looks fine and let's start it okay data is coming let's drop it it's a stop let's started yeah it's working it's working fine let's stop it okay so let's have a window the hardware as well so here is our hardware let's start the stop so I will continuously start and now let's see what happens if I change the potentiometer so what it should change across it so it is a kind of real-time plotting so yeah yeah so it's changing I am changing the value yes this hardware is sending data at an interval of 100 millisecond and that is sufficient okay so this is how we can display any real-time sensor or any real-time hardware to display the data on Python isn't it cool so I hope you liked it and yeah it is very satisfying so you can try it at your end as well so I hope you understand a lot from this video so if you have any doubt or any question you can let us know by commenting below this video ok and further we also provide online training helping technical assignments we also do freelance project based on data science Python machine learning embedded system MATLAB etc so if you have any such requirement then you can let us know by contacting us through our website which is www.hyken.com so that's it for this video thank you [Music]

Channel: Dr. Sachin Sharma

Views: 22,863

Keywords: python, python GUI, GUI, real time, serial data, serial, arduino, real time plot, real time gui, robotics, electrical, electronics, computer, arduino uno, programming, python arduino, arduino interfacing python

Id: 0V-6pu1Gyp8

Length: 25min 36sec (1536 seconds)

Published: Sun Nov 17 2019