Viewport for Android - KYT = Kill Your Television

What's this?

I wrote a library that supports the graphic rendering using viewport. For Android developers, the regular way to access viewport is through the OpenGL ES. But it is mainly intended for 3D graphics. And it also means you have to learn OpenGL programming, which is quite different from that of Java graphics. I had tried to make life easier for the light-use of the viewport on Android.

Viewport-and-window is a standard technique in the computer graphics. You define graphic objects in the virtual ground plane (world coordinate) and the set the window. When is perceived through this window is rendered in the viewport of the device screen. For further detail, please take a look at a web page like this.

This video demonstrates what can be done with this library. You can download this example code from the link. Of course, this is a very simple example, mainly intended for serving sample code. You can do much more complex things building on this example.

Download

How to use

The two key components are ViewportedView and DrawNode. ViewportedView provides the world coordinate while DrawNode represents the graphic objects therein.

ViewportedView

The application using ViewportedView will create its own View extending ViewportedView. Take a look at VpvExampleView.java in the download package to see how it is used.

ViewportedView roughly provides three things.

1. Model for the ground plane and window
2. Window control based on the touch gestures
3. Notification of the touch gestures

1 is provided through DrawWindow class. ViewportedView instantiates one instance of DrawWindow as it is instantiated. DrawWindow maintains where in the world coordinate (we call it a ground plane) the window is and how large. It also provides the set of functions that translates coordinates between the ground plane and view port.

2 means the size and location of the window are updated in reaction of the touch gesture. As shown in the video, the screen slides to the right as finger swipes to the left. Since my Xperia doesn't support multi-touch, I couldn't implement the pinch zoom (though it should be easy to do so)

3 allows application use the touch gesture. The plain View detects more primitive touch events like up, down, and move. ViewportedView processes them and detects tap, press, slide, and flick. The application view gets this information by overriding onTouch() function. Normally, the slide and flick are consumed by ViewportedView for moving window. To use those gestures, the application must first call lockViewport().

DrawNode

DrawNode is an abstract class representing the graphic object. It holds the coordinate / metric of the node and provides the draw method. For the sake of convenience, I'm using the term node to refer graphic object. But this doesn't imply the node has to be a simple circular node like it is in the example. It maybe a text box. It may be a bitmap. Or, it may be a complex combination of shapes. It just needs to be implemented in the draw() function.

In the download package, BubbleNode and CtrlNode are the example of such graphic objects extending DrawNode.

BubbleNode implements the yellow nodes sitting around in the ground pane. Their location on the viewport depends on the window; therefore, they hold the ground plane coordinate (getX() will return the coordinate in the ground plane). See how the coordinate is converted in the draw() function.

CtrlNode implements the zoom button on the bottom-right hand corner. Their location is fixed on the viewport; therefore, they hold the viewport coordinate (getX() will return the coordinate in the viewport). See how its draw() implementation differs from that of BubbleNode.

In the ViewportedView example, BubbleNodes are stored in DrawNodeList while CtrlNodes are stored in the regular array. Besides proving a storage, DrawNodeList is able to create the list of nodes visible in the current window -- getNodesToDraw(). If the node is not visible (i.e. outside of the current window frame), there is no need to actually render that node. On the other hand, CtrlNode is a static object on the screen, which is anyway rendered all the time. And since it holds viewport coordinate, getNodesToDraw() won't work anyway.