diff --git a/client/cssFiles/SEAWebClientGroup.css b/client/cssFiles/SEAWebClientGroup.css index e801f93..95a6749 100644 --- a/client/cssFiles/SEAWebClientGroup.css +++ b/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; } diff --git a/client/jsFiles/SEAWebClientGroup.js b/client/jsFiles/SEAWebClientGroup.js index 06eec24..9b52d37 100644 --- a/client/jsFiles/SEAWebClientGroup.js +++ b/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'); - btn_info.innerHTML = '(i)'; - btn_info.classList.add('button-info'); - left.appendChild(btn_info); - left.appendChild(create_info(component)); + let icon_info = createInfoIcon(component); + left.appendChild(icon_info); + left.appendChild(createInfoBox(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('status-icon'); + icon_status.classList.add('modules-icon', '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'); - infoBox.classList.add("info-box"); - infoBox.innerHTML = '' + component.title + ': ' + component.info; - return infoBox; + let info_box = document.createElement('span'); + info_box.classList.add("info-box"); + info_box.innerHTML = '' + component.title + ': ' + component.info; + 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) { diff --git a/client/jsFiles/SEAWebClientMain.js b/client/jsFiles/SEAWebClientMain.js index d022caf..886a694 100644 --- a/client/jsFiles/SEAWebClientMain.js +++ b/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) { - window.showConsole = false; + if (showConsole) { + showConsole = false; } else { - window.showConsole = true; - // Initialize? + showConsole = true; } adjustGrid(); } diff --git a/client/jsFiles/SEAWebClientResponsivity.js b/client/jsFiles/SEAWebClientResponsivity.js index d58936c..a2ad971 100644 --- a/client/jsFiles/SEAWebClientResponsivity.js +++ b/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");