Spherical thumbnails

Spherical 360-degree images deserve better than a plain ol' paint-chip thumbnail images, don't you think? I suggest that we display them as small balls. Maybe we should call them thumb-tips or thumb-marbles. Anyway, let's do a little hacking to make this happen.

Add a sphere to the Thumbnail class

In the Thumbnail class, add a sphere variable:

    public Sphere sphere;

Modify setImage to recognize a photosphere image:

    public void setImage(Image image) {
        // ...
        // show it
        if (image.isPhotosphere) {
            UnlitTexMaterial material = (UnlitTexMaterial) sphere.getMaterial();
            material.setTexture(image.textureHandle);
        } else {
            image.showThumbnail(cardboardView, plane);
        }
    }

We must also change setVisible to handle both the plane and sphere variables, as follows:

    public void setVisible(boolean visible) {
        if(visible) {
            if(image.isPhotosphere){
                plane.enabled = false;
                sphere.enabled = true;
            } else{
                plane.enabled = true;
                sphere.enabled = false;
            }
        } else {
            plane.enabled = false;
            sphere.enabled = false;
        }
    }

Next, in the MainActivity class's setupThumbnailGrid, initialize a Sphere object in addition to a Plane object (inside the GRID_Y and GRID_X loops):

                    . . . 
                    image.addComponent(imgPlane);

                    Transform sphere = new Transform();
                    sphere.setLocalPosition(-4 + j * 2.1f, 3 - i * 3, -5);
                    sphere.setLocalRotation(180, 0, 0);
                    sphere.setLocalScale(normalScale, normalScale, normalScale);
                    Sphere imgSphere = new Sphere(R.drawable.bg, false);
                    thumb.sphere = imgSphere;
                    imgSphere.enabled = false;
                    sphere.addComponent(imgSphere);

Now the thumbnails have both a plane and a sphere that we can populate depending on the image type.

Lastly, we just need to modify the selectObject method to see how we highlight a sphere thumbnail. We highlight the rectangular ones by changing the border color. Our spheres don't have a border; in lieu of that we'll change their size.

At the top of MainActivity, add variables to the normal and selected scales:

    final float selectedScale = 1.25f;
    final float normalScale = 0.85f;

Now, change selectObject to behave differently when the image is a photosphere:

    void selectObject() {
        float deltaTime = Time.getDeltaTime();
        selectedThumbnail = null;
        for (Thumbnail thumb : thumbnails) {
            if (thumb.image == null)
                return;
            if(thumb.image.isPhotosphere) {
                Sphere sphere = thumb.sphere;
                if (sphere.isLooking) {
                    selectedThumbnail = thumb;
                    if (!gridUpdateLock)
                        sphere.transform.setLocalScale(selectedScale, selectedScale, selectedScale);
                } else {
                    sphere.transform.setLocalScale(normalScale, normalScale, normalScale);
                }
                sphere.transform.rotate(0, 10 * deltaTime, 0);
            } else {
                Plane plane = thumb.plane;
                //...
            }
        }
        //. . .

Whoo hoo! We even have the sphere spinning, so you can see its 360-ness in all its glory! This is so much fun, it should be illegal.

Add a sphere to the Thumbnail class

There you have it! A beautiful photo viewer app that supports both regular camera images as well as 360-degree photospheres.

..................Content has been hidden....................

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