kieran-mcauliffe/healing-soundscapes
2
0
Fork 1
Code Issues 10 Pull Requests Actions Packages Projects Releases Wiki Activity

navigation bars

Browse Source
This commit is contained in:
Eveline-97 2025-03-23 15:31:11 +01:00
parent 0a2443a4f6
commit 3acb9f442c
1 changed files with 774 additions and 770 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
djster_webcontrol.js
View File

@ -46,20 +46,17 @@ var alert = "red";
var textcolor = "#737373"; var textcolor = "#737373";
var background = "ivory"; var background = "ivory";
function setInstruments() function setInstruments() {
{
instruments = arrayfromargs(arguments); instruments = arrayfromargs(arguments);
bang(); bang();
} }
function setPiece() function setPiece() {
{
pieces = arrayfromargs(arguments); pieces = arrayfromargs(arguments);
bang(); bang();
} }
function bang() function bang() {
{
css = []; css = [];
elements = []; elements = [];
@ -150,23 +147,36 @@ css.push({
"background": active "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({ svg.push({
"new": "rect", "new": "rect",
"id": "background", "id": "background",
"x": 0, "x": 0,
"y": 0, "y": 0,
"width" : "400px",//viewport width of iphone 8; iPhone 5: 320px "width": "1133px",//viewport width of iPad mini; iphone 8: 400px; iPhone 5: 320px
"height" : "667px",//viewport height of iphone 8; iPhone 5: 568px "height": "744px",//viewport height of iPad mini; iphone 8: 667px; iPhone 5: 568px
"fill": background, "fill": background,
}); });
//elements = []; //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 + "';"); //nav for buttons
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 + "';"); addDiv("forms", "nav", "display: block");
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 + "';"); //add buttons to navigation instead of to #forms directly
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("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("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 + "';"); 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 + "';");
addDiv("forms", "basicDIV", "display:block"); addDiv("forms", "basicDIV", "display:block");
addDiv("forms", "expertDIV", "display:none"); addDiv("forms", "expertDIV", "display:none");
@ -194,11 +204,13 @@ svg.push({
}); });
*/ */
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';"); //navPlayers nav bar for player selectors
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';"); addDiv("expertDIV", "navPlayers", "display:block");
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';"); //add buttons to navPlayers instead of to expertDIV directly
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';"); 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", "Piece", "piece", 36, 0, pieces, "wide");
addMenu(-1, "basicDIV", "Playing Mode", "mode", 76, 0, modes, "wide"); addMenu(-1, "basicDIV", "Playing Mode", "mode", 76, 0, modes, "wide");
@ -326,8 +338,7 @@ svg.push({
outlet(1, "done"); outlet(1, "done");
} }
function addDiv(parent, id, style) function addDiv(parent, id, style) {
{
var obj = { var obj = {
"parent": parent, "parent": parent,
"new": "div", "new": "div",
@ -343,8 +354,7 @@ function addDiv(parent, id, style)
elements.push(obj); elements.push(obj);
} }
function addButton(parent, id, text, style, onclick) function addButton(parent, id, text, style, onclick) {
{
var obj = { var obj = {
"parent": parent, "parent": parent,
"id": id, "id": id,
@ -364,8 +374,7 @@ function addButton(parent, id, text, style, onclick)
elements.push(obj); elements.push(obj);
} }
function addSlider(index, parent, name, id, position, range, step, value, _out, _in) function addSlider(index, parent, name, id, position, range, step, value, _out, _in) {
{
switch (id) { switch (id) {
case "tonic_pitch": case "tonic_pitch":
case "pitch_center": case "pitch_center":
@ -438,8 +447,7 @@ function addSlider(index, parent, name, id, position, range, step, value, _out,
body.push(obj2); body.push(obj2);
} }
function addMenu(index, parent, name, id, position, value, array, type) function addMenu(index, parent, name, id, position, value, array, type) {
{
var width = (type == "wide") ? 180 : 90; var width = (type == "wide") ? 180 : 90;
child = []; child = [];
for (var i = 0; i < array.length; i++) { for (var i = 0; i < array.length; i++) {
@ -507,8 +515,7 @@ function addMenu(index, parent, name, id, position, value, array, type)
body.push(obj2); body.push(obj2);
} }
function addCheckbox(index, parent, name, id, position, checked, type) function addCheckbox(index, parent, name, id, position, checked, type) {
{
var left = (type == "left") ? 10 : 252; var left = (type == "left") ? 10 : 252;
var leftoffset = (type == "left") ? 128 : 85; var leftoffset = (type == "left") ? 128 : 85;
checkboxes[index + 1][id].name = name; checkboxes[index + 1][id].name = name;
@ -552,8 +559,7 @@ function addCheckbox(index, parent, name, id, position, checked, type)
elements.push(obj[1]); elements.push(obj[1]);
} }
function addText(index, parent, name, id, position, type) function addText(index, parent, name, id, position, type) {
{
var width = (type == "wide") ? 180 : 90; var width = (type == "wide") ? 180 : 90;
var obj = [{ var obj = [{
"parent": parent, "parent": parent,
@ -598,8 +604,7 @@ function addText(index, parent, name, id, position, type)
body.push(obj2); body.push(obj2);
} }
function createSpatBox() function createSpatBox() {
{
svg.push({ svg.push({
"parent": "defs", "parent": "defs",
"new": "path", "new": "path",
@ -687,7 +692,8 @@ function createSpatBox()
"r": 12.5, "r": 12.5,
"fill": "tomato" "fill": "tomato"
} }
]}); ]
});
} }
/* /*
@ -717,8 +723,7 @@ function createSpatBox()
</svg> </svg>
*/ */
function dictionary() function dictionary() {
{
var d = new Dict; var d = new Dict;
d.name = p[1]; d.name = p[1];
var obj = {}; var obj = {};
@ -738,8 +743,7 @@ function dictionary()
outlet(0, "dictionary", out.name); outlet(0, "dictionary", out.name);
} }
function param() function param() {
{
var p = arrayfromargs(arguments); var p = arrayfromargs(arguments);
var d = new Dict; var d = new Dict;
d.name = p[1]; d.name = p[1];