In recent weeks, I've been working with Scott, Dave, Mohammed and Bobby to create an API for Butter.
Bobby has been developing the core API. Scott has been working on a Timeline Module that will visualize track event data and Dave has created a Previewer Module that can display real-time updates of track event data. Mohammed is working on developing the Mac App that will leverage this new API for the purpose of adding Popcorn data to Final Cut Pro Projects.
I have been coding an Event Editing Module that enables visual editing of track events. What that means is when you double click on the track event, my module is in charge of generating an editing interface and making sure data is updated properly.
There are two ways an event can be edited. The first is the default method, and uses a track events manifest ( The manifest describes each of the options a manifest accepts ) to generate a series of text boxes and drop-down lists. This method works for most simple plug-in types.
The second method uses a custom editor, specified in the manifest of each Plug-in as "customEditor" the editor is basically just a JavaScript function that does what it needs to do to create the UI for the editor. If the editor detects this function, it creates an object that contains information about the track event being edited, and four callback functions that the editor will have to use to pass new data back into butter.
One specific use case for something like this is the Popcorn.js Google Maps plug-in. If using the default editor, all you will see is a series of input fields to fill out. instead, why not create a custom editor that lets you move around a google map, set the zoom and type and then submit that information back to butter. This was actually really easy to implement as a demo. You can check out here. If you check out your browser's web console, you'll see that each time you press the submit button, the data being passed back from the custom editor code reflects the current state of the google map.
I also have a demo of the default editor in action here. In this demo, when you click the "Add a TrackEvent" button, a new TrackEvent is created and stored in the Butter Core. These Events are used to populate the drop-down list with ID's. When you press "Edit ......" the selected trackEvent is loaded into the default editor and a basic UI is constructed using its manifest. The value of each input field is set using the current state of each individual trackEvent. All of the generated buttons are fully functional, and self explanatory. Whenever you change a track, its ID in the core changes. this is because when a trackEvent is edited, it is removed, rebuilt and then added back into the core ( I want this to change... )
On Thursday, Dave and I started working on an integration of All our modules ( Timeline, Previewer, EventEditor ) into one demo application. This was done not only to show it off to people, but to prove that the work we have done all in isolation worked together as a whole. I spent an hour or two designing a simple page to use. ( bear in mind I'm not a designer of web-pages, so it was particularly challenging, and I did learn a few new tricks )
Once the page was ready, I began to hook up all three of our modules together into one demo. Amazingly, it was really really easy! unbelievably easy... ( there were several bugs that we triaged very quickly, but for the most part....ITS WORKIIING!
This small demo allows you to drag a footnote ( it the word "footnote" ) onto the timeline to create a TrackEvent. You can then double click on the TrackEvent and the event editor will begin editing that TrackEvent using the default editor. The editor is fully functional, allowing changing and deleting of TrackEvents. If you play the video you will see the footnote appear. Note that the previewer read in an html file, scraped it and displayed it! You can also edit footnotes LIVE, seeing the changes in the previewer instantaneaously, even if it is playing the video.
We all can't wait to see where we will be at the end of next week!