[No audio]
Great, we have a graph of visualizing
the time intervals. So when the object
entered the video frame. Now let's go
ahead and modify our code so that we add
a window. So a window will popup here
when the user hovers the mouse over this
quadrant. Let's do that. And the Bokeh
tool to implement the hover
functionality is called the hover tool.
And that is accessed from the lower level
interface called models. So bokeh.models.
So you want to import the HoverTool.
Let's now see how we're going to
use this inside our script. And
basically, this is a method that expects
from you some arrays with data, so that
the HoverTool method will display them
when the user hovers the mouse over
these quadrant. So if a cursor is on
this particular quadrant, let's say the
data for that quadrant will be displayed
on the popup window. So what you want to
do is, once you have created your figure,
[No audio]
you want to create a hover object,
which will be equal to the HoverTool
[Author typing]
which has a tooltips parameter
there. And this will get us argument
list of tuples. And in every tuple, you
want to specify the lines of the popup
window. So let's say in the first line
of your popup window, you would want to have
a Start string. And beside that Start
string, you want to have the array with
your data. This has this special
decorator here. So in our case, that
would be the start column from the data
frame. So we want the start time and
end time as well. So End for the
string, and for the name of the
column. So that should do it almost. But
we need to add this tool using the
add_tools method. So the hover objects do we
need to add it to the tool menus, so
this should be a dot. That's it. And
we're going to have to add more here
but, let's see what we get this far. So
python plotting.py.
[No audio]
Here some object, another one, and another one and quit.
[No audio]
So yeah, here is the graph. We're
almost there. But not yet. So as
you see, for some reason, Python is
having trouble fetching the values of
this Start and End column. And you also
notice that we have two columns for each
of these rows here. So the first thing
you want to do is remove this column,
you don't leave this because Bokeh is
adding it by default. So that sees and
also solve the other problem, the main
problem of a question marks, it's by
adding the ColumnDataSource methods
[Author typing]
which comes from the bokeh.models
low level interface. So ColumnDataSource
is a standardized way to provide
data to a Bokeh plot. So if you've got
data frames, list or other objects,
some for some functions in Bokeh, you
need to convert them to a ColumnDataSource
object, which actually is very
easy. And let me do it here. So we grab
the data frame here. And then let's say
ColumnDataSource cds, that would be
equal to ColumnDataSource. So the
methods and the data you want pass to
it. So we have a data frame this case.
And then once you do that, you need to
adjust here, not the figure object,
because we are not passing any data
here. We're just constructing the
environment for the plot. But you need
to modify the quad method. So
specifically, you want to pass source
parameter here, which should be equal to
the ColumnDataSource object. So cds in
our case, this one here. So you're
telling Bokeh to use this data and
then you don't need to point to the data
frame. So just enter the names of your
columns there. So let's see what we have this time.
[No audio]
Object, another one, quit.
[No audio]
Here's a graph. And yeah, almost there.
But the problem is, this time we're not
getting the dates in the correct format.
The reason to that is the HoverTool
method. So here we are here. The
HoverTool method is not being able to
fetch datetimes datatypes. But that's
nothing to worry about because what we
can do is, so we can cover the datetimes
toStrings in the DataFrame. So before,
before we pass the DataFrame to
the ColumnDataSource object method, we
cover those start and the end columns
toString datatypes. So you will
already know how to work with datetimes.
So in this case, we will do some
datetime formatting. So what we
could do is create another, so a new
column, let's say Start_string, so the
string version of the Start column,
which should be equal to the existing
Start column, .d, .dt which enables
you to do datetime formatting, and strftime.
Here is now how you define your data to
be displayed. So we would want to
display the year first, and then the month
a dash, and the day after that. And maybe
a space there and then hour, minutes, and seconds.
[No audio]
And the same goes for the End
column. So End_string, and here and same
here. And as you can assume now, we
need to reflect those changes in here.
So these should be Start_string and
this should be the End_string. So we are
displaying these strings now to the
popup window. And let's see how this goes this time.
[No audio]
First object passes there second,
and last, and one more quit.
[No audio]
And we have a problem here, I suppose. If I
didn't change the values in here, so I
did completely the wrong thing. I shouldn't
have changed the dates in this
quadrant object because these series
datetimes, because we have defined the
axis datetime here. So these
express datetimes. So here's should be
the Start, the original Start column and
here the End column. So by mistake, I
put those values in there. So Start_string
in here, End_string in here. So
that should do it this time. Let's
double check. Everything looks good.
And let's see.
[No audio]
Here, we go.
[No audio]
Yeah, we were able to grab the data, or
let's see. Yeah, this looks good. So now
I believe this graph is quite readable.
And I believe you were able to pull out
some information, although this graph,
so you can see how long an object stayed
in the video frame and when it started,
and when it exiting the frame. And I hope
you find this useful sometimes. As I
already said, you can use a Raspberry Pi
Server. So we just a small computer and
host this application in your in that
server. And of course you can build and
of course you can mount a camera in
their server and have it capture some
video for your needs. But most
importantly, I hope you learned from
this practice activity. And I know that
was quite a lot to consume. And I'll
talk to you later on in the next
lectures. See you.
[No audio]