From 3acb9f442cb99356122529c8ed3172ba9be6a253 Mon Sep 17 00:00:00 2001 From: Eveline-97 Date: Sun, 23 Mar 2025 15:31:11 +0100 Subject: [PATCH] navigation bars --- djster_webcontrol.js | 1544 +++++++++++++++++++++--------------------- 1 file changed, 774 insertions(+), 770 deletions(-) diff --git a/djster_webcontrol.js b/djster_webcontrol.js index bf5a08e..84d8172 100644 --- a/djster_webcontrol.js +++ b/djster_webcontrol.js @@ -11,33 +11,33 @@ var elements = []; var body = []; var svg = []; var html = { - "*" : [{ - "key" : "css", - "val" : css - }, - { - "key" : "html", - "val" : elements - }, - { - "key" : "svg", - "val" : svg - }, - { - "key" : "function", - "val" : body - }] + "*": [{ + "key": "css", + "val": css + }, + { + "key": "html", + "val": elements + }, + { + "key": "svg", + "val": svg + }, + { + "key": "function", + "val": body + }] }; var dict = new Dict; var checkboxes = {}; for (var i = 0; i < 5; i++) { - checkboxes[i] = {}; - if (i == 0) checkboxes[i]["play"] = {}; - else { - checkboxes[i]["stream"] = {}; - checkboxes[i]["sorted"] = {}; - checkboxes[i]["overlap"] = {}; - } + checkboxes[i] = {}; + if (i == 0) checkboxes[i]["play"] = {}; + else { + checkboxes[i]["stream"] = {}; + checkboxes[i]["sorted"] = {}; + checkboxes[i]["overlap"] = {}; + } } var offset = 128; var active = "royalblue"; @@ -46,663 +46,669 @@ var alert = "red"; var textcolor = "#737373"; var background = "ivory"; -function setInstruments() -{ - instruments = arrayfromargs(arguments); - bang(); +function setInstruments() { + instruments = arrayfromargs(arguments); + bang(); } -function setPiece() -{ - pieces = arrayfromargs(arguments); - bang(); +function setPiece() { + pieces = arrayfromargs(arguments); + bang(); } -function bang() -{ +function bang() { -css = []; -elements = []; -body = []; -svg = []; -var html = { - "*" : [{ - "key" : "css", - "val" : css - }, - { - "key" : "html", - "val" : elements - }, - { - "key" : "svg", - "val" : svg - }, - { - "key" : "function", - "val" : body - }] -}; -css.push({ - "selector" : ".menu", - "props" : { - "background-color" : background, - "border" : "1px solid " + active, - "color" : active, - "padding" : "5px 5px", - "text-align" : "left", - "display" : "inline-block", - "font-size" : "12px", - "margin" : "4px 2px" - } - }); -css.push({ - "selector" : ".but", - "props" : { - "background-color" : background, - "border" : "1px solid " + active, - "color" : active, - "padding" : "4px 0", - "text-align" : "center", - "display" : "inline-block", - "font-size" : "11px", - "margin" : "4px 0px", - "width" : "20vw" - } - }); -css.push({ - "selector" : ".toggle", - "props" : { - "background-color" : background, - "border" : "1px solid " + active, - "color" : active, - "padding" : "4px 7.8px", - "margin" : "4px 0px" - } - }); -css.push({ - "selector" : ".slider", - "props" : { - "-webkit-appearance" : "none", - "height" : "6px", - "border-radius" : "6px", - "background" : "#737373", - "outline" : "none", - "opacity" : 0.7, - "-webkit-transition" : ".2s", - "transition" : "opacity .2s" - } - }); -css.push({ - "selector" : ".slider:hover", - "props" : { - "opacity" : 1 - } - }); -css.push({ - "selector" : ".slider::-webkit-slider-thumb", - "props" : { - "-webkit-appearance" : "none", - "appearance" : "none", - "width" : "20px", - "height" : "20px", - "border-radius" : "50%", - "background" : active - } - }); + css = []; + elements = []; + body = []; + svg = []; + var html = { + "*": [{ + "key": "css", + "val": css + }, + { + "key": "html", + "val": elements + }, + { + "key": "svg", + "val": svg + }, + { + "key": "function", + "val": body + }] + }; + css.push({ + "selector": ".menu", + "props": { + "background-color": background, + "border": "1px solid " + active, + "color": active, + "padding": "5px 5px", + "text-align": "left", + "display": "inline-block", + "font-size": "12px", + "margin": "4px 2px" + } + }); + css.push({ + "selector": ".but", + "props": { + "background-color": background, + "border": "1px solid " + active, + "color": active, + "padding": "4px 0", + "text-align": "center", + "display": "inline-block", + "font-size": "11px", + "margin": "4px 0px", + "width": "20vw" + } + }); + css.push({ + "selector": ".toggle", + "props": { + "background-color": background, + "border": "1px solid " + active, + "color": active, + "padding": "4px 7.8px", + "margin": "4px 0px" + } + }); + css.push({ + "selector": ".slider", + "props": { + "-webkit-appearance": "none", + "height": "6px", + "border-radius": "6px", + "background": "#737373", + "outline": "none", + "opacity": 0.7, + "-webkit-transition": ".2s", + "transition": "opacity .2s" + } + }); + css.push({ + "selector": ".slider:hover", + "props": { + "opacity": 1 + } + }); + css.push({ + "selector": ".slider::-webkit-slider-thumb", + "props": { + "-webkit-appearance": "none", + "appearance": "none", + "width": "20px", + "height": "20px", + "border-radius": "50%", + "background": active + } + }); + //css navigation bars + css.push({ + "selector": "#nav, #navPlayers", + "props": { + "z-index": "99", + "display": "flex !important", + "flex-flow": "row nowrap", + "position": "relative" + } + }); -svg.push({ - "new" : "rect", - "id" : "background", - "x" : 0, - "y" : 0, - "width" : "400px",//viewport width of iphone 8; iPhone 5: 320px - "height" : "667px",//viewport height of iphone 8; iPhone 5: 568px - "fill" : background, - }); - - //elements = []; - addButton("forms", "basic", "Basic Mode", "color:" + active, "document.getElementById('basicDIV').style.display='block';document.getElementById('expertDIV').style.display='none';document.getElementById('roomDIV').style.display='none';document.getElementById('spat').style.display='none';document.getElementById('systemDIV').style.display='none';document.getElementById('manualDIV').style.display='none';document.getElementById('basic').style['color']='" + active + "';document.getElementById('expert').style['color']='" + nonactive + "';document.getElementById('room').style['color']='" + nonactive + "';document.getElementById('system').style['color']='" + nonactive + "';document.getElementById('manual').style['color']='" + nonactive + "';"); - addButton("forms", "expert", "Expert Mode", "color:" + nonactive, "document.getElementById('basicDIV').style.display='none';document.getElementById('expertDIV').style.display='block';document.getElementById('roomDIV').style.display='none';document.getElementById('spat').style.display='none';document.getElementById('systemDIV').style.display='none';document.getElementById('manualDIV').style.display='none';document.getElementById('basic').style['color']='" + nonactive + "';document.getElementById('expert').style['color']='" + active + "';document.getElementById('room').style['color']='" + nonactive + "';document.getElementById('system').style['color']='" + nonactive + "';document.getElementById('manual').style['color']='" + nonactive + "';"); - addButton("forms", "room", "Room Settings", "width:24vw;color:" + nonactive, "document.getElementById('basicDIV').style.display='none';document.getElementById('expertDIV').style.display='none';document.getElementById('roomDIV').style.display='block';document.getElementById('spat').style.display='block';document.getElementById('systemDIV').style.display='none';document.getElementById('manualDIV').style.display='none';document.getElementById('basic').style['color']='" + nonactive + "';document.getElementById('expert').style['color']='" + nonactive + "';document.getElementById('room').style['color']='" + active + "';document.getElementById('system').style['color']='" + nonactive + "';document.getElementById('manual').style['color']='" + nonactive + "';"); - addButton("forms", "system", "System", "width:18vw;color:" + nonactive, "document.getElementById('basicDIV').style.display='none';document.getElementById('expertDIV').style.display='none';document.getElementById('roomDIV').style.display='none';document.getElementById('spat').style.display='none';document.getElementById('systemDIV').style.display='block';document.getElementById('manualDIV').style.display='none';document.getElementById('basic').style['bcolor']='" + nonactive + "';document.getElementById('expert').style['color']='" + nonactive + "';document.getElementById('room').style['color']='" + nonactive + "';document.getElementById('system').style['color']='" + active + "';document.getElementById('manual').style['color']='" + nonactive + "';"); - addButton("forms", "manual", "Manual", "width:18vw;color:" + nonactive, "document.getElementById('basicDIV').style.display='none';document.getElementById('expertDIV').style.display='none';document.getElementById('roomDIV').style.display='none';document.getElementById('spat').style.display='none';document.getElementById('systemDIV').style.display='none';document.getElementById('manualDIV').style.display='block';document.getElementById('basic').style['color']='" + nonactive + "';document.getElementById('expert').style['color']='" + nonactive + "';document.getElementById('room').style['color']='" + nonactive + "';document.getElementById('system').style['color']='" + nonactive + "';document.getElementById('manual').style['color']='" + active + "';"); - - addDiv("forms", "basicDIV", "display:block"); - addDiv("forms", "expertDIV", "display:none"); - addDiv("forms", "roomDIV", "display:none"); - addDiv("forms", "systemDIV", "display:none"); - addDiv("forms", "manualDIV", "display:none"); - addDiv("expertDIV", "player0", "display:block"); - addDiv("expertDIV", "player1", "display:none"); - addDiv("expertDIV", "player2", "display:none"); - addDiv("expertDIV", "player3", "display:none"); - -/* - elements.push( - { - "new" : "p", - "parent" : "basicDIV", - "id" : "welcome", - "text" : "lz Musical Soundscape Intervention", - "style" : { - "top" : "-10px", - "left" : "10px", - "font-family" : "Arial", - "margin-left" : "10px" - } - }); -*/ + svg.push({ + "new": "rect", + "id": "background", + "x": 0, + "y": 0, + "width": "1133px",//viewport width of iPad mini; iphone 8: 400px; iPhone 5: 320px + "height": "744px",//viewport height of iPad mini; iphone 8: 667px; iPhone 5: 568px + "fill": background, + }); - addButton("expertDIV", "p0", "Player 1", "width:24.9vw;color:" + active, "document.getElementById('p0').style['color']='" + active + "';document.getElementById('p1').style['color']='" + nonactive + "';document.getElementById('p2').style['color']='" + nonactive + "';document.getElementById('p3').style['color']='" + nonactive + "';document.getElementById('player0').style.display='block';document.getElementById('player1').style.display='none';document.getElementById('player2').style.display='none';document.getElementById('player3').style.display='none';"); - addButton("expertDIV", "p1", "Player 2", "width:24.9vw;color:" + nonactive, "document.getElementById('p0').style['color']='" + nonactive + "';document.getElementById('p1').style['color']='" + active + "';document.getElementById('p2').style['color']='" + nonactive + "';document.getElementById('p3').style['color']='" + nonactive + "';document.getElementById('player0').style.display='none';document.getElementById('player1').style.display='block';document.getElementById('player2').style.display='none';document.getElementById('player3').style.display='none';"); - addButton("expertDIV", "p2", "Player 3", "width:24.9vw;color:" + nonactive, "document.getElementById('p0').style['color']='" + nonactive + "';document.getElementById('p1').style['color']='" + nonactive + "';document.getElementById('p2').style['color']='" + active + "';document.getElementById('p3').style['color']='" + nonactive + "';document.getElementById('player0').style.display='none';document.getElementById('player1').style.display='none';document.getElementById('player2').style.display='block';document.getElementById('player3').style.display='none';"); - addButton("expertDIV", "p3", "Player 4", "width:24.9vw;color:" + nonactive, "document.getElementById('p0').style['color']='" + nonactive + "';document.getElementById('p1').style['color']='" + nonactive + "';document.getElementById('p2').style['color']='" + nonactive + "';document.getElementById('p3').style['color']='" + active + "';document.getElementById('player0').style.display='none';document.getElementById('player1').style.display='none';document.getElementById('player2').style.display='none';document.getElementById('player3').style.display='block';"); - - - addMenu(-1, "basicDIV", "Piece", "piece", 36, 0, pieces, "wide"); - addMenu(-1, "basicDIV", "Playing Mode", "mode", 76, 0, modes, "wide"); - addText(-1, "basicDIV", "Playing Hours", "oph", 116, "wide"); - addCheckbox(-1, "basicDIV", "Play", "play", 152, 0, "left"); - addSlider(-1, "basicDIV", "Tempo", "tempo", 2, [1, 200], 0.1, 60, "this.value", "this.value"); - addSlider(-1, "basicDIV", "Duration", "duration", 3, [60, 600], 5, 300, "this.value", "this.value"); - addSlider(-1, "basicDIV", "Silence", "silence", 4, [10, 60], 1, 10, "this.value", "this.value"); - addSlider(-1, "basicDIV", "Volume (dB)", "gain", 5, [-70, 6], 1, -10, "this.value", "this.value"); - - for (var i = 0; i < 4; i++) { - var j = 0; - addMenu(i, "player" + i, "Instrument", "instrument", 36, 0, instruments, "narrow"); - post("instruments", instruments, "\n"); - addMenu(i, "player" + i, "Scale", "scale", 66, 0, scales, "narrow"); - addMenu(i, "player" + i, "Meter", "meter", 96, 11, meters, "narrow"); - addCheckbox(i, "player" + i, "On", "stream", 36, 0, "right"); - addCheckbox(i, "player" + i, "Sorted", "sorted", 66, 0, "right"); - addCheckbox(i, "player" + i, "Overlap", "overlap", 96, 0, "right"); - addSlider(i, "player" + i, "Outset Pulses", "outset_pulses", j++, [1, 16], 1, 1, "this.value", "this.value"); - addSlider(i, "player" + i, "Eventfulness", "eventfulness", j++, [0, 100], 1, 100, "this.value", "this.value"); - addSlider(i, "player" + i, "Event Length", "event_length", j++, [5, 1000], 1, 100, "this.value", "this.value"); - addSlider(i, "player" + i, "Metriclarity", "metriclarity", j++, [0, 100], 1, 100, "this.value", "this.value"); - addSlider(i, "player" + i, "Harmoniclarity", "harmoniclarity", j++, [0, 100], 1, 50, "this.value", "this.value"); - addSlider(i, "player" + i, "Chordal Weight", "chordal_weight", j++, [1, 5], 1, 1, "this.value", "this.value"); - addSlider(i, "player" + i, "Mel. Cohesion", "melodic_cohesion", j++, [-100, 100], 1, 50, "this.value", "this.value"); - addSlider(i, "player" + i, "Melody Scope", "melody_scope", j++, [0, 36], 1, 7, "this.value", "this.value"); - addSlider(i, "player" + i, "Tonic Pitch", "tonic_pitch", j++, [12, 96], 1, 36, "['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'][Number(this.value) % 12] + (parseInt((this.value) / 12) - 2)", "this.value"); - addSlider(i, "player" + i, "Pitch Center", "pitch_center", j++, [12, 96], 1, 60, "['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'][Number(this.value) % 12] + (parseInt((this.value) / 12) - 2)", "this.value"); - addSlider(i, "player" + i, "Pitch Range", "pitch_range", j++, [0, 36], 1, 7, "this.value", "this.value"); - addSlider(i, "player" + i, "Dynamics", "dynamics", j++, [0, 127], 1, 64, "this.value", "this.value"); - addSlider(i, "player" + i, "Attenuation", "attenuation", j++, [0, 100], 1, 15, "this.value", "this.value"); - } - createSpatBox(); - addSlider(-1, "roomDIV", "Level 1 (dB)", "level_1", 2, [-70, 6], 1, -10, "this.value", "this.value"); - addSlider(-1, "roomDIV", "Level 2 (dB)", "level_2", 3, [-70, 6], 1, -10, "this.value", "this.value"); - addSlider(-1, "roomDIV", "Level 3 (dB)", "level_3", 4, [-70, 6], 1, -10, "this.value", "this.value"); - addSlider(-1, "roomDIV", "Level 4 (dB)", "level_4", 5, [-70, 6], 1, -10, "this.value", "this.value"); - addSlider(-1, "roomDIV", "Room Size", "roomsize", 6, [1, 300], 1, 35, "this.value", "this.value");// - addSlider(-1, "roomDIV", "Rev. Time (ms)", "amount", 7, [0.5, 15], 0.1, 5, "this.value", "this.value");// - addSlider(-1, "roomDIV", "Spread", "spread", 8, [0, 100], 1, 23, "this.value", "this.value");// - addSlider(-1, "roomDIV", "Bandwidth", "bandwidth", 9, [0, 100], 1, 50, "this.value", "this.value"); //50 - addSlider(-1, "roomDIV", "Damping", "damping", 10, [0, 100], 1, 70, "this.value", "this.value");// - addSlider(-1, "roomDIV", "Early", "early", 11, [0, 100], 1, 25, "this.value", "this.value");// - addSlider(-1, "roomDIV", "Tail", "tail", 12, [0, 100], 1, 25, "this.value", "this.value");// - addSlider(-1, "roomDIV", "Dry", "dry", 13, [0, 100], 1, 100, "this.value", "this.value");// - + //elements = []; + //nav for buttons + addDiv("forms", "nav", "display: block"); + //add buttons to navigation instead of to #forms directly + addButton("nav", "basic", "Basic Mode", "color:" + active, "document.getElementById('basicDIV').style.display='block';document.getElementById('expertDIV').style.display='none';document.getElementById('roomDIV').style.display='none';document.getElementById('spat').style.display='none';document.getElementById('systemDIV').style.display='none';document.getElementById('manualDIV').style.display='none';document.getElementById('basic').style['color']='" + active + "';document.getElementById('expert').style['color']='" + nonactive + "';document.getElementById('room').style['color']='" + nonactive + "';document.getElementById('system').style['color']='" + nonactive + "';document.getElementById('manual').style['color']='" + nonactive + "';"); + addButton("nav", "expert", "Expert Mode", "color:" + nonactive, "document.getElementById('basicDIV').style.display='none';document.getElementById('expertDIV').style.display='block';document.getElementById('roomDIV').style.display='none';document.getElementById('spat').style.display='none';document.getElementById('systemDIV').style.display='none';document.getElementById('manualDIV').style.display='none';document.getElementById('basic').style['color']='" + nonactive + "';document.getElementById('expert').style['color']='" + active + "';document.getElementById('room').style['color']='" + nonactive + "';document.getElementById('system').style['color']='" + nonactive + "';document.getElementById('manual').style['color']='" + nonactive + "';"); + addButton("nav", "room", "Room Settings", "width:24vw;color:" + nonactive, "document.getElementById('basicDIV').style.display='none';document.getElementById('expertDIV').style.display='none';document.getElementById('roomDIV').style.display='block';document.getElementById('spat').style.display='block';document.getElementById('systemDIV').style.display='none';document.getElementById('manualDIV').style.display='none';document.getElementById('basic').style['color']='" + nonactive + "';document.getElementById('expert').style['color']='" + nonactive + "';document.getElementById('room').style['color']='" + active + "';document.getElementById('system').style['color']='" + nonactive + "';document.getElementById('manual').style['color']='" + nonactive + "';"); + addButton("nav", "system", "System", "width:18vw;color:" + nonactive, "document.getElementById('basicDIV').style.display='none';document.getElementById('expertDIV').style.display='none';document.getElementById('roomDIV').style.display='none';document.getElementById('spat').style.display='none';document.getElementById('systemDIV').style.display='block';document.getElementById('manualDIV').style.display='none';document.getElementById('basic').style['bcolor']='" + nonactive + "';document.getElementById('expert').style['color']='" + nonactive + "';document.getElementById('room').style['color']='" + nonactive + "';document.getElementById('system').style['color']='" + active + "';document.getElementById('manual').style['color']='" + nonactive + "';"); + addButton("nav", "manual", "Manual", "width:18vw;color:" + nonactive, "document.getElementById('basicDIV').style.display='none';document.getElementById('expertDIV').style.display='none';document.getElementById('roomDIV').style.display='none';document.getElementById('spat').style.display='none';document.getElementById('systemDIV').style.display='none';document.getElementById('manualDIV').style.display='block';document.getElementById('basic').style['color']='" + nonactive + "';document.getElementById('expert').style['color']='" + nonactive + "';document.getElementById('room').style['color']='" + nonactive + "';document.getElementById('system').style['color']='" + nonactive + "';document.getElementById('manual').style['color']='" + active + "';"); - elements.push( - { - "new" : "h2", - "parent" : "systemDIV", - "id" : "updateheader", - "text" : "Updates", - "style" : { - "left" : "10px", - "font-family" : "Arial", - "margin-left" : "10px" - } - }); - - elements.push( - { - "new" : "p", - "parent" : "systemDIV", - "id" : "update", - "text" : "Check for a new software version. This requires an active Internet connection. Please refer to manual for further instructions.", - "style" : { - "left" : "10px", - "font-family" : "Arial", - "font-size" : 12, - "margin-left" : "10px" - } - }); - - addButton("systemDIV", "versionbutton", "Check for New Version", "width:125px;background-color:" + nonactive + ";margin-left:125px;", "none"); + addDiv("forms", "basicDIV", "display:block"); + addDiv("forms", "expertDIV", "display:none"); + addDiv("forms", "roomDIV", "display:none"); + addDiv("forms", "systemDIV", "display:none"); + addDiv("forms", "manualDIV", "display:none"); + addDiv("expertDIV", "player0", "display:block"); + addDiv("expertDIV", "player1", "display:none"); + addDiv("expertDIV", "player2", "display:none"); + addDiv("expertDIV", "player3", "display:none"); - elements.push( - { - "new" : "h2", - "parent" : "systemDIV", - "id" : "shutdownheader", - "text" : "Shut Down", - "style" : { - "left" : "10px", - "font-family" : "Arial", - "margin-left" : "10px" - } - }); - - elements.push( - { - "new" : "p", - "parent" : "systemDIV", - "id" : "shutdown", - "text" : "Shutting the system down, will require you to unplug and replug the speakers before they can be operated again.", - "style" : { - "left" : "10px", - "font-family" : "Arial", - "font-size" : 12, - "margin-left" : "10px" - } - }); - - addButton("systemDIV", "cancelbutton", "Cancel", "background-color:" + nonactive + ";margin-left:20vw;", "document.getElementById('basicDIV').style.display='block';document.getElementById('expertDIV').style.display='none';document.getElementById('roomDIV').style.display='none';document.getElementById('spat').style.display='none';document.getElementById('systemDIV').style.display='none';document.getElementById('manualDIV').style.display='none';document.getElementById('basic').style['background-color']='" + active + "';document.getElementById('expert').style['background-color']='" + nonactive + "';document.getElementById('room').style['background-color']='" + nonactive + "';document.getElementById('system').style['background-color']='" + nonactive + "';document.getElementById('manual').style['background-color']='" + nonactive + "';"); - addButton("systemDIV", "proceedbutton", "Shut Down", "background-color:" + alert + ";margin-left:15vw;", "drawsocket.send({system: {shutdown : true}})"); - - elements.push( - { - "new" : "iframe", - "parent" : "manualDIV", - "id" : "manualdoc", - "style" : { - "position" : "absolute", - "top" : "0px", - "left" : "0px", - "width" : "100vw", - "height" : "100vh" - }, - "src" : "public/manual.html" - }); - - dict.parse(JSON.stringify(html)); - outlet(0, "dictionary", dict.name); - outlet(1, "done"); + /* + elements.push( + { + "new" : "p", + "parent" : "basicDIV", + "id" : "welcome", + "text" : "lz Musical Soundscape Intervention", + "style" : { + "top" : "-10px", + "left" : "10px", + "font-family" : "Arial", + "margin-left" : "10px" + } + }); + */ + + //navPlayers nav bar for player selectors + addDiv("expertDIV", "navPlayers", "display:block"); + //add buttons to navPlayers instead of to expertDIV directly + addButton("navPlayers", "p0", "Player 1", "width:24.9vw;color:" + active, "document.getElementById('p0').style['color']='" + active + "';document.getElementById('p1').style['color']='" + nonactive + "';document.getElementById('p2').style['color']='" + nonactive + "';document.getElementById('p3').style['color']='" + nonactive + "';document.getElementById('player0').style.display='block';document.getElementById('player1').style.display='none';document.getElementById('player2').style.display='none';document.getElementById('player3').style.display='none';"); + addButton("navPlayers", "p1", "Player 2", "width:24.9vw;color:" + nonactive, "document.getElementById('p0').style['color']='" + nonactive + "';document.getElementById('p1').style['color']='" + active + "';document.getElementById('p2').style['color']='" + nonactive + "';document.getElementById('p3').style['color']='" + nonactive + "';document.getElementById('player0').style.display='none';document.getElementById('player1').style.display='block';document.getElementById('player2').style.display='none';document.getElementById('player3').style.display='none';"); + addButton("navPlayers", "p2", "Player 3", "width:24.9vw;color:" + nonactive, "document.getElementById('p0').style['color']='" + nonactive + "';document.getElementById('p1').style['color']='" + nonactive + "';document.getElementById('p2').style['color']='" + active + "';document.getElementById('p3').style['color']='" + nonactive + "';document.getElementById('player0').style.display='none';document.getElementById('player1').style.display='none';document.getElementById('player2').style.display='block';document.getElementById('player3').style.display='none';"); + addButton("navPlayers", "p3", "Player 4", "width:24.9vw;color:" + nonactive, "document.getElementById('p0').style['color']='" + nonactive + "';document.getElementById('p1').style['color']='" + nonactive + "';document.getElementById('p2').style['color']='" + nonactive + "';document.getElementById('p3').style['color']='" + active + "';document.getElementById('player0').style.display='none';document.getElementById('player1').style.display='none';document.getElementById('player2').style.display='none';document.getElementById('player3').style.display='block';"); + + addMenu(-1, "basicDIV", "Piece", "piece", 36, 0, pieces, "wide"); + addMenu(-1, "basicDIV", "Playing Mode", "mode", 76, 0, modes, "wide"); + addText(-1, "basicDIV", "Playing Hours", "oph", 116, "wide"); + addCheckbox(-1, "basicDIV", "Play", "play", 152, 0, "left"); + addSlider(-1, "basicDIV", "Tempo", "tempo", 2, [1, 200], 0.1, 60, "this.value", "this.value"); + addSlider(-1, "basicDIV", "Duration", "duration", 3, [60, 600], 5, 300, "this.value", "this.value"); + addSlider(-1, "basicDIV", "Silence", "silence", 4, [10, 60], 1, 10, "this.value", "this.value"); + addSlider(-1, "basicDIV", "Volume (dB)", "gain", 5, [-70, 6], 1, -10, "this.value", "this.value"); + + for (var i = 0; i < 4; i++) { + var j = 0; + addMenu(i, "player" + i, "Instrument", "instrument", 36, 0, instruments, "narrow"); + post("instruments", instruments, "\n"); + addMenu(i, "player" + i, "Scale", "scale", 66, 0, scales, "narrow"); + addMenu(i, "player" + i, "Meter", "meter", 96, 11, meters, "narrow"); + addCheckbox(i, "player" + i, "On", "stream", 36, 0, "right"); + addCheckbox(i, "player" + i, "Sorted", "sorted", 66, 0, "right"); + addCheckbox(i, "player" + i, "Overlap", "overlap", 96, 0, "right"); + addSlider(i, "player" + i, "Outset Pulses", "outset_pulses", j++, [1, 16], 1, 1, "this.value", "this.value"); + addSlider(i, "player" + i, "Eventfulness", "eventfulness", j++, [0, 100], 1, 100, "this.value", "this.value"); + addSlider(i, "player" + i, "Event Length", "event_length", j++, [5, 1000], 1, 100, "this.value", "this.value"); + addSlider(i, "player" + i, "Metriclarity", "metriclarity", j++, [0, 100], 1, 100, "this.value", "this.value"); + addSlider(i, "player" + i, "Harmoniclarity", "harmoniclarity", j++, [0, 100], 1, 50, "this.value", "this.value"); + addSlider(i, "player" + i, "Chordal Weight", "chordal_weight", j++, [1, 5], 1, 1, "this.value", "this.value"); + addSlider(i, "player" + i, "Mel. Cohesion", "melodic_cohesion", j++, [-100, 100], 1, 50, "this.value", "this.value"); + addSlider(i, "player" + i, "Melody Scope", "melody_scope", j++, [0, 36], 1, 7, "this.value", "this.value"); + addSlider(i, "player" + i, "Tonic Pitch", "tonic_pitch", j++, [12, 96], 1, 36, "['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'][Number(this.value) % 12] + (parseInt((this.value) / 12) - 2)", "this.value"); + addSlider(i, "player" + i, "Pitch Center", "pitch_center", j++, [12, 96], 1, 60, "['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'][Number(this.value) % 12] + (parseInt((this.value) / 12) - 2)", "this.value"); + addSlider(i, "player" + i, "Pitch Range", "pitch_range", j++, [0, 36], 1, 7, "this.value", "this.value"); + addSlider(i, "player" + i, "Dynamics", "dynamics", j++, [0, 127], 1, 64, "this.value", "this.value"); + addSlider(i, "player" + i, "Attenuation", "attenuation", j++, [0, 100], 1, 15, "this.value", "this.value"); + } + createSpatBox(); + addSlider(-1, "roomDIV", "Level 1 (dB)", "level_1", 2, [-70, 6], 1, -10, "this.value", "this.value"); + addSlider(-1, "roomDIV", "Level 2 (dB)", "level_2", 3, [-70, 6], 1, -10, "this.value", "this.value"); + addSlider(-1, "roomDIV", "Level 3 (dB)", "level_3", 4, [-70, 6], 1, -10, "this.value", "this.value"); + addSlider(-1, "roomDIV", "Level 4 (dB)", "level_4", 5, [-70, 6], 1, -10, "this.value", "this.value"); + addSlider(-1, "roomDIV", "Room Size", "roomsize", 6, [1, 300], 1, 35, "this.value", "this.value");// + addSlider(-1, "roomDIV", "Rev. Time (ms)", "amount", 7, [0.5, 15], 0.1, 5, "this.value", "this.value");// + addSlider(-1, "roomDIV", "Spread", "spread", 8, [0, 100], 1, 23, "this.value", "this.value");// + addSlider(-1, "roomDIV", "Bandwidth", "bandwidth", 9, [0, 100], 1, 50, "this.value", "this.value"); //50 + addSlider(-1, "roomDIV", "Damping", "damping", 10, [0, 100], 1, 70, "this.value", "this.value");// + addSlider(-1, "roomDIV", "Early", "early", 11, [0, 100], 1, 25, "this.value", "this.value");// + addSlider(-1, "roomDIV", "Tail", "tail", 12, [0, 100], 1, 25, "this.value", "this.value");// + addSlider(-1, "roomDIV", "Dry", "dry", 13, [0, 100], 1, 100, "this.value", "this.value");// + + + elements.push( + { + "new": "h2", + "parent": "systemDIV", + "id": "updateheader", + "text": "Updates", + "style": { + "left": "10px", + "font-family": "Arial", + "margin-left": "10px" + } + }); + + elements.push( + { + "new": "p", + "parent": "systemDIV", + "id": "update", + "text": "Check for a new software version. This requires an active Internet connection. Please refer to manual for further instructions.", + "style": { + "left": "10px", + "font-family": "Arial", + "font-size": 12, + "margin-left": "10px" + } + }); + + addButton("systemDIV", "versionbutton", "Check for New Version", "width:125px;background-color:" + nonactive + ";margin-left:125px;", "none"); + + elements.push( + { + "new": "h2", + "parent": "systemDIV", + "id": "shutdownheader", + "text": "Shut Down", + "style": { + "left": "10px", + "font-family": "Arial", + "margin-left": "10px" + } + }); + + elements.push( + { + "new": "p", + "parent": "systemDIV", + "id": "shutdown", + "text": "Shutting the system down, will require you to unplug and replug the speakers before they can be operated again.", + "style": { + "left": "10px", + "font-family": "Arial", + "font-size": 12, + "margin-left": "10px" + } + }); + + addButton("systemDIV", "cancelbutton", "Cancel", "background-color:" + nonactive + ";margin-left:20vw;", "document.getElementById('basicDIV').style.display='block';document.getElementById('expertDIV').style.display='none';document.getElementById('roomDIV').style.display='none';document.getElementById('spat').style.display='none';document.getElementById('systemDIV').style.display='none';document.getElementById('manualDIV').style.display='none';document.getElementById('basic').style['background-color']='" + active + "';document.getElementById('expert').style['background-color']='" + nonactive + "';document.getElementById('room').style['background-color']='" + nonactive + "';document.getElementById('system').style['background-color']='" + nonactive + "';document.getElementById('manual').style['background-color']='" + nonactive + "';"); + addButton("systemDIV", "proceedbutton", "Shut Down", "background-color:" + alert + ";margin-left:15vw;", "drawsocket.send({system: {shutdown : true}})"); + + elements.push( + { + "new": "iframe", + "parent": "manualDIV", + "id": "manualdoc", + "style": { + "position": "absolute", + "top": "0px", + "left": "0px", + "width": "100vw", + "height": "100vh" + }, + "src": "public/manual.html" + }); + + dict.parse(JSON.stringify(html)); + outlet(0, "dictionary", dict.name); + outlet(1, "done"); } -function addDiv(parent, id, style) -{ - var obj = { - "parent" : parent, - "new" : "div", - "id" : id - }; - if (style != null) { - obj.style = {}; - var properties = style.split(";"); - for (var i = 0; i < properties.length; i++){ - obj.style[properties[i].split(":")[0]] = properties[i].split(":")[1]; - } - } - elements.push(obj); +function addDiv(parent, id, style) { + var obj = { + "parent": parent, + "new": "div", + "id": id + }; + if (style != null) { + obj.style = {}; + var properties = style.split(";"); + for (var i = 0; i < properties.length; i++) { + obj.style[properties[i].split(":")[0]] = properties[i].split(":")[1]; + } + } + elements.push(obj); } -function addButton(parent, id, text, style, onclick) -{ - var obj = { - "parent" : parent, - "id" : id, - "new" : "button", - "text" : text, - "class" : "but", - "onclick" : onclick - }; - if (style != null) { - obj.style = {}; - var properties = style.split(";"); - for (var i = 0; i < properties.length; i++){ - obj.style[properties[i].split(":")[0]] = properties[i].split(":")[1]; - } +function addButton(parent, id, text, style, onclick) { + var obj = { + "parent": parent, + "id": id, + "new": "button", + "text": text, + "class": "but", + "onclick": onclick + }; + if (style != null) { + obj.style = {}; + var properties = style.split(";"); + for (var i = 0; i < properties.length; i++) { + obj.style[properties[i].split(":")[0]] = properties[i].split(":")[1]; + } - } - elements.push(obj); + } + elements.push(obj); } -function addSlider(index, parent, name, id, position, range, step, value, _out, _in) -{ - switch (id) { - case "tonic_pitch" : - case "pitch_center" : - value = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'][value % 12] + (parseInt((value) / 12) - 2); - break; - } +function addSlider(index, parent, name, id, position, range, step, value, _out, _in) { + switch (id) { + case "tonic_pitch": + case "pitch_center": + value = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'][value % 12] + (parseInt((value) / 12) - 2); + break; + } - var obj = [{ - "parent" : parent, - "new" : "label", - "for" : id + "_" + index, - "id" : id + "-label" + "_" + index, - "text" : name + ":", - "style" : { - "position" : "absolute", - "top" : (offset - 1 + position * 30) + "px", - "left" : "10px", - "width" : "160px", - "font-family" : "Arial", - "font-size" : 10, - "color" : textcolor - } - }, - { - "parent" : parent, - "new" : "input", - "type" : "text", - "id" : id + "_num" + "_" + index, - "name" : id + "_num" + "_" + index, - "size" : 10, - "value" : value, - "disabled" : true, - "style" : { - "position" : "absolute", - "top" : (offset + position * 30) + "px", - "left" : "320px", - "width" : "30px", - "color" : textcolor - } - }, - { - "parent" : parent, - "new" : "input", - "type" : "range", - "id" : id + "_" + index, - "name" : id + "_" + index, - "class" : "slider", - "min" : range[0], - "max" : range[1], - "value" : value, - "step" : step, - "style" : { - "position" : "absolute", - "top" : (offset + 5 + position * 30) + "px", - "left" : "135px", - "width" : "170px" - }, - "oninput" : "[drawsocket.send({" + "djster" + ": {player: " + (index + 1) + ", " + id + ": " + _in + "}}), drawsocket.input({ key : 'html', val : { id : '" + id + "_num" + "_" + index + "', value : " + _out + "}})]" - }]; - - var obj2 = { - "id" : id + "_value" + "_" + index, - "args" : "v", - "body" : "document.getElementById('" + id + "_" + index + "').value = v;document.getElementById('" + id + "_num" + "_" + index + "').value = v" - }; - - elements.push(obj[0]); - elements.push(obj[1]); - elements.push(obj[2]); - body.push(obj2); + var obj = [{ + "parent": parent, + "new": "label", + "for": id + "_" + index, + "id": id + "-label" + "_" + index, + "text": name + ":", + "style": { + "position": "absolute", + "top": (offset - 1 + position * 30) + "px", + "left": "10px", + "width": "160px", + "font-family": "Arial", + "font-size": 10, + "color": textcolor + } + }, + { + "parent": parent, + "new": "input", + "type": "text", + "id": id + "_num" + "_" + index, + "name": id + "_num" + "_" + index, + "size": 10, + "value": value, + "disabled": true, + "style": { + "position": "absolute", + "top": (offset + position * 30) + "px", + "left": "320px", + "width": "30px", + "color": textcolor + } + }, + { + "parent": parent, + "new": "input", + "type": "range", + "id": id + "_" + index, + "name": id + "_" + index, + "class": "slider", + "min": range[0], + "max": range[1], + "value": value, + "step": step, + "style": { + "position": "absolute", + "top": (offset + 5 + position * 30) + "px", + "left": "135px", + "width": "170px" + }, + "oninput": "[drawsocket.send({" + "djster" + ": {player: " + (index + 1) + ", " + id + ": " + _in + "}}), drawsocket.input({ key : 'html', val : { id : '" + id + "_num" + "_" + index + "', value : " + _out + "}})]" + }]; + + var obj2 = { + "id": id + "_value" + "_" + index, + "args": "v", + "body": "document.getElementById('" + id + "_" + index + "').value = v;document.getElementById('" + id + "_num" + "_" + index + "').value = v" + }; + + elements.push(obj[0]); + elements.push(obj[1]); + elements.push(obj[2]); + body.push(obj2); } -function addMenu(index, parent, name, id, position, value, array, type) -{ - var width = (type == "wide") ? 180 : 90; - child = []; - for (var i = 0; i < array.length; i++) { - var id2 = "_" + array[i].replace(/#|\.|\s+/g, '_').replace(/\+/g, '-').toLowerCase() + "_" + index; - if (i != value) { - child.push({ - "new" : "option", - "id" : id2, - "value" : array[i], - "text" : array[i] - }); - } - else { - child.push({ - "new" : "option", - "id" : id2, - "value" : array[i], - "selected" : true, - "text" : array[i] - }); - } - - } +function addMenu(index, parent, name, id, position, value, array, type) { + var width = (type == "wide") ? 180 : 90; + child = []; + for (var i = 0; i < array.length; i++) { + var id2 = "_" + array[i].replace(/#|\.|\s+/g, '_').replace(/\+/g, '-').toLowerCase() + "_" + index; + if (i != value) { + child.push({ + "new": "option", + "id": id2, + "value": array[i], + "text": array[i] + }); + } + else { + child.push({ + "new": "option", + "id": id2, + "value": array[i], + "selected": true, + "text": array[i] + }); + } - var obj = [{ - "parent" : parent, - "new" : "label", - "for" : id + "_" + index, - "id" : id + "-label" + "_" + index, - "text" : name + ":", - "style" : { - "position" : "absolute", - "top" : position + "px", - "left" : "10px", - "width" : "120px", - "font-family" : "Arial", - "font-size" : 10, - "color" : textcolor - } - } -, { - "parent" : parent, - "new" : "select", - "id" : id + "_" + index, - "name" : id + "_" + index, - "class" : "menu", - "child" : child, - "style" : { - "position" : "absolute", - "top" : position - 6 + "px", - "left" : "135px", - "width" : width + "px" - } -, - "oninput" : "drawsocket.send({" + "djster" + ": {player: " + (index + 1) + ", " + id + ": this.value}})" - } - ]; - var obj2 = { - "id" : id + "_value" + "_" + index, - "args" : "v", - "body" : "document.getElementById('" + id + "_" + index + "').value = v;document.getElementById('" + id + "_num" + "_" + index + "').value = v" - }; - elements.push(obj[0]); - elements.push(obj[1]); - body.push(obj2); + } + + var obj = [{ + "parent": parent, + "new": "label", + "for": id + "_" + index, + "id": id + "-label" + "_" + index, + "text": name + ":", + "style": { + "position": "absolute", + "top": position + "px", + "left": "10px", + "width": "120px", + "font-family": "Arial", + "font-size": 10, + "color": textcolor + } + } + , { + "parent": parent, + "new": "select", + "id": id + "_" + index, + "name": id + "_" + index, + "class": "menu", + "child": child, + "style": { + "position": "absolute", + "top": position - 6 + "px", + "left": "135px", + "width": width + "px" + } + , + "oninput": "drawsocket.send({" + "djster" + ": {player: " + (index + 1) + ", " + id + ": this.value}})" + } + ]; + var obj2 = { + "id": id + "_value" + "_" + index, + "args": "v", + "body": "document.getElementById('" + id + "_" + index + "').value = v;document.getElementById('" + id + "_num" + "_" + index + "').value = v" + }; + elements.push(obj[0]); + elements.push(obj[1]); + body.push(obj2); } -function addCheckbox(index, parent, name, id, position, checked, type) -{ - var left = (type == "left") ? 10 : 252; - var leftoffset = (type == "left") ? 128 : 85; - checkboxes[index + 1][id].name = name; - checkboxes[index + 1][id].pos = [left + leftoffset - 4, position - 1]; - checkboxes[index + 1][id].parent = parent; - var obj = [{ - "parent" : parent, - "new" : "label", - "for" : id + "_" + index, - "id" : id + "-label" + "_" + index, - "text" : name + ":", - "style" : { - "position" : "absolute", - "top" : position + "px", - "left" : left + "px", - "width" : "80px", - "font-family" : "Arial", - "font-size" : 10, - "color" : textcolor - } - }, - { - "parent" : parent, - "new" : "input", - "type" : "checkbox", - "class" : "toggle", - "id" : id + "_" + index, - "name" : id + "_" + index, - "value" : checked, - "style" : { - "position" : "absolute", - "top" : position - 2 + "px", - "left" : left + leftoffset + "px", - "border" : "none", - "width" : "20px", - "height" : "20px" - }, - "oninput" : "drawsocket.send({" + "djster" + ": {player: " + (index + 1) + ", " + id + ": this.checked}})" - }]; - elements.push(obj[0]); - elements.push(obj[1]); +function addCheckbox(index, parent, name, id, position, checked, type) { + var left = (type == "left") ? 10 : 252; + var leftoffset = (type == "left") ? 128 : 85; + checkboxes[index + 1][id].name = name; + checkboxes[index + 1][id].pos = [left + leftoffset - 4, position - 1]; + checkboxes[index + 1][id].parent = parent; + var obj = [{ + "parent": parent, + "new": "label", + "for": id + "_" + index, + "id": id + "-label" + "_" + index, + "text": name + ":", + "style": { + "position": "absolute", + "top": position + "px", + "left": left + "px", + "width": "80px", + "font-family": "Arial", + "font-size": 10, + "color": textcolor + } + }, + { + "parent": parent, + "new": "input", + "type": "checkbox", + "class": "toggle", + "id": id + "_" + index, + "name": id + "_" + index, + "value": checked, + "style": { + "position": "absolute", + "top": position - 2 + "px", + "left": left + leftoffset + "px", + "border": "none", + "width": "20px", + "height": "20px" + }, + "oninput": "drawsocket.send({" + "djster" + ": {player: " + (index + 1) + ", " + id + ": this.checked}})" + }]; + elements.push(obj[0]); + elements.push(obj[1]); } -function addText(index, parent, name, id, position, type) -{ - var width = (type == "wide") ? 180 : 90; - var obj = [{ - "parent" : parent, - "new" : "label", - "for" : id + "_" + index, - "id" : id + "-label" + "_" + index, - "text" : name + ":", - "style" : { - "position" : "absolute", - "top" : position + "px", - "left" : "10px", - "width" : "120px", - "font-family" : "Arial", - "font-size" : 10, - "color" : textcolor - } - }, - { - "parent" : parent, - "new" : "input", - "type" : "text", - "id" : id + "_" + index, - "name" : id + "_" + index, - "placeholder" : "0-12 12-24", - "size" : 10, - "onkeydown" : "if( event.key == 'Enter' ){drawsocket.send( {" + "djster" + ": {player: " + (index + 1) + ", " + id + ": this.value}} );}", - "style" : { - "position" : "absolute", - "top" : position - 1 + "px", - "left" : "139px", - "width" : width - 11 + "px", - "color" : textcolor - } - }]; - var obj2 = { - "id" : id + "_value" + "_" + index, - "args" : "v", - "body" : "document.getElementById('" + id + "_" + index + "').value = v" - }; - elements.push(obj[0]); - elements.push(obj[1]); - body.push(obj2); +function addText(index, parent, name, id, position, type) { + var width = (type == "wide") ? 180 : 90; + var obj = [{ + "parent": parent, + "new": "label", + "for": id + "_" + index, + "id": id + "-label" + "_" + index, + "text": name + ":", + "style": { + "position": "absolute", + "top": position + "px", + "left": "10px", + "width": "120px", + "font-family": "Arial", + "font-size": 10, + "color": textcolor + } + }, + { + "parent": parent, + "new": "input", + "type": "text", + "id": id + "_" + index, + "name": id + "_" + index, + "placeholder": "0-12 12-24", + "size": 10, + "onkeydown": "if( event.key == 'Enter' ){drawsocket.send( {" + "djster" + ": {player: " + (index + 1) + ", " + id + ": this.value}} );}", + "style": { + "position": "absolute", + "top": position - 1 + "px", + "left": "139px", + "width": width - 11 + "px", + "color": textcolor + } + }]; + var obj2 = { + "id": id + "_value" + "_" + index, + "args": "v", + "body": "document.getElementById('" + id + "_" + index + "').value = v" + }; + elements.push(obj[0]); + elements.push(obj[1]); + body.push(obj2); } -function createSpatBox() -{ - svg.push({ - "parent" : "defs", - "new" : "path", - "id" : "speaker", - "fill" : textcolor, - "d" : "M206.2,146.2c1.4,0,2.6,1.2,2.6,2.6c0,1.4-1.2,2.6-2.6,2.6s-2.6-1.2-2.6-2.6C203.6,147.4,204.8,146.2,206.2,146.2z M206.2,141.3c-4.2,0-7.7,3.4-7.7,7.7c0,4.2,3.4,7.7,7.7,7.7c4.2,0,7.7-3.4,7.7-7.7C213.9,144.8,210.4,141.3,206.2,141.3z M206.2,134.4c8,0,14.6,6.5,14.6,14.6c0,8-6.5,14.6-14.6,14.6c-8,0-14.6-6.5-14.6-14.6C191.6,141,198.2,134.4,206.2,134.4z M206.2,117.5c1.4,0,2.6,1.2,2.6,2.6c0,1.4-1.2,2.6-2.6,2.6s-2.6-1.2-2.6-2.6C203.6,118.7,204.8,117.5,206.2,117.5z M206.2,114c-3.4,0-6.1,2.7-6.1,6.1c0,3.4,2.7,6.1,6.1,6.1s6.1-2.7,6.1-6.1C212.3,116.7,209.6,114,206.2,114z M206.2,110.5c5.3,0,9.5,4.3,9.5,9.5c0,5.3-4.3,9.5-9.5,9.5s-9.5-4.3-9.5-9.5C196.7,114.8,200.9,110.5,206.2,110.5z M184.1,102.7c-0.5,0-0.9,0.2-1.2,0.5c-0.3,0.3-0.5,0.7-0.5,1.2v66.8c0,0.5,0.2,0.9,0.5,1.2c0.3,0.3,0.7,0.5,1.2,0.5h44.2c0.5,0,0.9-0.2,1.2-0.5c0.3-0.3,0.5-0.7,0.5-1.2v-66.8c0-0.5-0.2-0.9-0.5-1.2c-0.3-0.3-0.7-0.5-1.2-0.5H184.1z", - "transform" : "matrix(0.5,0,0,0.5,100,0)" - }); - svg.push({ - "parent" : "main-svg", - "new" : "g", - "id" : "spat", - //"display" : "none", - "display" : "none", - "transform" : "matrix(1,0,0,1,0,50)", - "child" : [ - { - "new" : "rect", - "id" : "frame", - "x" : 120, - "y" : 2, - "width" : 140, - "height" : 140, - "fill" : "none", - "stroke" : "black", - "stroke-opacity" : 1 - }, - { - "new" : "use", - "id" : "speaker1", - "x" : -67, - "y" : -45, - "href" : "#speaker" - }, - { - "new" : "use", - "id" : "speaker2", - "x" : 41, - "y" : -45, - "href" : "#speaker" - }, - { - "new" : "use", - "id" : "speaker3", - "x" : -67, - "y" : 50, - "href" : "#speaker" - }, - { - "new" : "use", - "id" : "speaker4", - "x" : 41, - "y" : 50, - "href" : "#speaker" - }, - { - "new" : "circle", - "id" : "src1", - "cx" : 190, - "cy" : 20, - "r" : 12.5, - "fill" : textcolor - }, - { - "new" : "circle", - "id" : "src2", - "cx" : 245, - "cy" : 70, - "r" : 12.5, - "fill" : "olivedrab" - }, - { - "new" : "circle", - "id" : "src3", - "cx" : 190, - "cy" : 125, - "r" : 12.5, - "fill" : "cornflowerblue" - }, - { - "new" : "circle", - "id" : "src4", - "cx" : 135, - "cy" : 70, - "r" : 12.5, - "fill" : "tomato" - } -]}); +function createSpatBox() { + svg.push({ + "parent": "defs", + "new": "path", + "id": "speaker", + "fill": textcolor, + "d": "M206.2,146.2c1.4,0,2.6,1.2,2.6,2.6c0,1.4-1.2,2.6-2.6,2.6s-2.6-1.2-2.6-2.6C203.6,147.4,204.8,146.2,206.2,146.2z M206.2,141.3c-4.2,0-7.7,3.4-7.7,7.7c0,4.2,3.4,7.7,7.7,7.7c4.2,0,7.7-3.4,7.7-7.7C213.9,144.8,210.4,141.3,206.2,141.3z M206.2,134.4c8,0,14.6,6.5,14.6,14.6c0,8-6.5,14.6-14.6,14.6c-8,0-14.6-6.5-14.6-14.6C191.6,141,198.2,134.4,206.2,134.4z M206.2,117.5c1.4,0,2.6,1.2,2.6,2.6c0,1.4-1.2,2.6-2.6,2.6s-2.6-1.2-2.6-2.6C203.6,118.7,204.8,117.5,206.2,117.5z M206.2,114c-3.4,0-6.1,2.7-6.1,6.1c0,3.4,2.7,6.1,6.1,6.1s6.1-2.7,6.1-6.1C212.3,116.7,209.6,114,206.2,114z M206.2,110.5c5.3,0,9.5,4.3,9.5,9.5c0,5.3-4.3,9.5-9.5,9.5s-9.5-4.3-9.5-9.5C196.7,114.8,200.9,110.5,206.2,110.5z M184.1,102.7c-0.5,0-0.9,0.2-1.2,0.5c-0.3,0.3-0.5,0.7-0.5,1.2v66.8c0,0.5,0.2,0.9,0.5,1.2c0.3,0.3,0.7,0.5,1.2,0.5h44.2c0.5,0,0.9-0.2,1.2-0.5c0.3-0.3,0.5-0.7,0.5-1.2v-66.8c0-0.5-0.2-0.9-0.5-1.2c-0.3-0.3-0.7-0.5-1.2-0.5H184.1z", + "transform": "matrix(0.5,0,0,0.5,100,0)" + }); + svg.push({ + "parent": "main-svg", + "new": "g", + "id": "spat", + //"display" : "none", + "display": "none", + "transform": "matrix(1,0,0,1,0,50)", + "child": [ + { + "new": "rect", + "id": "frame", + "x": 120, + "y": 2, + "width": 140, + "height": 140, + "fill": "none", + "stroke": "black", + "stroke-opacity": 1 + }, + { + "new": "use", + "id": "speaker1", + "x": -67, + "y": -45, + "href": "#speaker" + }, + { + "new": "use", + "id": "speaker2", + "x": 41, + "y": -45, + "href": "#speaker" + }, + { + "new": "use", + "id": "speaker3", + "x": -67, + "y": 50, + "href": "#speaker" + }, + { + "new": "use", + "id": "speaker4", + "x": 41, + "y": 50, + "href": "#speaker" + }, + { + "new": "circle", + "id": "src1", + "cx": 190, + "cy": 20, + "r": 12.5, + "fill": textcolor + }, + { + "new": "circle", + "id": "src2", + "cx": 245, + "cy": 70, + "r": 12.5, + "fill": "olivedrab" + }, + { + "new": "circle", + "id": "src3", + "cx": 190, + "cy": 125, + "r": 12.5, + "fill": "cornflowerblue" + }, + { + "new": "circle", + "id": "src4", + "cx": 135, + "cy": 70, + "r": 12.5, + "fill": "tomato" + } + ] + }); } /* - + @@ -717,130 +723,128 @@ function createSpatBox() */ -function dictionary() -{ - var d = new Dict; - d.name = p[1]; - var obj = {}; - var out = new Dict; - obj["*"] = { - "key" : "html", - "val" : [{ - "id" : msg + "_" + (index1 - 1), - "value" : val - } - , { - "id" : msg + "_num" + "_" + (index1 - 1), - "value" : val - }] - }; - out.parse(JSON.stringify(obj)); - outlet(0, "dictionary", out.name); +function dictionary() { + var d = new Dict; + d.name = p[1]; + var obj = {}; + var out = new Dict; + obj["*"] = { + "key": "html", + "val": [{ + "id": msg + "_" + (index1 - 1), + "value": val + } + , { + "id": msg + "_num" + "_" + (index1 - 1), + "value": val + }] + }; + out.parse(JSON.stringify(obj)); + outlet(0, "dictionary", out.name); } -function param() -{ - var p = arrayfromargs(arguments); - var d = new Dict; - d.name = p[1]; - var obj = {}; - var out = new Dict; - //post("d", d.stringify(), "\n"); - if (d.contains("player") == 0) return; - var keys = d.getkeys(); - var index1 = d.get("player"); - var msg = keys.indexOf("player") ? keys[0] : keys[1]; - var val = d.get(msg); - //for range sliders (calc pulse_length, tonic_pitch, pitch_range) - switch (msg) { - //menus - case "piece" : - case "mode" : - case "instrument" : - case "scale" : - case "meter" : - /* - obj["*"] = { - "key" : "html", - "val" : { - "id" : "_" + val.replace(/#|\.|\s+/g, '_').replace(/\+/g, '-').toLowerCase() + "_" + (index1 - 1), - "selected" : true - } - }; - */ - obj["*"] = { - "key" : "function", - "val" : { - "id" : msg + "_value_" + (index1 - 1), - "call" : val - } - }; - break; - //checkboxes - case "play" : - case "stream" : - case "sorted" : - case "overlap" : - elements = []; - //post(JSON.stringify(checkboxes), "\n"); - //addCheckbox(checkboxes[msg].name, msg, checkboxes[msg].pos, val); - //post("checkbox", index1, msg, "\n"); - var checkbox = { - "parent" : checkboxes[index1][msg].parent, - "new" : "input", - "class" : "box", - "type" : "checkbox", - "id" : msg + "_" + (index1 - 1), - "name" : msg + "_" + (index1 - 1), - "value" : val, - "style" : { - "position" : "absolute", - "top" : checkboxes[index1][msg].pos[1] + "px", - "left" : checkboxes[index1][msg].pos[0] + "px", - "border" : "none", - "width" : "20px", - "height" : "20px" - }, - "oninput" : "drawsocket.send({" + "djster" + ": {player: " + index1 + ", " + msg + ": this.checked}})" +function param() { + var p = arrayfromargs(arguments); + var d = new Dict; + d.name = p[1]; + var obj = {}; + var out = new Dict; + //post("d", d.stringify(), "\n"); + if (d.contains("player") == 0) return; + var keys = d.getkeys(); + var index1 = d.get("player"); + var msg = keys.indexOf("player") ? keys[0] : keys[1]; + var val = d.get(msg); + //for range sliders (calc pulse_length, tonic_pitch, pitch_range) + switch (msg) { + //menus + case "piece": + case "mode": + case "instrument": + case "scale": + case "meter": + /* + obj["*"] = { + "key" : "html", + "val" : { + "id" : "_" + val.replace(/#|\.|\s+/g, '_').replace(/\+/g, '-').toLowerCase() + "_" + (index1 - 1), + "selected" : true + } + }; + */ + obj["*"] = { + "key": "function", + "val": { + "id": msg + "_value_" + (index1 - 1), + "call": val + } + }; + break; + //checkboxes + case "play": + case "stream": + case "sorted": + case "overlap": + elements = []; + //post(JSON.stringify(checkboxes), "\n"); + //addCheckbox(checkboxes[msg].name, msg, checkboxes[msg].pos, val); + //post("checkbox", index1, msg, "\n"); + var checkbox = { + "parent": checkboxes[index1][msg].parent, + "new": "input", + "class": "box", + "type": "checkbox", + "id": msg + "_" + (index1 - 1), + "name": msg + "_" + (index1 - 1), + "value": val, + "style": { + "position": "absolute", + "top": checkboxes[index1][msg].pos[1] + "px", + "left": checkboxes[index1][msg].pos[0] + "px", + "border": "none", + "width": "20px", + "height": "20px" + }, + "oninput": "drawsocket.send({" + "djster" + ": {player: " + index1 + ", " + msg + ": this.checked}})" - }; - if (val) checkbox.checked = ""; - obj["*"] = { - "key" : "html", - "val" : checkbox - }; - break; - //range sliders - default : - switch (msg) { - case "tonic_pitch" : - case "pitch_center" : - val = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'][val % 12] + (parseInt((val) / 12) - 2); - break; - } - /* - obj["*"] = { - "key" : "html", - "val" : [{ - "id" : msg + "_" + (index1 - 1), - "value" : val - } - , { - "id" : msg + "_num" + "_" + (index1 - 1), - "value" : val - }] - }; - */ - obj["*"] = { - "key" : "function", - "val" : { - "id" : msg + "_value_" + (index1 - 1), - "call" : val - } - }; - } - out.parse(JSON.stringify(obj)); - outlet(0, "dictionary", out.name); - elements = []; + }; + if (val) checkbox.checked = ""; + obj["*"] = { + "key": "html", + "val": checkbox + }; + break; + //range sliders + default: + switch (msg) { + case "tonic_pitch": + case "pitch_center": + val = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'][val % 12] + (parseInt((val) / 12) - 2); + break; + } + /* + obj["*"] = { + "key" : "html", + "val" : [{ + "id" : msg + "_" + (index1 - 1), + "value" : val + } + , { + "id" : msg + "_num" + "_" + (index1 - 1), + "value" : val + }] + }; + */ + obj["*"] = { + "key": "function", + "val": { + "id": msg + "_value_" + (index1 - 1), + "call": val + } + }; + } + out.parse(JSON.stringify(obj)); + outlet(0, "dictionary", out.name); + elements = []; }