index.css/htm/js refactoring and renaming

index.css - div default lineheight - ndiv smaller margin - rename table-style to table - rename containter to mdlContainter - rename screenColumn to mdlColumn - rename screenBox to module index.htm - rename containter to mdlContainter - rename screenColumn to mdlColumn index.js - rename containter to mdlContainter - rename screenColumn to mdlColumn - rename screenBox to module - add varNodeMapping (WIP) index.js: genHTML - rename newNode to divNode - rename valueNode to varNode - div instead of p - same style for all: div with label, comment, input etc - select: setAtttribute value - use savedData or send uiFun requests - set node in varNodeMapping index.js: receiveData - details: use rowNr - updrow: use tableVar, support multiple rows, use colVars - updVar: use varNodeMapping to set multiple nodes of same var (tables) index.js: changeHTML - add variable parameter - label, comment: use uniform divstyle (no sibling stuff) - table: flushUIFunCommands - select use getAttribute for value - move "span" to "value" "value" support for arrays (table columns) using changeHTML (recursive) - store values in savedData AppEffects.h: setEffect: send rowNr in response SysModModel: add varToValues (WIP) SysModUI: processJson: remove sending value as response (dealt with in ui) SysModWeb, UserModArtNet, UserModDDP, UserModInstances - rename nodes to instances
ewowi · Jan 3, 2024 · a0995ca · a0995ca
1 parent c1aaf8a
commit a0995ca
Show file tree

Hide file tree

Showing 14 changed files with 1,728 additions and 1,635 deletions.
diff --git 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,35 +110,35 @@ 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;
   padding: 10px;
   /* 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
@@ -29,7 +29,7 @@
   </script>
 </head>
 <body onload="onLoad()">
-  <div class="screenBox">
+  <div class="module">
     <h1>StarMod by MoonModules 💫 <div id="instanceName"></div></h1>
     <input type="button" value="App" id="vApp" onclick="showHideModules(this)">
     <input type="button" value="Stage" id="vStage" onclick="showHideModules(this)">
@@ -40,14 +40,14 @@ <h1>StarMod by MoonModules 💫 <div id="instanceName"></div></h1>
     <input type="button" value="Save" id="bSave" onclick="saveModel(this)">
     <div id="instPH"></div>
   </div>
-  <div class="container">
-    <div id="screenColumn0" class = "screenColumn">
+  <div id="mdlContainer" class="mdlContainer">
+    <div id="mdlColumn0" class = "mdlColumn">
     </div>
-    <div id="screenColumn1" class = "screenColumn">
+    <div id="mdlColumn1" class = "mdlColumn">
     </div>
-    <div id="screenColumn2" class = "screenColumn">
+    <div id="mdlColumn2" class = "mdlColumn">
     </div>
-    <div id="screenColumn3" class = "screenColumn">
+    <div id="mdlColumn3" class = "mdlColumn">
     </div>
   </div>
   <div id="connind">&#9790;</div>