<!-- Copyright 2016 High Fidelity, Inc. --><html> <head> <meta charset="utf-8"/> <input type="hidden" id="version" value="1"/> <title>Welcome to Interface</title> <style> @font-face { font-family: 'Raleway Light'; src: url('../fonts/Raleway-Light.ttf') format('truetype'); font-weight: normal; font-style: normal; } body { background: black; width: 100%; overflow-x: hidden; overflow-y: hidden; margin: 0; padding: 0; } a:link {color:inherit} a:active {color:inherit} a:visited {color:inherit} a:hover { color:inherit; cursor: pointer; } #left_button { position: absolute; left: 70; top: 70; width: 160; height: 80; } #right_button { position: absolute; left: 367; top: 70; width: 160; height: 80; } #image_area { width: 480; height: 720; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } #image_button { position: absolute; width: 463; height: 410; top: 155; left: 8; right: 8; bottom: 146; } #report_problem { position: fixed; top: 10; right: 10; font-family: "Raleway Light", sans-serif; text-decoration: none; color: #ddd; } </style> <script> var handControllerImageURL = null; var index = 0; var count = 3; var handControllerRefURL = "https://docs.overte.org/explore/get-started/vr-controls.html#vr-controls"; var keyboardRefURL = "https://docs.overte.org/explore/get-started/desktop.html#movement-controls"; var gamepadRefURL = "https://docs.overte.org/explore/get-started/vr-controls.html#gamepad"; function showKbm() { document.getElementById("main_image").setAttribute("src", "img/tablet-help-keyboard.jpg"); document.getElementById("image_button").setAttribute("href", keyboardRefURL); } function showHandControllers() { document.getElementById("main_image").setAttribute("src", handControllerImageURL); document.getElementById("image_button").setAttribute("href", handControllerRefURL); } function showGamepad() { document.getElementById("main_image").setAttribute("src", "img/tablet-help-gamepad.jpg"); document.getElementById("image_button").setAttribute("href", gamepadRefURL); } function cycleRight() { index = (index + count + 1) % count; chooseIcon(); } function cycleLeft() { index = (index + count - 1) % count; chooseIcon(); } function chooseIcon() { switch (index) { case 0: showGamepad(); break; case 1: showKbm(); break; case 2: showHandControllers(); break; default: } } // This is not meant to be a complete or hardened query string parser - it only // needs to handle the values we send in and have control over. // // queryString is a string of the form "key1=value1&key2=value2&key3&key4=value4" function parseQueryString(queryString) { var params = {}; var paramsParts = queryString.split("&"); for (var i = 0; i < paramsParts.length; ++i) { var paramKeyValue = paramsParts[i].split("="); if (paramKeyValue.length == 1) { params[paramKeyValue[0]] = undefined; } else if (paramKeyValue.length == 2) { params[paramKeyValue[0]] = paramKeyValue[1]; } else { console.error("Error parsing param keyvalue: ", paramParts); } } return params; } function load() { var parts = window.location.href.split("?"); var params = {}; if (parts.length > 0) { params = parseQueryString(parts[1]); } switch (params.handControllerName) { case "windowsMR": handControllerImageURL = "img/tablet-help-windowsMR.jpg"; break; case "vive": handControllerImageURL = "img/tablet-help-vive.jpg"; break; case "oculus": handControllerImageURL = "img/tablet-help-oculus.jpg"; break; default: handControllerImageURL = ""; count = 2; } switch (params.defaultTab) { case "handControllers": showHandControllers(); index = 2; break; case "gamepad": showGamepad(); index = 0; break; case "kbm": default: showKbm(); index = 1; } } </script> </head> <body onload="load()"> <div id="image_area"> <img id="main_image" src="img/tablet-help-keyboard.jpg" width="480px" height="720px"></img> <a href="#" id="left_button" onmousedown="cycleLeft()"></a> <a href="#" id="right_button" onmousedown="cycleRight()"></a> <a href="#" id="image_button"></a> </div> <a href="mailto:support@overte.org" id="report_problem">Report Problem</a> </body> </html>
<!-- Copyright 2016 High Fidelity, Inc. -->
<html>
<head>
<meta charset="utf-8"/>
<input type="hidden" id="version" value="1"/>
<title>Welcome to Interface</title>
<style>
@font-face {
font-family: 'Raleway Light';
src: url('../fonts/Raleway-Light.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
body {
background: black;
width: 100%;
overflow-x: hidden;
overflow-y: hidden;
margin: 0;
padding: 0;
}
a:link {color:inherit}
a:active {color:inherit}
a:visited {color:inherit}
a:hover {
color:inherit;
cursor: pointer;
}
#left_button {
position: absolute;
left: 70;
top: 70;
width: 160;
height: 80;
}
#right_button {
position: absolute;
left: 367;
top: 70;
width: 160;
height: 80;
}
#image_area {
width: 480;
height: 720;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
#image_button {
position: absolute;
width: 463;
height: 410;
top: 155;
left: 8;
right: 8;
bottom: 146;
}
#report_problem {
position: fixed;
top: 10;
right: 10;
font-family: "Raleway Light", sans-serif;
text-decoration: none;
color: #ddd;
}
</style>
<script>
var handControllerImageURL = null;
var index = 0;
var count = 3;
var handControllerRefURL = "https://docs.overte.org/explore/get-started/vr-controls.html#vr-controls";
var keyboardRefURL = "https://docs.overte.org/explore/get-started/desktop.html#movement-controls";
var gamepadRefURL = "https://docs.overte.org/explore/get-started/vr-controls.html#gamepad";
function showKbm() {
document.getElementById("main_image").setAttribute("src", "img/tablet-help-keyboard.jpg");
document.getElementById("image_button").setAttribute("href", keyboardRefURL);
}
function showHandControllers() {
document.getElementById("main_image").setAttribute("src", handControllerImageURL);
document.getElementById("image_button").setAttribute("href", handControllerRefURL);
}
function showGamepad() {
document.getElementById("main_image").setAttribute("src", "img/tablet-help-gamepad.jpg");
document.getElementById("image_button").setAttribute("href", gamepadRefURL);
}
function cycleRight() {
index = (index + count + 1) % count;
chooseIcon();
}
function cycleLeft() {
index = (index + count - 1) % count;
chooseIcon();
}
function chooseIcon() {
switch (index)
{
case 0:
showGamepad();
break;
case 1:
showKbm();
break;
case 2:
showHandControllers();
break;
default:
}
}
// This is not meant to be a complete or hardened query string parser - it only
// needs to handle the values we send in and have control over.
//
// queryString is a string of the form "key1=value1&key2=value2&key3&key4=value4"
function parseQueryString(queryString) {
var params = {};
var paramsParts = queryString.split("&");
for (var i = 0; i < paramsParts.length; ++i) {
var paramKeyValue = paramsParts[i].split("=");
if (paramKeyValue.length == 1) {
params[paramKeyValue[0]] = undefined;
} else if (paramKeyValue.length == 2) {
params[paramKeyValue[0]] = paramKeyValue[1];
} else {
console.error("Error parsing param keyvalue: ", paramParts);
}
}
return params;
}
function load() {
var parts = window.location.href.split("?");
var params = {};
if (parts.length > 0) {
params = parseQueryString(parts[1]);
}
switch (params.handControllerName) {
case "windowsMR":
handControllerImageURL = "img/tablet-help-windowsMR.jpg";
break;
case "vive":
handControllerImageURL = "img/tablet-help-vive.jpg";
break;
case "oculus":
handControllerImageURL = "img/tablet-help-oculus.jpg";
break;
default:
handControllerImageURL = "";
count = 2;
}
switch (params.defaultTab) {
case "handControllers":
showHandControllers();
index = 2;
break;
case "gamepad":
showGamepad();
index = 0;
break;
case "kbm":
default:
showKbm();
index = 1;
}
}
</script>
</head>
<body onload="load()">
<div id="image_area">
<img id="main_image" src="img/tablet-help-keyboard.jpg" width="480px" height="720px"></img>
<a href="#" id="left_button" onmousedown="cycleLeft()"></a>
<a href="#" id="right_button" onmousedown="cycleRight()"></a>
<a href="#" id="image_button"></a>
</div>
<a href="mailto:support@overte.org" id="report_problem">Report Problem</a>
</body>
</html>