Tutorial: 360° Panorama Card with Tappable Points of Interest
360° Panorama with Points of Interest is a great new feature we’ve added to the Locly Native standard app template. The feature is perfect for highlighting areas on your panorama and linking to the relevant Collections and Cards in your app. Here’s a quick tutorial how you can create one using the Locly Native online CMS – all you need is a Locly account or demo app login, and a panorama image. Note: You will see some Json code on the screen but there’s no coding involved, just some copy/pasting!
Taking Panorama Photos: We use the Richo Theta 360° camera to take our panorama photos. Tip: Get a tripod and use the Theta mobile app on your phone to take the photo remotely, that way you can hide out of shot!
1. Create the Card
- Click on ‘Add Card’ and select ‘Panorama’. Give your card a name and set the card status to ‘Preview’ so that you can view it in the Locly Native preview app on your device.
- Click on ‘Image’ and upload your file (download the image to use).
2. Add the Points of Interest
- Click on ‘Advanced Options’ under the image thumbnail. This will bring up a small text editing area.
- Click on ‘Upload an Asset’ and add the image file, which is an icon. (download the image to use).
- Next click on the + symbol next to ‘Point of Interest’ and select ‘Image’, and the correct Json code will appear in the editing box.
- Next go down to ‘Upload and Asset’ and select ‘Copy to Clipboard’ – this copies the image file location code. Then paste this code into the text editor after “src”: making sure it’s between the two “speech marks”. Click on ‘Save’. Scroll down to the preview of your panorama image and you will see the icon has appeared.
- Next lets place our icon in the right place. Scroll down to the panorama preview and drag the panorama left/right/up/down using your mouse until the little red circle is where you want the POI to be – next to the red dress in this demo. Make a note of the X,Y and Z numbers and enter them into the text editor and select ‘Save’. The icon will have moved but it’s the wrong size.
- So now change the ‘height’ and ‘width’ of the icon image in the code from 100 (default) to 2. Click on ‘Save’ and you will see the size of the icon change.
Add a link and more POI
- To make the icon tappable, navigate to the card/collection you want to link to, then copy the ID (top left above ‘Name’). Then paste it into the text editor after “link” replacing the default code. Also change ‘Card’ to ‘Collection’ if you need to.
- You can link to any Collection or Card from the panorama using this method. Other card types include Audio, Video, Before/After, YouTube and Weblink. You can even link to another panorama image to create a ‘Streetview’ style virtual experience for users!
- To add another image POI click on the + icon again above the text area, and select ‘Image’. Or you can just copy and paste the code you just created (remembering to change the X, Y and Z values of course).
Preview the Panorama Card
- Open the Locly Native app on your Android or iOS device and scan your project’s QR code. The app will then appear on the device and you can test out your panorama!
Panorama photo credit: Storiel Gallery, Bangor.