Default View

Scrolling View

SOC is a page that displays pictures I take throughout the day; some people don’t like their   twitter feed filled with links to pictures (and it’s annoying since twitter makes you expand them manually for some reason.)  , so I stopped posting there.

SOC pulls pictures in from an email address, scales them down, and then displays them in an infinite stream of pictures.  As I walk around during the day, I just have to take pictures an email them off and they eventually show up on this page.

This is still a work in progress.  Version one dot oh was based on animation done through JQuery, then I moved on to use CSS animation to speed it up.  SOC runs fine on chrome and safari running on a computer, but the ipad and iphone don’t seem to have enough horse power to actually display the animations correctly.

http://analogpixel.org/pages/soc/ (only works on chrome and safari) (use ‘ctrl -’ if it doesn’t fit on your tiny little screen.)

Update 1:

Added an infinite scrolling boxes view : http://analogpixel.org/pages/soc/boxes/ This seems to be happier on the ipad.

Now in box view, if you click on an image, it’ll open it up on the screen.

Now in box view, instead of a weird box resize, I just take a crop of the center of the picture.

Update 2:

Changed the dumb loader with a slightly smarter loader.  Before when you when to the load url, it would go to the mailbox, download everything and parse everything.  That’s fine until your browser times out waiting for that to finish.  Updated the loader to only load, process, and then delete the first image.  It then returns if there are any more pictures to process.  On the webpage side, I make ajax calls to the loader 1 at a time.  This also gives a nice status of what it’s doing (loading 1, 2, 3…etc)

Update 3:

I’ve rewrote boxes using javascripts attempt at classes.  The biggest pain was trying to write a class, that calls an ajax call in jquery, and then returns back to the context of the class that called it:

/*
create a javascript class and get jquery getJSON to return to the class
on returning data.
*/
function image (var1,var2) {

this.var1 = var1;
this.var2 = var2;

this.ajaxcallingfunction = function() {

  // create a copy of this in obj
  var obj = this;
  $.getJSON('/pages/soc/gn/?id=' + this.pageid, function(data) {
    obj.getdata(data);
  }
  );

}

this.getdata = function(data) {
 console.log( this.var1 );
}

/* constructor code goes here */

}

Also, if you’re searching on how to make a class constructor in a ‘javascript class’ it involves putting the constructor code at the bottom of your function. (that wasn’t so hard to say was it internet?)

Update 4

Lots of updates to the admin interface (add star/title…etc)  Also changed the default theme to boxes, and allow the user to select just starred pictures, or all pictures. (I take lots o pictures.)

I’m starting to think they need a self destructing prototyping language.   Once you get your prototype functioning the way you want, the code is destoryed and you’re force to re-write it in a clean way with all the requirements (as opposed to frankencoding.)

Todo:

• Make it work on the ipad ( thinking making a big div, and then scrolling the browser around it.)
• scale the picture to fit the screen better.
• maybe add all the border and stuff on the server side, less processing on the client.
• PRE-LOAD images.
• quad scroll
• give box view boxes a size (if you load too many pictures, the top ones pop out of memory, the size of the box goes to 0, the page collapses, and then the page goes nuts trying to fill it with more pictures :) )
• Iphone interface
• star/unstar pictures
• delete pictures
• admin login for above
• view only stared pictures
• merge all views into one code base…..