robothaus

haus for robots.

Butter 0.2 - 'Ghostbusters'

Last week at the Mozilla Toronto office, we celebrated as I clicked the “close milestone” button for Butter, marking the 0.2 release, codenamed “Ghostbusters”. It was also Dave’s birth-week, so we celebrated with a aptly themed cake. [Photo credit: Ben Moskowitz]

The repo has been moved to Mozilla’s github account, so feel free to clone the repo and follow progress: https://github.com/mozilla/butter

Considering the amount of work we did to roadmap Butter for the year, and the amount of time the team had to produce this release, I’m quite proud of our accomplishment. Butter already looks better, functions faster, and feels more solid as a foundation than its predecessors. This is a great start to a year of Butter, and 0.3 is just on the horizon.

Rather than delving into details about time and estimation analysis (re: robothaus.org/mozilla/butter-roadmap/) about 0.2, I’ll just boast about its exciting features and talk about what’s to come in 0.3. Besides, I’m told that my posts are notoriously long, so splitting out that content might not be such a bad strategy.

The UI

Ben and I spent a lot of time pulling apart Popcorn Maker’s UI to attempt to deliver a more pleasing experience with this refresh of Butter. We still have some work to do to accomplish the design we envisioned in our vision document, but we’ve made significant steps toward a flexible UI environment which we can fill with better functionality in the near future.

Here are a few things to look for so far:

  • The timeline lost a lot of unnecessary height as we decided to make more efficient use of some key areas. Now, after minimizing the iconic Butter tray, you’re still able to use the timeline scrubber and play, pause or mute the media.
  • Scrollbars look far less ridiculous since we wrote our own implementation. Not only do we get to decide visual aspects of the scrollbars, but also the user experience for them.
  • Look at how juicy these track events and track handles look now. They’re more defined, and have a colouring scheme based on a hashing of the track event type – so image is always red, attribution is always turquoise, regardless of which OS, browser, or version of Butter you’re using.

Butter isn’t just more visually pleasing though, it’s more helpful. We’ve added a highlighting system to show you what’s targetable, and what’s been targeted.

When dragging a plugin from the plugin-tray, an icon will appear under your mouse to show you what kind of object you’re going to produce when you drop. However, you’re not limited to dropping plugins on tracks anymore; you can drop them right on the target you want to affect. As you move the icon over certain objects, they will light up to tell you that you can drop content on them.

After dropping, a track event will appear on a track at a time corresponding to the position of the timeline scrubber. Clicking on the new track event will produce a similar effect: an object on the page will flash, letting you know it’s the targeted object.

This whole procedure feels a lot more natural than our previous attempts. Your intentions as a designer or film-creator are more directly realizeable.

As a result of these UI improvements, just through some preliminary testing, the software feels like it’s more reactive and less confusing. We dug out some old code that profiled very poorly, and made sure our approach stayed clean and simple. Obviously, it’s pleasing us so far, so hopefully it will test well in future releases.

The Code

Firstly, the HTML/Template situation got a lot simpler. The HTML code listing below and a bit of JavaScript is all you need to put Butter to work in your page now:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<html>
  <head>
    <script src="../src/butter.js" data-butter-exclude /></script>
    <script type="text/javascript" src="template.js" data-butter-exclude /></script>
    <link rel="stylesheet" href="../src/ui/butter.ui.css" data-butter-exclude />
  </head>
  <body>
    <video id="main" data-butter="media" controls >
      <source src="http://videos-cdn.mozilla.net/serv/webmademovies/laylapop.ogv" />
    </video>
    <div class="container-div">
      <div class="content-div" data-butter="target" id="Area1"></div>
    </div>
    <div class="container-div">
      <div class="content-div" data-butter="target" id="Area2" data-butter-default ></div>
    </div>
    <div id="target-div"></div>
  </body>
</html>

Here are some noteworthy points about this code:

  1. There are really two important inclusions: butter.js and butter.ui.css. The components of Butter will build themselves from these two libraries.
  2. Two separate data- attributes help Butter identify elements of your page at different stages during the editing process: data-butter and data-butter-exclude. The former is a statement of important elements on your page – like targets or media elements for Butter to consume and use – while the latter marks a tag to be excluded from an HTML export of the page.
  3. Starting Butter is still a manual process, keeping it an opt-in feature of your page. We want developers to be able to control their individual experiences. Above, another script is included, template.js, which looks similar to this:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

  Butter({
    config: "../config/default.conf",
    ready: function( butter ){
      var media = butter.media[ 0 ];

      media.listen( "mediaready", function( e ){

        var track = media.addTrack( "Track1" );

        butter.plugin.add([
          {
            name: "footnote",
            type: "footnote",
            path: "../external/popcorn-js/plugins/footnote/popcorn.footnote.js"
          },
        ], function( e ) {

          var event = track.addTrackEvent({
            type: "footnote",
            popcornOptions: {
              start: 0,
              end: 3,
              text: "test",
              target: "Area1"
            }
          });

        });

      });
    } 
  });

Here’s a brief walkthrough:

  1. Start Butter with the Butter function, providing a url to a configuration file, and a ready callback function.
  2. Once the ready callback has been called, a reference to the butter object is provided, and butter is almost ready to use.
  3. Wait for the media to be available (it still has to load) by attaching a listener for mediaready to a Media object.
  4. Let Butter know which plugins should be available in the UI by calling butter.plugin.add
  5. Butter!

I believe there are still too many steps to get going initially, so we’ll be widdling it down over the next couple of releases. However, this code runs consistently well now, and is becoming increasingly data-driven. For instance, we use a config file instead of an inline JSON blob. Soon, we’ll be working on ways to encompass the needs of developers as utility functions, so even less code will be necessary unless you wish to abnormally customize your experience.

The Server

Jon Buckley started laying the foundation for our server infrastructure this month. The project is hilariously titled Cornfield (also available on the Mozilla github account).

For Butter, this means having the ability to connect to a server which is specifically prepared to save, load, import, publish, and share content within the framework.

Currently, Butter has the ability to communicate with this rudamentary server, but we’re still working on the API layer and UI design to make it shine. Look for more about Cornfield in future releases.

The Tests

Briefly: at crunch time last year we forgot that our test suite existed, but now we’ve paid particular attention to making sure our tests are up-to-date, and that new features don’t hinder a passing grade. We have to make sure this stays in tact, especially as Butter continues as a formal foundation for the year’s overall project.

So, if you clone our software and run the test suite in your environment (however convoluted it may be), and some tests don’t pass, file a ticket. We want to know about it.

Onward

0.2 is publicly available, and we already have more than 100 issues to tackle in 0.3, which is slated for release the first Tuesday of next month.

Again, I’m going to be gathering metrics about ticket completion and bug generation so that we can refine our development process throughout the year. Another blog post is deserved to talk about the results of that campaign.

I’m proud of our progress so far though, and I can’t wait to see what we will produce in the months to come. We’re already beginning to wonder what kind of cake best fits the Breakfast Club theme.

Comments