Last time i described how to load random string from resource. If you recall the code ended up with the line

text_layer_set_text(s_textlayer_quote, (char *)quote);

to display loaded text on the screen. But what if text is too large to fit on the screen? If you’re building a watchface, there’s no scrolllayer with user interaction available. But what we can do is automatically scroll the text for user convenience to gradually reveal entire content.

The trick is to create text layer larger than it’s container. In my case I am displaying text full screen on Pebble window which is 144×168 pixels, but I will create text layer with the height of 2000:

#define WINDOW_HEIGHT 168
#define WINDOW_WIDTH 144  
#define TEXTBOX_HEIGHT 2000
...
s_textlayer_quote = text_layer_create(GRect(0, 0, WINDOW_WIDTH, TEXTBOX_HEIGHT));

If the loaded text is larger then container window we now can dynamically detect the difference:

text_layer_set_text(s_textlayer_quote, (char *)quote);
  
// if height of quote > height of window, initiate animation to scroll
GSize text_size = text_layer_get_content_size(s_textlayer_quote);
int number_of_pixels = WINDOW_HEIGHT - text_size.h;
if (number_of_pixels < 0) {
    animate_quote(number_of_pixels);
}

Here we get dynamic size of loaded text content and if the difference between window height and actual text height is negative – call animation function, passing number of pixel we need to shift by.

Now to animation function. Continue reading →