From a206a350a696a112aad2782399382f08350e5252 Mon Sep 17 00:00:00 2001 From: Giso Grimm Date: Wed, 14 Feb 2024 14:25:56 +0100 Subject: [PATCH] add mute buttons to web mixer --- libov | 2 +- ovclient.css | 7 ++- ovclient.js | 56 +++++++++++++++++------ webmixer.js | 125 ++++++++++++++++++++++++++------------------------- 4 files changed, 113 insertions(+), 77 deletions(-) diff --git a/libov b/libov index a1a6a67..dff567a 160000 --- a/libov +++ b/libov @@ -1 +1 @@ -Subproject commit a1a6a670475782727b8887e7e465dcfd1bec3492 +Subproject commit dff567a460dd589c43554f3a5ae647559c799191 diff --git a/ovclient.css b/ovclient.css index 67088f7..546c78e 100644 --- a/ovclient.css +++ b/ovclient.css @@ -44,7 +44,12 @@ body { -webkit-transition: .2s; transition: opacity .2s; } - +.mutebuttondiv { + float: right; +} +.mutebuttonlabel { + font-size: 70%; +} .fader::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; diff --git a/ovclient.js b/ovclient.js index 3ca7447..f20022d 100644 --- a/ovclient.js +++ b/ovclient.js @@ -192,6 +192,7 @@ socket.on("newfader", function(faderno,val){ return; fader="/touchosc/fader"+faderno; levelid="/touchosc/level"+faderno; + muteid="/touchosc/mute"+faderno; let el_div = document.createElement("div"); let el_mixer=document.getElementById("mixer"); if( el_mixer ){ @@ -200,15 +201,27 @@ socket.on("newfader", function(faderno,val){ val = val.replace(deviceid+'.',''); val = val.replace('bus.',''); if( val.startsWith("ego.")||(val == "monitor") ){ - classname = classname + " mixerego"; + classname = classname + " mixerego"; val = val.replace('ego.',''); } if( (val == "main") || (val == "reverb") ) - classname = classname + " mixerother"; + classname = classname + " mixerother"; el_div.setAttribute("class",classname); let el_lab=document.createElement("label"); el_lab.setAttribute("for",fader); + el_lab.setAttribute("class","mixerlabel"); el_lab.append(val); + let el_mutebuttondiv = document.createElement("div"); + el_mutebuttondiv.setAttribute("class", "mutebuttondiv"); + let el_span = el_mutebuttondiv.appendChild(document.createElement("span")); + el_span.setAttribute("class", "mutebuttonlabel"); + el_span.appendChild(document.createTextNode("mute ")); + let el_mutebutton = document.createElement("input"); + el_mutebuttondiv.appendChild(el_mutebutton); + el_mutebutton.setAttribute("class", "mutebutton"); + el_mutebutton.setAttribute("type", "checkbox"); + el_mutebutton.setAttribute("id", muteid); + //el_mutebutton.onchange = upload_session_gains; let el_fader=document.createElement("input"); el_fader.setAttribute("class","fader"); el_fader.setAttribute("type","range"); @@ -240,6 +253,7 @@ socket.on("newfader", function(faderno,val){ el_metertext.setAttribute("id","txt"+levelid); el_mixer.appendChild(el_div); el_div.appendChild(el_lab); + el_div.appendChild(el_mutebuttondiv); el_div.appendChild(document.createElement("br")); el_div.appendChild(el_fader); el_div.appendChild(el_gaintext); @@ -251,11 +265,18 @@ socket.on("newfader", function(faderno,val){ socket.on("updatefader", function(fader,val){ let fad=document.getElementById(fader); if( fad!=null ){ - fad.value=val; + fad.value=val; } let fadt=document.getElementById("txt"+fader); if( fadt!=null ){ - fadt.value=val.toFixed(1); + fadt.value=val.toFixed(1); + } +}); + +socket.on("updatemute", function(fader,val){ + let fad=document.getElementById(fader); + if( fad!=null ){ + fad.checked=(val == 1); } }); @@ -471,17 +492,24 @@ if( form ) function handleChange(e) { if( e.target.id.substr(0,3)=="txt" ){ - socket.emit("msg", { path: e.target.id.substr(3), value: e.target.valueAsNumber } ); - let fad=document.getElementById(e.target.id.substr(3)); - if( fad!=null ){ - fad.value=e.target.valueAsNumber; - } + socket.emit("msg", { path: e.target.id.substr(3), value: e.target.valueAsNumber } ); + let fad=document.getElementById(e.target.id.substr(3)); + if( fad!=null ){ + fad.value=e.target.valueAsNumber; + } }else{ - socket.emit("msg", { path: e.target.id, value: e.target.valueAsNumber } ); - let fadt=document.getElementById(e.target.id); - if( fadt!=null ){ - fadt.value=e.target.valueAsNumber.toFixed(1); - } + if(e.target.type == "checkbox" ){ + if(e.target.checked) + socket.emit("msg", { path: e.target.id, value: 1 } ); + else + socket.emit("msg", { path: e.target.id, value: 0 } ); + }else{ + socket.emit("msg", { path: e.target.id, value: e.target.valueAsNumber } ); + let fadt=document.getElementById(e.target.id); + if( fadt!=null ){ + fadt.value=e.target.valueAsNumber.toFixed(1); + } + } } } diff --git a/webmixer.js b/webmixer.js index 80d9a9e..818d93b 100644 --- a/webmixer.js +++ b/webmixer.js @@ -33,20 +33,20 @@ httpserver = http.createServer(function (req, res) { req.url.endsWith('.flac')|| req.url.endsWith('.caf') )){ - // download from local directory: - if( fs.existsSync('.'+req.url) ){ - var data = fs.readFileSync('.'+req.url); - res.writeHead(200); - res.end(data); - return; - } - // check in home directory: - if( fs.existsSync(homedir+req.url) ){ - var data = fs.readFileSync(homedir+req.url); - res.writeHead(200); - res.end(data); - return; - } + // download from local directory: + if( fs.existsSync('.'+req.url) ){ + var data = fs.readFileSync('.'+req.url); + res.writeHead(200); + res.end(data); + return; + } + // check in home directory: + if( fs.existsSync(homedir+req.url) ){ + var data = fs.readFileSync(homedir+req.url); + res.writeHead(200); + res.end(data); + return; + } } var sdir = path.dirname(process.argv[1]); if( sdir.length > 0 ) @@ -56,12 +56,12 @@ httpserver = http.createServer(function (req, res) { var jackrec = fs.readFileSync(sdir+'jackrec.html'); var ipaddr = os.hostname(); if( process.argv.length > 2 ) - ipaddr = process.argv[2]; + ipaddr = process.argv[2]; var devname = os.hostname(); if( process.argv.length > 3 ) - devname = process.argv[3]; + devname = process.argv[3]; try{ - devname = fs.readFileSync('devicename'); + devname = fs.readFileSync('devicename'); } catch(ee){ } @@ -130,55 +130,58 @@ io.on('connection', function (socket) { }); socket.on('config', function (obj) { var varlist = {}; - oscClient.send('/status', socket.id + ' connected'); - oscServer.on('message', async function(msg, rinfo) { - if( msg[0] == '/touchosc/scene' ){ - socket.emit('scene', 'scene'); - } - if( msg[0].startsWith('/touchosc/label') && (!msg[0].endsWith('/color')) && (msg[1].length>1)){ - socket.emit('newfader', msg[0].substr(15), msg[1] ); - } - if( msg[0].startsWith('/touchosc/fader') && (!msg[0].endsWith('/color')) ){ - socket.emit('updatefader', msg[0], msg[1] ); - } - if( msg[0].startsWith('/touchosc/level') ){ - socket.emit('updatefader', msg[0], msg[1] ); - } + oscClient.send('/status', socket.id + ' connected'); + oscServer.on('message', async function(msg, rinfo) { + if( msg[0] == '/touchosc/scene' ){ + socket.emit('scene', 'scene'); + } + if( msg[0].startsWith('/touchosc/label') && (!msg[0].endsWith('/color')) && (msg[1].length>1)){ + socket.emit('newfader', msg[0].substr(15), msg[1] ); + } + if( msg[0].startsWith('/touchosc/mute') && (!msg[0].endsWith('/color')) ){ + socket.emit('updatemute', msg[0], msg[1] ); + } + if( msg[0].startsWith('/touchosc/fader') && (!msg[0].endsWith('/color')) ){ + socket.emit('updatefader', msg[0], msg[1] ); + } + if( msg[0].startsWith('/touchosc/level') ){ + socket.emit('updatefader', msg[0], msg[1] ); + } if( msg[0] == '/vertexpos' ){ const vpvars = msg[1].split('/'); socket.emit('vertexpos', vpvars[3], msg[2], msg[3], msg[4] ); } - if( msg[0] == '/jackrec/start' ) - socket.emit('jackrecstart', ''); - if( msg[0] == '/jackrec/stop' ) - socket.emit('jackrecstop', ''); - if( msg[0] == '/jackrec/portlist' ) - socket.emit('jackrecportlist', ''); - if( msg[0] == '/jackrec/port' ) - socket.emit('jackrecaddport', msg[1] ); - if( msg[0] == '/jackrec/filelist' ) - socket.emit('jackrecfilelist', ''); - if( msg[0] == '/jackrec/file' ) - socket.emit('jackrecaddfile', msg[1] ); - if( msg[0] == '/jackrec/rectime' ) - socket.emit('jackrectime', msg[1] ); - if( msg[0] == '/jackrec/error' ) - socket.emit('jackrecerr', msg[1] ); - if( msg[0] == '/varlist/getval' ){ + if( msg[0] == '/jackrec/start' ) + socket.emit('jackrecstart', ''); + if( msg[0] == '/jackrec/stop' ) + socket.emit('jackrecstop', ''); + if( msg[0] == '/jackrec/portlist' ) + socket.emit('jackrecportlist', ''); + if( msg[0] == '/jackrec/port' ) + socket.emit('jackrecaddport', msg[1] ); + if( msg[0] == '/jackrec/filelist' ) + socket.emit('jackrecfilelist', ''); + if( msg[0] == '/jackrec/file' ) + socket.emit('jackrecaddfile', msg[1] ); + if( msg[0] == '/jackrec/rectime' ) + socket.emit('jackrectime', msg[1] ); + if( msg[0] == '/jackrec/error' ) + socket.emit('jackrecerr', msg[1] ); + if( msg[0] == '/varlist/getval' ){ if( varlist[msg[1]] !== null ){ socket.emit('updatevar',msg[1].replace(/[^a-zA-Z0-9]/g,''),msg[2]); } } - if( msg[0] == '/varlist/begin' ) + if( msg[0] == '/varlist/begin' ) varlist = {}; - if( msg[0] == '/varlist' ){ + if( msg[0] == '/varlist' ){ if( (msg[2] == 'f') && (msg[3]>0) ){ var grps = msg[1].split('/'); if( grps.length > 3 ) varlist[msg[1]] = {'path':msg[1],'range':msg[4],'comment':msg[5],'label':msg[1]}; } } - if( msg[0] == '/varlist/end' ){ + if( msg[0] == '/varlist/end' ){ var parents = []; var sparents = []; for(const key in varlist){ @@ -215,21 +218,21 @@ io.on('connection', function (socket) { oscClient.send(v.path+'/get','osc.udp://localhost:9000/','/varlist/getval'); } } - }); - oscClient.send('/touchosc/connect',16); - oscClient.send('/jackrec/listports'); - oscClient.send('/jackrec/listfiles'); + }); + oscClient.send('/touchosc/connect',16); + oscClient.send('/jackrec/listports'); + oscClient.send('/jackrec/listfiles'); oscClient.send('/sendvarsto','osc.udp://localhost:9000/','/varlist','/bus.'); oscClient.send('/*/ego/*/pos/get', 'osc.udp://localhost:9000/', '/vertexpos'); }); socket.on('message', function (obj) { - oscClient.send(obj); + oscClient.send(obj); }); socket.on('msg', function (obj) { - if( obj.hasOwnProperty('value') && (obj.value != null) ){ - oscClient.send( obj.path, obj.value ); - }else{ - oscClient.send( obj.path ); - } + if( obj.hasOwnProperty('value') && (obj.value != null) ){ + oscClient.send( obj.path, obj.value ); + }else{ + oscClient.send( obj.path ); + } }); });