SplitScreen html5

jeromebg

Professional

Posts: 1,120

Location: Angers - France

Occupation: 360 experiences creator

Wednesday, July 20th 2011, 11:24am

SplitScreen html5

Hi, I'm trying to make a splitscreen display for iphone/ipad but it doesn't work correctly :
http://www.360images.fr/360/place_royale/split.html

I guess it's because <area /> tag is not supported by the html5 player ?

Is there a way to do it another way ?

Thanx !

Go to the top of the page

Zephyr

Professional

Posts: 1,003

Location: Netherlands

Occupation: Web developer

Wednesday, July 20th 2011, 7:34pm

Yeah, using 2 krpano viewers I think. Both viewer should have a onviewchange event that calls a javascript function which turns the other. All the hotspots should include an update function so the other viewer loads the same panorama. Alsoo the navigation menu should be redone, outside krpano, put in a div positioned absolute above the other. the buttons use javascript to send events to both panorama.

Its doable, but requires a complete redesign.

Go to the top of the page

jeromebg

Professional

Posts: 1,120

Location: Angers - France

Occupation: 360 experiences creator

Thursday, July 21st 2011, 10:16am

Thanx Zephyr for looking, but for now the navigation menu, hotspots etc... are not really a problem.
What you recommends is already what I've done (just copying Klaus exemple)

2 players

Source code

<script>
// <![CDATA[

	embedpano({swf:"../krpano/krpano.swf", id:"krpanoSWFObject1", xml:"split_day.xml", target:"krpanoDIV1"});
	embedpano({swf:"../krpano/krpano.swf", id:"krpanoSWFObject2", xml:"split_night.xml", target:"krpanoDIV2"});

	function sync_1to2()
	{
	  var krpano1 = document.getElementById("krpanoSWFObject1");
	  var krpano2 = document.getElementById("krpanoSWFObject2");

	  krpano2.set("syncother",	false);
	  krpano2.set("view.hlookat", krpano1.get("view.hlookat"));
	  krpano2.set("view.vlookat", krpano1.get("view.vlookat"));
	  krpano2.set("view.fov", 	krpano1.get("view.fov"));
	}

	function sync_2to1()
	{
	  var krpano1 = document.getElementById("krpanoSWFObject1");
	  var krpano2 = document.getElementById("krpanoSWFObject2");

	  krpano1.set("syncother",	false);
	  krpano1.set("view.hlookat", krpano2.get("view.hlookat"));
	  krpano1.set("view.vlookat", krpano2.get("view.vlookat"));
	  krpano1.set("view.fov", 	krpano2.get("view.fov"));
	}

// ]]>
</script>

On view change event in the first xml

	Source code
1	<events onmousedown="set(syncother,true); events.onviewchange();" onmousewheel="events.onmousedown();" onviewchange="if(syncother, js( sync_1to2() ) );"/>

On view change event in the second xml

	Source code
1	<events onmousedown="set(syncother,true); events.onviewchange();" onmousewheel="events.onmousedown();" onviewchange="if(syncother, js( sync_2to1() ) );"/>

All this works perfect for the desktop version, the 2 panos are well synchronised and aligned :

It's well synchronised on the ipad too except it's not a split screen but a dual screen:

I guess the problem comes from the <area/> tag wich is not supported by the js player ? :

<area x="0%" width="200%"/> in the first xml
<area x="-100%" width="200%"/> in the second xml

I was thinking re-writing the js fot the ipad version like this (it's only an idea) :

	Source code
1	krpano2.set("view.hlookat", krpano1.get("view.hlookat")+45

but i'm really not sure on how to write this with the correct syntax and if it would work (depending on ipad orientation...)

If anyone has a brilliant idea ?

Thanx !