diff --git a/client/cssFiles/SEAWebClientGroup.css b/client/cssFiles/SEAWebClientGroup.css index 09df4c2..79ae4ce 100644 --- a/client/cssFiles/SEAWebClientGroup.css +++ b/client/cssFiles/SEAWebClientGroup.css @@ -78,6 +78,43 @@ float: right; } +.modules-title { + display: inline-block; + min-width: 120px; +} + +.modules-icon { + display: inline-block; + width: 16px; + height: 16px; + line-height: 16px; + margin-left: 4px; +} + +.status-icon { + +} + +.status-icon-busy { + background-color: yellow; +} + +.status-icon-warn { + background-color: orange; +} + +.status-icon-error { + background-color: red; +} + +.edit-icon { + +} + +.info-icon { + +} + /* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* TEXT */ .input-text { diff --git a/client/jsFiles/SEAWebClientCommunication.js b/client/jsFiles/SEAWebClientCommunication.js index e46e838..a3c0d9e 100644 --- a/client/jsFiles/SEAWebClientCommunication.js +++ b/client/jsFiles/SEAWebClientCommunication.js @@ -2,7 +2,7 @@ // % COMMUNICATION // local debugging: print the name of every executed funtion to the console -var debug_communication_daniel = 0 +var debug_communication_daniel = 0; var timeoutID; // We need this ID to reset the timer every 30 seconds @@ -274,7 +274,7 @@ function reqJSON(s, url, successHandler, errorHandler) { : new ActiveXObject('Microsoft.XMLHTTP'); if (debugCommunication) { console.log("%cto server (reqJSON): %s", - "color:white;background:lightgreen", url); + "color:white;background:darkgreen", url); } xhr.open('get', url, true); xhr.onreadystatechange = function() { @@ -337,18 +337,16 @@ 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 (debugCommunication) { - console.log(message); - } 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)); - } + // 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:[]})); } else { if (message.path == '_overview') { @@ -358,18 +356,19 @@ function successHandler(s, message) { // In the module-block a parameter was selected // -> write parameter-block to grid-element2 - console.log ('col',nColumns); - isl = insertSlide(2, message.title, 'parameters', createContent(sLocal, message)); - if (nColumns < 2) { + showParams = true; + 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"; // - } + // 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(); } } } @@ -387,8 +386,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(sLocal)); + insertSlide(3, "console", "console",createContentConsole(3)); nextInitCommand(); // send empty command in order to trigger getting history reqJSON(0, "http://" + hostPort + "/sendcommand?command=&id=" + clientID, successHandler, @@ -405,7 +403,7 @@ function successHandler(s, message) { begin = timeRange[0] - timeRange[1]; select.value = begin; // Server-request for variable-list.*/ - console.log('TIME', timeRange) + // console.log('TIME', timeRange) reqJSONPOST(0, "http://" + hostPort + "/getvars", "time=" + timeRange[0] + ',' + timeRange[1] + "&userconfiguration=" + JSON.stringify(getFormattedUserConfigurationFromLocalStorage()) diff --git a/client/jsFiles/SEAWebClientGroup.js b/client/jsFiles/SEAWebClientGroup.js index 2402f9d..a08f15a 100644 --- a/client/jsFiles/SEAWebClientGroup.js +++ b/client/jsFiles/SEAWebClientGroup.js @@ -13,6 +13,7 @@ function getGroup(s, name) { if (debug_group_daniel) { console.log("%cfunction: getGroup", "color:white;background:salmon"); } + // console.log('name: ',name, ', id: '.ClientID); reqJSON(s, "http://" + hostPort + "/getblock?path=" + name + "&id=" + clientID, successHandler, errorHandler); } @@ -37,6 +38,10 @@ 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)) @@ -138,11 +143,12 @@ function create_rdlink_row(s, component) { // Creates row-element containing link AND read-only-item. var name = component.name; + var status = component.statusname; - var left = createTitle(component); + var left = createTitle(component, 1); left.id = component.name; left.name = component.title; // or setAttribute('name'.. ? - left.classList.add("interactive", "link"); + // left.classList.add("interactive", "link"); left.onclick = function () { getGroup(s, component.title); @@ -491,15 +497,18 @@ function create_enum_row(s, component) { return appendToContent(component, left, right); } -function createTitle(component) { +function createTitle(component, modules) { if (debug_group_daniel) { console.log("%cfunction: createTitle", "color:white;background:salmon"); } // Creates left side of row-tag containing title. Title may hold additional // information, which is shown, when title-tag is clicked. + // At the modules-block a status-oicon 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"); @@ -514,8 +523,18 @@ function createTitle(component) { left.innerHTML = component.title + "(i)"; } else { - left.classList.add("col-left"); - left.innerHTML = component.title; + if (modules) { + left.innerHTML = '' + component.title + '' + // + 's' + + '' + // + 'e' + + '' + // + 'i' + + '' + ; + } else { + left.innerHTML = component.title; + } } return left; } diff --git a/client/jsFiles/SEAWebClientMain.js b/client/jsFiles/SEAWebClientMain.js index 550c3ee..5ca011a 100644 --- a/client/jsFiles/SEAWebClientMain.js +++ b/client/jsFiles/SEAWebClientMain.js @@ -18,6 +18,7 @@ var writePermission = false; var menuMode = false; var panelOn = true; var firstState = 0; +var showParams = false; function Settings() { if (debug_main_daniel) { @@ -80,7 +81,7 @@ function to_bool(string) { // example: localhost:5000/SEAWebClient.html?hp=ldmzolliker:5000&dc=1 // hostPort given and debugCommunication switched on new Settings() - .treat("debugCommunication", "dc", 0, 0) // 1: debug synchronous comm. 2: debug syn and asyn comm + .treat("debugCommunication", "dc", 0, 2) // 1: debug synchronous comm. 2: debug syn and asyn comm .treat("debugGraphics", "dg", to_bool, false) .treat("hostPort", "hp", 0, location.hostname + ":" + location.port) .treat("showMain", "sm", to_bool, true) @@ -104,7 +105,7 @@ if (window.instrument) { window.clientTags = args; } -console.log('TAGS', window.clientTags); +// console.log('TAGS', window.clientTags); function loadFirstBlocks() { if (debug_main_daniel) { @@ -183,38 +184,15 @@ window.onload = function() { document.body.removeChild(crossElement); }else{ crossElement.onclick = function(){ - if(nColumns == 1){ // if the screen is small, the cross always slides to the next slide - // let someSwiper = swiper[0]; - // someSwiper.enableSwiping(true); // needed because someSwiper might be the graphs swiper, and swiping is disable by default - // someSwiper.slideNext(); // someSwiper can be anything, it will swipe to the next slide - console.log(elements[0].style.display); - // adjustGrid(); - 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 - } - }else{ // else it toggles the graphs window's size and triggers the adjustGrid() + if (showParams) { + showParams = false; + } else { window.wideGraphs = ! window.wideGraphs; - adjustGrid(); } + adjustGrid(); } } - // NOT USED ANYMORE -> remove swiper - // Create swiper-instances. - // for (var s = 0; s < MAXBLOCK; s++) { - // swiper[s] = insertSwiper(s); - // } - var homeButton = document.getElementById("home-icon"); homeButton.onclick = function () { diff --git a/client/jsFiles/SEAWebClientResponsivity.js b/client/jsFiles/SEAWebClientResponsivity.js index 4495c60..ef1df6d 100644 --- a/client/jsFiles/SEAWebClientResponsivity.js +++ b/client/jsFiles/SEAWebClientResponsivity.js @@ -9,8 +9,6 @@ var nRows = 1; // Viewport is subdivided in nRows rows. var gridCountGraphics = 2; // Number of displayed graphics-swipers. var MINWIDTH = 400; // Minimal width of block. var MINHEIGHT = 700; // Minimal height of block. -let paramSlider = [0,1,2,3]; // the number of the parameter slider to open -let prevActiveSlider = 0; function createGrid() { if (debug_responsivity_daniel) { @@ -83,8 +81,6 @@ function adjustGrid() { || document.body.clientWidth; var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; - paramSlider = [0,1,2,3]; - prevActiveSlider = 0; if (window["hideRightPart"] || window["wideGraphs"]){ style(0,"100vw","100vh"); @@ -97,47 +93,84 @@ function adjustGrid() { switch (nColumns) { case 1: if (menuMode) { - leftWidth = Math.min(100, MINWIDTH / width * 100); - style(0,leftWidth + "vw","100vh"); - style(1); // hide - style(2); // hide - style(3); // hide + leftWidth = Math.min(100, MINWIDTH / width * 100); + style(0,leftWidth + "vw","100vh"); } else { - // we may want to switch to 90vh on safari ios (workaround) - style(0,"100vw","100vh"); - style(1); // hide - style(2); // hide - style(3); // hide + // we may want to switch to 90vh on safari ios (workaround) + style(0,"100vw","100vh"); + } + + + 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); leftWidth = 100 - rightWidth; if (nRows == 1 || !window['showConsole']) { - style(0,leftWidth + "vw","100vh"); - style(1,rightWidth + "vw","100vh"); - style(2); // hide - style(3); // hide + if (showParams) { + style(0,leftWidth + "vw","100vh"); + style(1); // hide + style(2,rightWidth + "vw","100vh"); + style(3); // hide + } else { + style(0,leftWidth + "vw","100vh"); + style(1,rightWidth + "vw","100vh"); + style(2); // hide + style(3); // hide + } } 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"); + } } break; case 3: rightWidth = MINWIDTH / width * 100; leftWidth = 100 - rightWidth; if (nRows == 1 || !window['showConsole']) { - style(0,leftWidth + "vw","100vh"); - style(1,rightWidth + "vw","100vh"); - style(2); // hide - style(3); // hide + if (showParams) { + style(0,leftWidth + "vw","100vh"); + style(1); // hide + style(2,rightWidth + "vw","100vh"); + style(3); // hide + } else { + style(0,leftWidth + "vw","100vh"); + style(1,rightWidth + "vw","100vh"); + style(2); // hide + style(3); // hide + } } 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"); + } } break; case 4: @@ -171,8 +204,6 @@ function style(s, width, height) { } if (width) { - // paramSlider[prevActiveSlider] = s; - // prevActiveSlider = s; elements[s].style.display = "inline-block"; elements[s].style.width = width; } else { diff --git a/client/jsFiles/SEAWebClientSwiper.js b/client/jsFiles/SEAWebClientSwiper.js index 58ef16c..17fc844 100644 --- a/client/jsFiles/SEAWebClientSwiper.js +++ b/client/jsFiles/SEAWebClientSwiper.js @@ -99,10 +99,9 @@ function replaceSlideContent(slide, title, content) { function insertSlide(s, title, type, content) { if (debug_swiper_daniel) { console.log("%cfunction: insertSlide", "color:white;background:lightblue"); + console.log("title: ",title); } - console.log("title: ",title); - var panel = document.createElement('div'); panel.classList.add("panel");