351 lines
11 KiB
HTML
351 lines
11 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" />
|
|
</head>
|
|
|
|
<body>
|
|
<iframe
|
|
id="Frame00"
|
|
style="position: absolute; width: 45%; height: 90%; left: 1%; top: 5%"
|
|
></iframe>
|
|
<iframe
|
|
id="Frame01"
|
|
style="position: absolute; width: 45%; height: 90%; left: 54%; top: 5%"
|
|
></iframe>
|
|
|
|
<section
|
|
style="position: absolute; width: 7%; height: 70%; left: 46.5%; top: 25%"
|
|
>
|
|
<p id="timer"></p>
|
|
<div>
|
|
<button id="end-trial" onclick="end()" style="width: 100%" disabled="true"
|
|
>Continue to Quality Rating</button
|
|
>
|
|
</div>
|
|
<br />
|
|
<div style="width: 100%">
|
|
<p id="infotext" style="text-align: left">Synchronize perspectives</p>
|
|
</div>
|
|
<div>
|
|
<input type="checkbox" id="sync" name="sync" checked="checked" />
|
|
<label for="sync">Sync</label>
|
|
</div>
|
|
<button id="left-right" onclick="lefttoright()">---></button>
|
|
<button id="right-left" onclick="righttoleft()"><---</button>
|
|
</section>
|
|
</body>
|
|
|
|
<script>
|
|
|
|
// Get the current trial's data
|
|
var NodeData = jsPsych.currentTrial().data;
|
|
var letter1 = NodeData.controlLetter1;
|
|
var letter2 = NodeData.controlLetter2;
|
|
var positions = NodeData.positions;
|
|
var cloudL = NodeData.cloudLeft;
|
|
var cloudR = NodeData.cloudRight;
|
|
var stimuli= NodeData.type;
|
|
|
|
var iframe01 = document.getElementById("Frame00");
|
|
var iframe02 = document.getElementById("Frame01");
|
|
|
|
iframe01.src = `potree/single_page_template_${stimuli}.html?cloud=${cloudL}&letter=${letter1}&x=${positions[0][0]}&y=${positions[0][1]}&z=${positions[0][2]}`;
|
|
iframe02.src = `potree/single_page_template_${stimuli}.html?cloud=${cloudR}&letter=${letter2}&x=${positions[1][0]}&y=${positions[1][1]}&z=${positions[1][2]}`;
|
|
|
|
</script>
|
|
|
|
<script>
|
|
var syncro;
|
|
var lastPosition = { x: null, y: null, z: null };
|
|
var lastYaw = null;
|
|
var lastPitch = null;
|
|
var CameraPerspektiven = [];
|
|
|
|
// Updating the cameras every 250ms
|
|
$(function () {
|
|
var IntervallMid = setInterval(updateCam, 250);
|
|
});
|
|
|
|
// Initial syncing of the cameras
|
|
var iframe = document.getElementById("Frame00");
|
|
iframe.onload = function () {
|
|
initial_syncing();
|
|
};
|
|
|
|
// Syncing the cameras when the checkbox is checked
|
|
var checkbox = document.getElementById("sync");
|
|
checkbox.addEventListener("change", function () {
|
|
if (this.checked) {
|
|
initial_syncing();
|
|
}
|
|
});
|
|
|
|
var lastPosition = { x: null, y: null, z: null };
|
|
var lastYaw = null;
|
|
var lastPitch = null;
|
|
|
|
var oldCameraLeft = { x: null, y: null, z: null, yaw: null, pitch: null };
|
|
var oldCameraRight = { x: null, y: null, z: null, yaw: null, pitch: null };
|
|
|
|
function updateCam() {
|
|
syncro = sync.checked;
|
|
var iframe00 = document.getElementById("Frame00");
|
|
var iframe01 = document.getElementById("Frame01");
|
|
try {
|
|
var scene00 = iframe00.contentWindow.viewer.scene.view;
|
|
var scene01 = iframe01.contentWindow.viewer.scene.view;
|
|
|
|
var position00 = scene00.position;
|
|
var position01 = scene01.position;
|
|
|
|
var yaw00 = scene00.yaw;
|
|
var yaw01 = scene01.yaw;
|
|
|
|
var pitch00 = scene00.pitch;
|
|
var pitch01 = scene01.pitch;
|
|
} catch (e) {
|
|
//scene not loaded
|
|
return;
|
|
}
|
|
if (syncro) {
|
|
document.getElementById("left-right").disabled = true;
|
|
document.getElementById("right-left").disabled = true;
|
|
var changeInfo = { x: null, y: null, z: null, yaw: null, pitch: null };
|
|
|
|
if (lastPosition != null && lastYaw != null && lastPitch != null) {
|
|
if (
|
|
position00.x != lastPosition.x ||
|
|
position00.y != lastPosition.y ||
|
|
position00.z != lastPosition.z ||
|
|
yaw00 != lastYaw ||
|
|
pitch00 != lastPitch
|
|
) {
|
|
changeInfo.x = position00.x;
|
|
changeInfo.y = position00.y;
|
|
changeInfo.z = position00.z;
|
|
changeInfo.yaw = yaw00;
|
|
changeInfo.pitch = pitch00;
|
|
}
|
|
|
|
if (
|
|
position01.x != lastPosition.x ||
|
|
position01.y != lastPosition.y ||
|
|
position01.z != lastPosition.z ||
|
|
yaw01 != lastYaw ||
|
|
pitch01 != lastPitch
|
|
) {
|
|
changeInfo.x = position01.x;
|
|
changeInfo.y = position01.y;
|
|
changeInfo.z = position01.z;
|
|
changeInfo.yaw = yaw01;
|
|
changeInfo.pitch = pitch01;
|
|
}
|
|
|
|
if (changeInfo.x != null) {
|
|
scene00.position.set(changeInfo.x, changeInfo.y, changeInfo.z);
|
|
scene00.yaw = changeInfo.yaw;
|
|
scene00.pitch = changeInfo.pitch;
|
|
scene01.position.set(changeInfo.x, changeInfo.y, changeInfo.z);
|
|
scene01.yaw = changeInfo.yaw;
|
|
scene01.pitch = changeInfo.pitch;
|
|
setLastPosition();
|
|
let cloudInfo = {
|
|
cloud: "B", // oder "R", abhängig von Ihrer Logik
|
|
x: changeInfo.x,
|
|
y: changeInfo.y,
|
|
z: changeInfo.z,
|
|
yaw: changeInfo.yaw,
|
|
pitch: changeInfo.pitch,
|
|
sync: true,
|
|
time: jsPsych.totalTime(),
|
|
};
|
|
|
|
// Umwandlung des Objekts in einen JSON-String
|
|
var cloudInfoJson = JSON.stringify(cloudInfo);
|
|
console.log(cloudInfoJson);
|
|
CameraPerspektiven.push(cloudInfo);
|
|
}
|
|
}
|
|
} else {
|
|
document.getElementById("left-right").disabled = false;
|
|
document.getElementById("right-left").disabled = false;
|
|
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: "L",
|
|
x: position00.x,
|
|
y: position00.y,
|
|
z: position00.z,
|
|
yaw: yaw00,
|
|
pitch: pitch00,
|
|
sync: false,
|
|
time: jsPsych.totalTime(),
|
|
};
|
|
var cloudInfoJson = JSON.stringify(cloudInfo);
|
|
console.log(cloudInfoJson);
|
|
CameraPerspektiven.push(cloudInfo);
|
|
} else if (
|
|
position01.x != oldCameraRight.x ||
|
|
position01.y != oldCameraRight.y ||
|
|
position01.z != oldCameraRight.z ||
|
|
yaw01 != oldCameraRight.yaw ||
|
|
pitch01 != oldCameraRight.pitch
|
|
) {
|
|
oldCameraRight.x = position01.x;
|
|
oldCameraRight.y = position01.y;
|
|
oldCameraRight.z = position01.z;
|
|
oldCameraRight.yaw = yaw01;
|
|
oldCameraRight.pitch = pitch01;
|
|
|
|
var cloudInfo = {
|
|
cloud: "R",
|
|
x: position01.x,
|
|
y: position01.y,
|
|
z: position01.z,
|
|
yaw: yaw01,
|
|
pitch: pitch01,
|
|
sync: false,
|
|
time: jsPsych.totalTime(),
|
|
};
|
|
var cloudInfoJson = JSON.stringify(cloudInfo);
|
|
console.log(cloudInfoJson);
|
|
CameraPerspektiven.push(cloudInfo);
|
|
}
|
|
}
|
|
}
|
|
|
|
function setLastPosition() {
|
|
var iframe00 = document.getElementById("Frame00");
|
|
var iframe01 = document.getElementById("Frame01");
|
|
|
|
try {
|
|
var scene00 = iframe00.contentWindow.viewer.scene.view;
|
|
var scene01 = iframe01.contentWindow.viewer.scene.view;
|
|
} catch (e) {
|
|
//scene not loaded
|
|
return;
|
|
}
|
|
|
|
lastPosition.x = scene00.position.x;
|
|
lastPosition.y = scene00.position.y;
|
|
lastPosition.z = scene00.position.z;
|
|
lastYaw = scene00.yaw;
|
|
lastPitch = scene00.pitch;
|
|
|
|
oldCameraLeft.x = scene00.position.x;
|
|
oldCameraLeft.y = scene00.position.y;
|
|
oldCameraLeft.z = scene00.position.z;
|
|
oldCameraLeft.yaw = scene00.yaw;
|
|
oldCameraLeft.pitch = scene00.pitch;
|
|
|
|
oldCameraRight.x = scene01.position.x;
|
|
oldCameraRight.y = scene01.position.y;
|
|
oldCameraRight.z = scene01.position.z;
|
|
oldCameraRight.yaw = scene01.yaw;
|
|
oldCameraRight.pitch = scene01.pitch;
|
|
}
|
|
|
|
function initial_syncing() {
|
|
var iframe00 = document.getElementById("Frame00");
|
|
var iframe01 = document.getElementById("Frame01");
|
|
|
|
var scene00 = iframe00.contentWindow.viewer.scene.view;
|
|
var scene01 = iframe01.contentWindow.viewer.scene.view;
|
|
|
|
var position00 = scene00.position;
|
|
var position01 = scene01.position;
|
|
|
|
var yaw00 = scene00.yaw;
|
|
var yaw01 = scene01.yaw;
|
|
|
|
var pitch00 = scene00.pitch;
|
|
var pitch01 = scene01.pitch;
|
|
|
|
scene01.position.set(position00.x, position00.y, position00.z);
|
|
scene01.yaw = yaw00;
|
|
scene01.pitch = pitch00;
|
|
setLastPosition();
|
|
}
|
|
|
|
function lefttoright() {
|
|
var iframe00 = document.getElementById("Frame00");
|
|
var iframe01 = document.getElementById("Frame01");
|
|
|
|
var scene00 = iframe00.contentWindow.viewer.scene.view;
|
|
var scene01 = iframe01.contentWindow.viewer.scene.view;
|
|
|
|
var position00 = scene00.position;
|
|
var position01 = scene01.position;
|
|
|
|
var yaw00 = scene00.yaw;
|
|
var yaw01 = scene01.yaw;
|
|
|
|
var pitch00 = scene00.pitch;
|
|
var pitch01 = scene01.pitch;
|
|
|
|
scene01.position.set(position00.x, position00.y, position00.z);
|
|
scene01.yaw = yaw00;
|
|
scene01.pitch = pitch00;
|
|
}
|
|
|
|
function righttoleft() {
|
|
var iframe00 = document.getElementById("Frame00");
|
|
var iframe01 = document.getElementById("Frame01");
|
|
|
|
var scene00 = iframe00.contentWindow.viewer.scene.view;
|
|
var scene01 = iframe01.contentWindow.viewer.scene.view;
|
|
|
|
var position00 = scene00.position;
|
|
var position01 = scene01.position;
|
|
|
|
var yaw00 = scene00.yaw;
|
|
var yaw01 = scene01.yaw;
|
|
|
|
var pitch00 = scene00.pitch;
|
|
var pitch01 = scene01.pitch;
|
|
|
|
scene00.position.set(position01.x, position01.y, position01.z);
|
|
scene00.yaw = yaw01;
|
|
scene00.pitch = pitch01;
|
|
}
|
|
|
|
function end() {
|
|
jsPsych.data.get().addToLast({ perspectives: CameraPerspektiven });
|
|
|
|
clearInterval(Intervall);
|
|
clearInterval(IntervallMid);
|
|
clearInterval(IntervallBottom);
|
|
}
|
|
</script>
|
|
|
|
<script>
|
|
var timerElement = document.getElementById('timer');
|
|
var timeLeft = 15;
|
|
|
|
var countdown = setInterval(() => {
|
|
if (timeLeft <= 0) {
|
|
clearInterval(countdown);
|
|
timerElement.textContent = "Time's up!";
|
|
document.getElementById("end-trial").disabled = false;
|
|
|
|
} else {
|
|
timerElement.textContent = timeLeft;
|
|
timeLeft--;
|
|
}
|
|
}, 1000);
|
|
|
|
</script>
|
|
</html>
|