diff --git a/data/index.css b/data/index.css index a552ee5c..28c9aeec 100644 --- a/data/index.css +++ b/data/index.css @@ -56,6 +56,10 @@ h1,h2 { color: #b60f62; /* StarMod base color??? */ } +div { + line-height: 1.6; /* recommended height */ +} + /* for toggleModal */ .modal { position:fixed; @@ -76,28 +80,28 @@ h1,h2 { .ndiv { /* border: 2px solid black; */ - margin-left: 50px; + margin-left: 25px; border-radius: 12px; } /*table layout */ -.table-style { +.table { font-family: Arial, Helvetica, sans-serif; border-collapse: collapse; width: 100%; border-radius: .5em; /*does not seem to work */ } -.table-style td, .table-style th { +.table td, .table th { border: 1px solid #000000; padding: 6px; } -/* .table-style tr:nth-child(even){background-color: #f2f2f2;} */ +/* .table tr:nth-child(even){background-color: #f2f2f2;} */ -/* .table-style tr:hover {background-color: #ddd;} */ +/* .table tr:hover {background-color: #ddd;} */ -.table-style th { +.table th { /* padding-top: 12px; padding-bottom: 12px; */ text-align: left; @@ -106,27 +110,27 @@ h1,h2 { } /* drag and drop style */ -.container { +.mdlContainer { display: grid; grid-template-columns: repeat(4, 1fr); } -.screenBox { +.module { border: 3px solid #666; /* background-color: #ddd; */ /* background: linear-gradient(to bottom, #33ccff 0%, #ff99cc 100%); */ background: linear-gradient(to bottom, #ffbe33 0%, #b60f62 100%); border-radius: 21px; /* from .5em */ padding: 10px; - margin: 10px; /*space around boxes */ + margin: 10px; /*space around modules */ cursor: move; } -.screenBox:hover { +.module:hover { background-color: #00BFFF; } -.screenColumn { +.mdlColumn { border: 3px solid #666; /* border-radius: .5em; */ border-radius: 21px; @@ -134,7 +138,7 @@ h1,h2 { /* cursor: move; */ } -.screenBox.over, .screenColumn.over { +.module.over, .mdlColumn.over { border: 3px dotted #666; } @@ -184,7 +188,7 @@ h1,h2 { /* https://www.w3schools.com/howto/howto_css_tooltip.asp */ -/* Tooltip container */ +/* Tooltip mdlContainer */ .tooltip { position: relative; display: inline-block; @@ -226,7 +230,7 @@ h1,h2 { border-color: #555 transparent transparent transparent; } - /* Show the tooltip text when you mouse over the tooltip container */ + /* Show the tooltip text when you mouse over the tooltip mdlContainer */ .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; diff --git a/data/index.htm b/data/index.htm index 4c182daf..b3129569 100644 --- a/data/index.htm +++ b/data/index.htm @@ -29,7 +29,7 @@ -
+

StarMod by MoonModules 💫

@@ -40,14 +40,14 @@

StarMod by MoonModules 💫

-
-
+
+
-
+
-
+
-
+
☾
diff --git a/data/index.js b/data/index.js index 34a372d7..35e9edc4 100644 --- a/data/index.js +++ b/data/index.js @@ -9,8 +9,8 @@ let d = document; let ws = null; -let screenColumnNr = 0; -let nrOfScreenColumns = 4; +let mdlColumnNr = 0; +let nrOfMdlColumns = 4; let userFunId = ""; let htmlGenerated = false; let jsonValues = {}; @@ -18,6 +18,7 @@ let uiFunCommands = []; let model = null; //model.json (as send by the server), used by FindVar let savedView = null; let savedData = {}; +let varNodeMapping = {}; function gId(c) {return d.getElementById(c);} function cE(e) { return d.createElement(e); } @@ -29,7 +30,7 @@ function handleVisibilityChange() { function onLoad() { makeWS(); - initScreenColumns(); + initMdlColumns(); d.addEventListener("visibilitychange", handleVisibilityChange, false); } @@ -71,9 +72,7 @@ function makeWS() { showHideModules(gId("vApp")); //default //send request for uiFun - if (uiFunCommands.length) { //flush commands not already send - flushUIFunCommands(); - } + flushUIFunCommands(); } else console.log("Error: no valid model", json); @@ -130,10 +129,10 @@ function generateHTML(json, parentNode = null, rowNr = -1) { } else { // json is variable let variable = json; - //if root (type module) add the html to one of the screen columns + //if root (type module) add the html to one of the mdlColumns if (parentNode == null) { - parentNode = gId("screenColumn" + screenColumnNr); - screenColumnNr = (screenColumnNr +1)%nrOfScreenColumns; + parentNode = gId("mdlColumn" + mdlColumnNr); + mdlColumnNr = (mdlColumnNr +1)%nrOfMdlColumns; } //if System, set the current view @@ -150,182 +149,148 @@ function generateHTML(json, parentNode = null, rowNr = -1) { return; } - let newNode = null; //newNode will be appended to the parentNode after if then else and returned - let valueNode; //the node containing the variable + let divNode = null; //divNode will be appended to the parentNode after if then else and returned + let varNode = null; //the node containing the variable let rangeValueNode = null; // let buttonSaveNode = null; // let buttonCancelNode = null; let ndivNeeded = true; //for details ("n"), module and table do not need an extra div for details - let labelNode = cE("label"); //set labelNode before if, will be used in if then else + let labelNode = cE("label"); labelNode.innerText = initCap(variable.id); // the default when not overridden by uiFun let isPartOfTableRow = (rowNr != -1); - if (!isPartOfTableRow) { - newNode = cE("p"); - if (variable.type != "button") newNode.appendChild(labelNode); //add label (tbd:must be done by childs n table cell) + let parentNodeType = parentNode.nodeName.toLocaleLowerCase(); + + divNode = cE("div"); + + if (parentNodeType != "td") { + if (variable.type != "button") divNode.appendChild(labelNode); //add label (tbd:must be done by childs n table cell) } - let parentNodeType = parentNode.nodeName.toLocaleLowerCase(); - if (variable.type == "module") { ndivNeeded = false; - valueNode = cE("div"); - // valueNode.draggable = true; - valueNode.className = "screenBox"; + varNode = cE("div"); let h2Node = cE("h2"); h2Node.innerText = initCap(variable.id); - valueNode.appendChild(h2Node); + varNode.appendChild(h2Node); - setupScreenBox(valueNode); + setupModule(varNode); //enable drag and drop of modules } else if (variable.type == "table") { ndivNeeded = false; - //add label in an extra row - let pNode = cE("p"); - pNode.appendChild(labelNode); - parentNode.appendChild(pNode); //add the table label to the parent - //add table - valueNode = cE("table"); - valueNode.className = "table-style" + varNode = cE("table"); let theadNode = cE("thead"); theadNode.appendChild(cE("tr")); - valueNode.appendChild(theadNode); //row for header + varNode.appendChild(theadNode); //row for header - valueNode.appendChild(cE("tbody")); + varNode.appendChild(cE("tbody")); //variable.n will add the columns } else if (parentNodeType == "table") { // console.log("tableChild", parentNode, parentNode.firstChild.firstChild, variable); - //table header //no newNode created - //table add the id in the header - //rowNr = -1 for th so uiFun will be called and processed in changeHTML - valueNode = cE("th"); - // valueNode.id = variable.id; - valueNode.innerText = initCap(variable.id); //label uiFun response can change it - parentNode.firstChild.firstChild.appendChild(valueNode); // (containing th) - - // newNode = valueNode; + + varNode = cE("th"); + varNode.innerText = initCap(variable.id); //label uiFun response can change it + parentNode.firstChild.firstChild.appendChild(varNode); // (containing th) + } else if (variable.type == "select") { if (variable.ro) { //e.g. for reset/restart reason: do not show a select but only show the selected option - valueNode = cE("span"); - if (variable.value) valueNode.innerText = variable.value; - - if (savedData[variable.id]) { - // console.log("genHTML select table get savedData", valueNode, variable, savedData[variable.id]); - changeHTML(valueNode, {"data":savedData[variable.id]}); - } + varNode = cE("span"); } else { - //

with