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");