Scrollable BText

[mondelicious]

Has anyone figured out how to implement a BText view in Bananas that will allow scrolling of overflowed content?

I can't find anything in the documentation or sample code.

I would like to have a long block of text that the user would scroll with the channel up/down buttons.

mondelicious

[F8ster]

Here's one less-than-perfectly-elegant way to do it: use a BList, which is scrollable. The code below is a working example. Of course, you should probably use a Vector instead of a bunch of individual adds (search for the string "The following code illustrates the preferred method for adding rows to a list" in the Bananas documentation), but this will at least illustrate how to get it working. GL -- Dave

/* BTextExample.java */

package btextexample;

import com.tivo.hme.bananas.BApplication;
import com.tivo.hme.interfaces.IContext;

public class BTextExample extends BApplication {
public void init(IContext context) {
try {
super.init(context);
MyScreen screen = new MyScreen(this);
push(screen, TRANSITION_LEFT);
} catch (Exception e) {
}
}
}

/* MyList.java */
package btextexample;

import com.tivo.hme.bananas.BList;
import com.tivo.hme.bananas.BText;
import com.tivo.hme.bananas.BView;

public class MyList extends BList {

public MyList(BView parent, int x, int y, int width,
int height, int rowHeight) {
super(parent, x, y, width, height, rowHeight);
}

protected void createRow(BView parent, int index) {
BText text = new BText(parent, 0, 0, parent.getWidth(), parent.getHeight());
text.setFlags(RSRC_HALIGN_LEFT);
text.setValue((String)get(index));
text.setFont("default-24.font");
}
}

/* MyScreen.java */

package btextexample;

import com.tivo.hme.bananas.BApplication;
import com.tivo.hme.bananas.BScreen;

public class MyScreen extends BScreen {

public MyScreen(BApplication app) {
super(app);

MyList list = new MyList(this.getNormal(), 100, 100, 400, 350, 35);
list.add("Don't worry if you don't understand any of");
list.add(" the above code. This is simply the ");
list.add("standard pattern to follow when creating");
list.add("a new application. This code creates");
list.add("the application, calls the first ");
list.add("screen (called 'InitialScreen' -- we'll get");
list.add("to that in a minute), and handles");
list.add("killing the application properly.");
list.add("Also, at this point, Eclipse should");
list.add("show one error (for 'InitialScreen';");
list.add("you can tell by the little marker to the");
list.add("left of the code). We'll fix that");
list.add("in a minute.");
setFocusDefault(list);
}
}

[apps-tv]

The key is using the FontInfo event for get the font metrics. This returns the font metrics for the font living on the TiVo box rather than a similar one on your computer.

http://tivohme.sourceforge.net/docs/hmesdk/04ProgrammingTechniques.html#wp1147854

You can then do all the measuring yourself. It takes a little work but its doable, I don't think there's any sample code around that does what your after though.

[F8ster]

Well, as it turns out, I already had to go through the whole font width calculation process for the Stock Viewer application in order to be able to right-align text in columns. So, I wrote a font-width dumper for all the popular sizes of the default font. The output of that may be found below.

As apps-tv points out, this should give you everything you need to be able to calculate text line widths to know when to wrap, etc. Some of the values aren't exact (for example, with a certain point size, 3 spaces is a width of 20), so you may get off by a pixel or two. Just don't try to get too close to the end & you'll be OK.

I used a subset (mostly numbers and currency characters) of the TiVo-reported values in my app, and I wound up having to hand-edit the width values to make things look perfect. It was a pain. So, some of the numbers for default-20, which is what I used, differ in my app vs. the list below. However, I didn't want to start editorializing, so the raw info as reported from TiVo is what's shown below.

You can download it as a class from here, and I'll just paste it in below as well:

http://bitrazor.com/content/tivo/hme/FontWidths.java


package fontmetrics;
public class FontWidths {

public static final String[] glyphs = {
" ", "!", "\"", "#", "$", "%", "&", "'", "(", ")", "*", "+", ",", "-", ".",
"/", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", ":", ";", "<", "=",
">", "?", "@", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L",
"M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "[",
"/", "]", "^", "_", "`", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j",
"k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y",
"z", "{", "|", "}", "~"
};

int[] default_10_widths = {
3, 3, 3, 6, 5, 7, 6, 2, 3, 3, 5, 5, 2, 3, 2,
4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 2, 2, 5, 5,
5, 5, 6, 5, 5, 5, 6, 5, 5, 6, 5, 2, 3, 6, 5,
7, 5, 6, 5, 6, 5, 5, 4, 5, 5, 7, 5, 5, 5, 3,
4, 3, 5, 6, 4, 5, 5, 4, 5, 5, 3, 5, 4, 2, 2,
5, 2, 7, 4, 5, 5, 5, 3, 4, 3, 4, 4, 6, 4, 4,
4, 3, 3, 3, 6
};

int[] default_11_widths = {
3, 3, 4, 7, 6, 7, 7, 2, 3, 3, 5, 6, 2, 3, 2,
5, 6, 5, 5, 6, 6, 6, 6, 6, 6, 5, 2, 2, 6, 6,
6, 5, 7, 6, 6, 6, 6, 5, 5, 6, 6, 2, 3, 6, 5,
7, 6, 6, 6, 6, 6, 6, 5, 6, 6, 8, 5, 5, 5, 3,
5, 3, 6, 6, 4, 5, 5, 5, 5, 5, 3, 5, 5, 2, 2,
5, 2, 7, 5, 5, 5, 5, 3, 5, 3, 5, 5, 7, 4, 5,
4, 3, 4, 3, 7
};

int[] default_12_widths = {
3, 3, 4, 7, 6, 8, 7, 2, 4, 4, 6, 6, 3, 3, 2,
5, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 2, 3, 6, 6,
6, 6, 7, 6, 6, 6, 7, 6, 6, 7, 6, 2, 3, 7, 5,
8, 6, 7, 6, 7, 6, 6, 5, 6, 6, 9, 6, 6, 5, 3,
5, 3, 6, 7, 4, 5, 6, 5, 5, 5, 4, 6, 5, 2, 2,
5, 2, 8, 5, 6, 6, 5, 4, 5, 4, 5, 5, 7, 5, 5,
4, 3, 4, 4, 7
};

int[] default_14_widths = {
3, 4, 4, 9, 7, 9, 9, 2, 4, 4, 6, 7, 3, 4, 3,
6, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 3, 3, 7, 7,
7, 6, 9, 7, 7, 7, 8, 7, 6, 8, 7, 3, 4, 8, 6,
9, 7, 8, 7, 8, 7, 7, 6, 7, 7, 10, 7, 6, 6, 4,
6, 4, 7, 8, 5, 6, 7, 6, 6, 6, 4, 7, 6, 2, 2,
6, 2, 9, 6, 6, 7, 6, 4, 6, 4, 6, 6, 8, 5, 6,
5, 4, 5, 4, 9
};


int[] default_16_widths = {
3, 4, 5, 10, 8, 11, 10, 3, 5, 5, 7, 8, 3, 4, 3,
7, 8, 7, 8, 8, 8, 8, 8, 8, 8, 8, 3, 3, 8, 8,
8, 7, 10, 8, 8, 8, 9, 8, 7, 9, 8, 3, 4, 9, 7,
10, 8, 9, 8, 9, 8, 8, 7, 8, 8, 11, 7, 7, 7, 4,
7, 4, 8, 9, 6, 7, 7, 7, 7, 7, 5, 7, 7, 3, 3,
7, 3, 11, 7, 7, 7, 7, 5, 6, 5, 7, 6, 9, 6, 6,
6, 4, 5, 5, 10
};

int[] default_18_widths = {
4, 4, 5, 11, 9, 12, 11, 3, 5, 5, 8, 9, 4, 4, 3,
8, 9, 8, 8, 9, 9, 9, 9, 9, 9, 9, 3, 4, 9, 9,
9, 8, 11, 9, 9, 9, 10, 8, 8, 10, 9, 3, 5, 10, 8,
12, 9, 10, 9, 10, 9, 9, 7, 9, 9, 13, 8, 8, 8, 5,
8, 5, 9, 10, 6, 8, 8, 7, 8, 8, 5, 8, 8, 3, 3,
8, 3, 12, 8, 8, 8, 8, 5, 7, 5, 8, 7, 10, 7, 7,
6, 5, 6, 5, 11
};


int[] default_20_widths = {
4, 5, 6, 12, 10, 13, 12, 3, 6, 6, 9, 10, 4, 5, 4,
8, 10, 9, 9, 10, 10, 10, 10, 10, 10, 10, 4, 4, 10, 10,
10, 9, 12, 10, 10, 10, 11, 9, 9, 11, 10, 4, 5, 11, 9,
13, 10, 11, 10, 11, 10, 10, 8, 10, 10, 14, 9, 9, 9, 5,
8, 5, 10, 11, 7, 9, 9, 8, 9, 9, 6, 9, 8, 3, 3,
9, 3, 13, 8, 9, 9, 9, 6, 8, 6, 8, 8, 11, 8, 8,
7, 5, 6, 6, 12
};

int[] default_22_widths = {
5, 5, 7, 13, 11, 14, 13, 3, 6, 6, 10, 11, 4, 5, 4,
9, 11, 10, 10, 10, 11, 11, 11, 11, 11, 10, 4, 4, 11, 11,
11, 10, 13, 11, 11, 11, 12, 10, 10, 12, 11, 4, 6, 12, 9,
14, 11, 12, 11, 12, 11, 11, 9, 11, 11, 16, 10, 10, 9, 6,
9, 5, 11, 12, 7, 9, 10, 9, 10, 10, 6, 10, 9, 4, 4,
10, 4, 14, 9, 10, 10, 10, 6, 9, 6, 9, 9, 13, 8, 9,
8, 6, 7, 6, 13
};

int[] default_24_widths = {
5, 6, 7, 14, 11, 16, 14, 4, 7, 7, 11, 12, 5, 6, 4,
10, 12, 11, 11, 11, 12, 12, 12, 12, 12, 11, 4, 5, 12, 12,
12, 11, 14, 12, 12, 12, 13, 11, 11, 13, 12, 4, 6, 13, 10,
15, 12, 13, 11, 13, 12, 12, 10, 12, 11, 17, 11, 11, 10, 6,
10, 6, 12, 13, 8, 10, 11, 10, 10, 10, 7, 11, 10, 4, 4,
10, 4, 16, 10, 11, 11, 10, 7, 9, 7, 10, 9, 14, 9, 9,
8, 6, 7, 7, 14
};

int[] default_28_widths = {
6, 8, 9, 18, 14, 19, 18, 5, 9, 9, 13, 15, 6, 8, 6,
12, 15, 14, 14, 14, 15, 14, 15, 14, 15, 14, 6, 6, 15, 15,
15, 13, 18, 15, 15, 15, 16, 14, 13, 16, 15, 6, 8, 16, 13,
19, 15, 16, 14, 16, 15, 15, 12, 15, 14, 21, 14, 13, 13, 8,
12, 8, 15, 16, 10, 13, 14, 12, 13, 13, 9, 14, 13, 5, 5,
13, 5, 19, 13, 13, 14, 13, 9, 12, 9, 13, 12, 17, 11, 12,
10, 8, 10, 9, 18
};

int[] default_32_widths = {
7, 9, 10, 20, 16, 22, 20, 6, 10, 10, 15, 16, 7, 9, 7,
14, 16, 15, 16, 16, 17, 16, 17, 16, 17, 16, 7, 7, 16, 16,
16, 15, 20, 17, 17, 17, 18, 16, 15, 18, 17, 6, 9, 18, 14,
21, 17, 18, 16, 18, 17, 17, 14, 17, 16, 23, 15, 15, 14, 9,
14, 9, 17, 18, 12, 14, 15, 14, 15, 15, 10, 15, 14, 6, 6,
15, 6, 22, 14, 15, 15, 15, 10, 13, 10, 14, 13, 19, 13, 13,
12, 9, 11, 10, 20
};

int[] default_36_widths = {
7, 9, 11, 22, 18, 24, 22, 6, 11, 11, 17, 18, 8, 9, 7,
16, 18, 17, 17, 18, 19, 18, 19, 18, 19, 18, 7, 8, 18, 18,
18, 17, 22, 19, 19, 19, 20, 17, 17, 20, 19, 7, 10, 20, 16,
24, 19, 20, 18, 20, 19, 19, 15, 19, 18, 26, 17, 17, 16, 10,
16, 10, 19, 20, 13, 16, 17, 15, 16, 16, 11, 17, 16, 7, 7,
16, 7, 24, 16, 17, 17, 16, 11, 15, 11, 16, 15, 21, 14, 15,
13, 10, 12, 11, 22
};


}

[mondelicious]

egads.

I was hoping to avoid a list solution, but I guess it's my only option at this point. Thanks apps-tv and f8ster for the great starting points.

Does the list scroll with a selection bar? Or does it feel like a block of text, similar to long Tivo messages that are scrollable.

mondelicious

[F8ster]

It won't show a scroll bar, but you can set page hints that will automatically show up when the list is too long for its container, .e.g.

BHighlights h = this.list.getHighlights();
h.setPageHint(H_PAGEUP, A_RIGHT+13, A_TOP - 5);
h.setPageHint(H_PAGEDOWN, A_RIGHT+13, A_BOTTOM + 5);


Will add the arrows similar to what's shown on the right-hand side of this screen shot:

http://bitrazor.com/images/misc/ScreenShot400.jpg

[mondelicious]

Sorry, I didn't mean a scroll bar, I meant the selection bar. What I would like is the block of text, with page hints, and no selection bar.

[F8ster]

Yep, as long as you don't call SetBarAndArrows(), no selection bar will be displayed. If you run the example code above, you'll notice there's no selection bar displayed.