console not shown at start, infobox for touch device

client/cssFiles/SEAWebClientGroup.css

@@ -81,7 +81,15 @@
 	display: none;
 }
 
-.button-info:hover + .info-box {
+.info-box-visible-by-click {
+	display: inline-block;
+}
+
+.icon-info {
+	margin-left: 4px;
+}
+
+.icon-info:hover + .info-box {
 	display: inline-block;
 }
 

client/jsFiles/SEAWebClientGroup.js

@@ -75,6 +75,7 @@ function createRowForParameters(component) {
         component.type == 'enum'
     ) {
         let input_element;
+        console.log(component);
         switch (component.type) {
             case 'enum':
                 input_element = createEnum(component);
@@ -122,7 +123,7 @@ function createLeftColumnForModules(component) {
     var left = document.createElement('span');
     left.classList.add('col-left');
     if (component.statusname) {
-        left.appendChild(create_status_icon(component));
+        left.appendChild(createStatusIcon(component));
     }
     let modules_title = document.createElement('span');
     modules_title.classList.add('modules-title');
@@ -135,29 +136,40 @@ function createLeftColumnForModules(component) {
         left.appendChild(status_info);
     }
     if (component.info) {
-        let btn_info = document.createElement('span');
+        let icon_info = createInfoIcon(component);
-        btn_info.innerHTML = '(i)';
+        left.appendChild(icon_info);
-        btn_info.classList.add('button-info');
+        left.appendChild(createInfoBox(component));
-        left.appendChild(btn_info);
-        left.appendChild(create_info(component));
     }
     return left;
 
-    function create_status_icon(component) {
+    function createStatusIcon(component) {
         let icon_status = document.createElement('img');
         icon_status.setAttribute('src', 'res/icon_status.png');
         icon_status.setAttribute('name', component.title + ':status');
-        icon_status.classList.add('modules-icon');
+        icon_status.classList.add('modules-icon', 'status-icon');
-        icon_status.classList.add('status-icon');
         return icon_status;
     }
 
-    function create_info(component) {
+    function createInfoIcon(component) {
+        let icon_info = document.createElement('img');
+        icon_info.setAttribute('src', 'res/icon_info.png');
+        icon_info.setAttribute('name', component.title + ':status');
+        icon_info.classList.add('modules-icon', 'icon-info');
+        if (isTouchDevice) {
+            icon_info.onclick = function (event) {
+                event.stopPropagation()
+                icon_info.nextSibling.classList.toggle("info-box-visible-by-click");
+            }
+        }
+        return icon_info;
+    }
+
+    function createInfoBox(component) {
         // Creates info-box, which isn't visible by default but can be displayed.
-        let infoBox = document.createElement('span');
+        let info_box = document.createElement('span');
-        infoBox.classList.add("info-box");
+        info_box.classList.add("info-box");
-        infoBox.innerHTML = '<b>' + component.title + '</b>: ' + component.info;
+        info_box.innerHTML = '<b>' + component.title + '</b>: ' + component.info;
-        return infoBox;
+        return info_box;
     }
 }
 
@@ -187,6 +199,7 @@ function createRightColumnForModules(component) {
 
 function createPushbutton(component) {
     // Creates row-element containing a push button
+    console.log ('create pushbutton');
     var elem = createInputElement(component);
     elem.classList.add("push-button");
     elem.onclick = function (e) {

client/jsFiles/SEAWebClientMain.js

@@ -15,6 +15,7 @@ var writePermission = false;
 var panelOn = true;
 var firstState = 0;
 var showParams = false;
+var showConsole = false;
 
 function Settings() {
     // get key/value pairs from search part of the URL and fill into query
@@ -73,7 +74,7 @@ new Settings()
     .treat("debugGraphics", "dg", to_bool, false)
     .treat("hostPort", "hp", 0, location.hostname + ":" + location.port)
     .treat("showMain", "sm", to_bool, true)
-    .treat("showConsole", "sc", to_bool, true)
+    .treat("initConsole", "ic", to_bool, true)
     .treat("showGraphics", "sg", to_bool, true) // false)
     .treat("hideRightPart", "hr", to_bool, false) //used to completely disable the right part
     .treat("wideGraphs", "wg", to_bool, false) //used to toggle the size of the graphs part
@@ -96,7 +97,7 @@ if (window.instrument) {
 
 function loadFirstBlocks() {
     if (showMain) pushInitCommand("getblock?path=main&", "main")
-    if (showConsole) pushInitCommand("console?", "console")
+    if (initConsole) pushInitCommand("console?", "console")
     if (nColumns == 1) { // probably mobile phone}
         if (showGraphics) pushInitCommand("gettime?time=" + window.timerange + "&", "graphics")
         var goFS = document.getElementById('header');
@@ -173,11 +174,10 @@ window.onload = function() {
 
     let logIcon = document.getElementsByClassName("log-icon-container")[0];
     logIcon.onclick = function(){
-        if (window.showConsole) {
+        if (showConsole) {
-            window.showConsole = false;
+            showConsole = false;
         } else {
-            window.showConsole = true;
+            showConsole = true;
-            // Initialize?
         }
         adjustGrid();
     }

client/jsFiles/SEAWebClientResponsivity.js

@@ -70,7 +70,7 @@ function adjustGrid() {
 
     switch (nColumns) {
     case 1:
-        if (window['showConsole']) {
+        if (showConsole) {
             if (showParams) {
                 style(0); // hide
                 style(1); // hide
@@ -100,7 +100,7 @@ function adjustGrid() {
     case 3:
         rightWidth = Math.min(50, MINWIDTH / width * 100);
         leftWidth = 100 - rightWidth;
-        if (window['showConsole']) {
+        if (showConsole) {
             if (nRows == 1) {
                 if (showParams) {
                     style(0,leftWidth + "vw","100vh");
@@ -157,7 +157,7 @@ function adjustGrid() {
     case 4:
         rightWidth = MINWIDTH / width * 100;
         leftWidth = 100 - 2 * rightWidth;
-        if (window['showConsole']) {
+        if (showConsole) {
             style(0,leftWidth + "vw","100vh");
             style(1,rightWidth + "vw","50vh");
             style(2,rightWidth + "vw","50vh");