13 changed files with 2786 additions and 98 deletions
-
116#server.js#
-
24#test.html#
-
1.#server.js
-
4anim.js
-
2control.html
-
9control.js
-
2index.html
-
24osctl.js
-
2516package-lock.json
-
5package.json
-
22server.js
-
19test.html
-
140test.js
@ -0,0 +1,116 @@ |
|||
const express = require('express') |
|||
const http = require('http') |
|||
const WebSocket = require('ws') |
|||
|
|||
const osc = require('osc') |
|||
|
|||
const port = 6676 |
|||
// Vzemi iz argumenta |
|||
const tty = process.argv[2] |
|||
|
|||
const include_files = [ |
|||
'/anim.js', |
|||
'/control.js', |
|||
'/test.js', |
|||
'/node_modules/three/build/three.min.js', |
|||
'/node_modules/nouislider/distribute/nouislider.min.js', |
|||
'/node_modules/nouislider/distribute/nouislider.min.css', |
|||
'/node_modules/osc/dist/osc-browser.js' |
|||
]; |
|||
|
|||
const app = express(); |
|||
const server = http.Server(app); |
|||
|
|||
// Odprti serijski OSC link |
|||
const scon = new osc.SerialPort({ |
|||
devicePath: tty, |
|||
bitrate: 115200 |
|||
}) |
|||
scon.on('error', e => { |
|||
console.log('tty error', e) |
|||
}) |
|||
scon.open() |
|||
|
|||
app.get('/', (req, res) => { |
|||
res.sendFile(__dirname + '/index.html'); |
|||
}); |
|||
|
|||
app.get('/ctl', (req, res) => { |
|||
res.sendFile(__dirname + '/control.html'); |
|||
}); |
|||
|
|||
app.get('/test', (req, res) => { |
|||
res.sendFile(__dirname + '/test.html'); |
|||
}); |
|||
|
|||
let settings = {}; |
|||
app.get('/settings', function(req, res) { |
|||
res.send(settings); |
|||
}); |
|||
|
|||
include_files.map(function(file) { |
|||
app.get(file, function(req, res){ |
|||
res.sendFile(__dirname + file); |
|||
}); |
|||
}); |
|||
|
|||
server.listen(port, () => console.log('listening on *:' + port)) |
|||
|
|||
// Websocket init |
|||
const wss = new WebSocket.Server({ server }) |
|||
|
|||
const sendAll = (msg, wss, ws = null) => { |
|||
wss.clients.forEach( client => { |
|||
if (client != ws) { |
|||
client.send(msg) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
// Debug osc |
|||
/* |
|||
scon.on('osc', msg => { |
|||
console.log('tty osc', msg.address, ...msg.args.map(val => Math.round(val * 1000) / 1000)) |
|||
}) |
|||
*/ |
|||
|
|||
wss.on('connection', function (ws) { |
|||
const oscWS = new osc.WebSocketPort({ |
|||
socket: ws, |
|||
metadata: true |
|||
}); |
|||
|
|||
// Arduino OSC gre v web |
|||
scon.on('osc', msg => { |
|||
switch(msg.address) { |
|||
case '/gyro/': |
|||
const [gx, gy, gz] = msg.args |
|||
sendAll('adjust:rotx:' + gx, wss) |
|||
sendAll('adjust:roty:' + gy, wss) |
|||
sendAll('adjust:rotz:' + gz, wss) |
|||
break; |
|||
case '/quaternion/': |
|||
const [qw, qx, qy, qz] = msg.args |
|||
sendAll('adjust:quaternion:' + [qw, qx, qy, qz].join(':'), wss) |
|||
break; |
|||
case '/accel/': |
|||
const [ax, ay, az] = msg.args |
|||
sendAll('adjust:posx:' + ax, wss) |
|||
sendAll('adjust:posy:' + ay, wss) |
|||
sendAll('adjust:posz:' + az, wss) |
|||
break; |
|||
} |
|||
}) |
|||
|
|||
ws.on('message', (msg) => { |
|||
//console.log('got msg', msg) |
|||
const parts = msg.split(":") |
|||
const cmd = parts[0] |
|||
|
|||
// Broadcast adjust msg |
|||
switch (cmd) { |
|||
case 'adjust': |
|||
sendAll(msg, wss, ws) |
|||
} |
|||
}) |
|||
}) |
|||
@ -0,0 +1,24 @@ |
|||
<html > |
|||
<head> |
|||
<meta charset="UTF-8"> |
|||
<title>cancerainbow test</title> |
|||
<style type="text/css"> |
|||
body { |
|||
margin: 0 |
|||
} |
|||
|
|||
.noUi-target { |
|||
width: 500px; |
|||
} |
|||
|
|||
table tr td { |
|||
padding-top: 1rem; |
|||
} |
|||
</style> |
|||
</head> |
|||
<body> |
|||
<h1>TEST</h1> |
|||
<script src="control.js"></script> |
|||
<script src="test.js"></script> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1 @@ |
|||
g1smo@dbn.20170:1628540355 |
|||
@ -0,0 +1,24 @@ |
|||
var oscPort = new osc.WebSocketPort({ |
|||
url: location.origin.replace(/https?/, 'ws'), |
|||
metadata: true |
|||
}); |
|||
|
|||
oscPort.open(); |
|||
|
|||
oscPort.on("ready", function () { |
|||
// Example send
|
|||
/* |
|||
oscPort.send({ |
|||
address: "/carrier/frequency", |
|||
args: [ |
|||
{ |
|||
type: "f", |
|||
value: 440 |
|||
} |
|||
] |
|||
}); |
|||
*/ |
|||
oscPort.on("message", function (msg) { |
|||
console.log("OSC message", msg); |
|||
}); |
|||
}); |
|||
2516
package-lock.json
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,19 @@ |
|||
<html > |
|||
<head> |
|||
<meta charset="UTF-8"> |
|||
<title>wavey wind test</title> |
|||
<style type="text/css"> |
|||
body { |
|||
margin: 0 |
|||
} |
|||
|
|||
</style> |
|||
</head> |
|||
<body> |
|||
<div id="anim-container"></div> |
|||
|
|||
<script src="node_modules/three/build/three.min.js"></script> |
|||
<script src="test.js"></script> |
|||
<script src="control.js"></script> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,140 @@ |
|||
console.log("Hello, Sky!"); |
|||
|
|||
/**** ☭☭☭☭☭☭☭☭☭☭☭☭ ****** |
|||
/☭☭☭☭ Parametri razni ☭☭☭☭ * |
|||
******☭☭☭☭☭☭☭☭☭☭☭☭******/ |
|||
|
|||
// Odmik kamere
|
|||
var odmik_kamere = 100; |
|||
|
|||
// Rotacija kamere
|
|||
var cam_rot_offset = 1; |
|||
|
|||
// Vidni kot
|
|||
var FOV = 140; |
|||
|
|||
// Sirina in visina test objekta
|
|||
var width = 25; |
|||
var height = 150; |
|||
var depth = 50; |
|||
|
|||
// Stevec, za razno animiranje
|
|||
var stevec = 0; |
|||
|
|||
// Parametri animacije
|
|||
var rotacijaX = 0.000; |
|||
var rotacijaY = 0.000; |
|||
var rotacijaZ = 0.000; |
|||
|
|||
// Pozicija
|
|||
var posX = 0; |
|||
var posY = 0; |
|||
var posZ = 0; |
|||
|
|||
// Zamik pri novem objektu
|
|||
var barva = 0.333; |
|||
var saturacija = 1; |
|||
var svetlost = 0.4; |
|||
|
|||
// Drugi parametri
|
|||
var wDiff = 0.5; |
|||
|
|||
// Scena, kamera in render
|
|||
scene = new THREE.Scene; |
|||
|
|||
camera = new THREE.PerspectiveCamera(FOV, window.innerWidth / window.innerHeight, 0.1, 2000); |
|||
camera.position.z = odmik_kamere; |
|||
|
|||
renderer = new THREE.WebGLRenderer({ |
|||
alpha: true |
|||
}); |
|||
renderer.setSize(window.innerWidth, window.innerHeight); |
|||
|
|||
// Belo ozadje
|
|||
renderer.setClearColor(0xFFFFFF, 1); |
|||
// Črno ozadje
|
|||
//renderer.setClearColor(0x000000, 1);
|
|||
|
|||
// Dodaj test skatlo
|
|||
var geo = new THREE.BoxGeometry(width, height, depth); |
|||
var mat = new THREE.MeshBasicMaterial({ |
|||
color: 0xff00ff, |
|||
wireframe: true |
|||
}); |
|||
var cube = new THREE.Mesh(geo, mat); |
|||
scene.add(cube); //
|
|||
|
|||
var objekti = [cube]; |
|||
|
|||
function render () { |
|||
requestAnimationFrame(render); |
|||
|
|||
stevec += 1; |
|||
renderer.render(scene, camera); |
|||
|
|||
objAnim(); |
|||
//camRotate();
|
|||
}; |
|||
|
|||
// Funkcija za animacijo objektov
|
|||
function objAnim() { |
|||
objekti.map(function (obj) { |
|||
obj.setRotationFromEuler(new THREE.Euler(rotacijaX, rotacijaY, rotacijaZ, 'XYZ')); |
|||
|
|||
/* |
|||
obj.rotation.y = -rotacijaX; |
|||
obj.rotation.x = rotacijaY; |
|||
obj.rotation.z = rotacijaZ; |
|||
*/ |
|||
|
|||
/* |
|||
const cor = 0.8; |
|||
obj.position.x += posX / 1000; |
|||
obj.position.x *= cor; |
|||
obj.position.y += posY / 1000; |
|||
obj.position.y *= cor; |
|||
obj.position.z += posZ / 1000; |
|||
obj.position.z *= cor; |
|||
*/ |
|||
}); |
|||
}; |
|||
|
|||
|
|||
var xAksa = new THREE.Vector3(0, 1, 0); |
|||
function camRotate () { |
|||
// rotiraj po z osi
|
|||
camera.translateX(cam_rot_offset); |
|||
camera.translateZ(odmik_kamere - Math.sqrt(Math.pow(odmik_kamere, 2) + Math.pow(cam_rot_offset, 2))); |
|||
|
|||
/* |
|||
camera.translateY(cam_rot_offset); |
|||
camera.translateX(odmik_kamere - Math.sqrt(Math.pow(odmik_kamere, 2) + Math.pow(cam_rot_offset, 2))); |
|||
|
|||
camera.translateY(cam_rot_offset); |
|||
camera.translateX(odmik_kamere - Math.sqrt(Math.pow(odmik_kamere, 2) + Math.pow(cam_rot_offset, 2))); |
|||
|
|||
|
|||
|
|||
camera.position.x = Math.sin((stevec % 10) / 10) * cam_rot_offset; |
|||
camera.position.y = Math.cos((stevec % 10) / 10) * cam_rot_offset; |
|||
*/ |
|||
|
|||
camera.lookAt(scene.position); |
|||
}; |
|||
|
|||
// Inicializiraj
|
|||
document.onreadystatechange = function () { |
|||
if (document.readyState === 'complete') { |
|||
document.getElementById("anim-container").appendChild(renderer.domElement); |
|||
|
|||
render(); |
|||
} |
|||
}; |
|||
|
|||
// Lep risajz
|
|||
function onWindowResize() { |
|||
camera.aspect = window.innerWidth / window.innerHeight; |
|||
camera.updateProjectionMatrix(); |
|||
renderer.setSize(window.innerWidth, window.innerHeight); |
|||
} |
|||
window.addEventListener('resize', onWindowResize, false); |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue