Wrap up

Blog entry December 13

I felt sick on Saturday and needed to spend that day to get some rest though I spent Sunday and Monday working on Milestone 4.   My goal for the milestone was to clean up my code and perhaps get started on the unit tests.  Unfortunately, the cleaning up of the code took longer than planned and with exams to prepare for at the end of the week, work on the unit tests had to be scrapped.   Getting rid of the left over Vimeo code turned out to be a lot more time consuming than anticipated and in the end I could only manage to remove the bits of code that handled functionality for the Vimeo player that would be of no use to my slideshow player such as methods for controlling volume, play, pause, etc… as removing more than that would break either or both the slideshow player and the popcorn event manager.   My entire process of cleaning up the code thus consisted of make my edits and then checking if either the slideshow itself or any of the popcorn event handlers broke.  So far everything seems to be working.    The cleaned up code has been uploaded to my github repo.
I’ve also gotten started on the wiki for the slideshow player.    Because this is a totally new project my wiki was started from scratch.  I used the project wiki example posted on the instructor’s website for an idea on how to set it up.   Hopefully this will provide the next person who picks up this project (or maybe myself since I plan on picking this up over the summer should I not wind up in co-op)

http://zenit.senecac.on.ca/wiki/index.php/Popcorn_slideshow_player#Project_Leader.28s.29

While working on this, I also worked on my student wiki on Monday.

http://zenit.senecac.on.ca/wiki/index.php/User:Dennis_Villasenor

I'm not sure if it will be appropriate to post the project wiki link to the lighthouse ticket for this though it does make some sense as that will be the first place anyone who picks up this project will look.  I'll ask around first and try to see if that is ok or if there is someplace where I should post a link to the project wiki.

 As an aside, here is a link to a demo of the slideshow player in my matrix account.   It may or may not ask you for a password however (I really should talk to helpdesk over fixing whatever I probably broke in my matrix account over the summer during BTI220)

http://matrix.senecac.on.ca/~dvillase/decairos/players/slideshow/popcorn.slideshow.html

My many mistakes in my effort at testing mouselock

I didn’t get far at all in my work at debugging mouselock, I just ran into a massive stumbling block right at the very start of my attempt which could have been avoided by asking a few very simple questions on IRC.

So I got assigned to work on developing a test that would handle whether or not the mouse cursor was disappearing/ reappearing depending on whether or not mouselock was activated.  Sounded simple enough.   Because there was no way that anybody currently knew how to test for the visibility of the cursor it was going to be a litmus test.  So I think to myself, OK, I’ll work on a js that will call up mouselock with a button the user can

After reading through the instructions I realized that I needed to do a rebuild of Firefox, and that’s where my misadventure with testing mouselock began.  For some stupid reason I kept trying to build it not from the mozilla build shell but from Git and the windows command line with the predictable failure to compile.   I could have asked on IRC but I just didn’t because it felt like I was asking an incredibly stupid question.  Something I was supposed to have known from weeks ago, after all I did manage to get a build up and running mid November.  There’s also the fact that I was pretty convinced that what I was doing was the correct way of doing things and that it was probably something else causing the problem. (a necessary executable like gmake missing or autoconf).  It wasn’t until Diogo gave me a good swift kick in the butt on Skype while talking about our BTS assignment that I finally got on IRC and after managing to talk with Humph finally figured out that I needed.   Unfortunately though, it had been almost a week since and my test component was by that point long overdue.   So four wasted days of me scratching my head and essentially being clueless about how to rebuild mozilla-central could have been averted had I asked early on for assistance.

I hope this blog entry doesn’t come off as whiny or sound like I’m  trying to excuse my utter lack of progress on the testing work that I volunteered to do.  I’m not,, I just want to have this entry as a reminder to myself of the glaring flaw in how I’ve been approaching my work that I should learn to overcome.

Moral of the story is, not asking that stupid question can often times end up making you seem like a much bigger idiot.

Finally, my player is playing a slideshow

I finally managed to get a slideshow playing.  It took me damn near three weeks to do it but I finally manged to get it done.

The mistake I've been doing for the past few weeks had been trying to shoehorn the following swfobject statement into into my slideshow application.

swfobject.embedSWF("http://static.slidesharecdn.com/swf/ssplayer2.swf" ,"player","598","480","8",null,flashvarsabc,paramsabc, attsabc);

This was from the API documentation provided by slideshare here http://www.slideshare.net/developers/playerapi.  Unfortunately, it turns out that what I was supposed to have been using was the way the embedSWF was being invoked in the vimeo and youtube players, the only difference being that the player definition defined in the first parameter of the function call points to the slideshare player http://static.slidesharecdn.com/swf/ssplayer2.swf and instead of using clip_id: I would be using doc since the slideshow is a document not a video.

so my call to swfobject embed should have looked like this

     flashvars = {
        doc : vidId,
         show_portrait: 1,
        show_byline: 1,
        show_title: 1,
        js_api: 1,
           js_onLoad: 'Popcorn.slideshow.onLoad',
         js_swf_id: containerId
      };
      params = {
        allowscriptaccess: 'always',
        allowfullscreen: 'true',
        wmode: 'transparent'
      };
     
      alert("vidId " + vidId);
        swfobject.embedSWF( "http://static.slidesharecdn.com/swf/ssplayer2.swf", containerId, self.offsetWidth, self.offsetHeight, "9.0.0", "expressInstall.swf", flashvars, params, attributes );


In order to play a slideshow via a javascript, you cannot use the http uri to embed it but instead must use the doc id which can be obtained by going into slideshare, opening the slide you wish to embed and clicking on the embed options and then copying the line of code that lets you embed onto wordpress blogs.  See Screenshots below on how to do this

 So instead of the url of the slideshow you would enter a line similar to the one below


[slideshare id=602208&doc=thirst-1221628161155588-8]

The only snag I have right now is that my player, which really is just a modified version of the vimeo player, only works if a url is passed to it.   So the above line of code won't work but

http://www.slideshare.net/andrearsya/thirst-upload-800x600-1215534320518707-8-1864524

will work.  However as you can probably notice there is a significant difference between how the url and embed script versions identifies the slideshow.  To bypass this I'm passing a hybrid of the two that essentially puts the embed doc ID and combines it with an http url to slideshare like so:

http://www.slideshare.net/slideshow/thirst-1221628161155588-8

I'm not sure if this is acceptable or not and right now is serving as an interim solution to get the player to play a sldieshow  A better solution would be one that lets the user just copy the embed code like I specified in the above two slides, take the entire string (ie: slideshare id=602208&doc=thirst-1221628161155588-8) and pass the ID string at the end to parameter doc: in the params definition.   I'll need to talk with one of the popcorn developers on how to do this.


I'm hoping to be able to push this through sometime this week, next week at the latest.   There's still quite a bit that needs to get done.  Now that I've managed to get the slideshow playing I'll need to define the method that will let the user jump to a specific slide via popcorn.  I'll also need to clean up my code as well as define the unit tests.  Those items I'm planning to work on for my 0.4 release (although the version I would be pushing this week after cleaning the code up and doing some minor tweaks and fixes would technically really be a 01 release wouldn't it?)

Hopefully the stuff I've posted makes some sense,  it's 3AM as I post this and I'm starting to fade out.   Anyways, I'm just glad I finally managed to get this thing showing a slideshow.  I know I was supposed to be working on the mouselock functionality for firefox as well but after my instructor showed me how to properly run swfobject (apparently it has to be run via http:// and not from file:// like I've been doing for the past few weeks) everything began to come together and I just had to spend the past few days working on this thing.

I've built it, now it's time to break it

...and modify it with the mousetracking stuff, provided I can figure out how to do it.  I'm probably the last one in my class to finally do it but I've finally managed to build firefox.  Huzzah!

   Now if only I could get the same level of success with getting my slideshow player running.

Catching up with my blog posts

In all the chaos that's been going on I just realized that I've been missing posting my blogs for the past 2 weeks now.  Anyways, a quick recap of what's been happening since.

Over the break I looked into how slideshow implements slides and it is done by a flash embedder called swfObject.js.  At first I thought that this is what actually implements the slideshow and is what I should be editing to get the wrap the baseplayer features for the slideshow but after looking at the youtube and vimeo players and doing some tests and experimentation I later found out that this file just embeds the flashplayer that plays the slideshow.   In fact I don't even need this file as I can do what the other players are doing and call this .js file through "//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"" using the popcorn.getScript method.

Now the snag that's been causing be grief for the past week and a half.  I still can't get it to run.  More specifically I seem to be getting a problem getting swfobjects to properly embed and play flash via a .js file.  Neither the youtube, vimeo nor my slideshow player are displaying their contents.  At first I thought that this might be due to me using an older none functioning version of the players, but after cloning again from the develop branch of the repo I'm still not getting any output from any of those players.   I suspect it could be a configuration issue on my laptop where I do most of my work but my lack of success in getting any of the players to also display their flash content on any of the school computers and my desktop at home undoubtedly means that I'll need to seek some clarification from either David or Chris on how to properly  run these players.

I'm sure there's more things that I've done and discovered with this player but I haven't had much sleep in the past few days and I'm drawing a blank right now, if anything comes up I'll add it in another blog post later this week.    I still need to do another recompile and debug of firefox which I'll be posting about sometime this week anyways.

One other thing I still need to do but ended up neglecting is my wiki.  For some silly reason I totally forgot that we had to create a wiki for this course, I'll be working on that if I get the chance tomorrow afternoon during the break in between my classes.  If not then then by the evening for sure as well as do an update of the ticket for the slideshow player.

Couldn't successfully build Firefox

My attempt to build firefox took me around 8hrs, the bulk of it spent downloading all the materials from mozilla's Mercurial repository and the actual installation itself.   Judging from the error message it appears that the installation failed due to it missing a couple of files.  I'm not sure though if this was due to an incomplete or erroneous download of the repository or caused by an error with the build itself.  I do suspect the former as I did mistakenly stop the download earlier due to it taking so long that I thought that the download had hanged.

I'll make another attempt tomorrow evening starting with a redownload of the repo and try to figure out what went wrong. 

Charging ahead

After a few missteps and misunderstandings it looks like I now have a handle on what to do for slideshow.js, hopefully I'll have enough time to get something ready for 0.2.  It appears that my initial understanding of how slideshow will operate was totally off;  as it stands I will only need to work on one file called popcorn.slideshow.js that will be responsible for playing the slides created by the user using slideshare; with the slideshow itself being provided to my application via a link from the slideshare site.   All the events such as the time interval to pass between each slide or if the slideshow is manual or auto will be set when the slideshow is created in slideshare. Slideshow is only responsible for playing the slide and attaching popcorn events with Baseplayer.js handling the video events (play, pause, mute, etc..) that  the user may wish to include with their slideshow.


I've looked at the different players and plugins for ideas on how to implement this and off the players currently in popcorn, it looks like the Vimeo and Youtube players are the closest to what I'm doing for slideshow.js.    Both are embedding videos from an external sources and adding in additional functionality via the plugins.  Of course mine will be embedding a slideshow with some video elements (which makes looking at how these players run a pretty good idea).  The Vimeo player itself has an anonymous constructor that accepts up to three parameters that relate to how the vimeo video will be played as well as the link to the video iteslf

(ie: from an html page creating an instance of the Vimeo player -->var player = Popcorn( Popcorn.slideshow( "player_1", "http://player.vimeo.com/video/11127501")

This won't be unlike how slideshow will work(intially anyway).   The html page will create an instance of slideshow.js which will contain point to a link to a slideshare slideshow which will in this case contain a link to a slideshow which will be embedded into the html page.   When I last looked at the slideshow site, they do provide you with the javascript to add to your website to show a slideshow in your website so there's another resource I can use.


I'm currently going through the vimeo player code right now and cutting and pasting bits of it to see how it works as well as the html file that runs it so I have an idea on how to create my own html file to test if my slideshow player is running.   I have yet to create a unit test, I'll work on one soon enough right now I'd like to play around with cutting and pasting code from the vimeo and youtube players onto slideshow.js and slideshow.html and try to see if I can figure out how to load a slideshare slideshow.

plan for tackling slideshow

I spent Friday going over baseplayer.js and wrapping my head around it's different functionality and getting an idea on how to setup the logic and flow of slideshow.js.

Basically, the slideshow player will have 2 files.  slideshow.js will be responsible for playing the slideshows and slideshowmaker.js will be responsible for letting the users create slideshows.   The slideshows themselves will be composed of 2 files.   One will be the movie file itself which will contain the slideshow.   The slideshow itself is essentially a movie file where the individual frames serve the purpose of the individual slides.   The other file will be a configuration file which will contain text that points to the main slideshow file but also contains information on how slideshow.js will play that slideshow (ie: will the slideshow be a manual or automated slideshow and if automated how many seconds will pass before showing each frame.)

So if the config file states that the slideshow will be played in manual mode, the slideshow will wait for the user to press a key before moving on to the next slide.  In auto mode slideshow.js will look for an entry indicating how many seconds must pass before the next slide is shown

So I'm thinking the logic for slideshow.js will go like this:

open and read the slideshow configuration file
open up the slideshow movie file that the configuration file points to and show the first frame/slide

check configuration file to determine if slideshow will run auto or manual

if auto
    call baseplayer.autoplay and set it to on
    set local variable to hold the amount of time to pass between each slide
   
    use baseplayer.timeupdate function to check how long the movie frame has been paused and compares it with the value stored in the local
    variable. (ie:  if the config file says 3 seconds between each slide, then slideshow.js uses timeupdate to check if 3 seconds has passed before showing the next slide.)
   
else (if manual)
    call baseplayer.autoplay and set it to off
    wait for user keypress
    once the user hits a key, move to the next slide


I'm planning on getting started working on slideshow.js during this week  to try to get this in as part of my 0.1/0.2 submission for Oct 20. I'm thinking testing it using a hardcoded config file and a test movie file that slideshow.js will go through frame by frame to test its reading of the config file, it's handling of both auto and manual modes and that it can read and display the movie files.   First goal though is definitely having something that reads and displays the slideshow movie files.   I haven't had a chance to run my idea through Dave Seifried though, he wasn't in IRC today and I couldn't find his email anywhere on his blog but I'll run this by him tomorrow either through IRC if I catch him there or after getting his email from someone.  Hopefully though I'm on the right track with my ideas.

On a side note, on Thursday night I created a folder called slideshow on git and inside it I created a file called slideshow.js.  I sent it up to my github account where it ended up on branch 0.6.  I'll need to clarify if I should have it on branch 0.7.   It's no big deal though as the file itself is empty save for a few comments

No way I'll make milestone 0.1

When I first took on ticket 559, the slideshow plugin, I assumed after reading the posts on lighthouse that it would be a fairly simple plugin to do.  Just a conventional slideshow the flips through a series of images either manually after the user clicks a key or automatically after set intervals.   Maybe add in a feature to let it play the slides to music.    A fairly simple task that shouldn't take long to do

After I talked with Dave Siefried today though, it turns out that the slideshow is going to be a lot more complex than originally anticipated.   Basically it is meant be more similar to a powerpoint slideshow, letting the user flip through slides containing both images, video and text.   The type of slideshow he is talking about would be similar to this


http://www.slideshare.net/remy.sharp/html5-friend-or-foe-to-flash

The slideshow plugin will be working with baseplayer which is going to emulate the base functionality of an html5 video element. 

So I'm facing  the issue of not only having a work unit that is going to be alot more complex than I originally anticipated but will require quite a bit more of a learning curve than I thought (I was originally thinking my work would be focused on javascript though it looks like I'll be looking at HTML 5 as well).  There's also the issue regarding the availability of baseplayer which has not been released yet (Dave said that it would, hopefully, be staged today)

Don't get me wrong, I am still looking forward at the chance at working on this slideshow plugin, I am quite interested in it and the learning curve required to work on it is something I know I can handle but given the amount of time between now and the Sept 29 due date for milestone 0.1 there's no way I'll be able to make the deadline.

I'll be updating ticket 559 in a few minutes to add in some notes of the features and information for the slideshow that Dave and I talked about.  I've got a fairly packed day of classes tomorrow so I'll try and catch Dave Siefried on Friday or Monday and try to hammer out some more details on how to tackle this slideshow player so I'll be ready for release 0.2

First attempt at ticket 559

Tried working on ticket 559 but wasn't sure on what I need to do, I've cloned the repo to my hard drive and spent some time navigating through the directory structures trying to look for the slideshow player plugin but couldn't find it.  My impression from the posts at lighthouse is that this application is to be coded from scratch and from looking at the cloned repository this looks to be the case.   I'll try and get some clarification from Dave Siefried if I can catch him on IRC tomorrow as well as get some suggestions on examples that I can take a look at to get an idea on what I need to do.

Finally my blog

     Three (or is it two?) weeks late but better late than never.  I've finally gotten my blog setup for the DPS909 course.  Sort of kicking myself in the ass for not having done this sooner and spent the rest of that time trying to get PHP to run on my machine to use wordpress when all that time I could have used blogger.com which turns out to be so much more easier to use but whatever .  

    Anyways quite a bit has happened since the start of this course up to now.   I managed to get in touch with Chris De Cairos and get the details on what I need to get involved with the Popcorn.js project a couple of weeks ago.  I've setup my account in Lighthouse, IRC and Github and I managed to fork off a copy of the project from Anna.   A few days later, I hesitantly got on IRC in an attempt to get a ticket to work on.  I got a chance to get in touch with both Dave Seifried and Anna who sent me my invite to the Popcorn.js project at lighthouse and walked me through choosing my ticket.   I managed to get assigned to ticket 559 which deals with handling a bug in the slideshow player.  

   Admittedly, besides looking at the ticket details when I assigned myself the ticket on Wednesday last week I haven't had a chance to look into the details on what needs to be done as I had to deal with an assignment due that Friday in another course.  I do however plan on spending the rest of this week focusing on and working on this bug I've been assigned.    I've spent quite a bit of time on modding forums and talking with the open source team on IRC doesn't seem to be much different and is something I am comfortable with though I am apprehensive of the level of skill and knowledge required to work on this bug.