I am thrilled to say that I am ending this week and my final blog post with a functional Django application that I can demo in my final project presentation, which will be next Friday (November 8, 2019). At this point, I have satisfied the agreed-upon project deliverables that I outlined in my Project Proposal post, listed below:

  • Python code development for automated moviebarcode generation that can be performed on Youtube videos
  • A standalone Django app that generates moviebarcodes and can be integrated into the YoutubeTracker application

This week I went full-cycle regarding the knowledge I have gained at UA Little Rock. I was able to leverage many of the skills that I have accumulated during my time as a researcher and student to produce a Django prototype application for generating moviebarcodes. I wore many hats this week as I designed high-fidelity mockups and worked with both front-end and back-end development. By no means is this application a finalized product, but since my time at UA Little Rock has exposed me to many different pockets of knowledge, I am confident I can pull from this resource pool moving forward in order to continue to improve this project.

In order to wrap up this prototype, I worked on the following big items this week:

  • Designed additional high-fidelity mockups
  • Pulled relevant content from test applications into a new, cleaner application
  • Combined different Django pages to provide a more streamlined user experience
  • Cleaned up my Django project’s code structure
  • Developed HTML5 and CSS elements to fit high-fidelity mockups

Back in the following blog post, Resource Gathering - Practical Python and OpenCV - Part 2, I teased that the image of a spider used in the examples was hinting at the application’s title, but I said I wouldn’t be releasing this title until later. Since this is my final blog post, I think it’s safe to say that “later” has arrived. I am titling this project Chromaweaver. My inspiration behind this name was imagining a spider weaving together the colors of the moviebarcodes. Often, generated moviebarcodes result in images that are made up of a wide array of colored bars, or “strands”, that are aesthetically pleasing, and I think relating this image processing technique to the intricate process of a spider weaving its web is a suitable analogy.

To demonstrate Chromaweaver’s current state, I have created the following GIFs to provide animated views of my final deliverable in action:

This first GIF presents Chromaweaver’s main objective: to use Django to generate a moviebarcode from a Youtube video. As seen below, I provide a Youtube video ID to begin the generation process, and if the generation is successful, the user will be redirected to a detailed page that shows both the moviebarcode and the video it pertains to. Since this moviebarcode and its relevant information is stored in Django, when the user goes back to the homepage, the new moviebarcode is included in the list of other generated moviebarcodes.

Screenshot of generating moviebarcode with Chromaweaver
(Screenshot of generating moviebarcode with Chromaweaver)

This second GIF demonstrates the process of exploring a list of moviebarcodes. A user is able to scroll through the moviebarcodes and select a video by clicking its title link.

Screenshot of exploring Chromaweaver home page
(Screenshot of exploring Chromaweaver home page)

In this final GIF, I show the detailed Youtube video page in its current state. At this time, the user has the ability to watch the video and either use the Youtube video controls or the moviebarcode image above to select a point of time in the video. I think this feature is an interesting user experience component because a user can quickly look at a moviebarcode and from color alone can select areas of interest. The current time of the video being played is indicated above the moviebarcode by a moving bar. In this case, however, because there are so many frames in the video shown below, the size of the bar is very small. I have an idea for how to improve the visibility of this tracker for longer videos, but for now I feel this display is sufficient for demonstrating this application’s functionality.

Screenshot of exploring Chromaweaver detail page
(Screenshot of exploring Chromaweaver detail page)

Going Forward

In order for Chromaweaver to be a finalized product, it will need a laundry list of improvements. This project so far is the result of my own efforts, but there is only so much I can do by myself, so I am especially looking forward to bringing in other members of COSMOS to begin collaborations regarding Chromaweaver.

I am also excited about exploring additional applications in the field of Image Processing, including histogram analysis to return related videos based on their moviebarcodes, a subject I discussed in my previous Histogram Analysis post.

Resources

This project’s accomplishments would not have been possible if it were not for the dedicated content producers that take very complicated topics and break them down into bite-sized pieces, allowing me to digest them in such a short span of time. I want to extend special thanks to the publishers of the following content:

Image Processing Development:

  • Adrian Rosebrock and Dave Hoffman for support and various articles mentioned at pyimagesearch.com

Django Development:

HTML/CSS Development: