Butter’s track editing user interface upgrade

So, moving forward with Popcorn, I’m directing my attention towards Popcorn’s authoring tool, Butterapp.

The two major things I’m working on:

First: The current iteration of Butter uses a canvas to edit, add, remove and display track events. I’m going to change that to be html elements using jquery draggable. I want it so if a track event is dragged outside of its track, a new track will be created. Also, if it is dragged between two tracks, a new track will be created, and inserted between the two tracks.

Second: The current iteration is using the plugin type as the term to sort the tracks on. I’m going to change it to be sorted by track location. A quick example of the idea, made by Bobby Richter.

I’m going to be attacking both of these at the same time. mainly, making the functionality of the second, but making it with HTML elements.

We’ll have a largely object oriented model, with three main components. A Tracks object, multiple Track objects, and multiple TrackEvent objects.

A Tracks object: (for multiple tracks). Only one of these will ever need to exist, so probably just an object literal with the needed functions/attributes. This would contain tools for adding/removing tracks. I also think the order these are displayed is important, which makes sense to be managed by the Tracks object, and not individual tracks. The importance of order is why I see things like splice, push and pop to be important, because I feel adding and removing tracks should be accessible via order or object, so long as you know one or the other, you can manage it. Would contain a addTrack, removeTrack, getTrack and length property.

A Track object: This would be for adding/removing TrackEvent objects. Order of TrackEvents probably wouldn’t matter to the Track object, as they would be ordered based on their times/size. Would contain a addTrackEvent, removeTrackEvent, name, getTrackEvent, and length.

A TrackEvent object: that is created with a plugin type “subtitle”, “footnote” etc. Which would also hold all the values of the track event. There would be added/removed to/from the Track object. This would probably just be a reference to the popcorn track Event object.

Next step is to find all references to the current track system in butter, and remove it. Then start adding pieces one by one, starting with making the plugins draggable. Second, Implement by objects and their APIs. Third, use my object APIs to link it all together. That is all for now… more later?


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: