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.
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.
There you have it! A beautiful photo viewer app that supports both regular camera images as well as 360-degree photospheres.