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).
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); }
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 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:
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.