g1smo
/
wavey-wind
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

WIP OSC in browser, quaternions

rob
Jurij Podgoršek 2021-08-12 18:10:19 +02:00
parent 65edb120d4
commit 8f061b4f06
13 changed files with 2776 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
#server.js# 100644
View File

@ -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)
}
})
})

24
#test.html# 100644
View File

@ -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>

1
.#server.js 120000
View File

@ -0,0 +1 @@
g1smo@dbn.20170:1628540355

4
anim.js
View File

@ -47,10 +47,6 @@ var svetlost = 0.4;
var wDiff = 0.5;
var hDiff = 0.5;
var gostota_obj = 2;
// Scena, kamera in render

2
control.html
View File

@ -1,7 +1,7 @@
<html >
<head>
<meta charset="UTF-8">
<title>cancerainbow control</title>
<title>wavey wind control</title>
<style type="text/css">
body {
margin: 0

9
control.js
View File

@ -121,6 +121,15 @@ callbacks = {
rotz: function(val) {
rotacijaZ = parseFloat(val);
},
posx: function(val) {
posX = parseFloat(val);
},
posy: function(val) {
posY = parseFloat(val);
},
posz: function(val) {
posZ = parseFloat(val);
},
obj_limit: function(val) {
obj_limit = parseInt(val);
},

2
index.html
View File

@ -1,7 +1,7 @@
<html >
<head>
<meta charset="UTF-8">
<title>cancerainbow</title>
<title>wavey wind</title>
<style type="text/css">
body {
margin: 0

24
osctl.js 100644
View File

@ -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);
});
});

2496
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

5
package.json
View File

@ -10,6 +10,9 @@
"ws": "^7.3.1"
},
"scripts": {
"start": "node server.js"
"start": "npx nodemon server.js"
},
"devDependencies": {
"nodemon": "^2.0.12"
}
}

22
server.js
View File

@ -11,6 +11,7 @@ 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',
@ -21,7 +22,8 @@ const server = http.Server(app);
// Odprti serijski OSC link
const scon = new osc.SerialPort({
devicePath: tty
devicePath: tty,
bitrate: 115200
})
scon.on('error', e => {
console.log('tty error', e)
@ -36,6 +38,10 @@ 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);
@ -61,9 +67,11 @@ const sendAll = (msg, wss, ws = null) => {
}
// Debug osc
/*
scon.on('osc', msg => {
console.log('tty osc', msg.address, ...msg.args)
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({
@ -80,11 +88,15 @@ wss.on('connection', function (ws) {
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:rotx:' + ax, wss)
sendAll('adjust:roty:' + ay, wss)
sendAll('adjust:rotz:' + az, wss)
sendAll('adjust:posx:' + ax, wss)
sendAll('adjust:posy:' + ay, wss)
sendAll('adjust:posz:' + az, wss)
break;
}
})

19
test.html 100644
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>

140
test.js 100644
View File

@ -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);