Cropping text

beginners
#1

Hey all,

Having some conceptual difficulty on an mp3 player I’m developing. I have a box of fixed width in which I display track info (title/artist/album). If any field extends beyond the width of its container, I want to crop the text, put an ellipsis at the end, and periodically play a scrolling-left animation to reveal the full field.

It’s this last bit of functionality I’m having trouble with. I can’t figure out how to ‘hide’ unwanted portions of the text (using ofTrueTypeFont and .drawString()) that extend outside the box. I could shorten the string itself, but that’s super clumsy and wouldn’t work with the desired animation. Is there any way to tell OF to only draw pixels if they are within a specific range? I guess that’s really what I need, but my limited OpenGL background could be keeping me from seeing another solution…

Any other ideas or potential approaches would be much appreciated.

Thanks!
Nick

#2

I’m not sure if this would work for you because I don’t know what the interface will look like, but if you are drawing the text onto a solid background then you could just draw a box to cover the end of the string. You could even put a fancy alpha gradient texture if you want. Then to get the scroll effect just move the text horizontally back and forth, the box will crop off the end no matter what.

Alternatively, you could do something similar using FBOs to render the text into a texture that is a specific size. Some text will fall outside of this area if it is too long and will not be displayed.

#3

Thanks so much, ofxFBOTexture was exactly what I was looking for.

Peace!
Nick