Chris Van Pelt: Instimage and MooTools (SF JS #3)

2,272 views

Published on

This is a talk given by Chris Van Pelt about a library he developed called Instimage for his company Dolores Labs (Facestat + Shoestat) to gather images from all over the web quickly and easily using MooTools and Merb.

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,272
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Chris Van Pelt: Instimage and MooTools (SF JS #3)

  1. 1. Images from anywhere <ul><li>A brief overview of Mootools </li></ul>
  2. 2. <ul><li>We need shoes to stat </li></ul><ul><li>Shoes are all over the web </li></ul><ul><li>People don’t know what an image url is </li></ul>The problem
  3. 3. The solution <ul><li>JavaScript (with the help of MooTools) </li></ul><ul><li>A tiny bit of Ruby (with the help of Merb) </li></ul><ul><li>http://shoestat.com/units/new </li></ul><ul><li>http://github.com/vanpelt/instimage </li></ul>
  4. 4. The namespace 1 var Instimage = { 2 pending: [], 3 canceled: false , 4 search: &quot;&quot; , 5 loading: new Element ( 'img' , {src: '/loading.gif' , id: 'loading' }), 6 preload : function () { ... }, 7 //etc... 8 }
  5. 5. Preload the images 1 preload : function ( img ){ 2 var image = new Image () 3 image.onload = this .goodImg 4 image.onerror = this .goodImg 5 this .cancel.delay( 10000 , this ) 6 image. src = img 7 }
  6. 6. A little scope 1 goodImg : function () { 2 if ( this . width > 200 && this . height > 150 && ! Instimage.canceled) 3 Instimage.resize( this ).addClass( 'virgin' ).inject( 'images' ) 4 } 5 Instimage.pending. pop () 6 Instimage.inform() 7 }
  7. 7. The storage API 1 resize : function ( img ){ 2 img = $ (img).store( 'meta' , {width: img. width , height: img. height }) 3 if (img. width > img. height ) { 4 var width = 200 5 var height = ( 200 / img. width ) * img. height 6 } else { 7 var height = 200 8 var width = ( 200 / img. height ) * img. width 9 } 10 return img.setStyles({width: width, height: height}) 11 }
  8. 8. Some more scope 1 inform : function () { 2 $$ ( '#images img.virgin' ).each( function (i){ 3 i.removeClass( 'virgin' ) 4 this .img2JSON(i) 5 i.addEvent( 'click' , function (){ 6 Instimage.cancel() 7 $ ( 'src' ).set( 'value' , this . src ) 8 Instimage.explode( this ) 9 new Fx.Scroll ( window ).toElement( 'form' ) 10 }) 11 }, Instimage) 12 if ( this .pending. length == 0 ) { 13 //Logic to inform the user how we did 14 } 15 }
  9. 9. More storage and XSJSON 1 img2JSON : function ( img ){ 2 img.addEvent( 'mouseenter' , function (){ 3 var meta = this .retrieve( 'meta' ) 4 if ( ! (meta && meta.exif)) { 5 new Element ( 'script' , {type: 'text/javascript' , src: ' http://img2json.appspot.com/go/?callback=Instimage.meta&url=' + encodeURIComponent( this . src )}).inject( 'body' ) 6 $ ( 'stats' ).grab(Instimage.loading, 'top' ) 7 } else 8 Instimage.meta(meta) 9 }) 10 }
  10. 10. FX, chaining & pseudo 1 explode : function ( img ) { 2 if (img.hasClass( 'exploded' )) { 4 new Fx.Tween (img, { 5 property: 'opacity' , 6 onComplete : function (){ 7 Instimage.resize(img).removeClass( 'exploded' ).setStyle( 'position' , 'exploded' ).fade( 'show' ) 8 } 9 }). start ( 0 ) 10 } else { 11 var pos = img.getPosition( 'images' ) 12 var size = img.retrieve( 'meta' ) 13 img.addClass( 'exploded' ) 15 img.set( 'morph' , {duration: 'long' , transition: 'bounce:out' }); 16 img.setStyles.delay( 500 , img, {top:pos. y , left:pos. x }) 17 img.morph.delay( 500 , img, { top: 40 , left: 0 , position: 'absolute' , width:size. width , height:size. height }) 18 } 19 $$ ( '#images img:not(.exploded)' ).fade() 20 }
  11. 11. Events and logic 1 if (Instimage.search != $ ( 'search' ). value ) { 2 Instimage.search = $ ( 'search' ). value 3 src = ' http://images.google.com/images?q=' + encodeURIComponent(Instimage.search ) 4 } 5 if (src. test ( / . (jpg|jpeg|gif|png)$/ )) { 6 Instimage.preload(src) 7 } else { 8 new Request.JSON ({ 9 onSuccess : function ( json ) { 10 Instimage.pending = json 11 if (json. length == 0 ) 12 Instimage.inform() 13 json.each(Instimage.preload, Instimage) 14 }, 15 onFailure : function () { 16 $ ( 'loading' ).dispose() 17 }, 18 data: { src: src } 19 }).get( '/instimage/scrape' ) 20 }
  12. 12. A little bit of ruby 1 def scrape 2 provides :json 3 root = params[ :src ][ /^(https?: // .+? / ).+/ , 1 ] 4 if root =~ /images . google . com/ 5 images = open(params[ :src ]).read.scan( /dyn . Img ( &quot;.*?&quot;,&quot;.*?&quot;,&quot;.*?&quot;,&quot;(.+?)&quot;/ ).flatten 6 else 7 begin 8 parsed = Hpricot (open(params[ :src ])) 9 images = (parsed / &quot;img&quot; ).map do | i | 10 rel(i[ 'src' ]) 11 end .flatten.uniq 12 images += (parsed / &quot;a&quot; ).map do | a | 13 src = a[ 'href' ] 14 next unless src =~ / . (jpg|jpeg|gif|png)$/ 15 rel(src) 16 end .flatten.uniq 17 rescue 18 images = [] 19 end 20 end 21 display images 22 end
  13. 13. Conclusion <ul><li>A little bit of code goes a long way </li></ul><ul><li>Images + Javascript == Oreos + Milk </li></ul><ul><li>Shoestat is the bomb.com (thanks to Mootools) </li></ul><ul><li>Play with it ( http://github.com /vanpelt/instimage) </li></ul>

×