Hello all,
I am trying to implement a loading bar for single spherical images. These images tend to be large (+-3MB), so downloading on a phone would take some time. I can show a spinner, to indicate that 'something' is downloading or busy, but it would be perfect if there was a progression bar showing 'how much' has already been downloaded.
In my research, I found out that the flash version of krPano shows a progressive download bar, whereas the HTML does not. See the difference in both examples, and the smoother progression for the flash version (the html version seems to only count howmany cubical sides have been downloaded):
https://krpano.com/examples/117/e…ml?html5=prefer
https://krpano.com/examples/117/e…tml?html5=never
(notice the html5 parameter in the url)
Has anyone else got a better progression loading bar for html5?
My code so far (which should be used as an include, eg: <include url="%SWFPATH%/include-loading.xml" /> ):
<!-- krpano 1.18 - panoramic video-interface skin -->
<krpano>
<events name="loadingbar" onxmlcomplete="loadingevents_showloadingbar();" onloadcomplete="loadingevents_hideloadingbar();" onloaderror="loadingevents_hideloadingbar();" />
<progress showload="loadingevents_showloadingbar();" showwait="loadingevents_showloadingbar();" />
<action name="loadingevents_showloadingbar">
set(loadingevents_isloading, true);
loadingevents_updateloadingbar(0.1);
set(layer[loadingevents_loadingbar].visible, true);
asyncloop(loadingevents_isloading,
loadingevents_updateloadingbar(get(progress.progress));
);
</action>
<action name="loadingevents_hideloadingbar">
set(layer[loadingevents_loadingbar].visible, false);
set(loadingevents_isloading, false);
</action>
<action name="loadingevents_updateloadingbar">
if(loadingevents_isloading,
set(loadingevents_perc, %1);
mul(loadingevents_perc, 100);
txtadd(loadingevents_perc, '%');
copy(layer[loadingevents_loadingbar_fill].width, loadingevents_perc);
,
set(layer[loadingevents_loadingbar_fill].width, 0);
);
set(layer[loadingevents_loadingbar].visible, true);
</action>
<!-- loading bar graphics -->
<layer name="loadingevents_loadingbar" type="container" bgcapture="true" align="centermiddle" x="0" y="0" width="50%" height="50" enabled="false" visible="false" zorder="2">
<plugin name="loadingevents_image" url="%SWFPATH%/spinner.gif" align="centertop" x="0" y="0" zorder="3" width="32" height="prop" />
<layer name="loadingbar_space" type="container" bgcolor="0x888888" bgalpha="0.5" align="leftbottom" x="0" y="0" width="100%" height="10" zorder="4">
<layer name="loadingevents_loadingbar_fill" type="container" bgcolor="0xFFFFFF" bgalpha="0.5" align="lefttop" width="0" height="10" zorder="5" />
</layer>
</layer>
</krpano>