You are not logged in.

How can I load(switch) scene in sync screen with javascript menu?

drumspark

Beginner

  • "drumspark" started this thread

Posts: 2

  • Send private message

1

Wednesday, December 16th 2020, 4:13am

How can I load(switch) scene in sync screen with javascript menu?

How can I load(switch) scene in sync screen with javascript menu?

I'd like to load(switch) scene in sync screen by bootstrap menu


but it doesn't work

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
45
46
47
48
49
50
51
52
53
54

<!DOCTYPE html><html><head>	<title></title>	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, viewport-fit=cover" />	<meta name="apple-mobile-web-app-capable" content="yes" />	<meta name="apple-mobile-web-app-status-bar-style" content="black" />	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />	<meta http-equiv="x-ua-compatible" content="IE=edge" />	<!-- jQuery --><script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="crossorigin="anonymous"></script>
<!-- Bootstrap files (jQuery first, then Popper.js, then Bootstrap JS) --><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" type="text/css"/><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" type="text/javascript"></script>

<style type="text/css">/* ============ desktop view ============ */@media all and (min-width: 992px) {	.navbar .nav-item .dropdown-menu{ display: none; }	.navbar .nav-item:hover .nav-link{ color: #fff;  }	.navbar .nav-item:hover .dropdown-menu{ display: block; }	.navbar .nav-item .dropdown-menu{ margin-top:0; }}	/* ============ desktop view .end// ============ */

</style>	<style>		html { height:100%; }		body { height:100%; overflow:hidden; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#FFFFFF; background-color:#000000; }		.d1 {float:left;width:50%;height:100%;border-right:1px solid #b8b8b8;margin-right:-1px;}
		.d2 {float:left;width:49.6%;height:100%;}
		.d3 {float:left;width:0.4%;height:100%;background-color:#888888;}
		#hr {cursor:pointer;}
	</style>
</head><body onload="init()">
	<script src="tour.js"></script>		<script type="text/javascript">
var startpos, diffpos=0, range=50;
var isEnable = false;
var krpano = document.getElementById("krpanoLeftDiv");var krpano2 = document.getElementById("krpanoRightDiv");
function on_mouse_down(e) {
startpos = event.clientX + diffpos;
isEnable = true;
return false;
}


function on_mouse_up(e) {
isEnable = false;
return false;
}


function on_mouse_move(e) {
if (isEnable) {
pos = event.clientX;


diffpos = startpos-pos;
var width = window.innerWidth/2;
if (diffpos > -(width-range) && diffpos < (width-range)) {
document.getElementById("krpanoLeftDiv").style.width = width - diffpos + "px";
document.getElementById("krpanoRightDiv").style.width = width - 20 + diffpos + "px";
}
}
}


function changepano(panoName){krpano.call("loadscene(" + panoName + ");");krpano2.call("loadscene(" + panoName + ");");}
function init() {
document.getElementById("hr").onmousedown = on_mouse_down;
document.onmouseup = on_mouse_up;
document.onmousemove = on_mouse_move;
}
</script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="position: relative; z-index: 2;">  <a class="navbar-brand" href="#">APT</a>  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main_nav" aria-expanded="false" aria-label="Toggle navigation">    <span class="navbar-toggler-icon"></span>  </button>  <div class="collapse navbar-collapse" id="main_nav" style="position: relative; z-index: 2;">
	<ul class="navbar-nav ml-auto">		<li class="nav-item">      <a class="nav-link" href="#">Before</a>    </li>	<li class="nav-item">      <a class="nav-link" href="#=">After</a>    </li>		<li class="nav-item dropdown">						<a class="nav-link  dropdown-toggle" href="#" data-toggle="dropdown"> Split View</a>		    <ul class="dropdown-menu dropdown-menu-right">			  <li><a class="dropdown-item" href="javascript:changepano(scene_101);"> Living room </a></li>			  <li><a class="dropdown-item" href="javascript:changepano(scene_102);"> Kitchen </a></li>			  <li><a class="dropdown-item" href="javascript:void(0);" onclick='changepano(scene_103);");'> bedroom 1 </a></li>			  <li><a class="dropdown-item" href="javascript:changepano(scene_104);"> bedroom 2 </a></li>			  <li><a class="dropdown-item" href="#"> bedroom 3 </a></li>			  <li><a class="dropdown-item" href="#"> 06 </a></li>			  <li><a class="dropdown-item" href="#"> 07 </a></li>			  <li><a class="dropdown-item" href="#"> 08</a></li>			  <li><a class="dropdown-item" href="#"> 09 </a></li>			  		    </ul>		</li>	</ul>	  </div> <!-- navbar-collapse.// --></nav>
	<div id="viewersDiv" style="position:absolute; left:0; top:0; width:100%; height:100%; z-index: 1;">		<div class="d1" id="krpanoLeftDiv" > </div>		<div class="d3" id="hr"></div>		<div class="d2" id="krpanoRightDiv" ></div>	</div>		<script>		embedpano({html5:"only", basepath:"", id:"krpanoLeftViewer",  target:"krpanoLeftDiv",  xml:"tour_l1.xml", vars:{syncside:"left",syncviewer:"krpanoRightViewer"}, passQueryParameters:true});		embedpano({html5:"only", basepath:"", id:"krpanoRightViewer", target:"krpanoRightDiv", xml:"tour_r1.xml", vars:{syncside:"right",syncviewer:"krpanoLeftViewer"}, passQueryParameters:true});	</script>
</body></html>


This is javascript part

Source code

 
1
2

var krpano = document.getElementById("krpanoLeftDiv");var krpano2 = document.getElementById("krpanoRightDiv");
function changepano(panoName){krpano.call("loadscene(" + panoName + ");");krpano2.call("loadscene(" + panoName + ");");}


This is javascrtip call

Source code

 
1

 <li><a class="dropdown-item" href="javascript:changepano(scene_102);"> Kitchen </a></li>

HOw can I fix it?

this is sample link
http://vr2.dreamvrad.net/kc_centralpark_…ndex_split.html

This post has been edited 2 times, last edit by "drumspark" (Dec 16th 2020, 4:55am)

indexofrefraction

Professional

Posts: 1,362

  • Send private message

2

Wednesday, December 16th 2020, 10:40am

using strings without quotes works in krpano xml but not in javascript. check your console. ;-)

Source code

 
1

 <li><a class="dropdown-item" href="javascript:changepano("scene_102");"> Kitchen </a></li>
zFilter plugin -- zFlare plugin -- zSnapshot plugin

drumspark

Beginner

  • "drumspark" started this thread

Posts: 2

  • Send private message

3

Thursday, December 17th 2020, 3:36am

thank you

thank you. indexofrefraction

Solved!

Source code

 
1
2
3
4
5
6
7

<script>	var krpano = null;var krpano2 = null;		
embedpano({html5:"only", basepath:"", id:"krpanoLeftViewer",  target:"krpanoLeftDiv",  xml:"tour_l1.xml", vars:{syncside:"left",syncviewer:"krpanoRightViewer"}, passQueryParameters:true , onready:krpano_onready_callback});
embedpano({html5:"only", basepath:"", id:"krpanoRightViewer", target:"krpanoRightDiv", xml:"tour_r1.xml", vars:{syncside:"right",syncviewer:"krpanoLeftViewer"}, passQueryParameters:true , onready:krpano2_onready_callback});		function krpano_onready_callback(krpano_interface){  krpano = krpano_interface;
}
function krpano2_onready_callback(krpano_interface){  krpano2 = krpano_interface;
}
	</script>



Source code

 
1

<li><a class="dropdown-item" href='javascript:changepano("scene_104");'> Kitchen </a></li>


http://vr2.dreamvrad.net/kc_centralpark_…ndex_split.html

Similar threads