Hi, and welcome to this new lecture. So
what I'll do here is I'll give the final
thoughts to our motion detection program.
And specifically, I'll build a plot using
the Bokeh library, where I will
visualize the times that the object
enters and exits the frame, the video frame,
and the final output will look something like this.
[No audio]
So what we've got here is a plot with an x axis
which is plotting the datetime, while the y axis
doesn't have any sense actually. So
it just vertical extension of these
bars, which you see here, and so what we've
got here is, let's say, I started the
camera this day on 17th of March, and so
this first capture here is, you can see it
started at this date and it ended after
4 seconds. So this object entered the
frame in the start date and stayed for
4 seconds there and then exited
the video frame. So similarly, we
have this other object, so still on 17th of
March and then we've got this hour
here. And then here starts the other day,
so 18th of March, and these are the
hours between these days. So
4 o'clock, 8, 12, 16, and 20, and you can also
see that I've added hover capabilities
here so that when I hover the mouse over
these bars, I get this information, and
you can also zoom in here. So if you
want more information about this, you
can see the information clearly here. So
that's the product. Now what the script
is doing at the moment is it is
producing the start time and end time
of the object entering the frame in
a csv file. So specifically, the program
is triggered in the video from a webcam.
And then, you got some objects in there.
[No audio]
Press Q for quitting, and so what you get is this Times.csv,
[No audio]
where each row represents all the start
time and end time. Okay, you know this already.
And so other moment, what we've got here is
also a list with a status of the
current frame. So this is let's say, 100
items. So that means we had 100 frames
in this 7 second video. Now, the
first thing you may want to do is small
improvement here very quickly. This
list if you having a webcam capture a
long video, so if you are running it for
many hours, this list may get too
big. So to avoid memory problems, you
may want to go here. So here you're
checking the last item of the list, and
the item before the last item. So the
last two items, and that means we don't need
this other items, so we only need to
keep two last items only. That means
[No audio]
just after we append the new status
here, so we say status_list equals to
status_list, but with only the last two
items. So if I execute this now what
I'll get is only the last two statuses
of the video frame printed all this as a list.
So the list is printing here.
[No audio]
So that's an improvement plot for the sake
of memory. Now, how do we get around
building a plot with Bokeh? So
first, we have to think about the
structure of our scripts. So this
plotting object that should be creating using a
quadrant. So this will expect a DataFrame
to be sent as an input. So we
actually have a DataFrame here
[No audio]
and we are sending that DataFrame to the Times.csv file.
[No audio]
What I'll do here is I would create another file.
So Python script say plotting.py, and here is where
I would write the script, the code
for plotting the data. In that case,
that means we need to fetch the DataFrame
of this motion_detector program to
the script. So, what you can do is you
want to say from motion_detector import df.
So that will make available the df
DataFrame, that is being generated
in this motion_detector program.
Which means that when you want to run
the program later, you'll be running
the plotting.py with Python. So, when
you execute plotting.py, plotting.py will
call for execution this motion_detector.py
script. So, the video from the
webcam will start, and then when this
loops ends, this DataFrame will be
generated. That means, after that the
script, the code of the plotting.py
will be executed. So here we will be
getting the DataFrame and plotting and so on.
[No audio]
I hope that is clear. So
let's go ahead now and import the
plotting interface of Bokeh. So from
bokeh.plotting, actually, we'll not
be importing the entire plotting
interface, we only need figure, show, and
output_file.
[No audio]
Let's keep it tied there, and then let's
go ahead and create the figure object, and
x_axis_type will be of type datetime.
[Author typing]
Let's set the height of 100, and the width of 500,
[Author typing]
and let's make it responsive,
[Author typing]
title of the graph,
[Author typing]
Motion Graph, okay.
[No audio]
So once we have a figure there, we want
to plot a glyph in that figure,
and that I believe in this case would be a
quadrant, so quad. So a quadrant
would be more appropriate to plot these
time intervals there, and so the trick
to have this quad glyph to visualize
your date and your times along this x
axis is to pass left, right, and bottom,
and top parameters. So for left, you'd
want to pass the Start time. So left
of the box of these
[No audio]
boxes that you see here. So the left border
would be the Start time, while the right border.
[Author typing]
So df would be the End time. So here is our
csv, which is not what you were using,
but this is the structure of the data.
So Start time on the left, and
then End time on bordering the right of the
rectangle of quadrant, and then here is
a trick we can do for bottom, we would want to
keep a fixed value. So 0 for every
quadrant and then 1 for every quadrant
as well, and that's it. Color is not
a problem, let's say green, and I'd like
to try this for now. So output_file,
that should be Graph.html
[No audio]
and show the p figure.
[No audio]
And let's see what there is going to happen,
this for say Python, and we don't want to execute
motion_detector now but we want to execute plotting.py.
[No audio]
So that's our main script where we get sorted.
[No audio]
And I've got a stupid syntax error here
from bokeh.plotting figure. I bet you knew it that
I missed import keyword here. So
from bokeh.plotting import figure, show,
output_file. Save and try again.
[No audio]
And here is the webcam, objects. Object
again, another time, quit, and let's see
what is going to happen now, and yet
another error responsive. Good. Sorry
about that. Try again.
[No audio]
First object, and second object there, and one more,
Quit, and we should see the graph here.
Yeah, it's looking good. So I can see here,
and you can also notice that we've got
quite an unnecessarily granularity here.
So we don't need all the stickers here.
And also, you can see here that this
says 19 seconds, which means that it's
19 seconds past the last minute. So if
it was, let's say, 15 minutes and 19
seconds, and so 20 seconds of the 15 minute,
and so on. So you don't really see the
big picture in just 10 seconds of video.
But also, to make it more informative, I
would add a hover tool to this bar so
that when I hover the mouse here, as
you know, you should see the start and the end
time, so that you can see the complete
time there if the labels here are not enough.
But first, let's remove the stickers
here. So we go back to the script, and
let me pull this down. The way to do
that would be we need to modify the
figure object, so the p variable. So
we're working on the y axis, so y axis.
So we access the y axis objects of the
figure object, then minor_tick_color.
[No audio]
And we want to set it to None.
[No audio]
So this sticks here.
[No audio]
Also you can see that we also have a grid.
So we don't want this intermediate lines here.
We can do that by accessing the grid
object which is list, so you need to
access the first item of the list. So
there's quite a trick there. But you
have to make peace with that. So ticker, say
desired number of ticks. So that's
the method and set it to 1. So let's
see how the graph of change this time.
And it's a good idea to put the graph
another name so that we compare the two
graphs so graph one for this. Let's see.
[No audio]
Here, yeah.
[No audio]
And Quit.
[No audio]
And I've got an attribute
error, and minor_tick_color. I tend to put this
wrongly, the good thing is Bokeh is quitted
good error handling. So it says similar
attributes are minor_tick_line_color. So
it's actually able to read what you
input there, and it suggests you want to
input, so minor_tick_line_color. So we've
got a line here. So try again.
[No audio]
Let's see this time we'll get so now it
looks cleaner as you can see. Here is
our previous graph. This is the new one,
so we don't have a horizontal gridlines
the ticks in here, and I thought off
stopping this lecture at this point, and
the other lecture I'll show you how to
add these hover capabilities to your
graph. So I'll talk to you in the next lecture.