diff --git a/client/cssFiles/SEAWebClientConsole.css b/client/cssFiles/SEAWebClientConsole.css index 84c88df..2da4c5a 100644 --- a/client/cssFiles/SEAWebClientConsole.css +++ b/client/cssFiles/SEAWebClientConsole.css @@ -8,6 +8,7 @@ width: 100%; padding: 26px 0px 0px 0px; background-color: darkgray; + display: none; } .commandline { @@ -33,6 +34,6 @@ width: 100%; height: 100%; overflow-y: auto; - background-color: white; - color: black; + background-color: #303030; + color: lightgray; } \ No newline at end of file diff --git a/client/cssFiles/SEAWebClientGraphics.css b/client/cssFiles/SEAWebClientGraphics.css index 1926539..b99b079 100644 --- a/client/cssFiles/SEAWebClientGraphics.css +++ b/client/cssFiles/SEAWebClientGraphics.css @@ -37,7 +37,7 @@ width: 100%; display: flex; flex-flow: column; - margin-top: 30px; + /* margin-top: 30px; */ } .graph{ diff --git a/client/cssFiles/SEAWebClientGroup.css b/client/cssFiles/SEAWebClientGroup.css index ce390d3..bc51208 100644 --- a/client/cssFiles/SEAWebClientGroup.css +++ b/client/cssFiles/SEAWebClientGroup.css @@ -110,6 +110,8 @@ opacity: .8; } +/* ------------------------------ status-icon ------------------------------ */ + .status-icon { border-radius: 50%; background-color: lightgray; @@ -137,18 +139,21 @@ background-color: red; } -.info-icon:hover { - /* opacity: .6; */ - cursor: pointer; - transform: scale(90%); - transition: .5s; -} +.status-info { + color: white; + background-color: #303030; + opacity: 0; + position: absolute; + left: 20px; + top: 2px; + z-index: 100; + padding: 2px; + border-radius: 6px; + transition: 1s; +} -.edit-icon:hover { - /* opacity: .6; */ - cursor: pointer; - transform: scale(90%); - transition: .5s; +.status-icon:hover ~ .status-info { + opacity: 1.0; } /* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ diff --git a/client/cssFiles/SEAWebClientMain.css b/client/cssFiles/SEAWebClientMain.css index 654c31e..8d4a5ae 100644 --- a/client/cssFiles/SEAWebClientMain.css +++ b/client/cssFiles/SEAWebClientMain.css @@ -136,6 +136,8 @@ meta, body { overflow: hidden; } +/* ------------------------------ log ------------------------------ */ + .grid-element-3 { position: absolute; display: block; @@ -144,6 +146,7 @@ meta, body { height: 0; opacity: .9; z-index: 1000; + /* transition: 1s; */ } .grid-element-3-visible { diff --git a/client/jsFiles/SEAWebClientCommunication.js b/client/jsFiles/SEAWebClientCommunication.js index d08c705..755c3d7 100644 --- a/client/jsFiles/SEAWebClientCommunication.js +++ b/client/jsFiles/SEAWebClientCommunication.js @@ -231,7 +231,7 @@ function updateValues(message, src) { for (var j = 0; j < matches.length; j++) { let elem = matches[j]; - let type = elem.__ctype__; + let type = elem.__ctype__; // -> Show Dom-Properties if (type == "rdonly" || type == "rdlink") { let text = htmlEscape(component.formatted); if (text) { @@ -271,13 +271,19 @@ 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; + + // Update status info, visible when mouse cursor is hovering over status icon + let status_info = document.getElementsByName(component.name.split(":")[0] + '-info')[0]; + if(status_info) { + status_info.innerHTML = component.formatted; + } + switch (statusCode) { case 0: status_icon.classList.add('status-icon-disabled'); @@ -375,40 +381,25 @@ function successHandler(s, message) { console.log("%cfrom server (reqJSON): " + message.type, "color:white;background:dimgray", message); } - // console.log('CASE: ',message.type,', message: ',message); switch (message.type) { // Response to a "getblock"-server-request. case "draw": if (message.path == "main") { // Happens only initially or at device change. - // for (var sLocal = 0; sLocal < 2; sLocal++) { // was up to MAXBLOCK - // insertSlide(sLocal, message.title, "main", createContent(sLocal, message)); - // } - insertSlide(1, message.title, "main", createContent(1, message)); - insertSlide(2, "", "parameters", createContent(2, {components:[]})); + appendToGridElement(1, message.title, "main", createContent(1, message)); + appendToGridElement(2, "", "parameters", createContent(2, {components:[]})); } else { - if (message.path == '_overview') { - // remove comment of next line when you want overview _instead_ of Graphics - // isl = insertSlide(s, message.title, "_overview", createContent(sLocal, message)); - } else { - // In the module-block a parameter was selected - // -> write parameter-block to grid-element2 - + // In the module-block a parameter was selected + // -> write parameter-block to grid-element2 + isl = appendToGridElement(2, message.title, 'parameters', createContent(2, message)); + if (nColumns == 1) { + elements[1].style.display = "none"; // hide modules + elements[2].style.display = "inline-block"; // show parameters showParams = true; document.getElementById('close-cross').innerHTML = ''; - isl = insertSlide(2, message.title, 'parameters', createContent(2, message)); - if (nColumns == 1) { - elements[1].style.display = "none"; // hide modules - elements[2].style.display = "inline-block"; // show parameters - } else if (nColumns == 2 || nColumns == 3) { - // elements[1].style.display = "none"; // hide modules - // elements[2].style.display = "inline-block"; // show parameters - // // elements[2].style.width = "50vw"; // - // if (nRows > 1) { - // elements[2].style.height = "50vh"; // - // } - adjustGrid(); - } + } else if (nColumns == 2 || nColumns == 3) { + } else { + } } nextInitCommand(); @@ -425,7 +416,7 @@ function successHandler(s, message) { // Response to a "console"-server-request. case "accept-console": // draw console only to the last grid-element - insertSlide(3, "console", "console",createContentConsole(3)); + appendToGridElement(3, "console", "console",createContentConsole(3)); nextInitCommand(); // send empty command in order to trigger getting history reqJSON(0, "http://" + hostPort + "/sendcommand?command=&id=" + clientID, successHandler, diff --git a/client/jsFiles/SEAWebClientGraphics.js b/client/jsFiles/SEAWebClientGraphics.js index c2bcc97..518d60c 100644 --- a/client/jsFiles/SEAWebClientGraphics.js +++ b/client/jsFiles/SEAWebClientGraphics.js @@ -349,6 +349,7 @@ function loadGraphicsMenu(panel){ panel.appendChild(menuGraphicsPopup); menuGraphicsPopup.getContainer().style.top = "28px"; menuGraphicsPopup.getContainer().style.right = "20px"; + menuGraphicsPopup.style.position = "absolute"; panel.appendChild(graphicsMenuControl); graphicsMenuControl.style.marginLeft="6px"; graphicsMenuControl.style.marginRight="22px"; @@ -1018,7 +1019,7 @@ let graphs = (function (){ function buildGraphicsUI(){ let f = 0; - insertSlide(f, " ", "graphics", container); + appendToGridElement(f, " ", "graphics", container); // let currentSwiper = swiper[f]; diff --git a/client/jsFiles/SEAWebClientGroup.js b/client/jsFiles/SEAWebClientGroup.js index 47027ea..3572f62 100644 --- a/client/jsFiles/SEAWebClientGroup.js +++ b/client/jsFiles/SEAWebClientGroup.js @@ -38,10 +38,6 @@ function createContent(s, message) { var content = document.createElement('div'); content.classList.add("content"); // Process components of the message - - // console.log("create content"); - // console.log("message: ",message); - // console.log('length: ',message.components.length); for (var i = 0; i < message.components.length; i++) { var component = message.components[i]; if (!("title" in component)) @@ -528,11 +524,14 @@ function createTitle(component, modules) { var title = component.title; if (modules) { var icon_status = ''; - if (component.statusname) { left.innerHTML = icon_status; } - left.innerHTML += '' + component.title + ''; + left.innerHTML += '' + title + ''; + if (component.statusname) { + let name = title + '-info' + left.innerHTML += ''; + } } else { left.innerHTML = component.title; } @@ -543,12 +542,12 @@ function createParElement(component, tag='span', cls='col-right') { if (debug_group_daniel) { console.log("%cfunction: createParElement", "color:white;background:salmon"); } - var right = document.createElement(tag); if (cls) right.classList.add(cls); // right.name = is not sufficient, getElementsByName would not work right.setAttribute('name', component.name); + // Add DOM-property right.__ctype__ = component.type; return right; } @@ -585,7 +584,31 @@ function appendToContent(component, left, right) { row.appendChild(createInfo(component)); } row.appendChild(left); - console.log(component); row.appendChild(right); return row; } + +function appendToGridElement(s, title, type, content) { + if (debug_swiper_daniel) { + console.log("%cfunction: appendToGridElement", "color:white;background:lightblue"); + console.log("title: ",title); + } + + var panel = document.createElement('div'); + panel.classList.add("panel"); + + titlewrapper = document.createElement('span'); + titlewrapper.innerHTML = title; + panel.appendChild(titlewrapper); + + var gridContainer = document.createElement('div'); + gridContainer.classList.add("grid-container"); + // Store type so it can be found easiely later. + gridContainer.slideType = type; + gridContainer.appendChild(panel); + gridContainer.appendChild(content); + + var gridelements = document.getElementsByClassName('grid-element'); + gridelements[s].innerHTML = ""; + gridelements[s].appendChild(gridContainer); +} diff --git a/client/jsFiles/SEAWebClientSwiper.js b/client/jsFiles/SEAWebClientSwiper.js index 17fc844..5aa2cac 100644 --- a/client/jsFiles/SEAWebClientSwiper.js +++ b/client/jsFiles/SEAWebClientSwiper.js @@ -96,7 +96,7 @@ function replaceSlideContent(slide, title, content) { slide.replaceChild(content, slide.childNodes[1]) } -function insertSlide(s, title, type, content) { +function insertSlideXXX(s, title, type, content) { if (debug_swiper_daniel) { console.log("%cfunction: insertSlide", "color:white;background:lightblue"); console.log("title: ",title);