Skip to content

Butter.js: Previewer Module

July 15, 2011

For the last 2 weeks or so, Chris Decairos, Scott Downe, Bobby Richter and myself have been hard at work rewriting Butter.js and transforming it into a full fledged API. This means that we have torn apart the old code and created a much more modular approach this time around. We seperated important functionality into their respective modules (previewer, eventEditor, Timeline, Trackliner, pluginTray, and the core so far) and added some additional features. In doing so, we were able work in parallel of one another, giving us the ability to not rely on one another for the most part and really push forward as far as development was concerned. Tho we were all working on very different things, we were communicating a ton throughout the whole process, addressing any issues as they arose and making sure everyone understand how we would interact with the core and one another. The last 2 weeks for me personally have been focused around actually coding the previewer, and getting it to a working state that could interact with other modules and the core.

The Previewer Module of Butter.js is what allows the user to see the changes that they are making in the layout that they have specified to be used. The idea here is that we are moving away from the old way butter was dealing with previewing. Essentially, the old butter would only show you a preview if you explicitlly told it to. Also, When you were modifying a track event in butter previously, you could only see a quick preview of how this would show up in your final version in a small box that was limited to showing you one trackevent preview at a time. This caused an issue in that there was a small disconnect with user between what they saw and what actually showed up when they clicked preview, making it difficult to visualize what they were going to get. This whole idea was blown away in the new previewer module.

The previewer module is now taking a different approach in how this data is being shown to the user. We wanted the user to have a what you see is what you get experience, and also have the ability to see things as they were being added, a sort of live preview that was always updating when the user was modifying there data. The other main part of this was the DOM scraper.

In butter there has always been this idea of a layout or template that the user would select, and would provide them with a empty HTML file that had numerous empty DOM elements in which to add popcorn events. This would allow users who have little to no experience in web development to still be able to create a webpage using butter. The problem with the old butter was that we could use these layouts, but we were not able to directly specify where these events would be shown in the specified layout. We came up with an idea of a DOM scraper that would grab all of the DOM elements and store them locally, which would later be passed onto the user as possible targets to add track events to. This means that the user has complete control of where the popcorn data is going to be displayed, and with the live previewer, it provides a quick and easy way to test out tons of different combinations on the page. The other awesome part about creating the butter modules like this is that they are easy to use.

One of the main ideas that we had when we were doing this rewrite was that because all of the code is seperated into modules, it should be easy to implement each module once we were all finished coding. Tho I beleived this, I was still a bit skeptical. Boy was I wrong. It was actually one of the most pain free experiences I’ve had, and one of the most shocking ones yet at CDOT. It amazed me that we could all work on completely different pieces of a puzzle, almost blind to what one another were doing, and still able to produce something that “just worked”. Over all the time i’ve spent coding (which isnt that much), I have never seen something just work like this, it was crazy. Essentially what happened was that yesterday Chris DeCairos and I decided to throw togethor a quick demo showing the progress we have made thus far with our respective modules. Earlier in the week we had a call about Popcorn.js and Butter.js with numerous people from Mozilla and others that are invloved in the project. We were able to put togethor a small demo of each of our own modules by themselves. This proved to be difficult for people not super closely involved with the development to visualize exactly how this was going to turn into butter again. And there concerns were warrneted. My module showcase what I wanted it to, but was rigged using a ton of garabage data, reading stuff like “ASDASD” and “BBBBBBBB” in place of actual data, with a horribly designed layout I was using. It was obvious why they were concerned, and we needed to show they exactly what it was we were cooking up.

Chris and I sat down over the last day or so and created a nice looking (tho not perfect) layout to use, and implemented my previewer module, Chris’ EventEditor module, and Scott’s Timeline and TrackLiner modules. This was all using the core of the Butter API that Bobby developed. It was crazy how it all just worked. I cant speak for everyone else’s modules, or give an in depth explanation of how they work, but mine works as follows:

In general, when using the butter API that we developed, you create a new instance of Butter, in which all of our modules will run off of

var butter = new Butter();

Then, since my module is the previewer module, we will call the previewer constructor, passing along various attributes that we will define. The attributes are as follows:

layout: a string pointing to the layout in which we want to use in the previewer

target: the DOM element in which the previewer will inhabit

media: a string pointing to the source of the media object that we will use

callback: a user defined function that will be called once the previewer is ready to build popcorn

This all looks like this when put togethor:

butter.previewer( {
layout: "layout.html",
target: "iframeDiv",
media: "",
callback: function() {
//build butter here
} );

Inside our callback we will call another function that the previewer defined called buildPopcorn. buildPopcorn allows the user to build an instance of popcorn and essentially be ready for trackEvents to be manipulated and accurately represent them in the previewer as they are added, removed, edited and so on. buildPopcorn receives and Id of the DOM element in which the video will be housed. This looks like the following:

butter.previewer( {
layout: "layout.html",
target: "iframeDiv",
media: "",
callback: function() {
butter.buildPopcorn( "videoDiv" );
} );

In addition to this, the previewer also offers a getPopcorn function in which it will return a stylized string containing the popcorn data that has been added to the project. This will make it easy when creating the exporting functions later in the core. And that is essentially it, everything just sort of works behind the scenes. you can check out a quick demo of what I’m talking about here:

This Butter API rewrite has proved to be an amazing experience so far, and may be one of the pieces of code that I am most proud of writing so far in my time coding. It was a crazy challenege for me getting the live updating working, but after about a week of pulling out my hair I finally figured everything out. After that everything just sort of fell togethor and the previewer was born. Everyone really wrote some amazing code, and we are going to have an amazing version of Butter.js to work with in the near future!

Some future plans for the previewer, are having a way to show which DOM element the user is currently editing in the previewer, which would involve highliting it or some other visual cue. It would also be amazing to be able to scrape any random site we can find on the internet and do a live update of that, which would be crazy as this would mean any and every website is available to the user to edit and create amazing new websites with Butter.

Expect a fully working demo by August 1st!


From → open source, school

One Comment

Trackbacks & Pingbacks

  1. Chris De Cairos » Butter Event Editor Module Part II

Leave a Reply

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

You are commenting using your 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 )

Google+ photo

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

Connecting to %s

%d bloggers like this: