Displaying thumbnails in a grid

A thumbnail is a mini version of the full image. Therefore, we don't need to load a full-sized texture bitmap. For the sake of simplicity, let's just always sample it down by 4 (to 1/16th the original size).

The thumbnail image

In the Image class, the show method loads the full texture. Let's write a similar showThumbnail method that uses a smaller sampling. In the Image class, add the following code:

    public void showThumbnail(CardboardView cardboardView, Plane thumb) {
        loadTexture(cardboardView, 4);
        BorderMaterial material = (BorderMaterial) thumb.getMaterial();
        material.setTexture(textureHandle);
        calcRotation(thumb);
        calcScale(thumb);
    }

The Thumbnail class

Create a new Thumbnail class for the project that will contain a small Plane object and an Image object to show on it. It also gets the current cardboardView instance, which Image will require:

public class Thumbnail {
    final static String TAG = "Thumbnail";

    public Plane plane;
    public Image image;
    CardboardView cardboardView;

    public Thumbnail(CardboardView cardboardView) {
        this.cardboardView = cardboardView;
    }
}

Define a setImage method that loads the image texture and shows it as a thumbnail:

    public void setImage(Image image) {
        this.image = image;
        // Turn the image into a GPU texture
        image.loadTexture(cardboardView, 4);
        // TODO: wait until texture binding is done
        // show it
        image.showThumbnail(cardboardView, plane);
    }

Lastly, make a quick toggle for the thumbnail visibility:

    public void setVisible(boolean visible) {
        plane.enabled = visible;
    }

The thumbnail grid

The plan is to display the phone photos in a 5 x 3 grid of thumbnail images. At the top of the MainActivity class, declare a thumbnails variable to hold the list of thumbnails:

    final int GRID_X = 5;
    final int GRID_Y = 3;

    final List<Thumbnail> thumbnails = new ArrayList<>();

Build the list in a new method named setupThumbnailGrid. The first thumbnail is positioned in the upper-left corner of the page (-4, 3, -5) and each thumb spaced 2.1 units in x and 3 units in y, as follows:

    void setupThumbnailGrid() {
        int count = 0;
        for (int i = 0; i < GRID_Y; i++) {
            for (int j = 0; j < GRID_X; j++) {
                if (count < images.size()) {
                    Thumbnail thumb = new 
                        Thumbnail(cardboardView);
                    thumbnails.add(thumb);

                    Transform image = new Transform();
                    image.setLocalPosition(-4 + j * 2.1f, 3 - i * 3, -5);
                    Plane imgPlane = new Plane();
                    thumb.plane = imgPlane;
                    imgPlane.enabled = false;
                    BorderMaterial material = new BorderMaterial();
                    imgPlane.setupBorderMaterial(material);
                    image.addComponent(imgPlane);
                }
                count++;
            }
        }
    }

Now we need to add image textures to the planes. We'll write another method, updateThumbnails, as follows. It will show the first 15 images in the grid (or less if you don't have that many):

    void updateThumbnails() {
        int count = 0;
        for (Thumbnail thumb : thumbnails) {
            if (count < images.size()) {
                thumb.setImage(images.get(count));
                thumb.setVisible(true);
            } else {
                thumb.setVisible(false);
            }
            count++;
        }
    }

Add these new methods to setup:

    public void setup() {
        setupMaxTextureSize();
        setupBackground();
        setupScreen();
        loadImageList(imagesPath);
        setupThumbnailGrid();
        updateThumbnails();
    }

When you run the project, it should look something like this:

The thumbnail grid

Note that the thumbnails' sizes are adjusted to match the image aspect ratio, and are properly oriented, because we implemented those features in the Image class earlier.

Tip

If you don't have more than 15 photos already in your phone, add a loop to loadImageList to load duplicates. For example, run the following code:

for(int j = 0; j < 3; j++) { //Repeat image list
    for (int i = 0; i < file.length; i++) {
        if (Image.isValidImage(file[i].getName())) {
            ...
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset