Overview

Chromaweaver is a proof of concept that leverages image processing libraries for the purpose of generating, storing, and interacting with movie barcodes. Currently, it provides researchers a quick visual overlook of video content and allows for comparisons between videos.

I created Chromaweaver to fulfill my M.S. in Information Science capstone project requirement at UA Little Rock. A full breakdown of this project can be found on my web-based journal.

Challenges

• Providing tools for YouTube video comparisons
• Generating movie barcodes — this technique is relatively new and development must be compatible with YouTubeTracker
• Optimizing generated movie barcodes for an interactive user interface

Approach

This collection of work illustrates Chromaweaver’s project milestones specific to UI/UX.

Step 1: Ideation

What I find interesting about movie barcodes is that hours of video content can quickly be “digested” by a user in a single glance. The image below, a movie barcode, is a depiction of every frame from the movie The Lord of the Rings: The Fellowship of the Ring.

Applying movie barcodes to my research with COSMOS, I pitched a UI concept, shown in the image below, which would allow users to navigate video progression by selecting points of interest on the movie barcode.

While researching movie barcode generation techniques, I experimented with statistically comparing the movie barcodes to provide a numerical metric for video analyses. In the image below, I perform a histogram analysis to detect similarities between the selected movie barcodes.

Step 2: Design

Next, I created static mock-ups and conceptualized features using Affinity Designer. The mockup below displays Chromaweaver’s main functionality, movie barcode generation.

This second mockup shows the main page again with the addition of a search field, sorting method, and hover interaction for selection.

In this last mockup I present the detail view of a selected movie barcode and it’s associated video.

Step 3: Implementation

I implemented my mockups using HTML, CSS, and Django. As seen below, I provide a Youtube video ID to begin the generation process, and if the generation is successful, the user is redirected to the detail view.

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

In this final GIF, I show the detail view 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 movie barcode itself to select a point of interest.

End Results

• Developed methods for automated movie barcode generation that can be performed on Youtube videos
• Created a proof of concept that generates movie barcodes and can be integrated into the YoutubeTracker application
• Began developing methods for statistically comparing generated movie barcodes