You are not logged in.

A more progressive Loading Bar for HTML5

florian_mrt

Beginner

  • "florian_mrt" started this thread

Posts: 21

  • Send private message

1

Tuesday, September 6th 2016, 2:44pm

A more progressive Loading Bar for HTML5

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):

http://krpano.com/examples/117/examples/…ml?html5=prefer

http://krpano.com/examples/117/examples/…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" /> ):

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<!-- 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>

klaus.krpano

Administrator

Posts: 13,499

  • Send private message

2

Tuesday, September 6th 2016, 11:03pm

Hi,

the reason is that HTML5 doesn't have a 'progress' event for loading images, so it could count only the files.

The only solution would be loading the images as binary data (via xmlhttprequest) and then decoding it later, then it would be possible to track the loading progress, but than the loading would be slower and would require more memory - and that's a bad trade-off for a smoother progress bar...

Best regards,
Klaus

florian_mrt

Beginner

  • "florian_mrt" started this thread

Posts: 21

  • Send private message

3

Wednesday, September 7th 2016, 11:53am

Ok, got it.

A further question here about my code above. I can see that, for the flash version, there is already a loading bar displaying when the scene changes. I would like to remove it (and place it with my own styled loading bar). OR, I would like to know when the built-in loading bar is displaying, so that I dont display mine.

How can I do that?

klaus.krpano

Administrator

Posts: 13,499

  • Send private message

4

Friday, September 9th 2016, 10:47pm

Quoted from "florian_mrt"

I can see that, for the flash version, there is already a loading bar displaying when the scene changes.
Normally not, unless you're using a very old krpano version...

Similar threads