Compare commits
2 Commits
master
...
tretja-vej
Author | SHA1 | Date |
---|---|---|
Jurij Podgoršek | 111feb350a | |
Jurij Podgoršek | d7b3c48843 |
107
control.html
107
control.html
|
@ -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
154
control.js
|
@ -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();
|
|
||||||
}
|
|
||||||
};
|
|
|
@ -12,6 +12,7 @@
|
||||||
<body>
|
<body>
|
||||||
<div id="anim-container">
|
<div id="anim-container">
|
||||||
</div>
|
</div>
|
||||||
|
Dodan tekst
|
||||||
<script src="node_modules/three/build/three.min.js"></script>
|
<script src="node_modules/three/build/three.min.js"></script>
|
||||||
<script src="anim.js"></script>
|
<script src="anim.js"></script>
|
||||||
<script src="control.js"></script>
|
<script src="control.js"></script>
|
||||||
|
|
14
package.json
14
package.json
|
@ -1,14 +0,0 @@
|
||||||
{
|
|
||||||
"name": "cancerain",
|
|
||||||
"version": "0.3.0",
|
|
||||||
"description": "epilepsija",
|
|
||||||
"dependencies": {
|
|
||||||
"express": "^4.17.1",
|
|
||||||
"nouislider": "14.6.2",
|
|
||||||
"three": "0.120.1",
|
|
||||||
"ws": "^7.3.1"
|
|
||||||
},
|
|
||||||
"scripts": {
|
|
||||||
"start": "node server.js"
|
|
||||||
}
|
|
||||||
}
|
|
Loading…
Reference in New Issue