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

duplicate styling to css file, comment out in js

Browse Source
This commit is contained in:
Eveline-97 2025-03-24 14:29:51 +01:00
parent cd22739e4a
commit 729a471294
2 changed files with 182 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
djster_webcontrol.js
View File

@ -80,6 +80,8 @@ function bang() {
"val": body
}]
};
/*
css.push({
"selector": ".menu",
"props": {
@ -157,6 +159,21 @@ function bang() {
"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:
/*
<!-- HSS -->
<link rel="stylesheet" href="../../../../../Library/healing-soundscapes/ui-style.css">
*/
svg.push({
"new": "rect",
@ -207,6 +224,7 @@ function bang() {
//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';");
@ -264,12 +282,12 @@ function bang() {
"new": "h2",
"parent": "systemDIV",
"id": "updateheader",
"text": "Updates",
"text": "Updates"/*,
"style": {
"left": "10px",
"font-family": "Arial",
"margin-left": "10px"
}
}*/
});
elements.push(
@ -277,13 +295,13 @@ function bang() {
"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": {
"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");
@ -293,12 +311,12 @@ function bang() {
"new": "h2",
"parent": "systemDIV",
"id": "shutdownheader",
"text": "Shut Down",
"text": "Shut Down"/*,
"style": {
"left": "10px",
"font-family": "Arial",
"margin-left": "10px"
}
}*/
});
elements.push(
@ -306,13 +324,13 @@ function bang() {
"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.",
"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 + "';");
@ -324,9 +342,9 @@ function bang() {
"parent": "manualDIV",
"id": "manualdoc",
"style": {
"position": "absolute",
/*"position": "absolute",
"top": "0px",
"left": "0px",
"left": "0px",*/
"width": "100vw",
"height": "100vh"
},
@ -389,13 +407,13 @@ function addSlider(index, parent, name, id, position, range, step, value, _out,
"id": id + "-label" + "_" + index,
"text": name + ":",
"style": {
"position": "absolute",
//"position": "absolute",
"top": (offset - 1 + position * 30) + "px",
"left": "10px",
"width": "160px",
"font-family": "Arial",
/*"font-family": "Arial",
"font-size": 10,
"color": textcolor
"color": textcolor*/
}
},
{
@ -408,11 +426,11 @@ function addSlider(index, parent, name, id, position, range, step, value, _out,
"value": value,
"disabled": true,
"style": {
"position": "absolute",
//"position": "absolute",
"top": (offset + position * 30) + "px",
"left": "320px",
"width": "30px",
"color": textcolor
//"color": textcolor
}
},
{
@ -427,10 +445,10 @@ function addSlider(index, parent, name, id, position, range, step, value, _out,
"value": value,
"step": step,
"style": {
"position": "absolute",
//"position": "absolute",
"top": (offset + 5 + position * 30) + "px",
"left": "135px",
"width": "170px"
/*"left": "135px",
"width": "170px"*/
},
"oninput": "[drawsocket.send({" + "djster" + ": {player: " + (index + 1) + ", " + id + ": " + _in + "}}), drawsocket.input({ key : 'html', val : { id : '" + id + "_num" + "_" + index + "', value : " + _out + "}})]"
}];
@ -479,13 +497,13 @@ function addMenu(index, parent, name, id, position, value, array, type) {
"id": id + "-label" + "_" + index,
"text": name + ":",
"style": {
"position": "absolute",
//"position": "absolute",
"top": position + "px",
"left": "10px",
"width": "120px",
"font-family": "Arial",
/*"font-family": "Arial",
"font-size": 10,
"color": textcolor
"color": textcolor*/
}
}
, {
@ -528,13 +546,13 @@ function addCheckbox(index, parent, name, id, position, checked, type) {
"id": id + "-label" + "_" + index,
"text": name + ":",
"style": {
"position": "absolute",
//"position": "absolute",
"top": position + "px",
"left": left + "px",
"width": "80px",
"font-family": "Arial",
/*"font-family": "Arial",
"font-size": 10,
"color": textcolor
"color": textcolor*/
}
},
{
@ -546,12 +564,12 @@ function addCheckbox(index, parent, name, id, position, checked, type) {
"name": id + "_" + index,
"value": checked,
"style": {
"position": "absolute",
//"position": "absolute",
"top": position - 2 + "px",
"left": left + leftoffset + "px",
"border": "none",
/*"border": "none",
"width": "20px",
"height": "20px"
"height": "20px"*/
},
"oninput": "drawsocket.send({" + "djster" + ": {player: " + (index + 1) + ", " + id + ": this.checked}})"
}];
@ -568,13 +586,13 @@ function addText(index, parent, name, id, position, type) {
"id": id + "-label" + "_" + index,
"text": name + ":",
"style": {
"position": "absolute",
//"position": "absolute",
"top": position + "px",
"left": "10px",
"width": "120px",
"font-family": "Arial",
/*"font-family": "Arial",
"font-size": 10,
"color": textcolor
"color": textcolor*/
}
},
{
@ -587,11 +605,11 @@ function addText(index, parent, name, id, position, type) {
"size": 10,
"onkeydown": "if( event.key == 'Enter' ){drawsocket.send( {" + "djster" + ": {player: " + (index + 1) + ", " + id + ": this.value}} );}",
"style": {
"position": "absolute",
//"position": "absolute",
"top": position - 1 + "px",
"left": "139px",
"width": width - 11 + "px",
"color": textcolor
//"color": textcolor
}
}];
var obj2 = {
@ -617,7 +635,6 @@ function createSpatBox() {
"parent": "main-svg",
"new": "g",
"id": "spat",
//"display" : "none",
"display": "none",
"transform": "matrix(1,0,0,1,0,50)",
"child": [
@ -798,12 +815,12 @@ function param() {
"name": msg + "_" + (index1 - 1),
"value": val,
"style": {
"position": "absolute",
//"position": "absolute",
"top": checkboxes[index1][msg].pos[1] + "px",
"left": checkboxes[index1][msg].pos[0] + "px",
"border": "none",
/*"border": "none",
"width": "20px",
"height": "20px"
"height": "20px"*/
},
"oninput": "drawsocket.send({" + "djster" + ": {player: " + index1 + ", " + msg + ": this.checked}})"

128
ui-style.css Normal file
View File

@ -0,0 +1,128 @@
:root {
--background: ivory;
--active: royalblue;
--nonactive: lightsteelblue;
--alert: red;
--textcolor: #737373;
}
html {
background-color: var(--background);
}
/*navigation*/
#nav,
#navPlayers {
z-index: 99;
display: flex !important;
flex-flow: row nowrap;
position: relative;
}
#navPlayers>button {
width: 24.9vw;
color: var(--nonactive);
}
#navPlayers>button:active {
color: var(--active);
}
.menu {
background-color: var(--background);
border: 1px solid + var(--active);
color: var(--active);
padding: 5px 5px;
text-align: left;
display: inline-block;
font-size: 12px;
margin: 4px 2px;
}
.but {
background-color: var(--background);
border: 1px solid + var(--active);
color: var(--active);
padding: 4px 0;
text-align: center;
display: inline-block;
font-size: 11px;
margin: 4px 0px;
width: 20vw;
}
.toggle {
background-color: var(--background);
border: 1px solid + var(--active);
color: var(--active);
padding: 4px 7.8px;
margin: 4px 0px;
}
.slider {
-webkit-appearance: none;
height: 6px;
border-radius: 6px;
background: #737373;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
position: absolute;
left: 135px;
width: 170px;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: active;
}
label {
position: absolute;
font-family: Arial;
font-size: 10;
color: var(--textcolor);
}
input[type=text] {
position: absolute;
color: var(--textcolor);
}
input[type=checkbox] {
position: absolute;
border: none;
width: 20px;
height: 20px;
}
#updateheader,
#shutdownheader {
left: 10px;
font-family: Arial;
margin-left: 10px;
}
#update,
#shutdown {
left: 10px;
font-family: Arial;
font-size: 12;
margin-left: 10px;
}
iframe #manualdoc {
position: absolute;
top: 0px;
left: 0px;
}