I have an application that records audio and draws the waveform (along with some other elements) on the screen. While recording, I'd like to be drawing the waveform in the containerView of an NSScrollView. The containerView keeps expanding to accomodate the new audio information and keeps scrolling to the end. This behavior is exactly like how the scrollviews in GarageBand act when recording new information.
While I've figured out how to accomplish this, my system seems to use an unnecessary number of drawRect: calls when doing the scrolling. What's the most efficient way to do this (update the contentView size, draw the new content on the expanded area, and scroll so the end is visible? Somehow, mine ends up calling drawRect 5 times on each scroll once the containerView is larger width-wise than the scrollView
Document view of scroller is set:
[self.scrollView setDocumentView:self.containerView];
The method to scroll further (called from an NSTimer):
- (void)scrollFurther {
scrollPoint = ([SSSubdivisionManager manager].lastStartSample + [RemoteIOPlayer remote].diffInFrames) / (zoomLevel * baseZoomLevel);
int scrollWidth = self.scrollView.frame.size.width;
CGRect frame = self.containerView.frame;
if (scrollPoint >= ((scrollPoint + (scrollWidth * 0.5f) ) / 2)) {
if (![SSAudioManager manager].isDoingInputPlayback) {
frame.size.width = scrollPoint + (scrollWidth * 0.5f);
NSLog(@"Setting scroller frame to: %@", NSStringFromRect(frame));
[self.containerView setFrame:frame];
}
NSPoint p = NSMakePoint(scrollPoint - (scrollWidth * 0.5), 0);
NSLog(@"Scrolling to point %@", NSStringFromPoint(p));
[self.containerView scrollPoint:p];
} else {
NSLog(@"Not exapanding frame or scrolling to a point");
[self.containerView setNeedsDisplayInRect:frame];
}
}
And the resulting log calls:
At first, when the containerView is smaller than the scrollView:
2012-07-29 17:42:43.607 MET[4679:503] -[SSVisualContainer drawRect:] [Line 70] Drawrect: {{0, 0}, {1924, 700}}
2012-07-29 17:42:43.683 MET[4679:503] Setting scroller frame to: {{0, 0}, {1942.3199462890625, 700}}
2012-07-29 17:42:43.684 MET[4679:503] Scrolling to point {580.3199462890625, 0}
2012-07-29 17:42:43.687 MET[4679:503] -[SSVisualContainer drawRect:] [Line 70] Drawrect: {{0, 0}, {1942, 700}}
2012-07-29 17:42:43.757 MET[4679:503] Setting scroller frame to: {{0, 0}, {1957.6800537109375, 700}}
2012-07-29 17:42:43.758 MET[4679:503] Scrolling to point {595.6800537109375, 0}
2012-07-29 17:42:43.760 MET[4679:503] -[SSVisualContainer drawRect:] [Line 70] Drawrect: {{0, 0}, {1957, 700}}
2012-07-29 17:42:43.835 MET[4679:503] Setting scroller frame to: {{0, 0}, {1975.5999755859375, 700}}
2012-07-29 17:42:43.836 MET[4679:503] Scrolling to point {613.5999755859375, 0}
2012-07-29 17:42:43.839 MET[4679:503] -[SSVisualContainer drawRect:] [Line 70] Drawrect: {{0, 0}, {1975, 700}}
2012-07-29 17:42:43.889 MET[4679:503] Setting scroller frame to: {{0, 0}, {1988.4000244140625, 700}}
2012-07-29 17:42:43.890 MET[4679:503] Scrolling to point {626.4000244140625, 0}
2012-07-29 17:42:43.892 MET[4679:503] -[SSVisualContainer drawRect:] [Line 70] Drawrect: {{0, 0}, {1988, 700}}
And then, it gets out of control:
2012-07-29 17:42:43.954 MET[4679:503] Setting scroller frame to: {{0, 0}, {2001.199951171875, 700}}
2012-07-29 17:42:43.956 MET[4679:503] Scrolling to point {639.199951171875, 0}
2012-07-29 17:42:43.960 MET[4679:503] -[SSVisualContainer drawRect:] [Line 70] Drawrect: {{1536, 512}, {465.199951171875, 188}}
2012-07-29 17:42:43.961 MET[4679:503] -[SSVisualContainer drawRect:] [Line 70] Drawrect: {{1024, 512}, {512, 188}}
2012-07-29 17:42:43.964 MET[4679:503] -[SSVisualContainer drawRect:] [Line 70] Drawrect: {{512, 512}, {512, 188}}
2012-07-29 17:42:43.971 MET[4679:503] -[SSVisualContainer drawRect:] [Line 70] Drawrect: {{1536, 0}, {465.199951171875, 512}}
2012-07-29 17:42:43.972 MET[4679:503] -[SSVisualContainer drawRect:] [Line 70] Drawrect: {{1024, 0}, {512, 512}}
2012-07-29 17:42:43.977 MET[4679:503] -[SSVisualContainer drawRect:] [Line 70] Drawrect: {{512, 0}, {512, 512}}
2012-07-29 17:42:44.098 MET[4679:503] Setting scroller frame to: {{0, 0}, {2034.47998046875, 700}}
2012-07-29 17:42:44.099 MET[4679:503] Scrolling to point {672.47998046875, 0}
2012-07-29 17:42:44.104 MET[4679:503] -[SSVisualContainer drawRect:] [Line 70] Drawrect: {{1536, 512}, {498.47998046875, 188}}
2012-07-29 17:42:44.107 MET[4679:503] -[SSVisualContainer drawRect:] [Line 70] Drawrect: {{1024, 512}, {512, 188}}
2012-07-29 17:42:44.112 MET[4679:503] -[SSVisualContainer drawRect:] [Line 70] Drawrect: {{512, 512}, {512, 188}}
2012-07-29 17:42:44.118 MET[4679:503] -[SSVisualContainer drawRect:] [Line 70] Drawrect: {{1536, 0}, {498.47998046875, 512}}
2012-07-29 17:42:44.120 MET[4679:503] -[SSVisualContainer drawRect:] [Line 70] Drawrect: {{1024, 0}, {512, 512}}
2012-07-29 17:42:44.125 MET[4679:503] -[SSVisualContainer drawRect:] [Line 70] Drawrect: {{512, 0}, {512, 512}}
2012-07-29 17:42:44.154 MET[4679:503] Setting scroller frame to: {{0, 0}, {2047.280029296875, 700}}
2012-07-29 17:42:44.155 MET[4679:503] Scrolling to point {685.280029296875, 0}
2012-07-29 17:42:44.157 MET[4679:503] -[SSVisualContainer drawRect:] [Line 70] Drawrect: {{1536, 512}, {511.280029296875, 188}}
2012-07-29 17:42:44.159 MET[4679:503] -[SSVisualContainer drawRect:] [Line 70] Drawrect: {{1024, 512}, {512, 188}}
2012-07-29 17:42:44.162 MET[4679:503] -[SSVisualContainer drawRect:] [Line 70] Drawrect: {{512, 512}, {512, 188}}
2012-07-29 17:42:44.168 MET[4679:503] -[SSVisualContainer drawRect:] [Line 70] Drawrect: {{1536, 0}, {511.280029296875, 512}}
2012-07-29 17:42:44.172 MET[4679:503] -[SSVisualContainer drawRect:] [Line 70] Drawrect: {{1024, 0}, {512, 512}}
2012-07-29 17:42:44.178 MET[4679:503] -[SSVisualContainer drawRect:] [Line 70] Drawrect: {{512, 0}, {512, 512}}
In this kind of realtime application you shall consider using layers instead of drawing into a UIView overloading the drawRect: method.
Maybe you can draw each new piece of waveform into a bitmap using CoreGraphics functions (very fast, as they aren't writing into the display), and then create a new CALayer, put the image into it and position it at the end coordinate of your container view.
context = CGBitmapContextCreate(etc...);
// draw your graphic (waveform) into the context
CALayer *newlayer = [CALayer layer];
newlayer.contents = CGBitmapContextCreateImage (context);
newlayer.position = CGPointMake(...at the end of container...);
[container.layer addSublayer: newlayer];
Your container view's layer will have as many sublayers as waveform blocks you have drawn, one aside the other.
Layers are very fast, and as your already-drawn wave do not change, they will render quickly as a bitmap and scroll nicely.