diff --git a/client/SEAWebClient.html b/client/SEAWebClient.html index 7b63727..d742de5 100644 --- a/client/SEAWebClient.html +++ b/client/SEAWebClient.html @@ -33,7 +33,7 @@ - + diff --git a/client/cssFiles/SEAWebClientGroup.css b/client/cssFiles/SEAWebClientGroup.css index d598194..ce390d3 100644 --- a/client/cssFiles/SEAWebClientGroup.css +++ b/client/cssFiles/SEAWebClientGroup.css @@ -41,6 +41,20 @@ position: relative; } +.row-clickable { + cursor: pointer; +} + +.row-clickable:hover { + background-color:WhiteSmoke; + opacity: .7; +} + +.row-disabled { + opacity: .3; + /* background-color: lightgray; */ +} + .clickable:hover { background-color: lightgray; } @@ -78,6 +92,10 @@ float: right; } +.col-right-disabled { + display: none; +} + .modules-title { display: inline-block; min-width: 120px; @@ -88,17 +106,25 @@ width: 16px; height: 16px; line-height: 16px; - margin-left: 4px; + margin-right: 4px; opacity: .8; } .status-icon { border-radius: 50%; - background-color: dimgray; + background-color: lightgray; opacity: .8; /* box-shadow: -2px -2px 5px inset; */ } +.status-icon-idle { + background-color: lightgray; +} + +.status-icon-idle { + background-color: white; +} + .status-icon-busy { background-color: yellow; } diff --git a/client/cssFiles/SEAWebClientMain.css b/client/cssFiles/SEAWebClientMain.css index a31c9d3..654c31e 100644 --- a/client/cssFiles/SEAWebClientMain.css +++ b/client/cssFiles/SEAWebClientMain.css @@ -136,6 +136,20 @@ meta, body { overflow: hidden; } +.grid-element-3 { + position: absolute; + display: block; + bottom: 0; + width: 100%; + height: 0; + opacity: .9; + z-index: 1000; +} + +.grid-element-3-visible { + height: 50%; +} + /* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* CLOSE CROSS */ @@ -161,7 +175,7 @@ meta, body { /* LOG ICON */ #log-icon-container { - z-index: 50; + z-index: 1001; bottom: 9px; right: 12px; position: fixed; diff --git a/client/jsFiles/SEAWebClientCommunication.js b/client/jsFiles/SEAWebClientCommunication.js index 11c0044..d08c705 100644 --- a/client/jsFiles/SEAWebClientCommunication.js +++ b/client/jsFiles/SEAWebClientCommunication.js @@ -218,12 +218,16 @@ function updateValues(message, src) { } // Handles changes of parameter-values - for (var i = 0; i < message.updates.length; i++) { let component = message.updates[i]; let value = component.value; let matches = document.getElementsByName(component.name); - console.log(component); + + // Check for status updates + if (component.name.split(":")[1] == 'status') { + updateStatus(component); + + } for (var j = 0; j < matches.length; j++) { let elem = matches[j]; @@ -263,6 +267,39 @@ function updateValues(message, src) { } } +function updateStatus(component) { + if (debug_communication_daniel) { + console.log("%cfunction: updateStatus", "color:white;background:darkblue"); + } + + let matches = document.getElementsByName(component.name); + let status_icon = matches[0]; + let row = status_icon.closest(".row"); + let right = row.lastChild; + right.classList.remove('col-right-disabled'); + let statusCode = component.statuscode; + switch (statusCode) { + case 0: + status_icon.classList.add('status-icon-disabled'); + row.classList.add('row-disabled'); + right.innerHTML = 'col-right-disabled'; + break; + case 1: + status_icon.classList.add('status-icon-idle'); + break; + case 2: + status_icon.classList.add('status-icon-warn'); + break; + case 3: + status_icon.classList.add('status-icon-busy'); + break; + case 3: + status_icon.classList.add('status-icon-error'); + break; + } + +} + // %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% // XMLHttpRequest diff --git a/client/jsFiles/SEAWebClientGroup.js b/client/jsFiles/SEAWebClientGroup.js index 7ed715c..47027ea 100644 --- a/client/jsFiles/SEAWebClientGroup.js +++ b/client/jsFiles/SEAWebClientGroup.js @@ -46,11 +46,13 @@ function createContent(s, message) { var component = message.components[i]; if (!("title" in component)) component.title = component.name; - if (!("command" in component)) + if (!("command" in component)) component.command = component.name; createFunc = window['create_' + component.type + '_row'] - if (createFunc) - content.appendChild(createFunc(s, component)) + if (createFunc) { + let row = createFunc(s, component); + content.appendChild(row); + } } return content; } @@ -74,7 +76,6 @@ function create_group_row(s, component) { } // Creates row-element containing link. - var title = component.title; var row = document.createElement('row'); @@ -148,11 +149,12 @@ function create_rdlink_row(s, component) { var left = createTitle(component, 1); left.id = component.name; left.name = component.title; // or setAttribute('name'.. ? - - // left.onclick = function () { - // getGroup(s, component.title); - // } - return appendToContent(component, left, createParElement(component)); + let row = appendToContent(component, left, createParElement(component)); + row.onclick = function () { + getGroup(s, component.title); + } + row.classList.add('row-clickable'); + return row; } function create_pushbutton_row(s, component) { @@ -338,9 +340,11 @@ function posTextfield(s, left) { console.log("%cfunction: posTextfield", "color:white;background:salmon"); } - var content = swiper[s].slides[swiper[s].activeIndex].childNodes[1]; - var row = left.parentNode; - content.scrollTop = row.offsetTop - 30; + // var content = swiper[s].slides[swiper[s].activeIndex].childNodes[1]; + // var row = left.parentNode; + // content.scrollTop = row.offsetTop - 30; + + // ---------------------> Not working anymore since swiper was removed!!! } function resizeTextfield(input) { @@ -506,35 +510,29 @@ function createTitle(component, modules) { // At the modules-block a status-icon is added var left = document.createElement('span'); - // var status_icon = document.createElement('p'); - // status_icon.classList.add("status-icon"); - if (component.info) { - left.classList.add("col-left", "event-toggle-info"); + // if (component.info) { + // left.classList.add("col-left", "event-toggle-info"); - left.onclick = function () { - var infoBox = left.parentNode.childNodes[0]; - if (infoBox.style.display == "none") { - infoBox.style.display = "block"; - } else { - infoBox.style.display = "none"; - } - } + // left.onclick = function () { + // var infoBox = left.parentNode.childNodes[0]; + // if (infoBox.style.display == "none") { + // infoBox.style.display = "block"; + // } else { + // infoBox.style.display = "none"; + // } + // } - left.innerHTML = component.title + "(i)"; - } + // left.innerHTML = component.title + "(i)"; + // } var title = component.title; if (modules) { - var icon_status = ''; - var icon_edit = ''; - var icon_info = ''; + var icon_status = ''; - left.innerHTML = '' + component.title + ''; if (component.statusname) { - left.innerHTML += icon_status; + left.innerHTML = icon_status; } - left.innerHTML += icon_edit; - left.innerHTML += icon_info; + left.innerHTML += '' + component.title + ''; } else { left.innerHTML = component.title; } @@ -587,6 +585,7 @@ function appendToContent(component, left, right) { row.appendChild(createInfo(component)); } row.appendChild(left); + console.log(component); row.appendChild(right); return row; } diff --git a/client/jsFiles/SEAWebClientMain.js b/client/jsFiles/SEAWebClientMain.js index ea09984..c155213 100644 --- a/client/jsFiles/SEAWebClientMain.js +++ b/client/jsFiles/SEAWebClientMain.js @@ -86,7 +86,6 @@ new Settings() .treat("hostPort", "hp", 0, location.hostname + ":" + location.port) .treat("showMain", "sm", to_bool, true) .treat("showConsole", "sc", to_bool, true) - .treat("showOverview", "so", to_bool, false) .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 @@ -116,7 +115,6 @@ function loadFirstBlocks() { if (showConsole) pushInitCommand("console?", "console") if (nColumns == 1) { // probably mobile phone} if (showGraphics) pushInitCommand("gettime?time=" + window.timerange + "&", "graphics") - if (showOverview) pushInitCommand("getblock?path=_overview&", "overview") var goFS = document.getElementById('header'); goFS.addEventListener( 'click', @@ -126,7 +124,6 @@ function loadFirstBlocks() { false, ); } else { - if (showOverview) pushInitCommand("getblock?path=_overview&", "overview") if (showGraphics) pushInitCommand("gettime?time=" + window.timerange + "&", "graphics") // last is shown first } @@ -196,14 +193,26 @@ window.onload = function() { document.getElementById('close-cross').innerHTML = ''; } } + if (elements[0].style.display == "inline-block") { // only graphics is visible + elements[0].style.display = "none"; // hide graphics + elements[1].style.display = "inline-block"; // show modules + elements[2].style.display = "none"; // hide parameters + } else if (elements[1].style.display == "inline-block") { // only modules are visible + elements[0].style.display = "inline-block"; // show graphics + elements[1].style.display = "none"; // hide modules + elements[2].style.display = "none"; // hide parameters + } else if (elements[2].style.display == "inline-block") { // only parameters are visible + elements[0].style.display = "none"; // hide graphics + elements[1].style.display = "inline-block"; // show modules + elements[2].style.display = "none"; // hide parameters + } adjustGrid(); } } let logIcon = document.getElementById("log-icon-container"); logIcon.onclick = function(){ - console.log("show log"); - adjustGrid(); + elements[3].classList.toggle('grid-element-3-visible'); } var homeButton = document.getElementById("home-icon"); diff --git a/client/jsFiles/SEAWebClientResponsivity.js b/client/jsFiles/SEAWebClientResponsivity.js index ef1df6d..e4810f6 100644 --- a/client/jsFiles/SEAWebClientResponsivity.js +++ b/client/jsFiles/SEAWebClientResponsivity.js @@ -22,6 +22,7 @@ function createGrid() { for (var i = 0; i < 4; i++) { var element = document.createElement('div'); element.classList.add("grid-element"); + element.classList.add("grid-element-"+i); document.getElementById("center").appendChild(element); elements.push(element); } @@ -86,34 +87,22 @@ function adjustGrid() { style(0,"100vw","100vh"); style(1); // hide style(2); // hide - style(3); // hide - return + // style(3); // hide + return; } switch (nColumns) { case 1: if (menuMode) { leftWidth = Math.min(100, MINWIDTH / width * 100); - style(0,leftWidth + "vw","100vh"); + style(1,leftWidth + "vw","100vh"); } else { // we may want to switch to 90vh on safari ios (workaround) - style(0,"100vw","100vh"); + style(0); // hide + style(1,"100vw","100vh"); + style(2); // hide + // style(3); // hide } - - - if (elements[0].style.display == "inline-block") { // only graphics is visible - elements[0].style.display = "none"; // hide graphics - elements[1].style.display = "inline-block"; // show modules - elements[2].style.display = "none"; // hide parameters - } else if (elements[1].style.display == "inline-block") { // only modules are visible - elements[0].style.display = "inline-block"; // show graphics - elements[1].style.display = "none"; // hide modules - elements[2].style.display = "none"; // hide parameters - } else if (elements[2].style.display == "inline-block") { // only parameters are visible - elements[0].style.display = "none"; // hide graphics - elements[1].style.display = "inline-block"; // show modules - elements[2].style.display = "none"; // hide parameters - } break; case 2: rightWidth = Math.min(50, MINWIDTH / width * 100); @@ -123,25 +112,29 @@ function adjustGrid() { style(0,leftWidth + "vw","100vh"); style(1); // hide style(2,rightWidth + "vw","100vh"); - style(3); // hide + // style(3); // hide } else { style(0,leftWidth + "vw","100vh"); style(1,rightWidth + "vw","100vh"); style(2); // hide - style(3); // hide + // style(3); // hide } } else { - if (showParams) { - style(0,leftWidth + "vw","100vh"); - style(1); // hide - style(2,rightWidth + "vw","50vh"); - style(3,rightWidth + "vw","50vh"); - } else { - style(0,leftWidth + "vw","100vh"); - style(1,rightWidth + "vw","50vh"); - style(2); // hide - style(3,rightWidth + "vw","50vh"); - } + // if (showParams) { + // style(0,leftWidth + "vw","100vh"); + // style(1); // hide + // style(2,rightWidth + "vw","50vh"); + // style(3,rightWidth + "vw","50vh"); + // } else { + // style(0,leftWidth + "vw","100vh"); + // style(1,rightWidth + "vw","50vh"); + // style(2); // hide + // style(3,rightWidth + "vw","50vh"); + // } + style(0,leftWidth + "vw","100vh"); + style(1,rightWidth + "vw","50vh"); + style(2,rightWidth + "vw","50vh"); + // style(3); // hide } break; case 3: @@ -152,46 +145,50 @@ function adjustGrid() { style(0,leftWidth + "vw","100vh"); style(1); // hide style(2,rightWidth + "vw","100vh"); - style(3); // hide + // style(3); // hide } else { style(0,leftWidth + "vw","100vh"); style(1,rightWidth + "vw","100vh"); style(2); // hide - style(3); // hide + // style(3); // hide } } else { - if (showParams) { - style(0,leftWidth + "vw","100vh"); - style(1); // hide - style(2,rightWidth + "vw","50vh"); - style(3,rightWidth + "vw","50vh"); - } else { - style(0,leftWidth + "vw","100vh"); - style(1,rightWidth + "vw","50vh"); - style(2); // hide - style(3,rightWidth + "vw","50vh"); - } + // if (showParams) { + // style(0,leftWidth + "vw","100vh"); + // style(1); // hide + // style(2,rightWidth + "vw","50vh"); + // style(3,rightWidth + "vw","50vh"); + // } else { + // style(0,leftWidth + "vw","100vh"); + // style(1,rightWidth + "vw","50vh"); + // style(2); // hide + // style(3,rightWidth + "vw","50vh"); + // } + style(0,leftWidth + "vw","100vh"); + style(1,rightWidth + "vw","50vh"); + style(2,rightWidth + "vw","50vh"); + // style(3); // hide } break; case 4: rightWidth = MINWIDTH / width * 100; leftWidth = 100 - 2 * rightWidth; - if (nRows == 1 || !window['showConsole']) { + // if (nRows == 1 || !window['showConsole']) { style(0,leftWidth + "vw","100vh"); style(1,rightWidth + "vw","100vh"); - if (window['showConsole']) { - style(2); // hide - style(3,rightWidth + "vw","100vh"); - } else { + // if (window['showConsole']) { + // style(2); // hide + // style(3,rightWidth + "vw","100vh"); + // } else { style(2,rightWidth + "vw","100vh"); - style(3); // hide - } - } else { - style(0,leftWidth + "vw","100vh"); - style(1,rightWidth + "vw","50vh"); - style(2,rightWidth + "vw","50vh"); - style(3,(2 * rightWidth) + "vw","50vh"); - } + // style(3); // hide + // } + // } else { + // style(0,leftWidth + "vw","100vh"); + // style(1,rightWidth + "vw","50vh"); + // style(2,rightWidth + "vw","50vh"); + // style(3,(2 * rightWidth) + "vw","50vh"); + // } break; default: break;