Panorama Studio Integration

**zapatak** · 03 July 2019, 07:58 AM

Hi Chris,

Obviously great minds think alike !

Splitting up the HTML file into head and body was one of my original thoughts. However, this file has no idea where it is going to be placed on the PC and thus contains no address to guide Xara to the other four files....

If I use the previous method of copying the path "file:///C:/New%20try/New%20Panorama1.html" and placing it in the Iframe Xara doesn't appear to be able to decipher the address. Although the web browser does this perfectly well!

So the question is.... How do you code a local drive address in a manner which Xara can understand?

Any ideas ?

zap

**Boy** · 03 July 2019, 09:13 AM

This is how I made it to work:
1. Create a folder on your desktop and copy all panorama files into it.
2. Open the panorama .html file with Notepad or another simple text editor and copy the head code, which should look like:

Code:

<head>     
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta property="og:image" content="YourPanoName_tiles\YourPanoName_thumb.jpg">
        <title></title>
</head>

3. Open your web file in Web Designer/Designer Pro and create a rectangle on the page where you would like your panorama to show and give it the appropriate size for viewing it.
4. With the rectangle selected go to Utilities/Web Properties/Placeholder/HTML code (head), paste the code and click 'OK'. Don't forget to click 'Apply' on the Web Properties dialog.
5. Now copy from the panorama .html file the body code, which should look like:

Code:

<body>
                <div align="center" style="height: 100%; overflow:hidden;">
                <noscript><div style="color: red; width: 30%; border: 1px solid red; padding: 4px; font-family: sans-serif;"></div></noscript>
                <div id="panoStudioViewerID" style="position: absolute; left: 0px; top: 0px; width: 100% ; height: 100% ;"></div>
                <script type="text/javascript" src="panoStudioViewer.js"></script>
                <script type="text/javascript">panoStudioViewer.insert("panoStudioViewerID","YourPanoName.json",{html5:"disable_webgl_warning"});</script>
                </div>
</body>

6. Paste this code into the placeholder's 'HTML code (body)' dialog and click 'OK'. Again, don't forget to click 'Apply' in the Web Properties dialog.
7. Go to File/Export website and browse to the folder on your desktop that you created earlier and click 'Export'.
8. Now go to File/Publish website (or click F5 or the 'Preview whole website' button on the toolbar) to check if it's all working correctly.

**Chris M** · 03 July 2019, 09:36 AM

Originally Posted by zapatak

So the question is.... How do you code a local drive address in a manner which Xara can understand?

You do not need a path defined to point to panorama.html as long as all the panorama files are in the same folder as the exported files from Xara.

If your page with the placeholder is called 360video then the folder you export to should have 360video.html and panorama.html plus whatever other pages you have.

**browj2** · 14 July 2019, 04:54 PM

I managed to make the whole thing work, almost. I did up 2 pan files (sources files need some colour correction) and gave each a link target button (to each other), an audio file, a logo, a geotag and an API key (Google). The first pan goes around 360degrees, but a good part is the hedge; the second pan is a partial. The only thing that does not work is the logo. I get either the PanStudio logo or nothing. The index.htm file plays the logo fine from my computer and the logo is in the root folder on the server. I have no idea why this happens with the site. I have done several tests without success.

The panviewer starts automatically. Warning, the audio starts playing automatically. I tried having the panviewer not start automatically and both the pan and the audio start at the same time by pressing on play, unsuccessfully. The audio starts if autoplay is set in the PanStudio file parameters, even if the viewer autoplay is off. If both are off, pressing on play starts the panviewer but not the audio. Not a big problem, but a solution would be nice.

In any event, here is some of what can be done with PanoramaStudio 3.2 and PanoramaStudio Viewer 4 in a website:

http://jcbrown.xara.hosting/petoche_site/

You can view the location in Google by pressing on the map button. I have a daily limit on the use of the Google API key, so please only do it once.

**Egg Bramhill** · 16 July 2019, 12:38 AM

Very impressive John. Whilst the video starts automatically in Firefox the audio is muted.

**Chris M** · 16 July 2019, 02:25 AM

Originally Posted by Egg Bramhill

Very impressive John. Whilst the video starts automatically in Firefox the audio is muted.

he muted audio is a FireFox setting. Options > Privacy > Permissions. Block websites from auto-playing sounds is the default setting.

**Boy** · 16 July 2019, 07:36 AM

Originally Posted by browj2

The first pan goes around 360degrees, but a good part is the hedge; the second pan is a partial.

Nice looking panorama, John. Yes, with some panoramas it would be nice to have to have more 'room'. That's why I purchased the Pro version because it allows for multi-row pictures and additional editing (https://www.tshsoft.de/en/featuresp_en).

With regards to the other issues, did you contact Tobias? He is very helpful and mostly responds promptly.

**browj2** · 16 July 2019, 01:35 PM

Thank you all for your comments and also the help and inspiration to try this out. Zapatak, thanks for starting off this thread.

I'll have to document all of the steps or I'll be learning how to do it again in a year.
The ice statue, or whatever one would call it, in the second panorama, is different every year and gets to about 70ft (20+m) high.

@Boy,
I will contact Tobias about some way to have the audio start with the start button instead of upon navigation to the page. I took a look through the PanViewer manual at the structure of the json files and did not notice a way to link the start audio with the start pan playback.

I'm still trying to figure out the Google API thing as it seems to be limited to 1 use per day unless one has a paying account. My use is not professional.

There have been several comments on this forum about the usefulness of PanStudio, and I thought that this would be a way to show one use for it. I was wondering how people did those interactive pans in web sites. The stitching tool in Xara can handle up to 8 photos; in Magix Movie Edit Pro/Video Pro X, the limit is 6. Neither allows for much adjustment. In the video programs, for more than 6 photos, the More Possibilities button is linked to the PanStudio page on the Magix website. PanStudio does much, much more, including the use of the PanViewer for web sites as we have discussed here. The Pro version does even more - 360 degree spherical pans. Those who have never used it, but who do panoramas, should take a look at what it does.

I have also experimented with using non-panoramic photos, with some very interesting results.

**carlor** · 29 May 2020, 11:26 AM

After reading this excellent post I finally managed get a 360 panorama (generated from Pano2VR) to work in Web Designer (following Boys description).
The only problem is while it works 100% locally (F5), it does not work when I upload to my web host. The only thing that shows up is the word "Loading ..."
Can anybody help me?

(Hopefully just a detail I've overlooked but I'm 80+ so the problem may have something to do with age)

**Egg Bramhill** · 29 May 2020, 01:18 PM

Hi carlor, it sounds like you haven't uploaded your panorama file to your webserver, or you're not using the correct source path name.

Thread: Panorama Studio Integration

Thread Tools

Display

Re: Panorama Studio Integration

Re: Panorama Studio Integration

Re: Panorama Studio Integration

Re: Panorama Studio Integration

Re: Panorama Studio Integration

Re: Panorama Studio Integration

Re: Panorama Studio Integration

Re: Panorama Studio Integration

Re: Panorama Studio Integration

Re: Panorama Studio Integration

Bookmarks

Bookmarks

Posting Permissions