Most of the problems were about whitespace and code style but some were about tiny errors in the code too.

Having fixed all the points (or at least I hope so!) in dseif’s review, here is the revised code:

Code on github

Demo on the internet

Unit test on the internet

Syntax errors have thrown me off but here’s to being one step closer to being a contributing developer to an open source project!

The Instagram plugin is up and running!

View a demo of it here: Instagram demo.

The previous trouble I had with this plugin was solved with a Ctrl-A + Del of the existing code I had and starting over again! It really is true when your prof says to write code that you’re just going to throw away.

The code that I didn’t throw away is here:popcorn.instagram.js on github. The ticket is here.

I referenced the flickr plugin code when I re-wrote the code. What made me decide to look at flickr was that it’s also a plugin that relies on getting (a lot of) image data from a service and being able to display it to the user at the specific time it is requested. After looking through the code, I realized what I was doing wrong. I was retrieving the JSON data at the specified time of the video. This isn’t the ideal way to do this since getting a response from the api and loading images take some time to load. The best way was to have the images preloaded i.e. before it is requested in the video.

I’m fairly certain that it was because I was setting it up wrong – I had my setup code in the return statement of the plugin code. My setup code should be placed before the return statement. See below.


Popcorn.plugin( "instagram" , function( options ) {
//code goes here

start: function( event,options){},
ends: function( event,options){},
_teardown:function( options ){}
}
});

My next step in this release is to update the ticket on lighthouse.

I’m glad that I took on this plugin. I’m hoping to improve it and maybe add the option for the user to specify a # of images to retrieve and maybe show it in a scrollable div. Another request that can be made to the api is searching for images with a specified tag. I’ll try and include these in the next release.

Thanks for reading! I appreciate any comments and suggestions!

After some code analyzing and debugging (firebug is great, btw) I think it might have something to do with which part of the code is executed first — actually I’m pretty sure it has something to do with the running code sequence.

I’ve been looking at the source code for other plugins like flickr and last.fm and they’ve helped lots with setting up the plugin code and formatting the containing div and such so I’ll have to check back and analyze and try and figure out how to get my images preloaded before reaching the specified video time.

JSON troubles up ahead…

I had such a hard time trying to figure out how to parse the JSON data but referencing the other plugins’ code was very useful. The main thing that kept me stumped was trying to get the first item in a JSON list.

JSON

{
  "data":[
    {
      "link":"http://instagr.am/p/UDn17/",
      "images":{
        "low_resolution":{
          "url":"http://distilleryimage3.instagram.com/d18a02640e4711e180c9123138016265_6.jpg",
          "width":306,
          "height":306
        }
      },
      "caption":{
        "text":"Giant birthday cake that is half eaten. More for me!  "
      },
      "user":{
        "username":"michellexx",
        "website":"",
        "bio":"",
        "profile_picture":"http://images.instagram.com/profiles/profile_272025_75sq_1300062836.jpg",
        "full_name":"\ue314 Michelle",
        "id":"272025"
      }
    }
  ]
}

To get the caption value, I kept trying var caption = data[0].caption.text; , which one would think would work but didn’t… I later realized (after 20 minutes of racking my brain and cursing JSON and JS), that the callback was being placed into a function and the WHOLE JSON data being retrieved as an object named “data” thus making the correct syntax: var caption = data.data[0].caption.text;

Correct syntax:

 var caption;
 Popcorn.getJSONP( uri, function( data ) {
   var caption = data.data[0].caption.text
 });
 

What a headache! Over the simplest thing too… So I ended up changing the variable names to make it easier:

var caption;
Popcorn.getJSONP( uri, function( jsondata ) {
  var caption = jsondata.data[0].caption.text
});

With that solved, all that’s left is to figure out this darn sequencing thing. I’m keeping positive that I’ll find a solution…

1. Install required tools
   sudo apt-get build-dep firefox
sudo apt-get install libasound2-dev libcurl4-openssl-dev libnotify-dev libxt-dev libiw-dev mesa-common-dev autoconf2.13 yasm

2. Get the source code (humphd’s mozilla-central repo OR main repo)
3. Add the following code to a “.mozconfig” file to create a debug build (I created the file in the main “mozilla-central” folder)
   . $topsrcdir/browser/config/mozconfig
ac_add_options --disable-optimize
ac_add_options --enable-debug
ac_add_options --enable-tests
4. Run the make command (and time it to see how long it takes)
   time make -f client.mk
5. Wait.
6. Enjoy.

Some stats for my laptop:

• RAM: 3.5GB
• Processor: Intel(R) Core(TM)2 Duo CPU T8300 @ 2.40GHz

And for the Ubuntu virtual machine (virtual settings):

• RAM: 1283mb (I initially set it up like this and forgot to increase it)
• Processor: x 2

First try: 2 hours and 18 minutes (Release Build)

Second try: 80 minutes (Debug Build) NOTE: I also increased the RAM this time to 1.8gb and added “mk_add_options MOZ_MAKE_FLAGS=-j5″ to my .mozconfig file

So I’ve now got Firefox Nightly up and running. Up next: adding “printf”s

I’m super excited about this since Instagram is such a fun app to use. If you don’t know about it, it’s a social image-editing/sharing/liking/commenting/tagging app which has many photo filters and a good interface for it but/and is currently iPhone only (I know what you’re thinking…)

I use it frequently and so do many others as well (starbucks, justinbieber, etc). It’s got 12 million users so surely, there’ll be use for this plugin right?

And since I stumbled on the Instagram API I thought it would be a great chance for me to create a plugin for Popcornjs – I haven’t seen anything like this for popcorn and thought it would be great to implement it AND I needed to find something new to work on for my open-source course. 2 birds, 1 stone.

I’m really looking forward to this and I’ll try and keep this blog updated with my struggles and accomplishments.

I’ll share with you my most recent picture taken during an FSOSS presentation.

I’ve chosen to work on a ticket for the Popcorn.js project. The aim of the popcorn project is to bring more user interaction into a video. Instead of adding captions at a certain time, you can show related info such as tweets, images, wiki articles, googlenews, etc etc… It’s really going to pave the way for increased user interaction and interest in the video world.

Right now, the plugins (twitter, facebook, flickr, googlemaps, etc) for popcorn have a manifest within the code. This manifest is to help the app developer integrate the plugin to their video. As per Bobby Richter (irc: secretrobotron):

Plugins have a manifest so we can glean a bunch of information about how to build an instance of one when an event is constructed

Since parsers and players (such as youtube or soundcloud) are also available in popcorn, it would also be great to have manifests included in them as well. Seems easy enough right? Well, the hard part in this is figuring out exactly what should be in the manifest?? I’ve looked over the format of manifests in plugins and I’ve kind of got an idea of the least information that a player should have.

Among the many that I looked at, I considered the Attribution plugin manifest:

manifest: {
  about:{
    name: "Popcorn Attribution Plugin",
    version: "0.1",
    author: "@annasob",
    website: "annasob.wordpress.com"
  },
  options:{
    start              : {elem:'input', type:'text', label:'In'},
    end                : {elem:'input', type:'text', label:'Out'},
    nameofwork         : {elem:'input', type:'text', label:'Name of Work'},
    nameofworkurl      : {elem:'input', type:'text', label:'Url of Work'},
    copyrightholder    : {elem:'input', type:'text', label:'Copyright Holder'},
    copyrightholderurl : {elem:'input', type:'text', label:'Copyright Holder Url'},
    license            : {elem:'input', type:'text', label:'License type'},
    licenseurl         : {elem:'input', type:'text', label:'License URL'},
    target             : 'attribution-container'
  }
}

Look at all that manifest info! (If you want to see an example of an even lengthier manifest check out the Facebook plugin).

So I thought that I could extrapolate something from the above to create a base manifest structure that the other player manifests will follow from:

manifest: {
  about: {
    name      : "VideoPlayer Name Here",
    version   : "0.0",
    container : "iframe or div"
  },
  options: {
    width    : { elem: "input", type: "text", label: "Width" },
    height   : { elem: "input", type: "text", label: "Height" },
    name     : { elem: "input", type: "text", label: "Name" },
    src      : { elem: "input", type: "text", label: "Video Source" },
    vid-duration : { elem: "input", type: "text", label: "Duration" },
  }
}

Currently, I’m not sure whether the players act like the plugins do, like if you have a plugin for flickr and an image appears at the specified time, will a player also be able to do the same thing and appear alongside another video at the appointed time?? That’s a question that I will definitely need an answer for.

Parsers
As for parsers, so far I’ve got:

manifest: {
  about: {
    name      : "JSON Parser",
    full-name : "JavaScript Object Notation",
    version   : "0.0"
  }
}

It’s not much as I’m unsure what else to put under parser manifest, what else do you think would be useful?

It isn’t much of a release, but I guess you could say I am releasing a proof of concept!

The syntax and structure of all this code is something I’ve never really seen before and I am doing my absolute best to understand how these plugins/parsers/players all work. Any comments, suggestions, observations at all, please comment on this post, I would love to get feedback!

Cheers!

What I also like about using a linux based OS is that open source languages and projects work so much more seamlessly on it. Just imagine having to install Apache, MySql and PHP on a Windows machine! I did that many many years ago, and it was very confusing. (It could just be that I was young and a closet-programmer and much too eager to read documentation >_> )

My work setup is basically my laptop connected to another monitor. As of right now, I am running Ubuntu 11.04 Desktop on Virtualbox and have it on my laptop monitor while Win7 is on the other monitor (as I get more into working on a project, I’ll switch these views around). Having a second monitor is super handy for referencing things while working.

IRC is necessary for the DPS909 course and so I’ve decided to install XChat on Ubuntu. It’s a GUI and I find this more convenient since I don’t know the CLI for IRC yet =( I have so far been able to connect to the appropriate channels and servers (freenode/mozilla  #seneca) but have not yet participated in any convos… this might be due to there being a lack of convos happening in the channels :S Actually, there are none! It just seems really awkward to break the silence. I think I will give it a go during class later today – I have to so I can start on my project!! I hope to work on #popcorn or popcorn-maker since the technology used for that seems like something I can handle. I really don’t want to take on a project where I have no idea where to start and no previous knowledge of the language!

Even though I don’t have a project yet, I’ve already set up Git on my machine and am looking forward to using it. Oh, I also used a form of Version Control during co-op, cvs – concurrent version system, (after the headache I got while trying to create a server for it) it was super easy to use and I’m hoping git will be the same way *fingers crossed* Looking forward to humph’s lecture about it tomorrow!

Cheers!

Apple Aperture License VS BSD License

The notable difference between a closed license (Aperture) and and open license (BSD) is distribution and modification of software.

Aperture:

• not allowed to copy, decompile, modify, reverse engineer etc
• can only make one (1) backup copy for personal use
• only one (1)  copy must be in use at all times (not allowed to share with others eg. in a household)

BSD:

• you can modify and distribute the software as long as you provide a notice stating that the software is provided “AS-IS” with no warranties

After looking at that… It seems so much better to code / use open source software doesn’t it?