Some new icons with logic (not completed yet)

client/SEAWebClient.html

@@ -81,7 +81,10 @@
 	    </div>
         </div>
 	<div id="center"></div>
-	<div id="close-cross">&#215;</div>
+	<div id="close-cross">
+		<!-- &#215; -->
+		<img class = "icon-close" src="res/icon_sinus.png">
+	</div>
 </body>
 
 </html>

client/cssFiles/SEAWebClientGroup.css

@@ -89,10 +89,14 @@
 	height: 16px;
 	line-height: 16px;
 	margin-left: 4px;
+	opacity: .8;
 }
 
 .status-icon {
-
+	border-radius: 50%;
+	background-color: dimgray;
+	opacity: .8;
+	/* box-shadow: -2px -2px 5px inset; */
 }
 
 .status-icon-busy {
@@ -107,12 +111,18 @@
 	background-color: red;
 }
 
-.edit-icon {
+.info-icon:hover {
-	
+	/* opacity: .6; */
+	cursor: pointer;
+	transform: scale(90%);
+	transition: .5s;
 }
 
-.info-icon {
+.edit-icon:hover {
-	
+	/* opacity: .6; */
+	cursor: pointer;
+	transform: scale(90%);
+	transition: .5s;
 }
 
 /* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

client/cssFiles/SEAWebClientMain.css

@@ -139,11 +139,21 @@ meta, body {
 /* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
 /* CLOSE CROSS */
 
-#close-cross{
+#close-cross {
 	z-index: 50;
 	top: 9px;
 	right: 12px;
 	position: fixed;
 	color: white;
 	cursor: pointer;
+}
+
+.icon-close {
+	height: 20px;
+	width: 20px;
+}
+
+.icon-close:hover {
+	transform: scale(90%);
+	transition: .5s;
 }

client/jsFiles/SEAWebClientCommunication.js

@@ -357,6 +357,7 @@ function successHandler(s, message) {
                 // -> write parameter-block to grid-element2
 
                 showParams = true;
+                document.getElementById('close-cross').innerHTML = '<img class = "icon-close" src="res/icon_close.png">';
                 isl = insertSlide(2, message.title, 'parameters', createContent(2, message));
                 if (nColumns == 1) {
                     elements[1].style.display       = "none";                 // hide modules

client/jsFiles/SEAWebClientGroup.js

@@ -13,7 +13,7 @@ function getGroup(s, name) {
     if (debug_group_daniel) {
         console.log("%cfunction: getGroup", "color:white;background:salmon");
     }
-    // console.log('name: ',name, ', id: '.ClientID);
+    console.log('name: ',name, ', id: '.ClientID);
     reqJSON(s, "http://" + hostPort + "/getblock?path=" + name
             + "&id=" + clientID, successHandler, errorHandler);
 }
@@ -148,11 +148,10 @@ function create_rdlink_row(s, component) {
     var left = createTitle(component, 1);
     left.id = component.name;
     left.name = component.title;  // or setAttribute('name'.. ?
-    // left.classList.add("interactive", "link");
 
-    left.onclick = function () {
+    // left.onclick = function () {
-        getGroup(s, component.title);
+    //     getGroup(s, component.title);
-    }
+    // }
     return appendToContent(component, left, createParElement(component));
 }
 
@@ -504,11 +503,13 @@ function createTitle(component, modules) {
 
     // Creates left side of row-tag containing title. Title may hold additional
     // information, which is shown, when title-tag is clicked.
-    // At the modules-block a status-oicon is added
+    // At the modules-block a status-icon is added
 
     var left = document.createElement('span');
-    var status_icon =  document.createElement('p');
+    // var status_icon =  document.createElement('p');
-    status_icon.classList.add("status-icon");
+    // status_icon.classList.add("status-icon");
+    console.log(component);
+    var title = component.title;
     if (component.info) {
         left.classList.add("col-left", "event-toggle-info");
 
@@ -524,14 +525,16 @@ function createTitle(component, modules) {
         left.innerHTML = component.title + "<sup><b>(i)</b></sup>";
     } else {
         if (modules) {
-            left.innerHTML = '<span class = "modules-title">' + component.title + '</span>'
+            var icon_status = '<img class = "modules-icon status-icon" src="res/icon_status.png">';
-                // + '<span class = "modules-icon status-icon">s</span>'
+            var icon_edit   = '<img class = "modules-icon edit-icon" src="res/icon_edit.png">';
-                + '<img class = "modules-icon" src="res/icon_status_16px.png">'
+            var icon_info   = '<img class = "modules-icon info-icon" src="res/icon_info.png" onclick = getGroup(1,"' + title + '")>';
-                // + '<span class = "modules-icon edit-icon">e</span>'
+
-                + '<img  class = "modules-icon" src="res/icon_edit_16px.png">'
+            left.innerHTML = '<span class = "modules-title">' + component.title + '</span>';
-                // + '<span class = "modules-icon info-icon">i</span>'
+            if (component.statusname) {
-                + '<img  class = "modules-icon" src="res/question_mark.png">'
+                left.innerHTML += icon_status;
-            ;
+            }
+            left.innerHTML += icon_edit;
+            left.innerHTML += icon_info;
         } else {
             left.innerHTML = component.title;
         }

client/jsFiles/SEAWebClientMain.js

@@ -81,7 +81,7 @@ function to_bool(string) {
 // example: localhost:5000/SEAWebClient.html?hp=ldmzolliker:5000&dc=1
 // hostPort given and debugCommunication switched on
 new Settings()
-    .treat("debugCommunication", "dc", 0, 2)  // 1: debug synchronous comm. 2: debug syn and asyn comm
+    .treat("debugCommunication", "dc", 0, 0)  // 1: debug synchronous comm. 2: debug syn and asyn comm
     .treat("debugGraphics", "dg", to_bool, false)
     .treat("hostPort", "hp", 0, location.hostname + ":" + location.port)
     .treat("showMain", "sm", to_bool, true)
@@ -179,15 +179,24 @@ window.onload = function() {
     adjustGrid();
 
     let crossElement = document.getElementById("close-cross");
+    // crossElement.innerHTML = '<img class = "icon-graphics" src="res/icon_close.png">';
     
     if(window.hideRightPart){
       document.body.removeChild(crossElement);
     }else{
       crossElement.onclick = function(){
+        console.log(showParams);
         if (showParams) {
             showParams = false;
+            document.getElementById('close-cross').innerHTML = '<img class = "icon-close" src="res/icon_sinus.png">';
         } else {
-            window.wideGraphs = ! window.wideGraphs;
+            if (window.wideGraphs) {
+                window.wideGraphs = false;
+                document.getElementById('close-cross').innerHTML = '<img class = "icon-close" src="res/icon_sinus.png">';
+            } else {
+                window.wideGraphs = true;
+                document.getElementById('close-cross').innerHTML = '<img class = "icon-close" src="res/icon_modules.png">';
+            }
         }
         adjustGrid();
       }