Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

replicating openPhotoGallery

Whats the best way to replicate the thumbnail preview of the openPhotoGallery.

I need a view containing square thumbnails that then changes the index of a scrollView.

My photos are of various heights and widths but I'm trying to get it to look exactly like the openPhotoGallery.

any help or pointers much appreciated.

— asked March 28th 2010 by Phi Chong
  • imageview
  • iphone
  • openphotogallery
  • scrollview
0 Comments

3 Answers

  • use the mask property. Just make a image of for example 50x50 and place it over the imageviews. I dont know the exact code, but i saw some examples in the kitchensink.

    — answered March 29th 2010 by Glenn Tillemans
    permalink
    0 Comments
  • I just found this and wanted to add some code for what we did.

    I'm not going to attack your scrollview, but I will show you the crops:

    We created a table view, and pass in an array that we loop through to create the rows. We do X rows of 4 images. This doesn't handle remainder issues (we're just banging out a rapid prototype right now), but it does create the table thats fairly trivial to get scrolling.

    Here's the for loops

    Basically, we do two for loops.

    The outer loop creates a row for each group of 4 images.

    The inner loop then adds a mask + an image (the image is never a square image, but the mask is).

    The mask must be all black, cropped to whatever size and shape your looking for.

    Sorry I can't spend a ton of time on this, otherwise I'd make a more simple example.

      var tablePhotosData = [];
    
      for (i = 0; i < photosObject.length / 4; i++) {
          tablePhotosData[i] = Ti.UI.createTableViewRow({
           selectionStyle: Ti.UI.iPhone.TableViewCellSelectionStyle.NONE
        });
    
          for (j = 0; j < 4; j++) {
            tablePhotosData[i].add(
             Ti.UI.createMaskedImage({
               image: 'test_data/images/mask.png', 
               width: 75, 
               height: 75, 
               left: j*79+4, 
               mode: Titanium.UI.BLEND_MODE_SOURCE_IN
             })
            );
    
              tablePhotosData[i].add(
                Ti.UI.createMaskedImage({
                  image: photosObject[4*i + j], 
                  width: 75, 
                  height: 75, 
                  left: j*79+4, 
                  mode: Titanium.UI.BLEND_MODE_SOURCE_IN
                })
              );
          }
      }
    
      var tablePhotos = Ti.UI.createTableView({
          data: tablePhotosData,
          rowHeight: 79,
          editable: false,
          separatorStyle: Ti.UI.iPhone.TableViewSeparatorStyle.NONE,
          top: 2
      });
    
      window.add(tablePhotos);
    
    — answered December 10th 2010 by Ken Hanson
    permalink
    1 Comment
    • Actually, the above doesn't work haha, I end up just forcing that masked image to be the right height / width, which is no good. Auto won't work either because auto on masked images is always 0. Working on this now.

      — commented December 10th 2010 by Ken Hanson
  • Love the idea of using a masked image to crop. (Though I have written a modification of the SDK code to create a cropped image blob - given top/x, left/y, width & height values, if you need that. You could also use the 'imageAsThumbnail' function which makes square images of image blobs)

    But regarding the positioning of the left values for the rows of images, it would be a lot easier to put add the thumbnails to a 'horizontal layout' scrollView with 'auto' contentHeight.

    Using the horizontal layout, it then adds the image views to it and will 'wrap' the rows accordingly (depending on the image width/height of course).

    Here's the imageAsCropped code - to be added to the TiBlob.m file in the iphone/classes folder of your sdk setup:

    
    // Kosso imageAsCropped
    // added to TiBlob.m
    - (id)imageAsCropped:(id)args
    {
        [self ensureImageLoaded];
        if (image!=nil)
        {
            ENSURE_ARG_COUNT(args,4);
            NSUInteger x = [TiUtils intValue:[args objectAtIndex:0]];
            NSUInteger y = [TiUtils intValue:[args objectAtIndex:1]];
            NSUInteger width = [TiUtils intValue:[args objectAtIndex:2]];
            NSUInteger height = [TiUtils intValue:[args objectAtIndex:3]];
    
            return [[[TiBlob alloc] initWithImage:[UIImageResize croppedImage:CGRectMake(x, y, width, height) 
                                                                        image:image]] 
                    autorelease];
        }
        return nil;
    }
    // end Kosso imageAsCropped
    
    — answered December 10th 2010 by Kosso
    permalink
    5 Comments
    • Wow thats great! I'm lil bit wary of modifying my SDK for upgrade reasons, been down that trap with countless wordpress installs haha.

      Soooo… that image as thumbnails jazz, mind posting a sample Koss?

      Killer ideas :D

      — commented December 10th 2010 by Ken Hanson
    • Actually, I'd give my left arm, just did a search for "imageAsThumbnail" in the sink code as well as in the API search and came up with nada :(

      — commented December 10th 2010 by Ken Hanson
    • one last thing, do we get horizontal / vertical scrollType in iPhone? Checked the docs and it says android only :(

      I'm currently trying to solve my index woes so that I know where in the object they are once they go full screen, and then can swipe left / right accordingly.

      — commented December 10th 2010 by Ken Hanson
    • It's no problem adding that snippet to TiBlob.m but obviously it will be lost when it gets updated (if they don't add it)

      I'll try and sort out a sample app to show how to use imageAsThumbnail (I think I found that from digging around the source code too ;) )

      — commented December 11th 2010 by Kosso
    • Hi Ken, take a look in the following Q&A entry, it shows how to use the undocumented imageAsThumbnail method
      http://developer.appcelerator.com/question/70931/create-a-thumbnail-of-a-picture

      — commented December 28th 2010 by Antonio Silveira
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.