Preview image on open for faster page opening times

Special forum to share and discuss skins for Pano2VR and Object2VR
Post Reply
User avatar
Hopki
Gnome
Posts: 13004
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi,
This all started when I was given a web link to a page full of panoramas embedded with iframes, the page loaded very slowly so I had a think about this and came up with this project with the goal to reduce the load time of the page and only show the panoramas the viewer wants to see.

https://support.ggno.me/forum_projects/preview

How this works is a 10 x 5px png is used as the opening node.
The skin has a node image to create the preview image.
The node image is set to generate a very low-resolution image using the default view of the first node.
The external image loader displays the low-resolution image.
The external image loader also has CSS filters to change the preview to greyscale and apples a blur.
This enables the preview image to be very low quality without it being an issue.
The External Image Loader then has the action to fade out itself and open the first node of the tour.

To add this to a project simply copy and paste the start_preview from the skin into your own skin and move it so it's at the top of the tree.
Then add the start.png to the tour browser and set it as the Start Panorama.

This does assume the first node in the tour browser is the starting panorama of the tour and the start.png will be the last node added or at least not the first node.

The title is taken from the start.png images user data title, this needs to be the title of the tout and can be different from node one.

If you do not like the greyscale or blur go to the CSS text fields in the external image loaders properties where you can edit the values or remove the code.

Regards,
Attachments
preview.zip
(1.34 MiB) Downloaded 137 times
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/
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi Hopki,

Thanks for the new project but I'm seeing what look like cube face artifacts during the transition from blur image to pano. Here's a shot of the screen during the transition.

v6_0.jpg
v6_0.jpg (384.37 KiB) Viewed 2987 times

All I've done is download the zip, unzip it, open the .p2vr project, and created an output. The funny thing is I don't see it in your sample link.

cheers,

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi Hopki,

Interesting... if I look at the tile output for Node 2 even though they are tiny there is a black square in the top right and bottom right of each tile (greatly magnified)

v6_1.jpg
v6_1.jpg (21.47 KiB) Viewed 2977 times

In the output folder

v6_4.jpg
v6_4.jpg (55.7 KiB) Viewed 2977 times

cheers,

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
User avatar
Hopki
Gnome
Posts: 13004
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi Tony,
Thanks for looking but I don't see this?
Here is the tile zoomed in by 12,800% using Photoshop.

Screenshot 2021-01-16 at 12.54.28.png
Screenshot 2021-01-16 at 12.54.28.png (157.87 KiB) Viewed 2964 times

In the tiles folder have a look at the folder cf_vr, in this folder, is a reduced image of the panorama used if you use WebVR for the node hotspot spinning globes.
For me, this is a clean white equirectangular image.
Cheers,
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/
User avatar
Hopki
Gnome
Posts: 13004
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Mods:

Start with a fly-in

The attached skin works with the above project.
The node image has the starting view which will be the stereographic projection.
For this project, I am using:
Pan = 23.81
Tilt = -90
FoV = 270

Then in the "start_preview" element set this in the MOuse Click, Set View action making sure you also set the projection to Stereographic.
Regards,
Attachments
skin 2.ggsk
(1.98 KiB) Downloaded 117 times
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/
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi Hopki,

I've downloaded the zip file again and recorded the publishing of the project and the black squares are still there.

Here's the video https://youtu.be/SQ6OtlK5Iuo

cheers,

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
User avatar
Hopki
Gnome
Posts: 13004
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi Tony,
What I would try is making your own 10 x 5px png and see if you see the issue, maybe an issue with png being corrupted when being decompressed?
In the Tiles folder do you see a clean image in the cf_vr folder?
But I can confirm I do not see this, I have tried using Keka, and the default Mac zip application as well as different versions of Pano2VR in an attempt to reproduce the issue.
So far I can not.
If anyone else is following this post please can you download the project and see if you get the same result as Tony?
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/
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi Hopki,

Okay, new video, this time I created a png in Photoshop and applied it using the original skin, no fly-in. Same issue. The image in the cf_vr folder is fine.

iMac - Catalina V10.15.7 - 4GHz Quad Core Intel Cor i7 - 32GB ram

https://youtu.be/aUVCJOhv8cA

cheers,

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
Post Reply