Skip to content

Popcorn.js and Butter.js so far

May 13, 2011

Earlier this week we finished up demoing our CDOT-Dashboard which went pretty well.  After demoing we had a short meeting with Bobby Richter from Mozilla, and had a discussion about where Butter.js (as its being called now) is headed.  We went over the milestone’s for the project, and what was needed from us at CDOT to get it where it was going.  We went through some tickets and began assigning them to ourselves.  After the meeting we had took ownership for all of the current tickets in 0.2 of butter, and had a firm understanding of where it was headed.  We also began working on Popcorn.js, as the 0.6 release for it is shipping on Tuesday.

Tuesday was also a day for us to take ownership of all the remaining tickets for 0.6 of popcorn.  There was quite a few so all of us were going to have to pick up numerous tickets, and finish them by firday (today) so they could go into peer review over the weekend.  So far I’ve managed to set 3 of my tickets up for peer review, and am currently working along side Cole Gillespie to try and get the Google Maps Streetview tweening to work.  It was actually pretty cool as one morning I work up and Cole had begun working on the ticket and actually came up with with a working iteration all before I was even awake.  Awesome.  I took a look at what Cole had done and saw that we could expand on his already awesome solution and make it even better.  Because the Google Maps API is pretty extensive as far as the options it passes on to its user’s, it gave us numerous ways to go about the problem.  Cole’s current version allows the userto enter numerous latitude and longtitude values, which while functional, could result in very beefy blocks of code, which could begin cluttering up the page quickly.  It also limits the possibilities as far as the user is concerned, as they can’t just enter a string for a location, such as “Toronto”, or “Boston” or something along those lines.  This forces user’s to look up lat + lng values and throw them in, which could ultimately deter them from using the feature.

The day before Cole was working on this, I had a rough working copy (very rough) using some of the cool features the Google API passes on to us.  It allows you to pass in two points, either in a string or lat+lng values, and it will generate a route between the two, giving you lat+lng values at different points along the route.  This seemed like a much more functional approach and would allow us and the user a lot more flexibility.  The code for getting the route from the API looks something like this:

panorama = new  google.maps.StreetViewPanorama(document.getElementById(“map_canvas”), startOptions);

var directionsService = new google.maps.DirectionsService();

var directionsDisplay = new google.maps.DirectionsRenderer(panorama);

var request = {
origin:new google.maps.LatLng(43.775176, -79.493937),
destination:new google.maps.LatLng(43.770888, -79.498272),
travelMode: google.maps.TravelMode.DRIVING
};

directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
showSteps(response);
}
});

function showSteps(directionResult) {
for (var i = 0; i < directionResult.routes[0].legs.length; i++) {
for (var j = 0; j < directionResult.routes[0].legs[i].steps.length; j++) {
//console.log(directionResult.routes[0].legs[i].steps[j]);
getSteps(directionResult.routes[0].legs[i].steps[j].start_point, directionResult.routes[0].legs[i].steps[j].end_point);
}
}
}

After I saw what Cole did, I throw some of my suggestions in the ticket and he liked them!  He wanted to try and itegrate what I had done and what he had done to make a cool finished product.  I was happy to help in anyway and we talked for a bit about what we wanted to do.  Due to the 4 hour meeting I had yesterday, we were not able to talk much, but today I plan on finishing this ticket with the help of Cole and hopefully have something to show by the end of the day!

As far as the meeting yesterday was concerned, it was awesome,  I got the opportunity to meet a ton of cool Mozilla employees and talk about Butter.js in detail.  Ben, Brett, and Bobby from Mozilla came down to CDOT to discuss the direction Butter was headed in, and we began brainstorming a ton of idea’s on things such as the layout, adding numerous templates that the user could use, a simplified interface that is more dependant on HTML elements than what plugins are added to the page (making it easier to visualize what plugins will be in a HTML element at what time), different views the user could access to display different information, as well as many other things.  We also discussed in detail what would happen later along the line, when user’s began adding numerous video’s to a single HTML element, and what would happen if they overlapped (which will become possible with fellow Popcorn contributer Rick Waldron’s sequencer).  Numerous idea’s for how we could handle this were thrown out and we didn’t come to a solid final answer.  The idea that we are rolling with for the time being is that there will be almost like a master time that will continue to run throughout the duration the page is up, which will also enable user’s to create timed pauses between video’s, while still attaching popcorn event’s.  In my oppinion, doing stuff like this will give popcorn a lot more flexibility, and really become closer to current video editing software, which is the final goal.  It will be simple enough for a child attempting to make a webpage for a virtual book report to use, but also contain enough features to be viable to seasoned video editing user’s.

All in all I’ve met a ton of cool people this week, and in reality, got to attend my first meeting ever which was cool.  For the time being it’s back to Popcorn tickets as 0.6 is shipping on tuesday, so keep you eyes peeled!

Advertisements

From → school

Leave a Comment

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 )

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: