1 00:00:00,530 --> 00:00:06,089 Great, we have a graph of visualizing the time interval so when the object entered 2 00:00:06,089 --> 00:00:12,240 the video frame. Now let's go ahead and modify our code so that we'll add a window, 3 00:00:12,240 --> 00:00:19,189 so the window will pop up here when the user hovers the mouse over these quadrants. 4 00:00:19,189 --> 00:00:26,849 Let's do that, and the Bokeh tool to implement the hover functionality is 5 00:00:26,849 --> 00:00:35,610 called the hover tool, and that is accessed from the lower level interface called models, 6 00:00:35,610 --> 00:00:44,219 so Bokeh.models, so you want to import the hover tool. Let's now see how we're 7 00:00:44,219 --> 00:00:49,829 going to use this inside our script. Basically this is a method that expects 8 00:00:49,829 --> 00:00:55,980 from you some data so that the hover tool method will display them when the user 9 00:00:55,980 --> 00:01:01,379 hovers the mouse over these quadrants. So if the cursor is on this 10 00:01:01,379 --> 00:01:05,909 particular quadrant let's say, the data for that quadrant will be displayed on 11 00:01:05,909 --> 00:01:17,270 the pop-up window. So what you want to do is once you have created your figure, you 12 00:01:17,390 --> 00:01:29,250 want to create a hover object which will be equal to HoverTool which has a tool tips 13 00:01:29,250 --> 00:01:38,189 parameter there and this will get as argument a list of tuples and in every 14 00:01:38,189 --> 00:01:44,670 tuple you want to specify the lines of the pop-up window, so let's say in the 15 00:01:44,670 --> 00:01:51,360 first line of your pop-up window you'd want to have a Star string and beside 16 00:01:51,360 --> 00:01:56,670 that start string you want to have the array with your data. This has this 17 00:01:56,670 --> 00:02:02,100 spatial decorator here, so in our case that would be the start column from the 18 00:02:02,100 --> 00:02:11,390 data frame, so we want the start time and the end time as well so end for string, 19 00:02:11,950 --> 00:02:17,599 and end for the name of the column. So that should do it almost, 20 00:02:17,599 --> 00:02:24,920 but we need to add this tool using the add tools method, so the hover 21 00:02:24,920 --> 00:02:31,940 object, we need to add it to the tool menus so this should be a dot. That's it. 22 00:02:31,940 --> 00:02:38,000 And we're gonna have to add more here, but let's see what we got this far. 23 00:02:38,000 --> 00:02:54,340 So python plotting.py. Here's an object, another one, and a third one and quit. 24 00:02:54,340 --> 00:03:00,819 So now here is the graph and we're almost there, but not yet. 25 00:03:00,819 --> 00:03:07,400 So as you see for some reason Python is having trouble fetching the values of 26 00:03:07,400 --> 00:03:12,799 this start and end column, and you also notice that we have two columns for each 27 00:03:12,799 --> 00:03:18,319 of these rows here, so the first thing you want to do is remove this column. 28 00:03:18,319 --> 00:03:25,069 You don't need this because Bokeh is adding it by default, so that's it, and now to solve 29 00:03:25,069 --> 00:03:32,329 the other problem the main problem of the question marks is by adding the column 30 00:03:32,329 --> 00:03:44,000 data source methods which comes from the Bokeh.models low-level interface. 31 00:03:44,000 --> 00:03:51,290 So column data source is a standardized way to provide data to a Bokeh plot so if 32 00:03:51,290 --> 00:03:57,169 you've got data frames, list, or other objects for some for some functions in 33 00:03:57,169 --> 00:04:02,450 Bokeh you need to convert them to a column data source object which actually 34 00:04:02,450 --> 00:04:10,190 is very easy and let me do it here. So we grab the data frame here and then let's 35 00:04:10,190 --> 00:04:17,510 say column data source cds. That would be equal to column data source so the 36 00:04:17,510 --> 00:04:22,130 method and the data you want to it. So we have a data frame in this case 37 00:04:22,130 --> 00:04:29,150 and then once you do that you need to adjust here not the figure 38 00:04:29,150 --> 00:04:34,660 object because we are not passing any data here, we're just constructing the 39 00:04:34,660 --> 00:04:41,840 environment from the plot, but you need to modify the quad method, so 40 00:04:41,840 --> 00:04:47,690 specifically you want to pass the source parameter here which should be equal to 41 00:04:47,690 --> 00:04:54,500 the column data source object, so cds in our case, this one here. So you're telling 42 00:04:54,500 --> 00:05:01,370 Bokeh head to use these data and then you don't need to point to the data frame, 43 00:05:01,370 --> 00:05:09,470 so just enter the names of your columns there. So let's see what we have this time! 44 00:05:09,470 --> 00:05:27,290 Object, another one, quit. Here's the graph and yeah, almost there, but the 45 00:05:27,290 --> 00:05:33,260 problem is this time we're not getting the dates in the correct format and the 46 00:05:33,260 --> 00:05:39,860 reason to that is that the hover tool method, so here, we're here, the hover tool 47 00:05:39,860 --> 00:05:45,680 method is not being able to fetch datetimes data types, but that's nothing to 48 00:05:45,680 --> 00:05:51,470 worry about because what we can do is we can cover the date times two strings in 49 00:05:51,470 --> 00:05:57,740 the data frame. So before we pass the data frame to the column data source 50 00:05:57,740 --> 00:06:05,240 object method we convert the start and the end columns to string data types, so 51 00:06:05,240 --> 00:06:10,550 you already know how to work with date times, so in this case we will do some 52 00:06:10,550 --> 00:06:20,360 datetime formatting, so what we could do is create another, so a new column. Let's 53 00:06:20,360 --> 00:06:26,810 say start string, so the string version of the start column which should be equal to 54 00:06:26,810 --> 00:06:36,020 the existing start column dot dt which enables you to do datetime 55 00:06:36,020 --> 00:06:42,930 formatting and strftime. And here is now how you define your 56 00:06:42,930 --> 00:06:48,660 data to be displayed, so you would want to display the year first and then the 57 00:06:48,660 --> 00:06:58,320 month, a dash, and the day after that. Maybe a space there, and then hour, minutes, 58 00:06:58,320 --> 00:07:11,610 and seconds. And the same goes for the end column, so End string. End here and 59 00:07:11,610 --> 00:07:18,150 the same here. As you can see you now we need to reflect those changes in here so 60 00:07:18,150 --> 00:07:23,910 this should be Start string and this should be the End string. So we are 61 00:07:23,910 --> 00:07:31,920 displaying this strings now to the pop-up window, and let's see how this goes this time. 62 00:07:31,920 --> 00:07:49,590 First object passes there, second, and last, and one more. Quit and we have 63 00:07:49,590 --> 00:07:58,380 a problem here. I suppose I didn't change the values in here so I did completely 64 00:07:58,380 --> 00:08:05,280 the wrong thing. I shouldn't have changed the date in this quadrant object because 65 00:08:05,280 --> 00:08:11,550 this is datetime because we have defined the axis datetime here so this 66 00:08:11,550 --> 00:08:16,890 expects datetimes, so here should be the start, the original start column, 67 00:08:16,890 --> 00:08:22,380 and here the end column, so by mistake I put those values in there. 68 00:08:22,380 --> 00:08:32,090 So Start string in here, and End string in here, so that should do it this time. 69 00:08:32,090 --> 00:08:40,880 Let's double check. Everything looks good. And let's see. 70 00:08:43,169 --> 00:08:46,308 Here I go. Yeah, we were able to grab the data. 71 00:08:52,820 --> 00:09:00,380 Let's see, yeah this looks good, so now I believe this graph is quite readable and 72 00:09:00,380 --> 00:09:05,510 I believe you were able to pull out some information out of this graph so you can 73 00:09:05,510 --> 00:09:12,649 see how long an object stayed in the video frame and when it started and when 74 00:09:12,649 --> 00:09:18,830 it exited the frame, and I hope you find this useful sometimes. As I already said 75 00:09:18,830 --> 00:09:25,490 you can use a Raspberry pi server which is a small computer and host this 76 00:09:25,490 --> 00:09:30,260 application in that server and of course you can build, and of course you 77 00:09:30,260 --> 00:09:35,029 can mount a camera in that server and have it capture some video for your 78 00:09:35,029 --> 00:09:40,880 needs, but most importantly I hope you learned from this practice activity and 79 00:09:40,880 --> 00:09:45,529 I know that was quite a lot to consume. If you have any questions though I'll be 80 00:09:45,529 --> 00:09:51,410 happy to answer them, so please feel free to ask them in the discussion board. 81 00:09:51,410 --> 00:09:57,000 And I'll talk to you later on in the next lectures. See you.