From 729a47129412f1901f285c3e873a8a8db3ba82a6 Mon Sep 17 00:00:00 2001 From: Eveline-97 Date: Mon, 24 Mar 2025 14:29:51 +0100 Subject: [PATCH] duplicate styling to css file, comment out in js --- djster_webcontrol.js | 91 +++++++++++++++++------------- ui-style.css | 128 +++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 182 insertions(+), 37 deletions(-) create mode 100644 ui-style.css diff --git a/djster_webcontrol.js b/djster_webcontrol.js index e28c915..26aa100 100644 --- a/djster_webcontrol.js +++ b/djster_webcontrol.js @@ -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: + /* + + + */ 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}})" diff --git a/ui-style.css b/ui-style.css new file mode 100644 index 0000000..010ea18 --- /dev/null +++ b/ui-style.css @@ -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; +} \ No newline at end of file