Loading a Tour in WP from a seperate domain

[MBoyteaux]

I've tried searching for an answer and haven't found it yet. I have a tour hosted on my webserver at:
https://www.hawkeyemedia.com/panos/splash_kingdom/

I can use the wordpress shortcode on my website to embed it in a webpage using this shortcode:
[ggpkg url='https://www.hawkeyemedia.com/panos/splash_kingdom/']

Here is a demo page showing it working with the Garden Gnome WP plugin:
https://www.hawkeyemedia.com/wordpress-tour-test/

I'm trying to help the client to display the tour on their WP site, they've added the plugin and the shortcode. The tour interface displays, but it's just a black player, the content isn't loading, the loader element says "loading 0%".
https://www.splashkingdomwaterpark.com/homeschool/

I'm not sure if it's a setting I need to modify on my hosting site, or something in the skin.js file. I feel like I'm not the first one to run into this issue, but I can't find the solution on my own.

My idea was to host the content for the client for a monthly fee, this would enable me to make weekly changes to the source files without having to pass updated files for them to upload on their own.

[MBoyteaux]

I think it might be a CORS issue. Looks like I'm going to learn something new.

[360Texas]

LOLLLL and that might be a good experience.

Dave still in South West Fort Worth

817.
680.
0302

leave voice message and Ill get back to you...quickly.

[MBoyteaux]

YES! I continued digging and thanks so some previous posts by Dave, it put me onto the CORS problem.

I added "Header set Access-Control-Allow-Origin https://www.splashkingdomwaterpark.com " to my .htaccess file on the server, problem solved!

[360Texas]

WOW... your website ALWAYS amazes me to your technical high quality imaging. Thank you for sharing.

I wish our Travis lake project would have come to fruition. I still owe you a morning breakfast .

[360Texas]

getting alot of errors. I used Chrome DEV and found issues.... not sure... will check more tomorrow..

Dave still at 360Texas

Canyon URL

Possible issues

canyon.jpg (245.74 KiB) Viewed 3012 times

[MBoyteaux]

That's odd. When I load the tour in Chrome, it seems to load normally. Last month I upgraded my server with GoDaddy to a faster server because I reached my limit on the number of files I could have. My website runs much faster now and I haven't seen any issues, but I'm not checking it continuously either.

Let me look through the server error logs.

[360Texas]

OH should mention that your cookies are working. Ever since I visited your Water Park website cookies are now showing up almost everywhere I go on the internet including: Reuters and CNN News pages.

They are referencing Get My Park DAY PASS Tickets for $9.99.

LOLLLLL

Edit 26July: seems like 2 days Park Pass now has been replaced by other advertising.

[Branigan]

I've tried searching for an answer and haven't found it yet. I have a tour hosted on my webserver at:
https://www.hawkeyemedia.com/panos/splash_kingdom/

Unrelated to your original question, but: cool tour, and I learned a lot about how/when to use certain features.

Nice nadir removal and full sky above the camera in the aerial shots!

Wondering how you did that, as it looks too high resolution to be something like the Insta360 One R drone kit. As they're always over open ground...I'm thinking....tethered helium balloon?

I use aerial panoramas too, so I noticed yours and wonder if I might offer some minor notes?

Moving the points just above the horizon will help prevent them looking like they're actually pointing to very distant locations on the ground. In the sky they could be "anywhere", near or far, although Different sizes could also denote Near/Far? Maybe use a slightly different hotspot for them too? I use a bouncing downward pointing arrow; so they look like they're in the air, hovering above a point on the ground. Similarly, when on the ground, their hotspots are a bouncy upwards arrow. Or a balloon icon for both?

I noticed you've got an empty hotspot text box in a few places, so a little white square follows the cursor around. I think I just watched a tutorial where Hopki talks about this and makes a text box invisible when there is no text in it, but can't recall which it was right now.

Finally, how is your map working? I though the ability to wiggle it about when in desktop mode was an error and it should have been set to Permeable, but then I found it's needed for scrolling it left/right in Portrait mode, or on a mobile. I'm having problems getting a map to scale correctly on all devices without a lot of hacky logic tests and explicit dimension setting, so how are you doing that?

[MBoyteaux]

I've tried searching for an answer and haven't found it yet. I have a tour hosted on my webserver at:
https://www.hawkeyemedia.com/panos/splash_kingdom/

Unrelated to your original question, but: cool tour, and I learned a lot about how/when to use certain features.

Nice nadir removal and full sky above the camera in the aerial shots!

Wondering how you did that, as it looks too high resolution to be something like the Insta360 One R drone kit. As they're always over open ground...I'm thinking....tethered helium balloon?

I use aerial panoramas too, so I noticed yours and wonder if I might offer some minor notes?

Moving the points just above the horizon will help prevent them looking like they're actually pointing to very distant locations on the ground. In the sky they could be "anywhere", near or far, although Different sizes could also denote Near/Far? Maybe use a slightly different hotspot for them too? I use a bouncing downward pointing arrow; so they look like they're in the air, hovering above a point on the ground. Similarly, when on the ground, their hotspots are a bouncy upwards arrow. Or a balloon icon for both?

I noticed you've got an empty hotspot text box in a few places, so a little white square follows the cursor around. I think I just watched a tutorial where Hopki talks about this and makes a text box invisible when there is no text in it, but can't recall which it was right now.

Finally, how is your map working? I though the ability to wiggle it about when in desktop mode was an error and it should have been set to Permeable, but then I found it's needed for scrolling it left/right in Portrait mode, or on a mobile. I'm having problems getting a map to scale correctly on all devices without a lot of hacky logic tests and explicit dimension setting, so how are you doing that?

Ok, so on the zenith, I'm shooting the aerials with a DJI Phantom drone, which of course leaves a hole in the top. Usually I bring along my Nodal Ninja pano head, Canon 5D with Sigma 8mm fisheye and a tripod. I'll find an area near where I'm shooting that has a clear view of the horizon and shoot a pano to give me a sky image that matches the aerials I'm shooting. I've built up a large library of skies that I can use if I don't have my big ground camera with me. Then I match up the sky colors and sun position and blend the two pano images together in Photoshop.

For the Nadirs, I have four large washers that I've painted four different colors. My ground panos I shoot with the Canon 5D and Sigma 8mm lens, 90 degrees apart. So when I set up the tripod, I'll set these four washers on the ground in a square just outside the tripod legs, where the washers are visible in the bottom of the images, make sure that two washers are visible in each image. Shoot the four panos. Move the tripod out from the center, tilt the camera down towards the nadir between the washers and shoot a nadir image.


So then when I stitch using PTGui, I align the first four images. Then add the nadir image, set control points using the colored washers. This is where having them different colors is handy, makes it easier to quickly identify them to set control points. Now that I have the nadir image with two control points connecting it to the first four images, I go into the Optimizer tab, select "Advanced". First, on the right side of the screen uncheck "Use Control Points of:" image 5. Run Optimizer.
Now, check that checkbox and go look under "Optimize per Image" for image 5, change the drop down that says Reset, to Optimize. Run Optimizer again. If you did it right, the nadir image will now be lined up with the other four images. You will need to go into the mask tab and mask out parts of the nadir (image 5) that you don't need. The fastest way is to simply fill the image with RED, then select the largest brush, the erase brush and just erase slightly outside of the four washers. I usually post process the output image from PTGUI in Photoshop, so then it's easy to use the clone stamp or healing brush tool to eliminate the colored washers from the image. Your mileage may vary. Anyway, that's how I do the nadirs.

So the small box is a bug I haven't solved yet. If I have a poly object that overlaps with a hotspot, when it switches to the next pano, the tooltip textbox is left visible and I've exhausted every idea, tip and trick to fix it. I'm still trying to figure that one out.

[Branigan]

So the small box is a bug I haven't solved yet. If I have a poly object that overlaps with a hotspot, when it switches to the next pano, the tooltip textbox is left visible and I've exhausted every idea, tip and trick to fix it. I'm still trying to figure that one out.

Wow, that's a lot of work to do to replace the sky, but if it works: great! It fooled me.

I also use a drone and for photo panoramas I just restrict the viewing angle so you can't look up very far.

For 360 video I did experiment with another smaller Kodak 180 degree camera on top of the drone to fill in the gaps, but it was too much weight, hastle to stretch into place, and interfered with the GPS.

Now I've got the 360 camera on a long enough stick that the drone image above is quite small and can be patched out quite easily, so you can look everywhere while flying along.

Washers on the ground is a great idea. Even if your Nadir patch shot is taken from a completely different angle you can just warp that image over the washers so they line up and you only have to remove the washers themselves. Maybe I've misunderstood your method, but it sounds like a lot of passes? I used to use the G'Mic-QT filter in Gimp to generate a Nadir and Zenith image (Still do for a few keyframes when patching out video if the clouds are moving quickly) and patch the nadir, then re-equirectangular the nadir and zenith over the original pano and save it out.

Now I just let Pano2VR do its thing with the original image with the tripod (and shadow?) right until the end. I then just have to take the nadir tile and patch that, as it's already flat! Resize that for the Preview images (I guess you'd need to do that for all the other resolutions if you're using MultiRes - I don't) and take a copy in case Pano2VR decides to remake the tiles again and undo all my work.

Sorry, can't remember where I saw that fix for the empty text box; I've watched a lot of videos lately and video 3 only makes sense after you've also watched 2,1 and 4...in that order... so I forget what's where. But a support question should get you the answer quickly enough if someone doesn't volunteer it here?