<html>
<head>
<title>API Sample</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1, minimum-scale=1">
</head>
<body>
<!-- viewer embed code !-->
<iframe id="svt_iframe_a87ff679a2f3e71d9181a67b7542122c" allowfullscreen allow="gyroscope; accelerometer; xr; microphone *" width="100%" height="600px" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://3d.theretailoffice.com/backend/publish.phpa87ff679a2f3e71d9181a67b7542122c"></iframe>
<br><br>
<button disabled onclick="goto_room(36);">GO TO COSMOS</button> <!-- replace the id of the room !-->
<button disabled onclick="goto_next_room();">GO TO NEXT ROOM</button>
<button disabled onclick="goto_prev_room();">GO TO PREV ROOM</button>
<br><br>
<input placeholder="latitude" id="latitude" type="text"> <input placeholder="longitude" id="longitude" type="text">
<button disabled onclick="goto_room_coordinates();">GO TO COORDINATES</button>
<script>
var id_iframe = "svt_iframe_a87ff679a2f3e71d9181a67b7542122c";
var iframe_svt = document.getElementById(id_iframe).contentWindow;
window.addEventListener("message", function(evt) {
if(evt.data.payload=="initialized") {
//Tour initialized -> put your code here
var buttons = document.querySelectorAll("button");
for (var i = 0; i < buttons.length; ++i) {
buttons[i].disabled = false;
}
}
}, false);
function goto_room(id_room) {
//function to go to the room via its id
iframe_svt.postMessage({"payload":"goto_room","id_room":id_room}, "*");
}
function goto_next_room() {
//function to go to the next room
iframe_svt.postMessage({"payload":"goto_next_room"}, "*");
}
function goto_prev_room() {
//function to go to the previous room
iframe_svt.postMessage({"payload":"goto_prev_room"}, "*");
}
function goto_room_coordinates() {
//function to go to nearest room based on given coordinates
var lat = document.getElementById("latitude").value;
var lon = document.getElementById("longitude").value;
iframe_svt.postMessage({"payload":"goto_room_coordinates","coordinates":[lat,lon]}, "*");
}
</script>
</body>
</html>