Update to Flow Cover: don’t draw ’em if you don’t see ’em.

For those who don’t know, Flow Cover is my little implementation of the CoverFlow view by Apple, and emulates the left-right swipe view provided by CoverFlow with a new view that was written from scratch.

Alessandro Tagliati sent me the following modification to the FlowCoverView.m file:

In the -(void)draw routine (around line 410 of FlowCoverView.m), the routine draws the tiles. But it draws all of the tiles. If, instead, you just draw the visible tiles (replacing the -(void)draw routine with the following):

- (void)draw
{
	/*
	 *	Get the current aspect ratio and initialize the viewport
	 */
	
	double aspect = ((double)backingWidth)/backingHeight;
	
	glViewport(0,0,backingWidth,backingHeight);
	glDisable(GL_DEPTH_TEST);				// using painters algorithm
	
	glClearColor(0,0,0,0);
	glVertexPointer(3,GL_FLOAT,0,GVertices);
	glEnableClientState(GL_VERTEX_ARRAY);
	glTexCoordPointer(2, GL_SHORT, 0, GTextures);
	glEnableClientState(GL_TEXTURE_COORD_ARRAY);
	
	glEnable(GL_TEXTURE_2D);
	glBlendFunc(GL_SRC_ALPHA,GL_ONE_MINUS_SRC_ALPHA);
	glEnable(GL_BLEND);
	
	/*
	 *	Setup for clear
	 */
	
	[EAGLContext setCurrentContext:context];
	
	glBindFramebufferOES(GL_FRAMEBUFFER_OES, viewFramebuffer);
	glClear(GL_COLOR_BUFFER_BIT);
	
	/*
	 *	Set up the basic coordinate system
	 */
	
	glMatrixMode(GL_PROJECTION);
	glLoadIdentity();
	glScalef(1,aspect,1);
	glMatrixMode(GL_MODELVIEW);
	glLoadIdentity();
	
	/*
	 *	Change from Alesandro Tagliati :
	 *	We don't need to draw all the tiles, just the visible ones. We guess
	 *	there are 6 tiles visible; that can be adjusted by altering the 
	 *	constant
	 */
	
	int i,len = [self numTiles];
	int mid = (int)floor(offset + 0.5);
	int iStartPos = mid - VISTILES;
	if (iStartPos<0) {
		iStartPos=0;
	}
	for (i = iStartPos; i = len) {
		iEndPos = len-1;
	}
	for (i = iEndPos; i >= mid; --i) {
		[self drawTile:i atOffset:i-offset];
	}
	
	glBindRenderbufferOES(GL_RENDERBUFFER_OES, viewRenderbuffer);
	[context presentRenderbuffer:GL_RENDERBUFFER_OES];
}

The new lines are from the comment down to the glBindRenderbufferOES call; you can simply replace the entire routine in your code.

At the top of the FlowCoverView.m file, you’ll also need to define the constant VISTILES:

/************************************************************************/
/*																		*/
/*	Internal Layout Constants											*/
/*																		*/
/************************************************************************/

#define TEXTURESIZE			256		// width and height of texture; power of 2, 256 max
#define MAXTILES			48		// maximum allocated 256x256 tiles in cache
#define VISTILES			6		// # tiles left and right of center tile visible on screen

/*
 *	Parameters to tweak layout and animation behaviors
 */

#define SPREADIMAGE			0.1		// spread between images (screen measured from -1 to 1)
#define FLANKSPREAD			0.4		// flank spread out; this is how much an image moves way from center
#define FRICTION			10.0	// friction
#define MAXSPEED			10.0	// throttle speed to this value

Just insert the VISTILES roughly where I have it in the code snippet above.

Or you can download the zip file all over again.

10 thoughts on “Update to Flow Cover: don’t draw ’em if you don’t see ’em.

  1. Hi

    The flowcover solution you’ve written is quite elegant and I saved a lot of time (and quick-learned a lotta ) things thanks to it. I’m trying to implement the same thing but I need lazy loading. I am still a little dizzy eith openGl concepts so although I did make a LazyImageView class but then I realized I gotta do something better. Any direction you could point me to???

    Like

  2. Hello,

    i really like your work. The integration into my sample app works perfect. Until now i couldn’t find out how to add specific titles (labels) to the actual image… Any hints??? Thanks …

    Like

  3. Hi. Want to use flow cover on ipad app. Is there any limitation?. I tried to scale the flowcover up to fit to the screen but it doesnt change the size.

    Like

  4. Very nice implementation of the “cover flow” view. However, it would be nice when you’re at the first and last tile to be able to make the view “elastic” like the Apple’s one. Right now, as soon as you get to the first or last time, the view stops and you can’t push the first tile to the right and the last to the left. Not sure I’m using the right word but I think “elasticity” is what describes it the best. I have not the time to look to add it myself because I’m in crunch mode before vacations but when I have more time, I’ll try to see if I can do something about it.

    Thanks for this nice piece of work!

    Like

  5. Thanks for this module–my client LOVES it. I’ll send you a link when my free app that uses it hits the store.

    I’ve made two changes to it. The first is a new method to clear and reset the whole component, including wiping the cache. I needed to do this because my app allows users to add to the images in the flow via successive hits to UIImagePicker, and the caching was messing that up.

    The second one is, I added a delegate method call to -endAnimation to report to the delegate the currently-frontmost image’s index. It’s about a three-line change, but it helps me immensely.

    I’d be happy to submit a diffs on both of these things, if you’re interested.

    Like

  6. Hi dan,

    may you share the code to reset the whole component because I’m having a bit of trouble with loading the flowCover when new images are inserted.

    thanks!

    Like

  7. Hello,

    i really like your work. The integration into my sample app works perfect. Until now i couldn’t find out how to add retina display images@2x in cover flow.

    thanks in advance

    Like

  8. Hello

    This flow cover lib. is very use ful for me and it work fine.

    But know i want slide the cover flow image on button click whose is outside from the flow cover view .

    how can i do this please give my idea for do this.

    thanks in advance.

    Like

Leave a comment