360 degree photo viewer

I’m working on a feature to connect to Insta360 cameras and capture 360 degree photos. The camera API returns a regular .jpeg file with the image captured by each 180 degree lens represented side-by-side on a flat image.

I’ve found some Javascript plugins online which can take an image like this and allow the user to rotate the view around 360 degrees but I was wondering whether anybody has ever tackled this issue in Xojo itself? :slight_smile:

The easiest solution would be to use a Javascript plug-in in an HTMLViewer.

Other solution is an infinite scroll in MobileScrollableArea. I’ve done that in an app, but not for an image larger that the screen size.

1 Like

Did this with my 3D modeling app. Admittedly not very good as it was done very quickly, and with a picture where my iPhone failed to do a proper 360 image. This is for sure not the intension with my app, but I did experiment a bit with it a few years ago jut out of curiosity. Yes, you could generate such models, apparently…

The gif is based on a ten second 1080 30 fps movie, but the site does not allow movies, so it has to be a gif instead.

Panorama

1 Like

I would go With @Jeremie_L a HTMLViewer with a Javascript Library would be be easiest.
Otherwise, here is the theoretical way to do that:

You would have to create a sphere in 3d space.
You would have to place the two 180° images on one half of the sphere. From there you could then crop to get what you want to display.
That would probably be the easiest way to rectify the image accordingly.
Theoretically, of course, you could also rectify it (pixel)line by (pixel)line, but that’s definitely beyond my brainpower to think it through that quickly.

1 Like

Thanks all, your advice is very much appreciated! :slight_smile:

Has anyone had any experience with bundling a Javascript library in a Xojo iOS app deployment and loading it into a MobileHTMLViewer? I imagine it would need to be added to the app’s resources in a copy file build step and then copied out somewhere when required?