inlets = 2;
outlets = 2;
var pieces = ["Warm Rain in the Morning", "Thunderstorm in the Evening"];
var modes = ["Selected Piece", "Playlist"];
var instruments = ["none", "Bell-1.instr", "Bell-2.instr", "Hi_Voweler.instr", "Dreamers.instr", "Kalimbell.instr", "Wave_4.instr", "Dark_Monkey.instr", "Digi_Vocal.instr", "Mini_Moog.instr", "Synth_1980.instr", "E-Pad.instr", "Equinox.instr", "Galaxis.instr", "Venus_Pad.instr", "Celeste.instr", "percussion_glockenspiel_Glockenspiel-beaters_ordinario.instr", "Marimba.instr", "Stopped_Piano.instr", "Cymbales_Antiques.instr", "FretSound.instr", "Bandoneon.instr"];
var scales = ["Major", "Minor", "Dorian", "Mixolydian", "Lydian", "Phrygian", "Locrian", "Whole Tone", "Half-whole Dim.", "Whole-half Dim.", "Minor Blues", "Minor Pentatonic", "Major Pentatonic", "Harmonic Minor", "Harmonic Major", "Dorian #4", "Phrygian Dominant", "Melodic Minor", "Lydian Augmented", "Lydian Dominant", "Super Locrian", "8-Tone Spanish", "Bhairav", "Hungarian Minor", "Hirajoshi", "In-sen", "Iwato", "Kumoi", "Pelog Selisir", "Pelog Tembung", "Messiaen 3", "Messiaen 4", "Messiaen 5", "Messiaen 6", "Messiaen 7", "Chromatic"];
var meters = ["1", "2", "3", "2 2", "2+3", "3+2", "2 3", "3 2", "2+2+3", "2+3+2", "3+2+2", "2 2 2", "2+3+3", "3+2+3", "3+3+2", "3 3", "2 5", "11", "3 2 2", "2 3 2", "2 2 3"];
var css = [];
var elements = [];
var body = [];
var svg = [];
var ip = "not available";
var html = {
"*": [{
"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"] = {};
}
}
var offset = 128;
var active = "royalblue";
var nonactive = "lightsteelblue";
var alert = "red";
var textcolor = "#737373";
var background = "ivory";
var init = 0;
function setInstruments()
{
instruments = arrayfromargs(arguments);
Init();
}
function setPiece()
{
pieces = arrayfromargs(arguments);
Init();
}
function bang()
{
Init();
}
function anything()
{
ip = arrayfromargs(messagename, arguments)[0];
post("ip", ip, "\n");
Init();
}
function Init()
{
init = 1;
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"
}
});
*/
//add css sheet to html
elements.push({
"new": "link",
"parent": "log",
"rel": "stylesheet",
"href": "ui-style.css" //href is not working for some reason?
});
//currently, the file is added by having changed the drawsocket-page.html with the following:
/*
*/
svg.push({
"new": "rect",
"id": "background",
"x": 0,
"y": 0,
"width": "100vw",//viewport width of iPad mini: 1133px; iphone 8: 400px; iPhone 5: 320px
"height": "100vh",//viewport height of iPad mini: 744px; iphone 8: 667px; iPhone 5: 568px
"fill": background
});
//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", "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", "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", "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"
}
});
*/
//navPlayers nav bar for player selectors
addDiv("expertDIV", "navPlayers", "display:block");
//add buttons to navPlayers instead of to expertDIV directly
addButton()
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, 3600], 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;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", "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['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("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" : "h2",
"parent" : "systemDIV",
"id" : "ipheader",
"text" : "Server IP Address",
"style" : {
"left" : "10px",
"font-family" : "Arial",
"margin-left" : "10px"
}
});
elements.push(
{
"new" : "p",
"parent" : "systemDIV",
"id" : "ip",
"text" : (ip == "not available") ? ip : ip + "/1",
"style" : {
"left" : "10px",
"font-family" : "Arial",
"font-size" : 12,
"margin-left" : "10px"
}
});
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", "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['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("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 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);
}
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);
}
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);
}
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 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",
"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 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()
{
if (!init) return;
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 = [];
}