Splitscreen

Trainee

Monday, November 12th 2012, 5:49pm

Hallo Klaus,

gibt es hierfür eine Möglichkeit das Pano 100% in der Höhe darzustellen?
Bei mir sind alle Versuche diesbezüglich fehlgeschlagen.

http://krpano.com/examples/10812/example…plitscreen.html

Und auf iOS ist das nicht synchron. Gibt es hier eine Lösung?

Gruss Volker

This post has been edited 1 times, last edit by "panos for the people" (Nov 12th 2012, 6:00pm)

Go to the top of the page

klaus.krpano

Administrator

Posts: 13,499

2

Wednesday, November 14th 2012, 6:24pm

Hi,

Quoted from "panos for the people"

gibt es hierfür eine Möglichkeit das Pano 100% in der Höhe darzustellen?

Ja - die Höhe bzw. Größe der 2 Viewer ist HTML Design und hat mit dem Viewer selbst nichts zu tun.

Dazu:

entferne alle anderen HTML Elemente ober und unter der Table
setze die Table auf 100% x 100% Größe
setze per CSS Style html und body auf 100% Höhe

Quoted from "panos for the people"

Und auf iOS ist das nicht synchron. Gibt es hier eine Lösung?

Nicht synchron?
Der obige Link bzw. hier unter der aktuelle sind bei dir auf iOS nicht synchron?
http://krpano.com/examples/10815/example…syncscreen.html

Schöne Grüße,
Klaus

Go to the top of the page

panos for the people

Trainee

Posts: 139

3

Wednesday, November 14th 2012, 8:55pm

Nein, leider nicht. Aber vielleicht habe ich mich falsch ausgedrückt. Synchron ist es vielleicht schon, aber nicht passgenau. Siehe Anhang.

panos for the people has attached the following image:

Go to the top of the page

klaus.krpano

Administrator

Posts: 13,499

4

Wednesday, November 14th 2012, 9:09pm

Inwiefern nicht passgenau?
Beide Viewer zeigen doch exakt den gleichen Ausschnitt...

Go to the top of the page

panos for the people

Trainee

Posts: 139

5

Wednesday, November 14th 2012, 9:33pm

http://www.panoramafabrik.de/split/hafensommer.html

Bei mir sieht es auf dem Desktop bzw. iOS so aus:

Schön wäre es, wenn es gleich wäre, in diesem Fall so wie auf dem Desktop.

panos for the people has attached the following images:

Go to the top of the page

klaus.krpano

Administrator

Posts: 13,499

6

Wednesday, November 14th 2012, 9:44pm

Okay, jetzt verstehe ich!

Ich dachte es geht nur um synchronisieren...

Die <area> Einstellungen werden im HTML5 Viewer noch nicht unterstützt, dieser zeigt deshalb immer den vollen Ausschnitt an.

Ein Abhilfe wäre aber durch Änderungen in HTML Aufbau möglich, z.B. durch skalieren der beiden Viewer auf 200% Breite und dem ausmaskieren/verschieben des Rests.

z.B. hier der entsprechend geänderte <table> Code - siehe das 'overflow:hidden;' und 'position:relative; left:XXX; ' plus die 'width:200%' Werte:

Source code

<table border="0" width="90%" height="400px" cellspacing="0" cellpadding="0">
	<tr>
		<td width="50%" height="400px" style="overflow:hidden;">
			<div id="krpanoDIV1" style="position:relative; left:0%; width:200%; height:100%;"><noscript><table width="100%" height="100%"><tr valign="middle"><td><center>ERROR:<br/><br/>Javascript not activated<br/><br/></center></td></tr></table></noscript></div>
		</td>
		<td width="50%" height="400px" style="overflow:hidden;">
			<div id="krpanoDIV2" style="position:relative; left:-100%; width:200%; height:100%;"><noscript><table width="100%" height="100%"><tr valign="middle"><td><center>ERROR:<br/><br/>Javascript not activated<br/><br/></center></td></tr></table></noscript></div>
		</td>
	</tr>
</table>

Ohne <area> Code in der XML würde dieser Code auch für Flash funktionieren (wenn auch etwas weniger effizient, da der Flashplayer das volle Fenster zeichnet).

Hier ein Beispiel dazu: (sollte in Flash UND HTML5 funktionieren)
http://krpano.com/examples/10815/example…reen-html5.html

Schöne Grüße,
Klaus

Go to the top of the page

panos for the people

Trainee

Posts: 139

7

Wednesday, November 14th 2012, 10:04pm

Super Klaus. Bist der Beste.

Danke!

Go to the top of the page

panos for the people

Trainee

Posts: 139

8

Wednesday, November 28th 2012, 7:59pm

Noch ne Frage Klaus,

Das mit den Splitscreens funktioniert soweit super. Ich zeige am Anfang eines Panos im er gerne eine Art Anleitung für die Bedienung in Form einer Grafik, welche zentriert dargestellt wird. Wenn ich dies nun in einer der beiden XML Dateien machen, ist ja die Hälfte der Grafik abgeschnitten. Gibt es hier eine Möglichkeit z.b. die Grafik evtl. In beiden Panos einzubinden, aber durch Klick auch die in der anderen XML integrierte zu schließen?

Go to the top of the page

klaus.krpano

Administrator

Posts: 13,499

9

Monday, December 3rd 2012, 4:34pm

Hi,

ja, das wäre möglich - aber nur über Javascript,

z.B. in beiden Panos im onclick der Anleitungsgrafik eine Javascript Funktion aufrufen, welche wiederum dann in beiden Panos die Anleitungsgrafik versteckt,

z.B. jeweils in beiden XML Dateien:

	Source code
1	<plugin name="Anleitungsgrafik" ... onclick="js( verstecke_Anleitungsgrafik() );" .. />

und in der HTML:

Source code

function verstecke_Anleitungsgrafik()
{
  var krpano1 = document.getElementById("krpanoSWFObject1");
  var krpano2 = document.getElementById("krpanoSWFObject2");
  krpano1.set("plugin[Anleitungsgrafik].visible", false);
  krpano2.set("plugin[Anleitungsgrafik].visible", false);
}

Schöne Grüße,
Klaus

Go to the top of the page

panos for the people

Trainee

Posts: 139

10

Friday, December 7th 2012, 7:56am

Klappt leider gar nicht.

Go to the top of the page

klaus.krpano

Administrator

Posts: 13,499

11

Wednesday, December 12th 2012, 1:10pm

Der Beispielcode selbst sollte aber funktionieren...

Go to the top of the page

panos for the people

Trainee

Posts: 139

12

Wednesday, December 12th 2012, 1:41pm

Dann mache ich vermutlich etwas falsch. So sieht jedenfalls der Code aus:

Source code

<!DOCTYPE html>
<html>
<head>
	<title>...</title>
	<style>
		body{ font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#FFFFFF; background-color:#000000; margin:0; padding:0;height:100%; width:100% }
		html {height:100%; width:100% }
		a{ color:#FFFFFF; text-decoration:underline; }
		a:hover{ color:#AAAAAA; text-decoration:underline; }
	</style>
</head>
<body>

<table border="0" width="100%" height="100%" cellspacing="0" cellpadding="0">
	<tr>
		<td width="50%" height="100%" style="overflow:hidden;">
				<div id="krpanoDIV1" style="position:relative; left:0%; width:200%; height:100%;"><noscript><tr valign="middle"><td><center>ERROR:<br/><br/>Javascript not activated<br/><br/></center></td></tr></noscript></div>
		</td>
		<td width="50%" height="100%" style="overflow:hidden;">
				<div id="krpanoDIV2" style="position:relative; left:-100%; width:200%; height:100%;"><noscript><tr valign="middle"><td><center>ERROR:<br/><br/>Javascript not activated<br/><br/></center></td></tr></noscript></div>
		</td>
	</tr>
</table>

<script src="swf/swfkrpano.js"></script>

<script>
// <![CDATA[

	embedpano({swf:"swf/krpano.swf", id:"krpanoSWFObject1", xml:"xml/pano1.xml", target:"krpanoDIV1"});
	embedpano({swf:"swf/krpano.swf", id:"krpanoSWFObject2", xml:"xml/pano2.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"));
	}
	
	function hide()
	{
		var krpano1 = document.getElementById("krpanoSWFObject1");
  		var krpano2 = document.getElementById("krpanoSWFObject2");
  		krpano1.set("plugin[infobild].visible, false");
  		krpano2.set("plugin[infobild].visible, false");
         }

// ]]>
</script>

</body>
</html>

und dies in beiden XML

	Source code
1	<plugin name="infobild" url="../images/bedienung.png" keep="true" zorder="100" alpha="1.0" align="center" onclick="js(hide);"/>

Go to the top of the page

klaus.krpano

Administrator

Posts: 13,499

13

Wednesday, December 12th 2012, 2:20pm

probiere einmal:

onclick="js( hide() );"

Go to the top of the page

panos for the people

Trainee

Posts: 139

14

Wednesday, December 12th 2012, 2:36pm

leider nein

Source code

<!DOCTYPE html>
<html>
<head>
	<title>Hafensommer - color | black & white</title>
	<style>
		body{ font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#FFFFFF; background-color:#000000; margin:0; padding:0;height:100%; width:100% }
		html {height:100%; width:100% }
		a{ color:#FFFFFF; text-decoration:underline; }
		a:hover{ color:#AAAAAA; text-decoration:underline; }
	</style>
</head>
<body>

<table border="0" width="100%" height="100%" cellspacing="0" cellpadding="0">
	<tr>
		<td width="50%" height="100%" style="overflow:hidden;">
				<div id="krpanoDIV1" style="position:relative; left:0%; width:200%; height:100%;"><noscript><tr valign="middle"><td><center>ERROR:<br/><br/>Javascript not activated<br/><br/></center></td></tr></noscript></div>
		</td>
		<td width="50%" height="100%" style="overflow:hidden;">
				<div id="krpanoDIV2" style="position:relative; left:-100%; width:200%; height:100%;"><noscript><tr valign="middle"><td><center>ERROR:<br/><br/>Javascript not activated<br/><br/></center></td></tr></noscript></div>
		</td>
	</tr>
</table>

<script src="swf/swfkrpano.js"></script>

<script>
// <![CDATA[

	embedpano({swf:"swf/krpano.swf", id:"krpanoSWFObject1", xml:"xml/pano1.xml", target:"krpanoDIV1"});
	embedpano({swf:"swf/krpano.swf", id:"krpanoSWFObject2", xml:"xml/pano2.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"));
	}
	
	function hide()
	{
		var krpano1 = document.getElementById("krpanoSWFObject1");
  		var krpano2 = document.getElementById("krpanoSWFObject2");
  		krpano1.set("plugin[infobild].visible, false");
  		krpano2.set("plugin[infobild].visible, false");
}


// ]]>
</script>


</body>
</html>

panos for the people has attached the following files:

pano1.xml (1.24 kB - 57 times downloaded - latest: Today, 6:48am)
pano2.xml (1.24 kB - 56 times downloaded - latest: Today, 6:48am)

Go to the top of the page

klaus.krpano

Administrator

Posts: 13,499

15

Thursday, December 13th 2012, 10:14am

Hi,

okay, das war nicht ganz einfach zu sehen, aber dein Fehler liegt in der Syntax hier:
krpano1.set("plugin[infobild].visible, false");
krpano2.set("plugin[infobild].visible, false");

Dort wird set() nur mit einem Parameter, nämlich "plugin[infobild].visible, false", aufgerufen - das ist aber falsch.

Die set(Variable, Wert) Funktion hat zwei Parameter:

der erste Parameter bestimmt die Variable die gesetzt werden soll,
und der zweite den Wert dafür.

D.h. richtig sehe der Code so aus: (achte auf die Anführungszeichen und den Beistrich)
krpano1.set("plugin[infobild].visible" , false);
krpano2.set("plugin[infobild].visible" , false);

Hier ein funktionierendes Beispiel dazu:
http://krpano.com/examples/10815/example…5-infobild.html

Schöne Grüße,
Klaus