g1smo
/
cancerain
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Odstranjen vmesnik za spremembe

tretja-veja
Jurij Podgoršek 2021-04-28 17:29:56 +02:00
parent fa1e522a7e
commit d7b3c48843
2 changed files with 0 additions and 261 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
control.html
View File

@ -1,107 +0,0 @@
<html >
<head>
<meta charset="UTF-8">
<title>cancerainbow control</title>
<style type="text/css">
body {
margin: 0
}
.noUi-target {
width: 500px;
}
table tr td {
padding-top: 1rem;
}
</style>
<link href="node_modules/nouislider/distribute/nouislider.min.css" rel="stylesheet">
</head>
<body>
<table>
<tr>
<td>
vidni kot (FOV)
</td>
<td>
<div id="fovCtl"></div>
</td>
<td id="fovVal"></td>
</tr>
<tr>
<td>
visina objekta
</td>
<td>
<div id="visinaCtl"></div>
</td>
<td id="visinaVal"></td>
</tr>
<tr>
<td>
sirina objekta
</td>
<td>
<div id="sirinaCtl"></div>
</td>
<td id="sirinaVal"></td>
</tr>
<tr>
<td>
limit objektov
</td>
<td>
<div id="obj_limitCtl"></div>
</td>
<td id="obj_limitVal"></td>
</tr>
<tr>
<td>
rotacija X
</td>
<td>
<div id="rotxCtl"></div>
</td>
<td id="rotxVal"></td>
</tr>
<tr>
<td>
rotacija Y
</td>
<td>
<div id="rotyCtl"></div>
</td>
<td id="rotyVal"></td>
</tr>
<tr>
<td>
rotacija Z
</td>
<td>
<div id="rotzCtl"></div>
</td>
<td id="rotzVal"></td>
</tr>
<tr>
<td>
barva
</td>
<td>
<div id="barva_modCtl"></div>
</td>
<td id="barva_modVal"></td>
</tr>
<tr>
<td>
kamera
</td>
<td>
<div id="cam_rot_offsetCtl"></div>
</td>
<td id="cam_rot_offsetVal"></td>
</tr>
</table>
<script src="node_modules/nouislider/distribute/nouislider.min.js"></script>
<script src="control.js"></script>
</body>
</html>

154
control.js
View File

@ -1,154 +0,0 @@
// Interaktivnost
var socket = new WebSocket(location.origin.replace(/https?/, 'ws'));
function throttle (cb, limit) {
var w = false;
return function () {
if (!w) {
cb.apply(this, arguments);
w = true;
setTimeout(function () {
w = false;
}, limit);
}
}
}
inputi = {
"fov": {
val: 120,
min: 30,
max: 179
},
"sirina": {
val: 2,
min: 1,
max: 6,
step: 0.1
},
"visina": {
val: 2,
min: 1,
max: 6,
step: 0.1
},
"obj_limit": {
val: 1000,
min: 1,
max: 10000
},
"rotx": {
val: 0,
min: -0.1,
max: 0.1,
step: 0.001
},
"roty": {
val: 0,
min: -0.1,
max: 0.1,
step: 0.001
},
"rotz": {
val: 0,
min: -0.1,
max: 0.1,
step: 0.001
},
"barva_mod": {
val: 0.001,
min: 0.001,
max: 0.18,
step: 0.001
},
"cam_rot_offset": {
val: 0,
min: -10,
max: 10,
step: 0.1
}
};
Object.keys(inputi).map(function (name) {
var valEl = document.getElementById(name + "Val");
if (!valEl) { return; }
var ctlEl = document.getElementById(name + "Ctl");
var params = inputi[name];
var step = params.step;
if (!step) step = 1;
noUiSlider.create(ctlEl, {
start: [params.val],
range: {
min: [params.min],
max: [params.max]
},
step: step
});
ctlEl.noUiSlider.on('slide', throttle(function(val) {
console.log("update!");
var value = val[0];
valEl.innerHTML = value;
socket.send(['adjust', name, value].join(':'));
}, 125));
valEl.innerHTML = ctlEl.noUiSlider.get();
});
callbacks = {
fov: function(val) {
if (typeof camera === 'undefined') return;
FOV = val;
camera.fov = val;
camera.updateProjectionMatrix();
},
sirina: function(val) {
width = parseFloat(val);
},
visina: function (val) {
height = parseFloat(val);
},
rotx: function(val) {
rotacijaX = parseFloat(val);
},
roty: function(val) {
rotacijaY = parseFloat(val);
},
rotz: function(val) {
rotacijaZ = parseFloat(val);
},
obj_limit: function(val) {
obj_limit = parseInt(val);
},
default: function(name, val) {
window[name] = parseFloat(val);
}
};
socket.onmessage = function (msg) {
var parts = msg.data.split(":");
var cmd = parts[0];
switch (cmd) {
case 'adjust':
var name = parts[1];
var val = parts[2];
if (name in callbacks) {
callbacks[name].call(this, val);
} else {
callbacks["default"].call(this, name, val);
}
var valEl = document.getElementById(name + "Val");
if (!valEl) { return; }
var ctlEl = document.getElementById(name + "Ctl");
ctlEl.noUiSlider.set(val, false);
valEl.innerHTML = ctlEl.noUiSlider.get();
}
};