init
python
This commit is contained in:
Andreas Wilms
350
PCSurvey/potree/paired_comparison_template.html
Normal file
350
PCSurvey/potree/paired_comparison_template.html
Normal file
@@ -0,0 +1,350 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user