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

Compare commits

base: kieran-mcauliffe:44e19558c161dcb382883db67453deab80a25b10
Branches Tags
kieran-mcauliffe:main
kieran-mcauliffe:patch-1
kieran-mcauliffe:private-waiting-room-snapshot
kieran-mcauliffe:modenum
kieran-mcauliffe:daemon-service
kieran-mcauliffe:greg-dev
...
compare: kieran-mcauliffe:7a93a87ceef60208f1b1e77ca455bb52e4dad9b2
Branches Tags
kieran-mcauliffe:main
kieran-mcauliffe:patch-1
kieran-mcauliffe:private-waiting-room-snapshot
kieran-mcauliffe:modenum
kieran-mcauliffe:daemon-service
kieran-mcauliffe:greg-dev

12 Commits
44e19558c1 ... 7a93a87cee

Author SHA1 Message Date
Eveline-97
7a93a87cee Merge branch 'main' into ui-design 
Merge ui design with new changes in main branch
 2025-04-10 16:03:24 +02:00
Eveline-97
2c869d925f remove title test 2025-04-10 14:57:58 +02:00
Eveline-97
0a41cfe17f merge conflicts djster webcontrol 2025-04-10 14:47:55 +02:00
Eveline-97
892da17531 add html template that loads css file 2025-04-08 14:30:32 +02:00
Eveline-97
76bef9f32a appearance 2025-04-08 14:18:55 +02:00
Eveline-97
1cf194acce max-width for navigations 2025-04-08 14:08:34 +02:00
Eveline-97
ba3492d78f active and hover interaction + colours system buttons and selector options, recommit 2025-04-08 13:06:10 +02:00
Eveline-97
6caae03759 navigation right width 2025-03-24 16:36:50 +01:00
Eveline-97
b1d1eb802c slider front colour 2025-03-24 16:23:15 +01:00
Eveline-97
729a471294 duplicate styling to css file, comment out in js 2025-03-24 14:29:51 +01:00
Eveline-97
cd22739e4a background 100 vw and vh 2025-03-23 15:53:22 +01:00
Eveline-97
3acb9f442c navigation bars 2025-03-23 15:31:11 +01:00
3 changed files with 1002 additions and 626 deletions
Show Stats Expand all files Collapse all files

62
index.html Normal file
View File

@ -0,0 +1,62 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<!-- our stylesheet -->
<link rel="stylesheet" href="lib/drawsocket-defaults.css">
<!-- HSS -->
<link rel="stylesheet" href="./ui-style.css">
<!-- library dependencies -->
<script src="scripts/d3-selection/dist/d3-selection.min.js"></script>
<script src="scripts/pdfjs-dist/build/pdf.js"></script>
<script src="scripts/tone/build/Tone.js"></script>
<!--
<script src="scripts/startaudiocontext/StartAudioContext.js"></script>
-->
<script src="scripts/timesync/dist/timesync.js"></script>
<script src="scripts/gsap/dist/gsap.min.js"></script>
<script src="scripts/svg-points/dist/svg-points.min.js"></script>
<script src="lib/verovio-toolkit.js" ></script>
</head>
<body>
<!--main html setup -->
<div class="log" id="log"></div>
<div id="touchdiv"></div>
<!--main main main setup -->
<div id="main-div" >
<div id="main-html" ></div>
<svg id="svg"
version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" >
<defs id="defs"></defs>
<g id="main-svg"></g>
</svg>
</div>
<div id="forms" ></div>
<div id="loading">
<p>synchronizing...</p>
</div>
<!-- our scripts -->
<script src="lib/drawsocket-client.js"></script>
</body>
</html>

189
javascript/djster_webcontrol.js
View File

@ -97,6 +97,8 @@ var html = {
"val" : body "val" : body
}] }]
}; };
/*
css.push({ css.push({
"selector": ".menu", "selector": ".menu",
"props": { "props": {
@ -164,23 +166,51 @@ 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"
}
});
*/
//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({ 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": "100vw",//viewport width of iPad mini: 1133px; iphone 8: 400px; iPhone 5: 320px
"height" : "667px",//viewport height of iphone 8; iPhone 5: 568px "height": "100vh",//viewport height of iPad mini: 744px; 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", "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", "basicDIV", "display:block");
addDiv("forms", "expertDIV", "display:none"); addDiv("forms", "expertDIV", "display:none");
@ -208,11 +238,14 @@ 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()
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");
@ -266,12 +299,12 @@ svg.push({
"new": "h2", "new": "h2",
"parent": "systemDIV", "parent": "systemDIV",
"id": "updateheader", "id": "updateheader",
"text" : "Updates", "text": "Updates"/*,
"style": { "style": {
"left": "10px", "left": "10px",
"font-family": "Arial", "font-family": "Arial",
"margin-left": "10px" "margin-left": "10px"
} }*/
}); });
elements.push( elements.push(
@ -279,17 +312,65 @@ svg.push({
"new": "p", "new": "p",
"parent": "systemDIV", "parent": "systemDIV",
"id": "update", "id": "update",
"text" : "Check for a new software version. This requires an active Internet connection. Please refer to manual for further instructions.", "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": { "style": {
"left": "10px", "left": "10px",
"font-family": "Arial", "font-family": "Arial",
"font-size": 12, "font-size": 12,
"margin-left": "10px" "margin-left": "10px"
} }*/
}); });
addButton("systemDIV", "versionbutton", "Check for New Version", "width:125px;background-color:" + nonactive + ";margin-left:125px;", "none"); 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['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( elements.push(
{ {
"new" : "h2", "new" : "h2",
@ -368,8 +449,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",
@ -385,8 +465,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,
@ -406,8 +485,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":
@ -422,13 +500,13 @@ function addSlider(index, parent, name, id, position, range, step, value, _out,
"id": id + "-label" + "_" + index, "id": id + "-label" + "_" + index,
"text": name + ":", "text": name + ":",
"style": { "style": {
"position" : "absolute", //"position": "absolute",
"top": (offset - 1 + position * 30) + "px", "top": (offset - 1 + position * 30) + "px",
"left": "10px", "left": "10px",
"width": "160px", "width": "160px",
"font-family" : "Arial", /*"font-family": "Arial",
"font-size": 10, "font-size": 10,
"color" : textcolor "color": textcolor*/
} }
}, },
{ {
@ -441,11 +519,11 @@ function addSlider(index, parent, name, id, position, range, step, value, _out,
"value": value, "value": value,
"disabled": true, "disabled": true,
"style": { "style": {
"position" : "absolute", //"position": "absolute",
"top": (offset + position * 30) + "px", "top": (offset + position * 30) + "px",
"left": "320px", "left": "320px",
"width": "30px", "width": "30px",
"color" : textcolor //"color": textcolor
} }
}, },
{ {
@ -460,10 +538,10 @@ function addSlider(index, parent, name, id, position, range, step, value, _out,
"value": value, "value": value,
"step": step, "step": step,
"style": { "style": {
"position" : "absolute", //"position": "absolute",
"top": (offset + 5 + position * 30) + "px", "top": (offset + 5 + position * 30) + "px",
"left" : "135px", /*"left": "135px",
"width" : "170px" "width": "170px"*/
}, },
"oninput": "[drawsocket.send({" + "djster" + ": {player: " + (index + 1) + ", " + id + ": " + _in + "}}), drawsocket.input({ key : 'html', val : { id : '" + id + "_num" + "_" + index + "', value : " + _out + "}})]" "oninput": "[drawsocket.send({" + "djster" + ": {player: " + (index + 1) + ", " + id + ": " + _in + "}}), drawsocket.input({ key : 'html', val : { id : '" + id + "_num" + "_" + index + "', value : " + _out + "}})]"
}]; }];
@ -480,8 +558,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++) {
@ -513,13 +590,13 @@ function addMenu(index, parent, name, id, position, value, array, type)
"id": id + "-label" + "_" + index, "id": id + "-label" + "_" + index,
"text": name + ":", "text": name + ":",
"style": { "style": {
"position" : "absolute", //"position": "absolute",
"top": position + "px", "top": position + "px",
"left": "10px", "left": "10px",
"width": "120px", "width": "120px",
"font-family" : "Arial", /*"font-family": "Arial",
"font-size": 10, "font-size": 10,
"color" : textcolor "color": textcolor*/
} }
} }
, { , {
@ -549,8 +626,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;
@ -563,13 +639,13 @@ function addCheckbox(index, parent, name, id, position, checked, type)
"id": id + "-label" + "_" + index, "id": id + "-label" + "_" + index,
"text": name + ":", "text": name + ":",
"style": { "style": {
"position" : "absolute", //"position": "absolute",
"top": position + "px", "top": position + "px",
"left": left + "px", "left": left + "px",
"width": "80px", "width": "80px",
"font-family" : "Arial", /*"font-family": "Arial",
"font-size": 10, "font-size": 10,
"color" : textcolor "color": textcolor*/
} }
}, },
{ {
@ -581,12 +657,12 @@ function addCheckbox(index, parent, name, id, position, checked, type)
"name": id + "_" + index, "name": id + "_" + index,
"value": checked, "value": checked,
"style": { "style": {
"position" : "absolute", //"position": "absolute",
"top": position - 2 + "px", "top": position - 2 + "px",
"left": left + leftoffset + "px", "left": left + leftoffset + "px",
"border" : "none", /*"border": "none",
"width": "20px", "width": "20px",
"height" : "20px" "height": "20px"*/
}, },
"oninput": "drawsocket.send({" + "djster" + ": {player: " + (index + 1) + ", " + id + ": this.checked}})" "oninput": "drawsocket.send({" + "djster" + ": {player: " + (index + 1) + ", " + id + ": this.checked}})"
}]; }];
@ -594,8 +670,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,
@ -604,13 +679,13 @@ function addText(index, parent, name, id, position, type)
"id": id + "-label" + "_" + index, "id": id + "-label" + "_" + index,
"text": name + ":", "text": name + ":",
"style": { "style": {
"position" : "absolute", //"position": "absolute",
"top": position + "px", "top": position + "px",
"left": "10px", "left": "10px",
"width": "120px", "width": "120px",
"font-family" : "Arial", /*"font-family": "Arial",
"font-size": 10, "font-size": 10,
"color" : textcolor "color": textcolor*/
} }
}, },
{ {
@ -623,11 +698,11 @@ function addText(index, parent, name, id, position, type)
"size": 10, "size": 10,
"onkeydown": "if( event.key == 'Enter' ){drawsocket.send( {" + "djster" + ": {player: " + (index + 1) + ", " + id + ": this.value}} );}", "onkeydown": "if( event.key == 'Enter' ){drawsocket.send( {" + "djster" + ": {player: " + (index + 1) + ", " + id + ": this.value}} );}",
"style": { "style": {
"position" : "absolute", //"position": "absolute",
"top": position - 1 + "px", "top": position - 1 + "px",
"left": "139px", "left": "139px",
"width": width - 11 + "px", "width": width - 11 + "px",
"color" : textcolor //"color": textcolor
} }
}]; }];
var obj2 = { var obj2 = {
@ -640,8 +715,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",
@ -654,7 +728,6 @@ function createSpatBox()
"parent": "main-svg", "parent": "main-svg",
"new": "g", "new": "g",
"id": "spat", "id": "spat",
//"display" : "none",
"display": "none", "display": "none",
"transform": "matrix(1,0,0,1,0,50)", "transform": "matrix(1,0,0,1,0,50)",
"child": [ "child": [
@ -729,7 +802,8 @@ function createSpatBox()
"r": 12.5, "r": 12.5,
"fill": "tomato" "fill": "tomato"
} }
]}); ]
});
} }
/* /*
@ -759,8 +833,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 = {};

241
ui-style.css Normal file
View File

@ -0,0 +1,241 @@
:root {
--background: ivory;
--active: royalblue;
--nonactive: lightsteelblue;
--alert: red;
--textcolor: #737373;
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
html {
background-color: var(--background);
}
body {
font-family: "Poppins", sans-serif;
}
p,
label,
input[type=text] {
font-size: 13px;
background-color: var(--background);
}
h1 {
font-size: 15px;
font-weight: 400;
color: var(--active);
position: relative;
width: fit-content;
margin: 0.3em auto;
}
/*navigation*/
#nav,
#navPlayers {
z-index: 99;
display: flex !important;
flex-flow: row nowrap;
justify-content: space-around;
position: relative;
width: 100vw;
max-width: 800px;
margin: 0 auto;
}
#navPlayers>button {
/*width: 24.9vw;*/
color: var(--nonactive);
}
#navPlayers>button:active {
color: var(--active);
}
/*centers navigations*/
/*
#forms, #expertDIV {
width: 100%;
margin: 0 auto;
}
*/
.menu {
background-color: var(--background);
border: 1px solid var(--active);
color: var(--active);
text-align: left;
display: inline-block;
font-size: 12px;
margin: 4px 2px;
height: 20px;
}
.menu option {
background-color: var(--background);
color: var(--active);
}
.but {
background-color: var(--background);
border: 1px solid + var(--active);
color: var(--active);
padding: 4px 4px;
text-align: center;
display: inline-block;
font-size: 11px;
margin: 4px 4px;
width: 20vw;
border: solid 1px var(--textcolor);
border-radius: 25px;
}
.but:hover,
.but:active {
background-color: var(--nonactive);
color: var(--active) !important;
}
.toggle {
background-color: var(--background);
border: 1px solid + var(--active);
color: var(--active);
padding: 4px 7.8px;
margin: 4px 0px;
}
.slider {
appearance: none;
-webkit-appearance: none;
height: 6px;
border-radius: 6px;
background-color: #9b9b9b;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
position: absolute;
left: 135px;
width: 170px;
overflow: hidden;
}
.slider:hover,
.slider:active {
opacity: 1;
}
/*slider knob*/
.slider::-webkit-slider-runnable-track {
-webkit-appearance: none;
color: var(--active);
margin-top: -1px;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--active);
box-shadow: -80px 0 0 80px var(--active);
}
.slider::-moz-range-progress {
background-color: var(--active);
}
label {
position: absolute;
color: var(--textcolor);
}
input[type=text] {
position: absolute;
color: var(--active);
border: 1px solid var(--active);
}
input[type=text]:hover:not([disabled]),
input[type=checkbox]:hover,
.menu:hover,
.menu:active,
.option:hover,
.option:active {
background-color: var(--nonactive);
color: var(--active) !important;
}
input[type=checkbox] {
position: absolute;
border: none;
background-color: var(--background);
text-align: center;
display: table-cell;
vertical-align: middle;
width: 20px !important;
height: 20px !important;
appearance: none;
border-radius: 10%;
box-shadow: none;
font-size: 1em;
border: 1px solid var(--active);
}
input[type='checkbox']:checked {
background-color: var(--active);
}
input[type='checkbox']:checked:after {
content: '\2713';
color: var(--background);
}
#oph_-1 {
width: 174px !important;
}
/*System page*/
#proceedbutton {
background-color: var(--background) !important;
color: red !important;
border: 1px solid red;
}
#proceedbutton:hover,
#proceedbutton:active {
background-color: red !important;
color: white !important;
}
#versionbutton,
#cancelbutton {
background-color: var(--background) !important;
}
#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;
}