healing-soundscapes-light/djster_webcontrol.js
2024-07-31 17:06:34 +02:00

745 lines
28 KiB
JavaScript

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 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";
function setInstruments()
{
instruments = arrayfromargs(arguments);
bang();
}
function bang()
{
css.push({
"selector" : ".menu",
"props" : {
"background-color" : background,
"border" : "1px solid " + active,
"color" : active,
"padding" : "5px 5px",
"text-align" : "center",
"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
}
});
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"
}
});
*/
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", 66, 0, modes, "wide");
addCheckbox(-1, "basicDIV", "Play", "play", 96, 0, "left");
addSlider(-1, "basicDIV", "Tempo", "tempo", 0, [20, 160], 1, 60, "this.value", "this.value");
addSlider(-1, "basicDIV", "Duration", "duration", 1, [0, 100], 1, 100, "this.value", "this.value");
addSlider(-1, "basicDIV", "Silence", "silence", 2, [0, 100], 1, 100, "this.value", "this.value");
for (var i = 0; i < 4; i++) {
var j = 0;
addMenu(i, "player" + i, "Instrument", "instrument", 36, 0, instruments, "narrow");
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, 100], 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", "Gain (dB)", "gain", 2, [-70, 6], 1, -10, "this.value", "this.value");
addSlider(-1, "roomDIV", "Room Size", "roomsize", 3, [1, 300], 1, 75, "this.value", "this.value");//
addSlider(-1, "roomDIV", "Rev. Time (ms)", "amount", 4, [0.5, 15], 0.1, 11, "this.value", "this.value");//
addSlider(-1, "roomDIV", "Spread", "spread", 5, [0, 100], 1, 23, "this.value", "this.value");//
addSlider(-1, "roomDIV", "Bandwidth", "bandwidth", 6, [0, 100], 1, 50, "this.value", "this.value"); //50
addSlider(-1, "roomDIV", "Damping", "damping", 7, [0, 100], 1, 70, "this.value", "this.value");//
addSlider(-1, "roomDIV", "Early", "early", 8, [0, 100], 1, 25, "this.value", "this.value");//
addSlider(-1, "roomDIV", "Tail", "tail", 9, [0, 100], 1, 25, "this.value", "this.value");//
addSlider(-1, "roomDIV", "Dry", "dry", 10, [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 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}})"
}
];
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") ? 126 : 85;
checkboxes[index + 1][id].name = name;
checkboxes[index + 1][id].pos = [left + leftoffset, position - 2];
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 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"
}
]});
}
/*
<svg width="600px" height="200px" viewBox="0 0 600 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<defs>
<g id="speaker" transform="matrix(0.5,0,0,0.5,100,0)">
<path d="M206.2,146.2c1.4,0,2.6,1.2,2.6,2.6
c0,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.7
c0,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.6
c0,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.6
c0,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.1
c0,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.5
c0,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.5
c-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.5
c0.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"/>
</g>
</defs>
<rect id="frame" x="120" y="2" width="140" height="140" stroke="black" stroke-width="4" stroke-opacity="1" fill="none" fill-opacity="1"/>
<circle id="src1" cx="190" cy="20" r="10" fill="black"/>
<circle id="src2" cx="245" cy="70" r="10" fill="green"/>
<circle id="src3" cx="190" cy="125" r="10" fill=nonactive/>
<circle id="src4" cx="135" cy="70" r="10" fill=active/>
<use x="-67" y="-45" href="#speaker" />
<use x="41" y="-45" href="#speaker" />
<use x="-67" y="50" href="#speaker" />
<use x="41" y="50" href="#speaker" />
</svg>
*/
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;
var keys = d.getkeys();
//post(d.stringify(), "\n");
var index1 = d.get("player");
var msg = keys.indexOf("player") ? keys[0] : keys[1];
var val = d.get(msg);
//post("what?", JSON.stringify(checkboxes), index1, msg, val, "\n");
//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
}
};
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
}]
};
}
out.parse(JSON.stringify(obj));
outlet(0, "dictionary", out.name);
elements = [];
}