UI performance

#1

I’ve got a component (similar to a listbox) in which I’m drawing a substantial amount of text. I’d like to add a simple color change on mouseOver effect, but it’s just too slow to be useful. Right now, my paint method is essentially a for loop iterating over 200 or so array items, drawing a background rectangle and the text for that item, with a special case for the hover item where the background is drawn with a different color.

I know this can’t be the best method, but the only alternative I can think of is to make components out of each item and handling mouseEnter and mouseExit, but I can’t imagine that would be much faster, would it?

#2

it probably would be, since you’d auto-magically be taking care of limited area repaints.

Basically what you need to be doing is checking to see which part of the list needs a repaint, and repainting the smallest rectangle necessary to accomplish that.

Using components adds some weight, but saves needing to do the heavy lifting yourself. It’s also a naturally more expandable approach in that you;d be able to to easily do drag and drop or other such things later, if needed.

If it’s a list, I’d say just go with components. If it is a rich text style problem, then you’re going to need to keep track of text co-ordinates, and update based on font:getWidth()

#3

Well, I suppose I’ll just give it a try with components and see how it works.

#4

I suppose I shouldn’t be surprised that it works much better with components. I mean, Tracktion works with a large number of components and it’s actually doing CPU intensive stuff besides the UI. For some reason, I just don’t like the idea of making hundreds of components, but this little experiment goes a long way toward getting over that little hang-up of mine.

#5

I had the same issue when I started using JUCE. Coming from a Borland background where components were pretty much always heavyweight, and tended to be rather brutal on resources, it took a while for me to relax and stop reinventing the wheel.

The application I’m working on for my pay job is entirely graphics based as I work with medical images, and performance is important. Despite that, I’ve found that I can abuse components quite liberally, and get acceptable performance.

#6

Our application uses a lot of nested and overlapping components and we made all the backgrounds transparent. But we wonder if it would render much faster if we would just give the background of each component the same colour of the onderlaying component instead of making it transparent?

#7

yeah i think that if you set a component to be opaque, then when it need to be repainted, only that will be asked for doing it… so using opaque components will save a lot when issuing massive repaint calls on overlapping ones (anyway component transparency obviously depends on your specific usage) !

#8