Wordpress / Cardboard

Everything concerning the Wordpress/Joomla/Drupal plugins
BHanson
Posts: 51
Joined: Thu Apr 27, 2017 11:40 am

I've been able to get a standard tour uploaded to Wordpress no problem (the photos are not the best, at this point I am just trying to get the mechanics down):

http://bhimagery.com/photos/church360/

It is cumbersome; I have to make a copy of the GGnome package, change the extension from ggpkg to .zip, then extract the zip into a folder. At that point, I needed to make sure the folder and the original ggnome package have the same file name (and the file name cannot have any spaces) and using filezilla, I then have to upload them into the appropriate folder at the same time into Wordpress by going to public html => wp-content => uploads => 2017 => 11 (because we are now in the month of November, the 11th month)

I now am trying to take this to the next step and include the cardboard option, as seen in Hopki's video: http://support.ggno.me/howto_videos/how ... output.mp4

That process generates three items: a package named std.ggsk, a package named vr.ggsk, as well as an output folder. Can anyone tell me how to get all of that into Wordpress? I cannot get it to work.

Thanks,

Bob
User avatar
Hopki
Gnome
Posts: 13004
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi Bob,
Moving this to the correct forum.
There are so many ways to do this and having tried most of them I will list the best way I have found.

Starting from a folder with two input images, open Pano2VR and add the input images.
Then using the User Data add titles to each pano and then set up your hotspot.

Add an HTML5 output.
Add your skin and and add the button that will open the VR output.
Add the action to the button:
Mouse Click, GoTo URL, URL: vr.html, Target: _self
Go to the HTML tab and click the Edit Template button (Red).
Then select add files for external embedding (Green).

1.jpg
1.jpg (62.83 KiB) Viewed 10938 times

Now add a second HTML5 output and make sure the output folder name is the same as the first.
Add the Cardboard skin and your button that will open the normal output.

Give the button the action:
Mouse Click, GoTo URL, URL: index.html, Target: _self
Go to The HTML tab and select the cardboard.ggt and change the file name from index.html to vr.html.
Then go to the Advanced tab and change the Skin file name from skin.js to vr.js.
Then change the file name from pano.xml to vr.xml.
You can then publish out both HTML5 outputs and test.
You should be able to switch between the standard and cardboard outputs.

The output folder should contain:

index.html
vr,html
pano.xml
vr.xml
skin.js
vr.js
pano2vr_player.js
images (folder)
tiles (folder)
gginfo.json
preview.jpg

Now to create the package open the output folder and select all the files and zip them up.
Change the name of the zip and change the file extension from zip to ggpkg.
This then creates a package that can get uploaded to Wordpress or one of the other CMS websites.

Tip:
If the package is to large just select all the files and not the images or tiles folders then make the zip.
This will be very small in file size for uploading.
Once uploaded use an FTP client to locate the decompressed folder in Wordpress and then upload the folders.
Regards,
Hopki
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
acacord
Posts: 22
Joined: Fri Oct 13, 2017 6:02 pm

Hopki wrote: Fri Nov 10, 2017 12:29 pm Add an HTML5 output.
Add your skin and and add the button that will open the VR output.
Add the action to the button:
Mouse Click, GoTo URL, URL: vr.html, Target: _self
Hopki-

I'm not following this part of the instructions here. Can you provide more clarity as to where/how these steps are performed?

-aa
User avatar
Hopki
Gnome
Posts: 13004
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Sorry just seen this post,
Have you got it sorted now?
Regards,
Hopki
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
acacord
Posts: 22
Joined: Fri Oct 13, 2017 6:02 pm

Hopki wrote: Sun Dec 10, 2017 10:24 pm Sorry just seen this post,
Have you got it sorted now?
Regards,
Hopki
I have not yet. Any assistance is appreciated.
User avatar
Hopki
Gnome
Posts: 13004
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi Bob,
This refers to the Skin Editor for the normal output.
You need to add to the skin a button to open the vVR version, so you add a button to the skin and give it the action:
Mouse Click, Go To URL, URL: vr.html, Target: _blank.
Regards,
Hopki
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
acacord
Posts: 22
Joined: Fri Oct 13, 2017 6:02 pm

Okay, got it. Not working, though.

When going to the index.html on my iPhone, the controls look great and seem to function. My hotspots are gone, though.

If I tap on the cardboard button I had added, it takes me to the VR version, as expected. But, the gaze controls don't work. I place the crosshair on a hotspot and nothing happens. I know it takes two seconds and I'm leaving it in the hotspot for longer.
User avatar
Hopki
Gnome
Posts: 13004
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Can you upload your skins and p2vr files?
Regards,
Hopki
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
acacord
Posts: 22
Joined: Fri Oct 13, 2017 6:02 pm

Skin files attached. Not sure which p2vr file you want, though.
Attachments
cardboard-mod.ggsk
(2.89 KiB) Downloaded 288 times
silhouette-vr.ggsk
(50.13 KiB) Downloaded 261 times
User avatar
Hopki
Gnome
Posts: 13004
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi,
For Wordpress you want the cardboard tour opening with its own page.
The button has the URL target set to _self, I know this is what I wrote earlier but you need to set it to _blank.

Then all you would do is close the page to return back to the Wordpress site.

So what you should see is the tour in your Wordpress website, when you click the cardboard button it will open a new window filling the display with the tour.
For iPhone just tilt to landscape go edge to edge fullscreen.
For Android you need to add a fullscreen button with the additional action to hide self.

When finished close the new window to return back to the Wordpress website.

The P2VR file was to see who you put the tour together, this is the project file.
Regards,
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
acacord
Posts: 22
Joined: Fri Oct 13, 2017 6:02 pm

Okay, I'll give that a shot. Here's the p2vr file.
Attachments
Ruidosa Ridge 3206.p2vr
(81.66 KiB) Downloaded 276 times
User avatar
Hopki
Gnome
Posts: 13004
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi,
The p2vr file only has one output?
It should have the HTML5 and then the cardboard, so both use the same tiles.
Regards,
Hopki
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
acacord
Posts: 22
Joined: Fri Oct 13, 2017 6:02 pm

I started over from scratch. Different house, using the skins previously provided. p2vr and screenshot of the project directory attached. Sending you a link to the complete project hosted at S3 via PM.

This time, I have no hotspots. :?
Attachments
Screen Shot 2017-12-20 at 8.17.58 PM.png
Screen Shot 2017-12-20 at 8.17.58 PM.png (21.68 KiB) Viewed 10715 times
EncinoTest.p2vr
(42.88 KiB) Downloaded 265 times
User avatar
Hopki
Gnome
Posts: 13004
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

If anyone is following this was resolved by using the cardboard template.
Regards,
Hopki
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
rp360vr
Posts: 2
Joined: Mon Feb 19, 2018 11:40 am

Interesting topic !
A few questions if I may :
- you wrote here viewtopic.php?f=6&t=11377&p=51799&hilit ... ard#p51799 that you needed a separate .js and .xml, is that actually the case ?
- would you expect to see the hotspots on both sides of the screen ? In this case you'd have to push on the fullscreen+hide button on each side ?
- is there a way to "warp" the picture like on other VR apps to get the whole FOV :

Image

Thanks !
Post Reply