Merge pull request #59 from ewowi/dev

CLion hints and newui table/multirow

.gitignore

@@ -1,4 +1,5 @@
 .pio
 node_modules
 .vscode
-.DS_Store
+.DS_Store
+.idea

data/index.js

@@ -719,12 +719,13 @@ function varRemoveValuesForRow(variable, rowNr) {
 
 //process json from server, json is assumed to be an object
 function receiveData(json) {
-  // console.log("receiveData", json);
 
   if (isObject(json)) {
     for (let key of Object.keys(json)) {
       let value = json[key];
 
+      // console.log("receiveData", key + ": " + JSON.stringify(json[key]));
+
       //tbd: for each node of a variable (rowNr)
 
       //special commands

data/newui/index.htm

@@ -19,7 +19,7 @@
   <link rel="icon" href="https://ewowi.github.io/StarDocs/assets/images/ui/starbase/favicon-16x16.png">
   <script src="index.js"></script>
   <script src="theme.js"></script>
-  <link rel="stylesheet" href="../theme.css">
+  <link rel="stylesheet" href="theme.css">
   <script src="mainnav.js"></script>
   <link rel="stylesheet" href="mainnav.css">
   <script src="modules.js"></script>

data/newui/index.js

@@ -26,9 +26,20 @@ class Controller {
 
     this.modules = new Modules();
 
+    let body = gId("body");
+
+    body.innerHTML += `<h1>StarLight 💫</h1>`
+    // body.innerHTML += "<p>"
+
     this.theme = new Theme();
     this.theme.createHTML();
     this.theme.getTheme();
+
+    // body.innerHTML += "</p>"
+    if (window.location.href.includes("127.0.0.1")) {
+      //add checkbox
+      body.innerHTML += `<input id="Live.on" type="checkbox" class="checkbox" checked>`
+    }
 
     this.mainNav = new MainNav(this.modules.model);
     this.mainNav.createHTML();
@@ -62,6 +73,7 @@ class Controller {
 
     // every 1 second
     window.setInterval(function() {
+      if (gId("Live.on").checked)
       controller.modules.generateData() //generates data for each variabe in model
     }, 1000);
 
@@ -208,6 +220,7 @@ const UINT16_MAX = 256*256-1;
 
 function gId(c) {return document.getElementById(c);}
 function cE(e) { return document.createElement(e); }
+function cCE(p, e) {let n = document.createElement(e); p.appendChild(n); return n; } //add node to parent
 
 function isLowerCase(s) {
   return s.toLowerCase() == s

data/newui/mainnav.js

@@ -22,7 +22,7 @@ class MainNav {
        or shrink if there is nothing to show in the alerts area -->
   <div id="alerts" class="text-center bg-error">
     <!-- Place the alert text in a padded div so that when it's not present the alert area will be hidden-->
-    <div class="pa-3 text-center">some alert text</div>
+    <!-- <div class="pa-3 text-center">some alert text</div>-->
   </div>
   
   <!-- Main navigation bar has a fixed height and so it is always visible -->
@@ -105,14 +105,14 @@ class MainNav {
 
     // Update the page content
     if (this.#createHTMLFun) {
-        gId('page').innerHTML = 
+      gId('page').innerHTML = 
       `<div class="d-flex flex-column h-100 overflow-hidden">
         <div class="flex-shrink-0">
           <h1 class="title">${this.#activeModuleJson.id}</h1>
         </div>
-        <div class="overflow-y-auto">` + this.#createHTMLFun(this.#activeModuleJson) +
-        `</div>
+        <div id="Module.main" class="overflow-y-auto"></div>
       </div>`
+      this.#createHTMLFun(this.#activeModuleJson, gId("Module.main"))
     }
     //done after innerHTML as it needs to find the nodes. tbd: createHTMLFun adds to dom directly
     if (this.#setDefaultValuesFun) {

data/newui/modules.css

@@ -9,28 +9,175 @@
    @license   For non GPL-v3 usage, commercial licenses must be purchased. Contact [email protected]
 */
 
+body {
+	font-family: Arial, Helvetica, sans-serif;
+	background: black;
+	color: var(--text-color);
+	font-size: var(--font-size);
+}
+
+h1,h2 {
+	color: var(--h-color);
+	line-height: 5px;
+}
+
+div {
+	line-height: 2.0; /* 1.6 is recommended height */
+}
+
 /* default nodes */
 label {
-	margin-right: 6px; /*space after*/
-	color: var(--label-color);
+  margin-right: 6px; /*space after*/
+  color: var(--label-color);
+}
+
+comment {
+  /* font-size: 10px; */
+  font-style: italic;
+  margin-left: 6px; /*space before*/
+  color: var(--comment-color);
+}
+
+input {
+	background: grey;
+	color: var(--text-color);
+	font-size: 12px; /*var(--font-size-s) not working for some reason */
+}
+
+/* input[type="button"] {
+	padding: 7px;
+}
+*/
+
+ select {
+	background: transparent;
+	color: var(--text-color);
+	font-size: 12px; /*var(--font-size-s) not working for some reason */
+}
+
+option {
+	color: var(--text-color);
+	background: var(--bg-color);
+}
+
+a {
+	color: var(--h-color); 
+	text-decoration: none;
+}
+
+/* text { /*currently only for buttonSaveNode and buttonCancelNode
+	font-size: 10px;
+} */
+
+/* For textarea variables */
+textarea {
+	width: 100%;
+	height: 100%;
+	border-radius: 12px;
+	background: transparent;
+	color: var(--text-color);
+}
+
+canvas {
+	width: 100%;
+	height: 100%;
+	border-radius: 12px;
+	border: 1px solid black;
+	background: transparent;
+	cursor: default;
+}
+
+.ndiv {
+    /* border: 2px solid black; */
+    margin-left: 20px;
+    /* border-radius: 12px; */
   }
 
-  comment {
-	/* font-size: 10px; */
+  /*table layout */
+.table {
+  font-family: Arial, Helvetica, sans-serif;
+  border-collapse: collapse;
+  width: 0;
+  border-radius: 10px; /*does not seem to work */
+  border-style: hidden; /* hide standard table (collapsed) border */
+  box-shadow: 0 0 0 1px #666; /* this draws the table border  */ 
+}
+
+.table td, .table th {
+  border: 1px solid #000000;
+  padding: 6px;
+  vertical-align: top;
+}
+
+.table th {
+  /* padding-top: 12px;
+  padding-bottom: 12px; */
+  text-align: left;
+  background-color: var(--th-color);
+  color: var(--label-color);
+}
+
+.module, .appmod, .sysmod, .usermod {
+  border: 2px solid var(--border-color);
+  /* background-color: #ddd; */
+  /* background: linear-gradient(to bottom, #33ccff 0%, #ff99cc 100%); */
+  background: var(--bg-color); /* linear-gradient(to bottom, #ffbe33 0%, #b60f62 100%); */
+  border-radius: 10px; /* from .5em */
+  padding: 5px;
+  margin: 5px; /*space around modules */
+  cursor: move;
+}
+
+
+.tooltip {
+	position: relative;
+	display: inline-block;
+	border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
+  }
+
+  /* Tooltip text */
+  .tooltip .tooltiptext {
+	visibility: hidden;
+	width: 120px;
+	background-color: var(--bg-color);
 	font-style: italic;
-	margin-left: 6px; /*space before*/
 	color: var(--comment-color);
+	text-align: center;
+	padding: 5px 0;
+	border-radius: 6px;
+	/* font-size: 10px; SM */
+
+	/* Position the tooltip text */
+	position: absolute;
+	z-index: 1;
+	bottom: 125%;
+	left: 50%;
+	margin-left: -60px;
+
+	/* Fade in tooltip */
+	opacity: 0;
+	transition: opacity 0.3s;
   }
 
-  input {
-	  background: transparent;
-	  color: var(--text-color);
-	  font-size: 8px; /*var(--font-size-s) not working for some reason */
+  /* Tooltip arrow */
+  .tooltip .tooltiptext::after {
+	content: "";
+	position: absolute;
+	top: 100%;
+	left: 50%;
+	margin-left: -5px;
+	border-width: 5px;
+	border-style: solid;
+	border-color: #555 transparent transparent transparent;
   }
 
-  .ndiv {
-    /* border: 2px solid black; */
-    margin-left: 20px;
-    /* border-radius: 12px; */
+  /* Show the tooltip text when you mouse over the tooltip mdlContainer */
+  .tooltip:hover .tooltiptext {
+	visibility: visible;
+	opacity: 1;
   }
-
+
+  /*used for view buttons*/
+  .selected {
+	background: var(--select-color);
+  }