Swiper removed

- Swiper removal work in progress
+ Fine debugging for every js-file

client/cssFiles/SEAWebClientMain.css

@@ -128,6 +128,14 @@ meta, body {
 	border: solid 4px dimgray;
 }
 
+.grid-container {
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+	padding-bottom: 30px;
+	overflow: hidden;
+}
+
 /* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
 /* CLOSE CROSS */
 

client/cssFiles/SEAWebClientSwiper.css

@@ -22,7 +22,7 @@
 /* PANEL */
 .panel {
 	background-color: #303030;
-	position: absolute;
+	/* position: absolute; */
 	z-index: 20;
 	width: 100%;
 	height: 30px;

client/jsFiles/SEAWebClientCommunication.js

@@ -1,6 +1,9 @@
 // %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 // % COMMUNICATION
 
+// local debugging: print the name of every executed funtion to the console
+var debug_communication_daniel = 0;
+
 var timeoutID; // We need this ID to reset the timer every 30 seconds
 
 // %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
@@ -8,6 +11,10 @@ var timeoutID; // We need this ID to reset the timer every 30 seconds
 
 
 function buildUpdateConnection() {
+    if (debug_communication_daniel) {
+        console.log("%cfunction: buildUpdateConnection", "color:white;background:darkblue");
+    }
+
     // Establishes server-sent-event-connection, which is used for all sorts of
     // updates and exists as long as the client is running.
     // Executed at programstart (see also SEAWebClientMain.js).
@@ -58,6 +65,10 @@ function buildUpdateConnection() {
 }
 
 function handleUpdateMessage(src, message) {
+    if (debug_communication_daniel) {
+        console.log("%cfunction: handleUpdateMessage", "color:white;background:darkblue");
+    }
+    
     // Handles incoming SSE-messages depending on type of message.
 
     if (debugCommunication > 1) {
@@ -86,7 +97,7 @@ function handleUpdateMessage(src, message) {
                 sizeChange();
             } else {
                 clientTitle = message.instrument + " " + message.device;
-                console.log('loadBlocks', message);
+                // console.log('loadBlocks', message);
                 loadFirstBlocks();
             }
             document.title = clientTitle;
@@ -100,8 +111,8 @@ function handleUpdateMessage(src, message) {
         instrument.style.width = 'auto'
         device.style.width = 'auto'
         instrument.innerHTML = message.instrument
-        // device.innerHTML = message.device
+        device.innerHTML = message.device
-        console.log('ID', initCommands);
+        // console.log('ID', initCommands);
         nextInitCommand();
         break;
     // console-update-message: Confirms a command.
@@ -175,6 +186,10 @@ function handleUpdateMessage(src, message) {
 }
 
 function htmlEscape(str) {
+    if (debug_communication_daniel) {
+        console.log("%cfunction: htmlEscape", "color:white;background:darkblue");
+    }
+
     str = "" + str;
     if (!str) return "";
     return str.replace(/&/g, '&').replace(/"/g, '"').replace(/'/g,
@@ -182,6 +197,10 @@ function htmlEscape(str) {
 }
 
 function resetTimer(src) {
+    if (debug_communication_daniel) {
+        console.log("%cfunction: resetTimer", "color:white;background:darkblue");
+    }
+
     // Executed every time a heartbeat-message is obtained.
     // If no heartbeat-messages are obtained for a certain amount of time,
     // an error-message is thrown.
@@ -197,6 +216,10 @@ function resetTimer(src) {
 }
 
 function updateValues(message, src) {
+    if (debug_communication_daniel) {
+        console.log("%cfunction: updateValues", "color:white;background:darkblue");
+    }
+
     // Handles changes of parameter-values
 
     for (var i = 0; i < message.updates.length; i++) {
@@ -246,6 +269,10 @@ function updateValues(message, src) {
 // XMLHttpRequest
 
 function reqJSON(s, url, successHandler, errorHandler) {
+    if (debug_communication_daniel) {
+        console.log("%cfunction: reqJSON", "color:white;background:darkblue");
+    }
+
     var xhr = typeof XMLHttpRequest != 'undefined' ? new XMLHttpRequest()
             : new ActiveXObject('Microsoft.XMLHTTP');
     if (debugCommunication) {
@@ -272,6 +299,10 @@ function reqJSON(s, url, successHandler, errorHandler) {
 }
 
 function reqJSONPOST(s, url, parameters, successHandler, errorHandler) {
+    if (debug_communication_daniel) {
+        console.log("%cfunction: reqJSONPOST", "color:white;background:darkblue");
+    }
+
     var xhr = typeof XMLHttpRequest != 'undefined' ? new XMLHttpRequest()
             : new ActiveXObject('Microsoft.XMLHTTP');
     if (debugCommunication) {
@@ -300,6 +331,10 @@ function reqJSONPOST(s, url, parameters, successHandler, errorHandler) {
 
 
 function successHandler(s, message) {
+    if (debug_communication_daniel) {
+        console.log("%cfunction: successHandler", "color:white;background:darkblue");
+    }
+
     // Handles incoming XMLHttp-messages depending on type of message.
     // s: slide number or -1 for replacing slide in all slider instances
     if (debugCommunication) {
@@ -320,28 +355,46 @@ function successHandler(s, message) {
             }
             insertSlide(2, "", "parameters", createContent(2, {components:[]}));
         } else {
-            if (s < 0) { // redraw: check for slides in all swiper instances
+            // NOT USED ANYMORE -> remove swiper
-                // not used any more?
+            // if (s < 0) { // redraw: check for slides in all swiper instances
-                for (var isw = 0; isw < MAXBLOCK; isw ++) {
+            //     // not used any more?
-                    var isl = findSlide(isw, message.path);
+            //     for (var isw = 0; isw < MAXBLOCK; isw ++) {
-                    if (isl !== null) {
+            //         var isl = findSlide(isw, message.path);
-                        var slide = swiper[isw].slides[isl];
+            //         if (isl !== null) {
-                        if (slide) {
+            //             var slide = swiper[isw].slides[isl];
-                            console.log("redraw", isw, isl);
+            //             if (slide) {
-                            replaceSlideContent(slide, message.title,
+            //                 console.log("redraw", isw, isl);
-                                createContent(isw, message));
+            //                 replaceSlideContent(slide, message.title,
-                        }
+            //                     createContent(isw, message));
-                    }
+            //             }
-                }
+            //         }
-            } else if (message.path == '_overview') {
+            //     }
+            // } 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));
                 // swiper[sLocal].slideTo(isl); /* go to found slide */
             } else {
                 // insertSlide(s, message.title, message.path, createContent(s, message));
-                let sLocal = paramSlider[s];
+                // let sLocal = paramSlider[s];
-                isl = insertSlide(sLocal, message.title, 'parameters', createContent(sLocal, message));
+                
-                swiper[sLocal].slideTo(isl); /* go to found slide */
+                // *************************************************************************************
+
+                // In the module-block a parameter was selected
+                // -> write parameter-block to grid-element2
+                // If nColumns < 3, hide modules (grid-element1) and show parameters (grid-element2)
+
+                // Set flag showParams (-> if there are only three columns, hide modules, not parameters)
+                // See also SEAWebClientMain.js
+
+                showParams = 1;
+                console.log ('col',nColumns);
+                isl = insertSlide(2, message.title, 'parameters', createContent(sLocal, message));
+                if(nColumns < 2) {
+                    elements[1].style.display = "none";                 // show modules
+                    elements[2].style.display = "inline-block";         // hide parameters
+                }
+                // swiper[sLocal].slideTo(isl); /* go to found slide */
             }
         }
         nextInitCommand();
@@ -357,9 +410,9 @@ function successHandler(s, message) {
         break;
     // Response to a "console"-server-request.
     case "accept-console":
-        // draw console, only on the first and the last swiper
+        // draw console
-        insertSlide(0, "console", "console",
+        // insertSlide(0, "console", "console",
-                createContentConsole(sLocal));
+        //         createContentConsole(sLocal));
         insertSlide(3, "console", "console",
                 createContentConsole(sLocal));
         nextInitCommand();
@@ -434,6 +487,10 @@ function successHandler(s, message) {
 }
 
 function errorHandler(status) {
+    if (debug_communication_daniel) {
+        console.log("%cfunction: errorHandler", "color:white;background:darkblue");
+    }
+
     if (debugCommunication) {
         console.log("error", status);
     }

client/jsFiles/SEAWebClientGraphics.js

@@ -510,11 +510,13 @@ let graphs = (function (){
         if (liveMode && cursorLinePos === null)
             // gotoNowElm.innerHTML = '';
             // globalControls.getControlsMap()[goToNowKey].changeToAlt();
-            console.log("Need to change to nothing");
+            // console.log("Need to change to nothing");
+            ;
         else
             // gotoNowElm.innerHTML = 'go to now';
             // globalControls.getControlsMap()[goToNowKey].changeToMain();
-            console.log("Need to change to seen");
+            // console.log("Need to change to seen");
+            ;
     }
 
     /**
@@ -525,7 +527,7 @@ let graphs = (function (){
      * @param {{tag:string, unit:string, curves:[{name:string, label:string, color:string}]}} block - The information of the block to create
      */
     function createGraph(gindex, block){
-        console.log("clear for create graph", gindex)
+        // console.log("clear for create graph", gindex)
         clear(gindex);
         tag_dict[block.tag] = gindex;
         let dict = {} // {string: [name:string, label:string, color:string]}
@@ -1021,16 +1023,16 @@ let graphs = (function (){
         let f = 0;
         insertSlide(f, " ", "graphics", container);
 
-        let currentSwiper = swiper[f];
+        // let currentSwiper = swiper[f];
 
-        function setSlidingMode(mode) {
+        // function setSlidingMode(mode) {
-            currentSwiper.params.noSwipingClass = mode ? "allow-swipe" : "swiper-slide-main";
+        //     currentSwiper.params.noSwipingClass = mode ? "allow-swipe" : "swiper-slide-main";
-        }
+        // }
 
-        currentSwiper.enableSwiping(false);
+        // currentSwiper.enableSwiping(false);
-        currentSwiper.on('reachBeginning', function () {
+        // currentSwiper.on('reachBeginning', function () {
-            currentSwiper.enableSwiping(false);
+        //     currentSwiper.enableSwiping(false);
-        })
+        // })
 
         let graphicsPanel = container.parentNode.querySelector('.panel')
         graphicsPanel.classList.add('graphics');
@@ -1122,7 +1124,7 @@ let graphs = (function (){
             "/updategraph?" +
             "id=" + clientID).getJSON().then(function(data) {
             setLiveMode(data.live);
-            console.log('LIVE create', liveMode)
+            // console.log('LIVE create', liveMode)
         })
 
     }

client/jsFiles/SEAWebClientGroup.js

@@ -1,37 +1,52 @@
 // %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 // % GROUP
 
+// local debugging: print the name of every executed funtion to the console
+var debug_group_daniel = 0;
+
 var writePermissionTimeout; // Sets writePermission to 'false, restarts by
 // user-interaction.
 
 var prompt = false // True while a prompt is opened.
 
 function getGroup(s, name) {
-    var found = false;
+    if (debug_group_daniel) {
-    if (name == "") {
+        console.log("%cfunction: getGroup", "color:white;background:salmon");
-      swiper[s].slideTo(defaultSlidePos(s));
-      return;
     }
-    for (var i = 0; i < swiper[s].slides.length; i++) {
+
-        var slideType = swiper[s].slides[i].slideType;
+    // var found = false;
-        if (slideType == name) {
+    // if (name == "") {
-            found = true;
+    //   swiper[s].slideTo(defaultSlidePos(s));
-            swiper[s].slideTo(i);
+    //   return;
-        }
+    // }
-    }
+    // for (var i = 0; i < swiper[s].slides.length; i++) {
-    if (!found && name != "console" && name != "graphics") {
+    //     var slideType = swiper[s].slides[i].slideType;
+    //     if (slideType == name) {
+    //         found = true;
+    //         swiper[s].slideTo(i);
+    //     }
+    // }
+    // if (!found && name != "console" && name != "graphics") {
         // Server-request for group.
         reqJSON(s, "http://" + hostPort + "/getblock?path=" + name
                 + "&id=" + clientID, successHandler, errorHandler);
-    }
+    // }
 }
 
 function sendCommand(s, command) {
+    if (debug_group_daniel) {
+        console.log("%cfunction: sendCommand", "color:white;background:salmon");
+    }
+
     reqJSON(s, "http://" + hostPort + "/sendcommand?command=" + encodeURIComponent(command)
             + "&id=" + clientID, successHandler, errorHandler);
 }
 
 function createContent(s, message) {
+    if (debug_group_daniel) {
+        console.log("%cfunction: createContent", "color:white;background:salmon");
+    }
+
     // Depending on the message received from the server the content of the
     // group is created dynamically. Handles draw-message.
 
@@ -52,6 +67,10 @@ function createContent(s, message) {
 }
 
 function gotoGroups(slideNames) {
+    if (debug_group_daniel) {
+        console.log("%cfunction: gotoGroups", "color:white;background:salmon");
+    }
+
     slideNames = slideNames.split("%20");
     var l = Math.min(MAXBLOCK,slideNames.length);
     document.title = "SEA "+ clientTitle + " " + slideNames.join(" ");
@@ -61,7 +80,12 @@ function gotoGroups(slideNames) {
 }
 
 function create_group_row(s, component) {
+    if (debug_group_daniel) {
+        console.log("%cfunction: create_group_row", "color:white;background:salmon");
+    }
+
     // Creates row-element containing link.
+
     var title = component.title;
 
     var row = document.createElement('row');
@@ -87,6 +111,10 @@ function create_group_row(s, component) {
 }
 
 function create_rdonly_row(s, component) {
+    if (debug_group_daniel) {
+        console.log("%cfunction: create_rdonly_row", "color:white;background:salmon");
+    }
+
     // Creates row-element containing link AND read-only-item.
 
     var link = component.link;
@@ -119,7 +147,12 @@ function create_rdonly_row(s, component) {
 }
 
 function create_rdlink_row(s, component) {
+    if (debug_group_daniel) {
+        console.log("%cfunction: create_rdlink_row", "color:white;background:salmon");
+    }
+
     // Creates row-element containing link AND read-only-item.
+
     var name = component.name;
 
     var left = createTitle(component);
@@ -134,6 +167,10 @@ function create_rdlink_row(s, component) {
 }
 
 function create_pushbutton_row(s, component) {
+    if (debug_group_daniel) {
+        console.log("%cfunction: create_pushbutton_row", "color:white;background:salmon");
+    }
+
     // Creates row-element containing a push button
 
     var name = component.name;
@@ -181,6 +218,10 @@ function create_pushbutton_row(s, component) {
 }
 
 function create_input_row(s, component) {
+    if (debug_group_daniel) {
+        console.log("%cfunction: create_input_row", "color:white;background:salmon");
+    }
+
     // Creates row-element containing input-item.
 
     var name = component.name;
@@ -304,12 +345,20 @@ function create_input_row(s, component) {
 }
 
 function posTextfield(s, left) {
+    if (debug_group_daniel) {
+        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;
 }
 
 function resizeTextfield(input) {
+    if (debug_group_daniel) {
+        console.log("%cfunction: resizeTextfield", "color:white;background:salmon");
+    }
+
     if (input.value.length > input.size * 12 / 20) {
         var str0 = window.getComputedStyle(input).fontSize;
         var str1 = str0.substring(0, str0.length - 2);
@@ -322,7 +371,12 @@ function resizeTextfield(input) {
 }
 
 function create_checkbox_row(s, component) {
+    if (debug_group_daniel) {
+        console.log("%cfunction: create_checkbox_row", "color:white;background:salmon");
+    }
+
     // Creates row-element containing checkbox-item
+
     var command = component.command;
 
     var left = createTitle(component);
@@ -392,7 +446,12 @@ function create_checkbox_row(s, component) {
 }
 
 function create_enum_row(s, component) {
+    if (debug_group_daniel) {
+        console.log("%cfunction: create_enum_row", "color:white;background:salmon");
+    }
+
     // Creates row-element containing dropdown-selection.
+
     var name = component.name;
     var command = component.command;
     var buttons = component.enum_names;
@@ -449,6 +508,10 @@ function create_enum_row(s, component) {
 }
 
 function createTitle(component) {
+    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.
 
@@ -474,6 +537,10 @@ function createTitle(component) {
 }
 
 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);
@@ -484,6 +551,10 @@ function createParElement(component, tag='span', cls='col-right') {
 }
 
 function createInfo(component) {
+    if (debug_group_daniel) {
+        console.log("%cfunction: createInfo", "color:white;background:salmon");
+    }
+
     // Creates info-box, which isn't visible by default but can be displayed.
 
     var infoBox = document.createElement('div');
@@ -498,6 +569,10 @@ function createInfo(component) {
 }
 
 function appendToContent(component, left, right) {
+    if (debug_group_daniel) {
+        console.log("%cfunction: appendToContent", "color:white;background:salmon");
+    }
+
     // Creates row-tag containing infoBox (not visible by default), left side
     // (span) and right side (span).
 

client/jsFiles/SEAWebClientMain.js

@@ -1,6 +1,9 @@
 // %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 // % INIT
 
+// local debugging: print the name of every executed funtion to the console
+var debug_main_daniel = 0;
+
 var MAXBLOCK = 4; // max number of blocks
 var elements = []; // grid elements
 var swiper = []; // This array contains main-swiper-Instances.
@@ -15,11 +18,16 @@ var writePermission = false;
 var menuMode = false;
 var panelOn = true;
 var firstState = 0;
+var showParams = 0;
 
 function Settings() {
+    if (debug_main_daniel) {
+        console.log("%cfunction: Settings", "color:white;background:limegreen");
+    }
+
     // get key/value pairs from search part of the URL and fill into query
     var qstr = location.search;
-    console.log(qstr);
+    // console.log(qstr);
     if (qstr) {
         var a = (qstr[0] === '?' ? qstr.substr(1) : qstr).split('&');
         for (var i = 0; i < a.length; i++) {
@@ -62,6 +70,10 @@ function Settings() {
 }
 
 function to_bool(string) {
+    if (debug_main_daniel) {
+        console.log("%cfunction: to_bool", "color:white;background:limegreen");
+    }
+
     // everything else than false, 0 or an empty string is considered as true
     return !/^(false|FALSE|False|0|)$/.test(string);
 }
@@ -73,7 +85,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, false)
+    .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
@@ -93,6 +105,9 @@ if (window['instrument']) {
 console.log('TAGS', window['clientTags']);
 
 function loadFirstBlocks() {
+    if (debug_main_daniel) {
+        console.log("%cfunction: loadFirstBlocks", "color:white;background:limegreen");
+    }
 
     if (showMain) pushInitCommand("getblock?path=main&", "main")
     if (showConsole) pushInitCommand("console?", "console")
@@ -107,28 +122,36 @@ function loadFirstBlocks() {
 }
 
 function nextInitCommand() {
-  // do the next init request
+    if (debug_main_daniel) {
-  if (initCommands.length > 0) {
+        console.log("%cfunction: nextInitCommand", "color:white;background:limegreen");
-    next = initCommands.shift();
+    }
-    cmd = next[0]
+
-    text = next[1]
+    // do the next init request
-    var loadingSpan = document.getElementsByClassName("loading-span")[0];
+    if (initCommands.length > 0) {
-    loadingSpan.innerHTML = loadingSpan.innerHTML + "<br>loading " + htmlEscape(text) + " ...";
+        next = initCommands.shift();
-    reqJSON(0, "http://" + hostPort + "/" + cmd + "id=" + clientID, successHandler, errorHandler);
+        cmd = next[0]
-  } else if (loadingShown) {
+        text = next[1]
-    var loadingScreen = document.getElementsByClassName("loading-div")[0];
+        var loadingSpan = document.getElementsByClassName("loading-span")[0];
-    loadingScreen.style.display = "none";
+        loadingSpan.innerHTML = loadingSpan.innerHTML + "<br>loading " + htmlEscape(text) + " ...";
-    loadingShown = false;
+        reqJSON(0, "http://" + hostPort + "/" + cmd + "id=" + clientID, successHandler, errorHandler);
-    if (location.hash) { // there was a #hash part
+    } else if (loadingShown) {
-      var slideNames = location.hash.substr(1);
+        var loadingScreen = document.getElementsByClassName("loading-div")[0];
-      gotoGroups(slideNames);
+        loadingScreen.style.display = "none";
+        loadingShown = false;
+        if (location.hash) { // there was a #hash part
+            var slideNames = location.hash.substr(1);
+            gotoGroups(slideNames);
+        }
+        console.log("loading finished");
     }
-    console.log("loading finished");
-  }
 }
 
 function pushInitCommand(cmd, text) {
-  initCommands.push([cmd, text]);
+    if (debug_main_daniel) {
+        console.log("%cfunction: pushInitCommand", "color:white;background:limegreen");
+    }
+
+    initCommands.push([cmd, text]);
 }
 
 window.onload = function() {
@@ -151,57 +174,78 @@ window.onload = function() {
     }else{
       crossElement.onclick = function(){
         if(nColumns == 1){ // if the screen is small, the cross always slides to the next slide
-          let someSwiper = swiper[0];
+            //   let someSwiper = swiper[0];
-          someSwiper.enableSwiping(true); // needed because someSwiper might be the graphs swiper, and swiping is disable by default
+            //   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
+            //   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()
-          window["wideGraphs"] = !window['wideGraphs'];
+            window["wideGraphs"] = !window['wideGraphs'];
-          adjustGrid();
+            adjustGrid();
         }
       }
     }
 
+    // NOT USED ANYMORE -> remove swiper
     // Create swiper-instances.
-    for (var s = 0; s < MAXBLOCK; s++) {
+    // for (var s = 0; s < MAXBLOCK; s++) {
-        swiper[s] = insertSwiper(s);
+    //     swiper[s] = insertSwiper(s);
-    }
+    // }
-    var homeButton = document.getElementById("home-icon");
+
+    // var homeButton = document.getElementById("home-icon");
     
     // TODO : uncomment this code with the right URL to navigate to when the way to select the instrument will be decided.
     homeButton.onclick = function () {
         window.location = "/select";
     };
     buildUpdateConnection();
-    if (location.hash) {
+  //   if (location.hash) {
-      console.log("hash in url", location.hash);
+  //     console.log("hash in url", location.hash);
-      initSlides = location.hash.substring(1);
+  //     initSlides = location.hash.substring(1);
-    } else {
+  //   } else {
-      initSlides = "";
+  //     initSlides = "";
-    }
+  //   }
-    // Initialisation will be continued, when SSE-connection is established
+  //   // Initialisation will be continued, when SSE-connection is established
-    // and id-message is obtained.
+  //   // and id-message is obtained.
-    // (see also at SEAWebClientCommunication.js)
+  //   // (see also at SEAWebClientCommunication.js)
-    addEventListener("popstate", function (e) {
+  //   addEventListener("popstate", function (e) {
-	  if (e.state) {
+	//   if (e.state) {
-	    if (loadingShown) {
+	//     if (loadingShown) {
-	      if (initSlides != e.state.funarg) {
+	//       if (initSlides != e.state.funarg) {
-            console.log("hash mismatch", initSlides, e.state.funarg);
+  //           console.log("hash mismatch", initSlides, e.state.funarg);
-	        initSlides = e.state.funarg;
+	//         initSlides = e.state.funarg;
-	      }
+	//       }
-	    } else {
+	//     } else {
-	      console.log("popstate", e.state.func, e.state.funarg);
+	//       console.log("popstate", e.state.func, e.state.funarg);
-	      window[e.state.func](e.state.funarg);
+	//       window[e.state.func](e.state.funarg);
-	    }
+	//     }
-	  } else {
+	//   } else {
-        document.title = "SEA "+ clientTitle;
+  //       document.title = "SEA "+ clientTitle;
-        for (var s=0; s<MAXBLOCK; s++) {
+  //       for (var s=0; s<MAXBLOCK; s++) {
-          swiper[s].slideTo(defaultSlidePos(s));
+  //         swiper[s].slideTo(defaultSlidePos(s));
-        }
+  //       }
-	  }
+	//   }
-	})
+	// })
 };
 
 function toggleHeader() {
+    if (debug_main_daniel) {
+        console.log("%cfunction: toggleHeader", "color:white;background:limegreen");
+    }
+
     // Show and hide box showing name of the current device ('see also
     // SEAWebClient.html')
 

client/jsFiles/SEAWebClientResponsivity.js

@@ -1,6 +1,9 @@
 // %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 // % RESPONSIVITY
 
+// local debugging: print the name of every executed funtion to the console
+var debug_responsivity_daniel = 0;
+
 var nColumns = 1; // Viewport is subdivided in nColumns columns.
 var nRows = 1; // Viewport is subdivided in nRows rows.
 var gridCountGraphics = 2; // Number of displayed graphics-swipers.
@@ -10,6 +13,10 @@ let paramSlider = [0,1,2,3];  // the number of the parameter slider to open
 let prevActiveSlider = 0;
 
 function createGrid() {
+    if (debug_responsivity_daniel) {
+        console.log("%cfunction: createGrid", "color:white;background:olive");
+    }
+
     // Creates grid-elements. By default only the first one is shown
     // and
     // takes the whole viewport.
@@ -24,6 +31,10 @@ function createGrid() {
 }
 
 function determineViewportSize() {
+    if (debug_responsivity_daniel) {
+        console.log("%cfunction: determineViewportSize", "color:white;background:olive");
+    }
+
     // Number of columns 'nColumns' and rows 'nRows' is determined depending on available
     // viewport-size.
 
@@ -52,11 +63,19 @@ function determineViewportSize() {
 }
 
 function sizeChange() {
+    if (debug_responsivity_daniel) {
+        console.log("%cfunction: sizeChange", "color:white;background:olive");
+    }
+
     determineViewportSize();
     adjustGrid();
 }
 
 function adjustGrid() {
+    if (debug_responsivity_daniel) {
+        console.log("%cfunction: adjustGrid", "color:white;background:olive");
+    }
+
     // Determines size of grid-elements depending on number of columns 'nColumns' and
     // rows 'nRows'
 
@@ -147,9 +166,13 @@ function adjustGrid() {
 }
 
 function style(s, width, height) {
+    if (debug_responsivity_daniel) {
+        console.log("%cfunction: style", "color:white;background:olive");
+    }
+
     if (width) {
-        paramSlider[prevActiveSlider] = s;
+        // paramSlider[prevActiveSlider] = s;
-        prevActiveSlider = s;
+        // prevActiveSlider = s;
         elements[s].style.display = "inline-block";
         elements[s].style.width = width;
     } else {

client/jsFiles/SEAWebClientSwiper.js

@@ -1,7 +1,14 @@
 // %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 // % SWIPER
 
+// local debugging: print the name of every executed funtion to the console
+var debug_swiper_daniel = 0;
+
 function insertSwiper(s) {
+    if (debug_swiper_daniel) {
+        console.log("%cfunction: insertSwiper", "color:white;background:lightblue");
+    }
+
     // Create an empty swiper-instance and append the swiper-container to
     // 'grid-element' s.
 
@@ -59,30 +66,53 @@ function insertSwiper(s) {
 }
 
 function findSlide(s, type) {
+    if (debug_swiper_daniel) {
+        console.log("%cfunction: findSlide" , "color:white;background:lightblue");
+        console.log (s, type);
+    }
+
     var i;
     for (i = 0; i < swiper[s].slides.length; i++) {
         if (swiper[s].slides[i].slideType === type) {
+            if (debug_swiper_daniel) {
+                console.log ('found slide ',i);
+            }
             return i;
         }
     }
+    if (debug_swiper_daniel) {
+        console.log ('found no slide ');
+    }
     return null;
 }
 
 function replaceSlideContent(slide, title, content) {
+    if (debug_swiper_daniel) {
+        console.log("%cfunction: replaceSlideContent", "color:white;background:lightblue");
+    }
+
     titlewrapper = slide.childNodes[0].childNodes[0];
     titlewrapper.innerHTML = title;
     slide.replaceChild(content, slide.childNodes[1])
 }
 
 function insertSlide(s, title, type, content) {
+    if (debug_swiper_daniel) {
+        console.log("%cfunction: insertSlide", "color:white;background:lightblue");
+    }
+
+    // console.log("title: ",title," s: ",s);
+
     // Inserts new group to instance s of Swiper. return inserted position
 
-    var isl = findSlide(s, type);
+    // Removed, Swiper will be removed, so there´s no need to look for swiper slides. 
-    var slide = swiper[s].slides[isl];
+    // Instead content will be replaced 
-    if (slide) { // slide already exists
+    // var isl = findSlide(s, type);
-        replaceSlideContent(slide, title, content);
+    // var slide = swiper[s].slides[isl];
-        return isl;
+    // if (slide) { // slide already exists
-    }
+    //     replaceSlideContent(slide, title, content);
+    //     return isl;
+    // }
     var panel = document.createElement('div');
     panel.classList.add("panel");
 
@@ -101,44 +131,56 @@ function insertSlide(s, title, type, content) {
         panel.appendChild(createUpdateButton(s));
     }*/
 
-    slide = document.createElement('div');
+    var gridContainer = document.createElement('div');
-    slide.classList.add("swiper-slide", "swiper-slide-main");
+    // gridContainer.classList.add("swiper-slide", "swiper-slide-main");
+    gridContainer.classList.add("grid-container");
     // Store type so it can be found easiely later.
-    slide.slideType = type;
+    gridContainer.slideType = type;
-    slide.appendChild(panel);
+    gridContainer.appendChild(panel);
-    slide.appendChild(content);
+    gridContainer.appendChild(content);
+
     // Graphics-slide is put at mostleft position.
-    if (type == "graphics" || type == "_overview") {
+    // if (type == "graphics" || type == "_overview") {
-        swiper[s].prependSlide(slide);
+    //     swiper[s].prependSlide(slide);
-        swiper[s].slideTo(0);
+    //     swiper[s].slideTo(0);
-        return 0;
+    //     return 0;
-    }
+    // }
-    swiper[s].appendSlide(slide);
+    // swiper[s].appendSlide(slide);
-    if (type == "console") {
+    // if (type == "console") {
-        if (s === 3) {
+    //     if (s === 3) {
-            // Slide mostright swiper-instance to last position (console)
+    //         // Slide mostright swiper-instance to last position (console)
-            swiper[3].slideNext();
+    //         swiper[3].slideNext();
-        }
+    //     }
-        return swiper[s].slides.length - 1;
+    //     return swiper[s].slides.length - 1;
-    }
+    // }
+
+    var gridelements = document.getElementsByClassName('grid-element');
+                    gridelements[s].innerHTML = "";
+                    gridelements[s].appendChild(gridContainer);
+
     let pos = 0;
-    if (swiper[s].slides.length > 1) {
+    
-        var consoleslide = swiper[s].slides[swiper[s].slides.length - 2];
+    // if (swiper[s].slides.length > 1) {
-        if (consoleslide.slideType == "console") {
+    //     var consoleslide = swiper[s].slides[swiper[s].slides.length - 2];
-            // shift Console-slide to mostright position.
+    //     if (consoleslide.slideType == "console") {
-            swiper[s].removeSlide(swiper[s].slides.length - 2);
+    //         // shift Console-slide to mostright position.
-            swiper[s].appendSlide(consoleslide);
+    //         swiper[s].removeSlide(swiper[s].slides.length - 2);
-            // Slide to position of new slide
+    //         swiper[s].appendSlide(consoleslide);
-            pos = swiper[s].slides.length - 2;
+    //         // Slide to position of new slide
-        } else {
+    //         pos = swiper[s].slides.length - 2;
-            pos = swiper[s].slides.length - 1;
+    //     } else {
-        }
+    //         pos = swiper[s].slides.length - 1;
-    }
+    //     }
-    swiper[s].slideTo(pos);
+    // }
+    // swiper[s].slideTo(pos);
     return pos;
 }
 
 function createCloseButton(s) {
+    if (debug_swiper_daniel) {
+        console.log("%cfunction: createCloseButton", "color:white;background:lightblue");
+    }
+
     // Creates 'span'-element containing close-button.
     var wrapper = document.createElement('span');
     wrapper.onclick = function () {
@@ -151,6 +193,10 @@ function createCloseButton(s) {
 }
 
 function createUpdateButton(s){
+    if (debug_swiper_daniel) {
+        console.log("%cfunction: createUpdateButton", "color:white;background:lightblue");
+    }
+
     // Creates 'span'-element containing update-button (Should be removed later!)
     var button = document.createElement('span');
     button.classList.add("interactive", "toggle-updates-graphics")
@@ -163,22 +209,30 @@ function createUpdateButton(s){
 }
 
 function defaultSlidePos(s) {
+    if (debug_swiper_daniel) {
+        console.log("%cfunction: defaultSlidePos", "color:white;background:lightblue");
+    }
+
   return s < 3 ? 0 : swiper[s].slides.length-1;
 }
 
 function getSlideNames() {
-  var names = []
+    if (debug_swiper_daniel) {
-  for (var s=0; s<MAXBLOCK; s++) {
+        console.log("%cfunction: getSlideNames", "color:white;background:lightblue");
-    var sw = swiper[s];
-    var name = "";
-    if (sw.activeIndex != defaultSlidePos(s) && sw.slides.length > 0) {
-      name = sw.slides[sw.activeIndex].slideType;
     }
-    names.push();
+
-  }
+    var names = []
-  for (var s=MAXBLOCK-1; s>=0; s--) {
+    for (var s=0; s<MAXBLOCK; s++) {
-    if (names[s] != "") break;
+        var sw = swiper[s];
-    names.pop();
+        var name = "";
-  }
+        if (sw.activeIndex != defaultSlidePos(s) && sw.slides.length > 0) {
-  return names;
+            name = sw.slides[sw.activeIndex].slideType;
+        }
+        names.push();
+    }
+    for (var s=MAXBLOCK-1; s>=0; s--) {
+        if (names[s] != "") break;
+        names.pop();
+    }
+    return names;
 }