178 lines
6.1 KiB
HTML
178 lines
6.1 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
|
|
<head>
|
|
<title>a pc</title>
|
|
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
|
<style>
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden; /* Verhindert Scrollen auf der Seite */
|
|
}
|
|
#Frame00 {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 90%;
|
|
left: 1%;
|
|
top: 0%;
|
|
}
|
|
section {
|
|
position: absolute;
|
|
width: 30%;
|
|
height: 70%;
|
|
left: 46.5%;
|
|
top: 87%;
|
|
display: flex;
|
|
}
|
|
button {
|
|
position: absolute;
|
|
top: 91%;
|
|
display: block;
|
|
width: 40%;
|
|
padding: 10px;
|
|
background: #bc0ba8;
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
}
|
|
button:disabled {
|
|
background: #ccc;
|
|
color: #666;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
button:not(:disabled):hover {
|
|
background: #5d0570;
|
|
}
|
|
div {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div>
|
|
<iframe id="Frame00"></iframe>
|
|
<button id="end-trial" onclick="end()" disabled="true"></button>
|
|
</div>
|
|
</body>
|
|
|
|
<script>
|
|
// Get the current trial's data
|
|
var NodeData = jsPsych.currentTrial().data;
|
|
var letter = NodeData.controlLetter1;
|
|
var positions_seq = NodeData.positions;
|
|
var cloud = NodeData.cloudOne;
|
|
var stimuli = NodeData.type;
|
|
var iframe01 = document.getElementById("Frame00");
|
|
|
|
if(stimuli == "trial"){
|
|
if (positions_seq.length == 1){
|
|
iframe01.src = `potree/single_page_template_${stimuli}.html?cloud=${cloud}&letter=${letter}&x=${positions_seq[0][0]}&y=${positions_seq[0][1]}&z=${positions_seq[0][2]}`;
|
|
}else if (positions_seq.length == 2){
|
|
iframe01.src = `potree/single_page_template_${stimuli}_2Elements.html?cloud=${cloud}&letter=${NodeData.controlLetter1}&x=${positions_seq[0][0]}&y=${positions_seq[0][1]}&z=${positions_seq[0][2]}&letter2=${NodeData.controlLetter2}&x2=${positions_seq[1][0]}&y2=${positions_seq[1][1]}&z2=${positions_seq[1][2]}`;
|
|
}else if (positions_seq.length == 3){
|
|
iframe01.src = `potree/single_page_template_${stimuli}_3Elements.html?cloud=${cloud}&letter=${NodeData.controlLetter1}&x=${positions_seq[0][0]}&y=${positions_seq[0][1]}&z=${positions_seq[0][2]}&letter2=${NodeData.controlLetter2}&x2=${positions_seq[1][0]}&y2=${positions_seq[1][1]}&z2=${positions_seq[1][2]}&letter3=${NodeData.controlLetter3}&x3=${positions_seq[2][0]}&y3=${positions_seq[2][1]}&z3=${positions_seq[2][2]}`;
|
|
}
|
|
}
|
|
|
|
if(positions_seq.length == 2 && stimuli != "trial"){
|
|
iframe01.src = `potree/single_page_template_${stimuli}.html?cloud=${cloud}&letter=${letter}&x=${positions_seq[0][0]}&y=${positions_seq[0][1]}&z=${positions_seq[0][2]}`;
|
|
}else if (positions_seq.length == 4){
|
|
iframe01.src = `potree/single_page_template_${stimuli}_2Elements.html?cloud=${cloud}&letter=${NodeData.controlLetter1}&x=${positions_seq[0][0]}&y=${positions_seq[0][1]}&z=${positions_seq[0][2]}&letter2=${NodeData.controlLetter2}&x2=${positions_seq[1][0]}&y2=${positions_seq[1][1]}&z2=${positions_seq[1][2]}`;
|
|
|
|
}else if (positions_seq.length == 6){
|
|
iframe01.src = `potree/single_page_template_${stimuli}_3Elements.html?cloud=${cloud}&letter=${NodeData.controlLetter1}&x=${positions_seq[0][0]}&y=${positions_seq[0][1]}&z=${positions_seq[0][2]}&letter2=${NodeData.controlLetter2}&x2=${positions_seq[1][0]}&y2=${positions_seq[1][1]}&z2=${positions_seq[1][2]}&letter3=${NodeData.controlLetter3}&x3=${positions_seq[2][0]}&y3=${positions_seq[2][1]}&z3=${positions_seq[2][2]}`;
|
|
}
|
|
</script>
|
|
|
|
<script>
|
|
var CameraPerspektiven = [];
|
|
|
|
// Updating the cameras every 250ms
|
|
$(function () {
|
|
var intervall = setInterval(updateCam, 250);
|
|
});
|
|
|
|
var oldCameraLeft = { x: null, y: null, z: null, yaw: null, pitch: null };
|
|
|
|
function updateCam() {
|
|
var iframe00 = document.getElementById("Frame00");
|
|
try {
|
|
var scene00 = iframe00.contentWindow.viewer.scene.view;
|
|
|
|
var position00 = scene00.position;
|
|
|
|
var yaw00 = scene00.yaw;
|
|
|
|
var pitch00 = scene00.pitch;
|
|
} catch (e) {
|
|
//scene not loaded
|
|
return;
|
|
}
|
|
if (
|
|
position00.x != oldCameraLeft.x ||
|
|
position00.y != oldCameraLeft.y ||
|
|
position00.z != oldCameraLeft.z ||
|
|
yaw00 != oldCameraLeft.yaw ||
|
|
pitch00 != oldCameraLeft.pitch
|
|
) {
|
|
oldCameraLeft.x = position00.x;
|
|
oldCameraLeft.y = position00.y;
|
|
oldCameraLeft.z = position00.z;
|
|
oldCameraLeft.yaw = yaw00;
|
|
oldCameraLeft.pitch = pitch00;
|
|
var cloudInfo = {
|
|
cloud: "F",
|
|
x: position00.x,
|
|
y: position00.y,
|
|
z: position00.z,
|
|
yaw: yaw00,
|
|
pitch: pitch00,
|
|
time: jsPsych.totalTime(),
|
|
};
|
|
var cloudInfoJson = JSON.stringify(cloudInfo);
|
|
console.log(cloudInfoJson);
|
|
CameraPerspektiven.push(cloudInfo);
|
|
}
|
|
}
|
|
|
|
function end() {
|
|
jsPsych.currentTrial().data.perspectives.push(CameraPerspektiven);
|
|
jsPsych.currentTrial().data.tab_switch = tabSwitchCount;
|
|
}
|
|
</script>
|
|
|
|
<script>
|
|
var timerElement = document.getElementById("end-trial");
|
|
var timeLeft = 10;
|
|
|
|
var countdown = setInterval(() => {
|
|
if (timeLeft <= 0) {
|
|
clearInterval(countdown);
|
|
timerElement.textContent = "Evaluate";
|
|
document.getElementById("end-trial").disabled = false;
|
|
} else {
|
|
timerElement.textContent = timeLeft;
|
|
timeLeft--;
|
|
}
|
|
}, 1000);
|
|
</script>
|
|
<script>
|
|
var tabSwitchCount = 0;
|
|
document.addEventListener("visibilitychange", function () {
|
|
if (document.visibilityState === "hidden") {
|
|
tabSwitchCount++;
|
|
}
|
|
});
|
|
</script>
|
|
</html>
|