How to load the panorama before hotspots, plugins, videos, etc. ?

Hello everyone,

Hope you are doing well.

I have a tour with several panorama and every panorama includes several asset like hotspots, video, etc. that makes a very long loading time.

I mean krpano first downloads all assets and then loads the panorama and this can be boring for user... Now i want to load the panorama first and after that load the hotspots, video, etc.

I would appreciate it if anyone can help me on this matter.

Thank you in advance for your attention.

Best regards,

Muhammad

hello

Quote from spacerywirtualne

You can use the dynamic hotspot builder load using addhotspot and onblendcomplete event.

Code

        <events name="load_hs" keep="true"
            onblendcomplete="add_hostspots()"
        />
        <action name="add_hostspots">
            addhotspot(name,hs);
            ...
        </action>

Hi,

thanks for your answer.

but by using that method I have to change every hotspot to something like this:

<action name="add_hotspots">

addhotspot("x");

set(hotspot[x].url.normal, ".png");

set(hotspot[x].url.mobile, ".png");

set(hotspot[x].scale, 1);

set(hotspot[x].alpha, 0);

set(hotspot[x].zorder, 2);

set(hotspot[x].distorted, true);

set(hotspot[x].onloaded, "");

set(hotspot[x].enabled, false);

set(hotspot[x].handcursor, false);

addhotspot("y");

set(hotspot[y].url.normal, ".png");

set(hotspot[y].url.mobile, ".png");

set(hotspot[y].scale, 1);

set(hotspot[y].alpha, 0);

set(hotspot[y].zorder, 2);

set(hotspot[y].distorted, true);

set(hotspot[y].onloaded, "");

set(hotspot[y].enabled, false);

set(hotspot[y].handcursor, false);

...

</action>

right? Including every hotspot in an action and defining every property separately?

That's so much! i have a lot of hotspots!!!
is there any other way?

I rewrote my code using chatGPT and testd it but in one hand it makes some mistake in adding hotspot(like url.mobile, style, etc) and on the other hand i already have over 120 hotspot in every scene and they got different names.

I'm thinking about other ways like adding a text to the .xml file that includes all hotspot details. Is it possible? Or somehow using delayedcall() function to load the hotspots... I don't know...

I also have a version of my code that changes hotspot's url and the first url of hotspots is an empty .png file that is so light so i have a very good loading time but loading every hotspot got some time based on your internet speed.

I'm looking for something like a trick that loads the panorama first...

Quote from klaus.krpano

Hi,

just as note - krpano requests the pano tiles first and then the layer/hotspot elements.

Then the loading itself is done in parallel.

When you have a very long loading time, something must be very wrong or your server or internet connection is very slow or somehow limited/restricted...

Best regards,
Klaus

hi klaus,

thanks for your answer,

in fact I have a loading time of 3 sec on mobile and 15 sec on PC because of the different quality.

but the problem is that the krpano somehow stops Panorama from loading until everything is downloaded and when everything is downloaded suddenly it starts working so it's not scalable because the asset can reach up to 200-300 MB in each scene and looking at a black screen with a loading gif is boring for users naturally.

I would appreciate any hint on this matter.

warm regards,

muhammad

Unfortunately i can't share the main project but i will make sample ASAP and will share here.

hi again,

i tried to make a sample but it was so hard!

my XML code is +2000 line code and I think when you add a lot of hotspot, action, js, plugins, etc. krpano starts to act uncommon!
unfortunately I'm not allowed to share the project but I tried to add hotspots little by little and got same result.

i don't know whats wrong but this happens even when I try to make a new tour and add the same asset to the scene.

I see, you are right. I tried to add loading text but it shows the panorama loading percentage and not useful in my case.

Assets are small to huge hotspots(up to 30-40 mb | up to 120-150 per scene | up to 4000*5000 in size), videos, info popups and etc.

And i disabled the other panorama loading by using custom xml loading instead of scene loading.

Quote from klaus.krpano

krpano is no silver bullet, when you use too much resources at the same time, this can become a problem of course...

About what assets do you speak and what are their sizes and memory needs?

Dear klaus,

Just following up for Any advice on this matter.

Best,

Muhammad

Quote from indexofrefraction

that sounds extremely demanding!

mind that even if you reduce the file size by compression, in memory that doesn't count.

use less and smaller resources, convert to greyscale if possible .-)

dont scale extensively (eg hotspots of 512x512 displayed at 32x32)

check the device and use less/smaller resource versions for tablets / mobiles

Hello indexofrefraction,

Thanks for your attention,

I need to have very high quality hotspots and the size can't be smaller, but as i said before I have 2 version of assets for PC and mobile devices.

But the main problem is that when you add so many assets to your scene, krpano starts to act weird and downloads all assets at same time and then lets the panorama to be loaded.

I just need panorama to be loaded first and then other assets are ok to be downloaded.

Quote from indexofrefraction

instead of hs.url, you could set hs.url_delayed="path/to/your/asset"

then, after the pano has loaded, onloadcomplete you can iterate all your hotspots

and copy(hs.url, hs.url_delayed); to trigger their loading.

to make that nicer you can set hs.alpha="0" and on hs.onloaded you can show/blend it in.

that could solve some of your problems.

you mean something like this:

<scene name="scene_test" title="test" onstart="" havevrimage="true" thumburl="panos/test/thumb.jpg" onloadcomplete="load_hs()" >

.

.

.

<hotspot name="hs" url.normal_delayed="test.png" url.mobile_delayed="mobile_test.png" scale="1" alpha="0" zorder="1"  onloaded="set(hotspot[hs].alpha,1); (I already control alpha using actions) "/>

<hotspot name="hs2" url.normal_delayed="test2.png" url.mobile_delayed="mobile_test2.png" scale="1" alpha="0" zorder="1"  onloaded="set(hotspot[hs2].alpha,1); (I already control alpha using actions) "/>

.

.

.

<action name="load_hs">
copy(hs.url.normal, hs.url.normal_delayed);

copy(hs.url.mobile, hs.url.mobile_delayed);

</action>

P.S.: Sorry but I'm not familiar with copy() so much!

Quote from indexofrefraction

Code

<scene name="scene_test" title="test" onstart="" havevrimage="true" thumburl="panos/test/thumb.jpg">
	<!-- dont set url for hotspots, load_hs() will set it onloadcomplete -->
    <hotspot name="hs1" url_normal="test1.png" url_mobile="test1_mobile.png" alpha="0" onloaded="tween(alpha,1);" />
    <hotspot name="hs2" url_normal="test2.png" url_mobile="test2_mobile.png" alpha="0" onloaded="tween(alpha,1);" />
    <image> ... </image>
</scene>
<events name="load_hs" keep="true" onloadcomplete="load_hs();" />
<action name="load_hs" scope="local">
	// executed onloadcomplete (after pano is loaded)
    for(set(local.i,0), i LT hotspot.count, inc(i),
        copy(local.hs, hotspot[get(i)]);
        if(!hs.url,
            calc(hs.url, device.normal ? hs.url_normal : hs.url_mobile);
        );
    );
</action>

Display More

here a template (untested) :)

Thanks, i will test it and share the results.