Black screen Samsung/Android 5.1.1 -- tile size is too large?

Beginner

Wednesday, September 21st 2016, 12:48pm

Hello, I've built up my interactive pano and I'm finding out that it doesn't always work on mobile phones. In particular, using a smartphone with this user agent string (so you can see it's not the oldest smartphone in the earth):

	Source code
1	Mozilla/5.0 (Linux; Android 5.1.1; SAMSUNG SM-A310F Build/LMY47X) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/3.5 Chrome/38.0.2125.102 Mobile Safari/537.36

I get a black screen with no message shown. On an other smartphone, my pano works just fine.
It just seems that krpano doesn't load the tiles and I'm trying to understand what is going wrong.

I'm loading tiles as follows:

	Source code
1 2	<image> <cube url="panos/1.tiles/pano_%s.jpg" /> <cube url="panos/1.tiles/pano_%s.jpg" devices="mobile" /> </image>

My only guess is that the images are too large to load. Each tile is a 2048x2048 pixel jpg file of size no bigger than 2MB. Can this cause the black-screen problem or there may be some problems on mobiles?

Go to the top of the page

AJ_

Beginner

Posts: 38

2

Friday, September 23rd 2016, 9:29am

I'm still struggling with this issue. Apparently the tile size is not the cause, as I still get the black screen with 1024x1024 tiles.

I've read in this forum that this may be caused by a "non-optimal" use of the sound interface : black screen
but removing the soundinterface plugin from my xml I continue to get the black screen on my smartphone with the user_agent written in my first message (on other smartphone everything works just fine).

I'm attaching my XML just in case.

Source code

<krpano version="1.19">


	<include url="../progress_loadinganimation.xml" />
	<include url="../progress_loadingpercent.xml" />
	<include url="../progress_loadingbar.xml" />


	<include url="skin/vtourskin.xml" />
	<!-- customize skin settings: maps, gyro, webvr, thumbnails, tooltips, layout, design, ... -->
	<skin_settings maps="false"
	               maps_type="google"
	               maps_bing_api_key=""
	               maps_zoombuttons="false"
	               gyro="true"
	               webvr="false"
	               littleplanetintro="false"
	               title="true"
	               thumbs="true"
	               thumbs_width="120" thumbs_height="80" thumbs_padding="10" thumbs_crop="0|40|240|160"
	               thumbs_opened="false"
	               thumbs_text="false"
	               thumbs_dragging="true"
	               thumbs_onhoverscrolling="false"
	               thumbs_scrollbuttons="false"
	               thumbs_scrollindicator="false"
	               thumbs_loop="false"
	               tooltips_buttons="false"
	               tooltips_thumbs="false"
	               tooltips_hotspots="false"
	               tooltips_mapspots="false"
	               deeplinking="false"
	               loadscene_flags="MERGE"
	               loadscene_blend="OPENBLEND(0.5, 0.0, 0.75, 0.05, linear)"
	               loadscene_blend_prev="SLIDEBLEND(0.5, 180, 0.75, linear)"
	               loadscene_blend_next="SLIDEBLEND(0.5,   0, 0.75, linear)"
	               loadingtext=""
	               layout_width="100%"
	               layout_maxwidth="814"
	               controlbar_width="-24"
	               controlbar_height="40"
	               controlbar_offset="20"
	               controlbar_offset_closed="-40"
	               controlbar_overlap.no-fractionalscaling="10"
	               controlbar_overlap.fractionalscaling="0"
	               design_skin_images="vtourskin.png"
	               design_bgcolor="0x330000"
	               design_bgalpha="0.75"
	               design_bgborder="0"
	               design_bgroundedge="1"
	               design_bgshadow="0 4 10 0x000000 0.3"
	               design_thumbborder_bgborder="3 0xFFFFFF 1.0"
	               design_thumbborder_padding="2"
	               design_thumbborder_bgroundedge="0"
	               design_text_css="color:#FFFFFF; font-family:Arial;"
	               design_text_shadow="1"
	               />
<!-- 
		       design_bgcolor="0x2D3E50"
	               design_bgcolor="0x330000"
-->
	<!--
	    For an alternative skin design either change the <skin_settings> values 
	    from above or optionally include one of the predefined designs from below.
	-->
	<!-- <include url="skin/vtourskin_design_flat_light.xml"  /> -->
	<!-- <include url="skin/vtourskin_design_glass.xml"       /> -->
	<!-- <include url="skin/vtourskin_design_ultra_light.xml" /> -->
	<!-- <include url="skin/vtourskin_design_117.xml"         /> -->
	<!-- <include url="skin/vtourskin_design_117round.xml"    /> -->
	<!-- <include url="skin/vtourskin_design_black.xml"       /> -->


	<!-- startup action - load the first scene -->
	<action name="startup" autorun="onstart">
		if(startscene === null OR !scene[get(startscene)], copy(startscene,scene[0].name); );
		loadscene(get(startscene), null, MERGE);
		if(startactions !== null, startactions() );
	</action>
	<action name="autotour">
		lookto(-80,24,65,smooth(80,-50,60),true,true,
			tween(hotspot[hotspot1].alpha,'1.0', 1);
			wait(2);
			lookto(get(hotspot[hotspot2].ath),get(hotspot[hotspot2].atv),65,smooth(80,-50,60));
			tween(hotspot[hotspot2].alpha,'1.0', 1);
			wait(3);
			set(hotspot[box_CO].ath,get(hotspot[hotspot2].ath));
			set(hotspot[box_CO].atv,get(hotspot[hotspot2].atv));  
			set(hotspot[box_CO].visible,true);
			set(hotspot[box_CO].enabled,true);
		);
		set(hotspot[hotspot1].onover,tween(hotspot[hotspot1].alpha,'0.0', 1.0));
		set(hotspot[hotspot1].onout, tween(hotspot[hotspot1].alpha,'1.0', 1.0));
		set(hotspot[hotspot2].onover,tween(hotspot[hotspot2].alpha,'0.0', 1.0));
		set(hotspot[hotspot2].onout, tween(hotspot[hotspot2].alpha,'1.0', 1.0));
	</action>
	<scene name="scene_1" title="title" onstart="" thumburl="panos/1.tiles/thumb.jpg" lat="0" lng="0" heading="">
		<view hlookat="0" vlookat="0" fovtype="MFOV" fov="120" maxpixelzoom="1.1" fovmin="70" fovmax="140" limitview="auto" />
		<preview url="panos/1.tiles/preview.jpg" />
		<image>
			<cube url="panos/1.tiles/pano_%s.jpg" />
			<cube url="panos/1.tiles/pano_%s.jpg" devices="mobile" />
-->
		</image>
		<!-- place your scene hotspots here
			http://krpano.com/forum/wbb/index.php?page=Thread&threadID=1223
		 -->
<hotspot name="hotspot1"
         type="image"
         url="hotspot.jpg"
         keep="false"
         visible="true"
         enabled="true"
         handcursor="false"
         maskchildren="false"
         zorder=""
         style=""
         zoom="false"
         distorted="true"
	 rx="0.0" ry="0.0" rz="0.0"
         width="103.515625"
	 height="86.9140625"
         edge="lefttop"
	 ox="34.1796875"
	 oy="195.3125"
	 ath="-90" atv="0"
         scale="1.0"
         rotate="0.0"
         alpha="0.0"
         onhover=""
     	 onover=""
     	 onout=""
         ondown=""
         onup=""
         onclick=" js(checkclick(1);); tween(hotspot[hotspot1].alpha,'1.0', 1.0);"
         onloaded=""
	 capture="false"
         />
<hotspot name="hotspot2"
         type="image"
         url="hotspot.jpg"
         keep="false"
         visible="true"
         enabled="true"
         handcursor="false"
         maskchildren="false"
         zorder=""
         style=""
         ath="90.0" atv="0.0"
         edge="center"
         zoom="false"
         distorted="true" rx="0.0" ry="0.0" rz="0.0"
         width="100" height="70"
         scale="1.0"
         rotate="0.0"
         alpha="0.0"
         onover=""
         onhover=""
         onout=""
         ondown=""
         onup=""
         onclick="js(checkclick(2);); tween(hotspot[hotspot2].alpha,'1.0', 0.5);"
         onloaded=""
         />
<hotspot name="box_CO" url="%SWFPATH%/plugins/textfield.swf"
	visible="false"
	enabled="false"
        handcursor="false"
	width="320" height="590"
        alpha="0.95"
	ath="0" atv="0"
	css="p{color:#000000; font-family:Arial; font-weight:bold; font-size:14; margin-left:5; margin-right:5; text-align:center; }"
	backgroundcolor="0xFFFFFF" roundedge="5" shadow="1" borderwidth="0" glow="4" glowcolor="0xFFFFFF"
	autosize="center"
        edge="center"
	/>
<hotspot name="box_giveup" url="%SWFPATH%/plugins/textfield.swf"
	visible="false"
        handcursor="false"
	enabled="false"
	width="250" height="600"
        alpha="0.95"
	ath="0" atv="0"
	css="p{color:#000000; font-family:Arial; font-weight:bold; font-size:14; margin-left:5; margin-right:5; text-align:center; }"
	backgroundcolor="0xFFFFFF" roundedge="5" shadow="1" borderwidth="0" glow="4" glowcolor="0xFFFFFF"
	autosize="center"
        edge="center"
	/>


<layer name="logo"
       url="%SWFPATH%/plugins/textfield.swf"
       handcursor="false"
       html=""
       alpha="0.85"
       align="lefttop" x="0" y="0"
       css="background:#330000;margin:0;color:white;font-size:25px;"
       />
	</scene>


<events onenterfullscreen=""
        onexitfullscreen=""
        onxmlcomplete=""
        onpreviewcomplete=""
        onloadcomplete="js(gamestart();)"
        onnewpano=""
        onremovepano=""
        onnewscene=""
        onloaderror=""
        onkeydown=""
        onkeyup=""
        onclick="js(checkclick(0);)"
        onmousedown=""
        onmouseup=""
        onmousewheel=""
        onidle=""
        onviewchange=""
        onviewchanged=""
        onresize=""
        onautorotatestart=""
        onautorotatestop=""
        onautorotateoneround=""
        onautorotatechange=""
        />


<!-- 
<plugin name="soundinterface"
        url="%SWFPATH%/plugins/soundinterface.swf"
        alturl="%SWFPATH%/plugins/soundinterface.js"
        preload="true"
        rootpath="%SWFPATH%/../sounds/"
        volume="0.8"
        mute="false"
        />
-->
	<!-- button for reloading to test loading again -->
	<layer name="reloadbutton"
	       url="%SWFPATH%/plugins/textfield.swf"
	       children="false"
	       vcenter="true"
	       backgroundcolor="0x000000" backgroundalpha="0.667" roundedge="10" border="false"
	       shadow="0.1" shadowrange="8" shadowcolor="0xFFFFFF"
	       css="text-align:center; color:#FFFFFF; font-family:Arial; font-weight:bold; font-size:10px;"
	       html="Reload (without cache)"
	       align="bottom" width="140" height="22" y="40"
	       onclick="loadpano(get(xml.url),null,KEEPALL);"
	zorder="50"
	       />
<!-- 
<layer name="cover" 
       keep="true"
       type="container"
       align="lefttop"
       width="100%" height="100%"
       bgcolor="0x000000"
       bgalpha="1.0"
	zorder="0"
       onloaded="wait(LOAD); tween(alpha, 0.0, 1.0, default, removelayer(get(name));" 
       />
-->
</krpano>