diff --git a/client/SEAWebClient.html b/client/SEAWebClient.html index 2a3adc7..49d51e8 100644 --- a/client/SEAWebClient.html +++ b/client/SEAWebClient.html @@ -85,7 +85,7 @@ -
+
diff --git a/client/cssFiles/SEAWebClientConsole.css b/client/cssFiles/SEAWebClientConsole.css index 2da4c5a..68316c4 100644 --- a/client/cssFiles/SEAWebClientConsole.css +++ b/client/cssFiles/SEAWebClientConsole.css @@ -27,13 +27,12 @@ } .history { - position: absolute; font-family: monospace; font-size: 12px; padding: 80px 8px 50px 8px; width: 100%; height: 100%; overflow-y: auto; - background-color: #303030; - color: lightgray; + background-color: lightgray; + color: #303030; } \ No newline at end of file diff --git a/client/cssFiles/SEAWebClientGroup.css b/client/cssFiles/SEAWebClientGroup.css index a2bd7da..48f0a5d 100644 --- a/client/cssFiles/SEAWebClientGroup.css +++ b/client/cssFiles/SEAWebClientGroup.css @@ -18,17 +18,13 @@ overflow-y: hidden; } -.link { - transition: 0.4s; - cursor: pointer; - color: steelblue; - text-decoration: underline; -} +/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ +/* panel */ -.link:focus { - color: orangered; - outline: none; -} +/* ------------------------------ modules-icons ------------------------------ */ + +/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ +/* row */ .row { padding: 4px 0px 4px 0px; @@ -36,7 +32,7 @@ min-height: 24px; display: block; border-bottom: dotted darkgray 2px; - overflow: hidden; + /* overflow: hidden; */ transition: 0.2s; position: relative; } @@ -55,59 +51,6 @@ /* background-color: lightgray; */ } -.clickable:hover { - background-color: lightgray; -} - -.link-static { - padding-left: 4px; - background-color: #303030; - color: white; - border-bottom: none; -} - -.info-box { - margin: 4px 0px 4px 0px; - padding: 4px; - border-radius: 4px; - background-color: darkslategray; - color: white; - display: none; - width: 100%; - cursor: pointer; -} - -.col-left { - min-height: 24px; - line-height: 24px; - float: left; -} - -.event-toggle-info { - color: darkslategray; - cursor: pointer; -} - -.col-right-modules { - position: absolute; - right: 16px; -} - -.col-right-parameters { - float: right; -} - -.col-right-disabled { - display: none; -} - -.modules-title { - display: inline-block; - min-width: 120px; -} - -/* ------------------------------ modules-icons ------------------------------ */ - .modules-icon { display: inline-block; width: 12px; @@ -118,6 +61,29 @@ margin-bottom: 4px; } +/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ +/* left */ + +.col-left { + display: inline-block; + min-width: 140px; +} + +/* ------------------------------ info ------------------------------ */ + +.info-box { + padding: 4px; + border-radius: 4px; + background-color: #303030; + color: white; + width: 100%; + display: none; +} + +.button-info:hover + .info-box { + display: inline-block; +} + /* ------------------------------ status-icon ------------------------------ */ .status-icon { @@ -149,32 +115,40 @@ .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; + display: none; } .status-icon:hover ~ .status-info { - opacity: 1.0; + display: inline-block; } -/* ------------------------------ value ------------------------------ */ +/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ +/* right */ -.col-right-parameters-value { - position: absolute; - right: 16px; +.col-right-modules { + float: right; +} + +.col-right-parameters { + float: right; +} + +.col-right-value { + padding-right: 4px; +} + +.col-right-disabled { + display: none; } /* ------------------------------ edit-icon ------------------------------ */ .edit-icon { - /* position: absolute; */ - /* right: 0; */ float: right; cursor: pointer; } @@ -184,9 +158,17 @@ opacity: .6; } -/* ------------------------------ hidden-input_element ------------------------------ */ +/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ +/* INPUT ELEMENTS */ -.hidden-input-element { +.input-element { + z-index: 100; + position: absolute; + right: 0; + top: 20px; +} + +.input-element-hidden { display: none; } @@ -199,6 +181,7 @@ border: solid 2px dimgray; color: black; text-align: right; + margin-top: 4px; } ::-ms-clear { /* remove the x in the input box on IE */ @@ -207,22 +190,21 @@ } /* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* CHECKBOX */ -.parameter-checkbox { +/* .parameter-checkbox { opacity: 0; float: left; -} +} */ -.parameter-checkbox + .parameter-label { +/* .parameter-checkbox + .parameter-label { position: relative; cursor: pointer; - float: left; -} +} */ -.parameter-checkbox:focus+.parameter-label { +/* .parameter-checkbox:focus+.parameter-label { opacity: 0.8; -} +} */ -.parameter-checkbox+.parameter-label::before { +/* .parameter-checkbox+.parameter-label::before { content: ' '; position: absolute; left: -24px; @@ -232,9 +214,9 @@ display: block; background: lightgray; border: 2px solid dimgray; -} +} */ -.parameter-checkbox+.parameter-label::after { +/* .parameter-checkbox+.parameter-label::after { content: ' '; position: absolute; left: -19px; @@ -251,14 +233,14 @@ -webkit-transform: scale(0); transform: scale(0); opacity: 0; -} +} */ -.parameter-checkbox:checked+.parameter-label::after { +/* .parameter-checkbox:checked+.parameter-label::after { -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); opacity: 1; -} +} */ /* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* RADIO */ diff --git a/client/cssFiles/SEAWebClientMain.css b/client/cssFiles/SEAWebClientMain.css index 815e48a..a9a89bc 100644 --- a/client/cssFiles/SEAWebClientMain.css +++ b/client/cssFiles/SEAWebClientMain.css @@ -136,23 +136,6 @@ meta, body { overflow: hidden; } -/* ------------------------------ log ------------------------------ */ - -.grid-element-3 { - position: absolute; - display: block; - bottom: 0; - width: 100%; - height: 0; - opacity: .9; - z-index: 1000; - /* transition: 1s; */ -} - -.grid-element-3-visible { - height: 50%; -} - /* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* PANEL */ .panel { @@ -198,7 +181,7 @@ meta, body { /* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* LOG ICON */ -#log-icon-container { +.log-icon-container { z-index: 1001; bottom: 9px; right: 12px; @@ -207,6 +190,10 @@ meta, body { cursor: pointer; } +.log-icon-container-hidden { + display: none; +} + .log-icon { height: 20px; width: 20px; diff --git a/client/jsFiles/SEAWebClientCommunication.js b/client/jsFiles/SEAWebClientCommunication.js index 5e38b52..3bf59fd 100644 --- a/client/jsFiles/SEAWebClientCommunication.js +++ b/client/jsFiles/SEAWebClientCommunication.js @@ -69,16 +69,12 @@ function handleUpdateMessage(src, message) { // id-message: Confirms establishment of SSE-connection and determines // specific ID of the client case "id": - for (var i = 0; i < swiper.length; i++) { - swiper[i].removeAllSlides(); - } clientID = message.id; if ("device" in message) { if (message.device == "_inst_select") { clientTitle = "select instrument"; console.log('IDselect') pushInitCommand("getblock?path=_inst_select&", "instrument selection"); - menuMode = true; sizeChange(); } else { clientTitle = message.instrument + " " + message.device; @@ -208,11 +204,6 @@ function updateValues(message, src) { let elem = matches[j]; let type = elem.__ctype__; // -> Show Dom-Properties - // let text = htmlEscape(component.formatted); - // if (text) { - // elem.innerHTML = text; - // } - if (type == "rdonly" || type == "rdlink") { let text = htmlEscape(component.formatted); if (text) { @@ -232,17 +223,29 @@ function updateValues(message, src) { } } elem.actualValue = value; - resizeTextfield(elem); + resize_textfield(elem); } else if (type == "checkbox") { - let row = elem.parentNode.parentNode; + let row = elem.closest('div'); row.style.backgroundColor = "white"; + console.log('receive: ', value); // console.log('CBX', elem.name, message, Boolean(value && value != 'false')); - elem.checked = Boolean(value && value != 'false'); + // elem.checked = Boolean(value && value != 'false'); + if (value === 'False') { + elem.checked = false; + } else { + elem.checked = true; + } } else if (type == "enum") { elem.style.display = "block"; - let row = elem.parentNode.parentNode; + let row = elem.closest('div'); row.style.backgroundColor = "white"; - elem.value = value; + + let options = elem.childNodes; + for (var j = 0; j < options.length; j++) { + if (options[j].label == value) { + elem.value = j + 1; + } + } } } } @@ -253,7 +256,6 @@ function updateStatus(component) { 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 @@ -262,11 +264,19 @@ function updateStatus(component) { status_info.innerHTML = component.formatted; } + status_icon.classList.remove('status-icon-disabled'); + status_icon.classList.remove('status-icon-idle'); + status_icon.classList.remove('status-icon-warn'); + status_icon.classList.remove('status-icon-busy'); + status_icon.classList.remove('status-icon-error'); + row.classList.remove('row-disabled'); + right.classList.remove = 'col-right-disabled'; + switch (statusCode) { case 0: status_icon.classList.add('status-icon-disabled'); row.classList.add('row-disabled'); - right.innerHTML = 'col-right-disabled'; + right.classList.add = 'col-right-disabled'; break; case 1: status_icon.classList.add('status-icon-idle'); @@ -355,17 +365,21 @@ function successHandler(s, message) { // appendToGridElement(2, "", "parameters", createContent({components:[]})); } else { // In the module-block a parameter was selected + showParams = true; // -> write parameter-block to grid-element2 isl = appendToGridElement(2, message.title, 'parameters', createContent(message)); - if (nColumns == 1) { - elements[1].style.display = "none"; // hide modules - elements[2].style.display = "inline-block"; // show parameters - showParams = true; + adjustGrid(); + if (nColumns == 1 || nColumns == 2 || nColumns == 3) { + // elements[1].style.display = "none"; // hide modules + // elements[2].style.display = "inline-block"; // show parameters + // style(2,"100vw","100vh"); document.getElementById('close-cross').innerHTML = ''; - } else if (nColumns == 2 || nColumns == 3) { - } else { - } + // else if (nColumns == 2 || nColumns == 3) { + // adjustGrid(); + // } else { + // adjustGrid(); + // } } nextInitCommand(); // Request for updates. diff --git a/client/jsFiles/SEAWebClientGroup.js b/client/jsFiles/SEAWebClientGroup.js index 509a9be..d847e70 100644 --- a/client/jsFiles/SEAWebClientGroup.js +++ b/client/jsFiles/SEAWebClientGroup.js @@ -1,9 +1,6 @@ // %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% // % GROUP -var writePermissionTimeout; // Sets writePermission to 'false, -// restarts by user-interaction. - var prompt = false // True while a prompt is opened. function getGroup(s, name) { @@ -42,23 +39,17 @@ function createContent(message) { return content; } -/* ---------------------------------------------------------------------------------- */ - +/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ +// ROW function create_row_for_modules(component) { - // Creates row-element containing link AND read-only-item. - let name = component.name; - let status = component.statusname; - - let left = createTitle(component, 1); + let left = create_left_column(component, 1); left.id = component.name; - left.name = component.title; // or setAttribute('name'.. ? - let right = createParElement(component); - let edit = document.createElement('img'); - edit.setAttribute('src', 'res/icon_edit.png'); - edit.classList.add('modules-icon'); - edit.classList.add('edit-icon'); - let row = appendToContent(component, left, right, edit); + left.setAttribute('name', 'component.title'); + + let right = create_right_column_for_modules(component); + let row = append_to_content(left, right); + row.onclick = function () { getGroup(s, component.title); } @@ -67,11 +58,11 @@ function create_row_for_modules(component) { } function create_row_for_parameters(component) { - let left = createTitle(component); + let left = create_left_column(component); let right = document.createElement('span'); right.classList.add('col-right-parameters'); let value = document.createElement('span'); - value.classList.add('rdonly'); + value.classList.add('col-right-value'); value.setAttribute('name', component.name); value.__ctype__ = 'rdonly'; right.appendChild(value); @@ -81,21 +72,102 @@ function create_row_for_parameters(component) { component.type == 'checkbox' || component.type == 'enum' ) { - value.classList.add('col-right-parameters-value'); + let edit = document.createElement('img'); + edit.setAttribute('src', 'res/icon_edit.png'); + edit.classList.add('modules-icon', 'edit-icon'); + createFunc = window['create_' + component.type] + let input_element = createFunc(component); + input_element.classList.add('input-element', 'input-element-hidden'); + edit.onclick = function () { + let is_hidden = input_element.classList.contains('input-element-hidden'); + hide_input_elements(); + if (is_hidden) { + input_element.classList.remove('input-element-hidden'); + } + } + right.appendChild(edit); + right.appendChild(input_element); + } + return append_to_content(left, right); +} + +function append_to_content(left, right) { + let row = document.createElement('div'); + row.classList.add("row"); + row.appendChild(left); + row.appendChild(right); + return row; +} + +/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ +// LEFT COLUMN + +function create_left_column(component, modules) { + var left = document.createElement('span'); + left.classList.add('col-left'); + if (modules) { + if (component.statusname) { + left.appendChild(create_status_icon(component)); + } + let modules_title = document.createElement('span'); + modules_title.classList.add('modules-title'); + modules_title.innerHTML = component.title; + left.appendChild(modules_title); + if (component.statusname) { + let status_info = document.createElement('span'); + status_info.classList.add('status-info'); + status_info.setAttribute('name', component.title + '-info'); + 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(createInfo(component)); + } + } else { + left.innerHTML = component.title; + } + return left; + + function create_status_icon(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'); + return icon_status; + } +} + +function createInfo(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; +} + +/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ +// RIGHT COLUMN + +function create_right_column_for_modules(component) { + var right = document.createElement('span'); + right.classList.add('col-right', 'col-right-modules'); + let value = document.createElement('span'); + value.classList.add('col-right-value'); + value.setAttribute('name', component.name); + value.__ctype__ = component.type; + right.appendChild(value); + if (component.targetname) { let edit = document.createElement('img'); edit.setAttribute('src', 'res/icon_edit.png'); edit.classList.add('modules-icon'); edit.classList.add('edit-icon'); - createFunc = window['create_' + component.type] - let hidden_elem = createFunc(component); - hidden_elem.classList.add('hidden-input-element'); - edit.onclick = function () { - hidden_elem.classList.toggle('hidden-input-element'); - } right.appendChild(edit); - right.appendChild(hidden_elem); } - return appendToContent(component, left, right); + return right; } /* ---------------------------------------------------------------------------------- */ @@ -103,46 +175,23 @@ function create_row_for_parameters(component) { function create_pushbutton(component) { // Creates row-element containing a push button - var name = component.name; - var command = component.command; - var elem = createParElement(component); - elem.classList.add("clickable", "push-button"); - elem.onclick = function () { - // if (writePermission) { - let row = elem.closest('div'); - elem.style.backgroundColor = "orangered"; - // Request for command - sendCommand(s, command); - // } else { - // prompt = true; - // alertify.confirm("", "You are connected with " + clientTitle - // + ".
" - // + "Are you sure you want to modify things here?", - // function () { - // // User decided to proceed. - // writePermission = true; - // writePermissionTimeout = setTimeout(function () { - // writePermission = false; - // }, 3600000); - // let row = elem.closest('div'); - // row.style.backgroundColor = "orangered"; - // // Request for command - // sendCommand(s, command); - // prompt = false; - // }, function () { - // // User decided to cancel - // prompt = false; - // }); - // } + var elem = create_input_element(component); + elem.classList.add("push-button"); + elem.onclick = function (e) { + console.log('click pushbutton'); + let elem = e.target; + let row = elem.closest('div'); + elem.style.backgroundColor = "orangered"; + // Request for command + sendCommand(s, component.command); } return elem; } function create_input(component) { // Creates row-element containing input-item. - var name = component.name; var command = component.command; - var input = createParElement(component, 'input', 'input-text'); + var input = create_input_element(component, 'input', 'input-text'); input.type = "text"; input.style.width = "100px"; input.addEventListener("focus", function(evt) { @@ -151,18 +200,19 @@ function create_input(component) { }); input.onkeydown = function (e) { - if (e.which === 27 || e.key == "Escape") { + if (e.key == "Escape") { // User decided to cancel - input.value = intput.oldValue; - resizeTextfield(input); + let input = e.target; + input.value = input.oldValue; + resize_textfield(input); var row = input.closest('div'); row.style.backgroundColor = "white"; + hide_input_elements(); } } input.onfocus = function () { input.oldValue = input.value; - if (isTouchDevice) setTimeout(function () { posTextfield(s, left); @@ -190,66 +240,36 @@ function create_input(component) { + "Hint: press ESC for leaving a field unchanged." + "You are connected with " + clientTitle + ".
" + "Are you sure you want to change the value of
" - + name + " from " + actualValue - + " to " + value + "?", function () { + + component.name + " from " + actualValue + + " to " + value + "?", + function () { // User decided to proceed. - // writePermission = true; - // writePermissionTimeout = setTimeout(function () { - // writePermission = false; - // }, 3600000); row.style.backgroundColor = "orangered"; // Request for command sendCommand(s, command + " " + value); - resizeTextfield(input); + resize_textfield(input); prompt = false; - input.closest('form').classList.toggle('hidden-input-element'); + hide_input_elements(); }, function () { // User decided to cancel input.value = input.actualValue; - resizeTextfield(input); + resize_textfield(input); row.style.backgroundColor = "white"; prompt = false; - input.closest('form').classList.toggle('hidden-input-element'); + hide_input_elements(); }); } var form = document.createElement('form'); form.onsubmit = function (e) { e.preventDefault(); - // if (writePermission) { - var row = form.closest('div'); - row.style.backgroundColor = "orangered"; - // Request for command - input.actualValue = input.value; - sendCommand(s, name + " " + input.value); - input.blur(); - form.classList.toggle('hidden-input-element'); - // } else { - // var value = input.value - // prompt = true; - // alertify.confirm("", "You are connected with " + clientTitle - // + ".
" - // + "Are you sure you want to modify things here?", - // function () { - // // User decided to proceed. - // writePermission = true; - // writePermissionTimeout = setTimeout(function () { - // writePermission = false; - // }, 3600000); - // var row = form.closest('div'); - // row.style.backgroundColor = "orangered"; - // input.actualValue = value; - // // Request for command - // sendCommand(s, command + " " + value); - // resizeTextfield(input); - // prompt = false; - // }, function () { - // // User decided to cancel - // input.value = input.oldValue; - // resizeTextfield(input); - // prompt = false; - // }); - // } + var row = form.closest('div'); + row.style.backgroundColor = "orangered"; + // Request for command + input.actualValue = input.value; + sendCommand(s, component.name + " " + input.value); + input.blur(); + hide_input_elements(); }; form.appendChild(input); return form; @@ -269,106 +289,31 @@ function create_input(component) { function create_checkbox(component) { // Creates row-element containing checkbox-item - var command = component.command; - var input = createParElement(component, 'input', 'parameter-checkbox'); + var input = create_input_element(component, 'input', 'parameter-checkbox'); input.type = "checkbox"; - input.onkeyup = function (e) { - if (e.keyCode === 32) { - handleCheckbox(); - } - } - - var label = document.createElement('label'); - label.for = input; - label.classList.add("parameter-label"); - - label.onclick = function () { + + input.onclick = function () { handleCheckbox(); } function handleCheckbox() { - // if (writePermission) { - var row = input.closest('div'); - row.style.backgroundColor = "orangered"; - if (input.checked) { - var value = "0"; - input.checked = false; - } else { - var value = "1"; - input.checked = true; - } - // Request for command - sendCommand(s, command + " " + value); - input.closest('span').classList.toggle('hidden-input-element'); - // } else { - // alertify.confirm("", "You are connected with " + clientTitle - // + ".
" - // + "Are you sure you want to modify things here?", - // function () { - // // User decided to proceed. - // writePermission = true; - // writePermissionTimeout = setTimeout(function () { - // writePermission = false; - // }, 3600000); - // var row = input.closest('div'); - // row.style.backgroundColor = "orangered"; - // if (input.checked) { - // var value = "0"; - // input.checked = false; - // } else { - // var value = "1"; - // input.checked = true; - // } - // // Request for command - // sendCommand(s, command + " " + value); - // }, function () { - // // User decided to cancel - // }); - // } + console.log('handle checkbox'); + let row = input.closest('div'); + row.style.backgroundColor = "orangered"; + console.log('send ', input.checked); + sendCommand(s, component.command + " " + input.checked); + // hide_input_elements(); }; - var right = document.createElement('span'); + let right = document.createElement('span'); right.appendChild(input); - right.appendChild(label); return right; } function create_enum(component) { // Creates row-element containing dropdown-selection. - var name = component.name; - var command = component.command; var buttons = component.enum_names; - var select = createParElement(component, 'select', 'select-params'); - select.onfocus = function () { - select.oldIndex = select.selectedIndex; - } - - select.oninput = function () { - if (writePermission && component.title != "device config") { - var row = select.closest('div'); - row.style.backgroundColor = "orangered"; - // Request for command - sendCommand(s, command + " " + this.value); - } else { - alertify.confirm("", "You are connected with " + clientTitle - + ".
" - + "Are you sure you want to modify things here?", - function () { - // User decided to proceed. - writePermission = true; - writePermissionTimeout = setTimeout(function () { - writePermission = false; - }, 3600000); - var row = select.closest('div'); - row.style.backgroundColor = "orangered"; - // Request for command - sendCommand(s, command + " " + select.value); - }, function () { - // User decided to cancel - select.value = select.options[select.oldIndex].value - }); - } - }; + var select = create_input_element(component, 'select', 'select-params'); for (var i = 0; i < buttons.length; i++) { var option = document.createElement('option'); @@ -378,462 +323,61 @@ function create_enum(component) { option.appendChild(document.createTextNode(buttons[i].title)); select.add(option); } - select.style.display = "none"; + + select.oninput = function () { + let row = select.closest('div'); + row.style.backgroundColor = "orangered"; + let index = select.value - 1; + console.log('send', buttons[index].title); + sendCommand(s, component.command + " " + select.value); + // hide_input_elements(); + }; + + select.onfocus = function () { + // select.oldIndex = select.selectedIndex; + console.log(select.selectedValue); + } var right = document.createElement('span'); right.appendChild(select); return right; } -/* ---------------------------------------------------------------------------------- */ -// obsolete... - -function create_pushbutton_row(component) { - // Creates row-element containing a push button - var name = component.name; - var command = component.command; - var left = createTitle(component); - - left.id = component.name; - left.name = component.title; - - var right = createParElement(component); - right.classList.add("clickable", "push-button"); - - row = appendToContent(component, left, right); - right.onclick = function () { - if (writePermission) { - var row = left.parentNode; - right.style.backgroundColor = "orangered"; - // Request for command - sendCommand(s, command); - } else { - prompt = true; - alertify.confirm("", "You are connected with " + clientTitle - + ".
" - + "Are you sure you want to modify things here?", - function () { - // User decided to proceed. - writePermission = true; - writePermissionTimeout = setTimeout(function () { - writePermission = false; - }, 3600000); - var row = left.parentNode; - row.style.backgroundColor = "orangered"; - // Request for command - sendCommand(s, command); - prompt = false; - }, function () { - // User decided to cancel - prompt = false; - }); - } - } - - row.classList.add("row"); - return row; -} - -function create_input_row(component) { - // Creates row-element containing input-item. - var name = component.name; - var command = component.command; - var left = createTitle(component); - - var input = createParElement(component, 'input', 'input-text'); - input.type = "text"; - input.style.width = "100px"; - input.addEventListener("focus", function(evt) { - let elm = evt.target; - setTimeout(function(){elm.setSelectionRange(0, elm.value.length);},0); - }); - - input.onkeydown = function (e) { - if (e.which === 27 || e.key == "Escape") { - // User decided to cancel - input.value = intput.oldValue; - resizeTextfield(input); - var row = left.parentNode; - row.style.backgroundColor = "white"; - } - } - - input.onfocus = function () { - input.oldValue = input.value; - - if (isTouchDevice) - setTimeout(function () { - posTextfield(s, left); - }, 1); - } - - input.onblur = function () { - if (prompt) { - return false; - } - var row = left.parentNode; - var value = input.value; - let oldValue = 'oldValue' in input ? input.oldValue : value; - if (!('actualValue' in input)) input.actualValue = oldValue; - actualValue = input.actualValue; - if (value == actualValue || value == oldValue || - parseFloat(value) == parseFloat(actualValue) || parseFloat(value) == parseFloat(oldValue)) { - input.value = actualValue; - // nothing to do. - row.style.backgroundColor = "white"; - return false; - } - // User changed value and moved focus to other object. - alertify.confirm("", "You changed a field without pressing the return key.
" - + "Hint: press ESC for leaving a field unchanged." - + "You are connected with " + clientTitle + ".
" - + "Are you sure you want to change the value of
" - + name + " from " + actualValue - + " to " + value + "?", function () { - // User decided to proceed. - writePermission = true; - writePermissionTimeout = setTimeout(function () { - writePermission = false; - }, 3600000); - row.style.backgroundColor = "orangered"; - // Request for command - sendCommand(s, command + " " + value); - resizeTextfield(input); - prompt = false; - }, function () { - // User decided to cancel - input.value = input.actualValue; - resizeTextfield(input); - row.style.backgroundColor = "white"; - prompt = false; - }); - } - - var form = document.createElement('form'); - form.onsubmit = function (e) { - e.preventDefault(); - if (writePermission) { - var row = left.parentNode; - row.style.backgroundColor = "orangered"; - // Request for command - input.actualValue = input.value; - sendCommand(s, name + " " + input.value); - input.blur(); - } else { - var value = input.value - prompt = true; - alertify.confirm("", "You are connected with " + clientTitle - + ".
" - + "Are you sure you want to modify things here?", - function () { - // User decided to proceed. - writePermission = true; - writePermissionTimeout = setTimeout(function () { - writePermission = false; - }, 3600000); - var row = left.parentNode; - row.style.backgroundColor = "orangered"; - input.actualValue = value; - // Request for command - sendCommand(s, command + " " + value); - resizeTextfield(input); - prompt = false; - }, function () { - // User decided to cancel - input.value = input.oldValue; - resizeTextfield(input); - prompt = false; - }); - } - }; - form.appendChild(input); - var right = createParElement(component); - right.appendChild(form); - return appendToContent(component, left, right); - - 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; - - // ---------------------> Not working anymore since swiper was removed!!! - } -} - -function create_checkbox_row(component) { - // Creates row-element containing checkbox-item - var command = component.command; - var left = createTitle(component); - var input = createParElement(component, 'input', 'parameter-checkbox'); - input.type = "checkbox"; - input.onkeyup = function (e) { - if (e.keyCode === 32) { - handleCheckbox(); - } - } - - var label = document.createElement('label'); - label.for = input; - label.classList.add("parameter-label"); - - label.onclick = function () { - handleCheckbox(); - } - - function handleCheckbox() { - if (writePermission) { - var row = left.parentNode; - row.style.backgroundColor = "orangered"; - if (input.checked) { - var value = "0"; - input.checked = false; - } else { - var value = "1"; - input.checked = true; - } - // Request for command - sendCommand(s, command + " " + value); - } else { - alertify.confirm("", "You are connected with " + clientTitle - + ".
" - + "Are you sure you want to modify things here?", - function () { - // User decided to proceed. - writePermission = true; - writePermissionTimeout = setTimeout(function () { - writePermission = false; - }, 3600000); - var row = left.parentNode; - row.style.backgroundColor = "orangered"; - if (input.checked) { - var value = "0"; - input.checked = false; - } else { - var value = "1"; - input.checked = true; - } - // Request for command - sendCommand(s, command + " " + value); - }, function () { - // User decided to cancel - }); - } - }; - - var right = document.createElement('span'); - right.classList.add("col-right"); - right.appendChild(input); - right.appendChild(label); - return appendToContent(component, left, right); -} - -function create_enum_row(component) { - // Creates row-element containing dropdown-selection. - var name = component.name; - var command = component.command; - var buttons = component.enum_names; - var left = createTitle(component); - var select = createParElement(component, 'select', 'select-params'); - select.onfocus = function () { - select.oldIndex = select.selectedIndex; - } - - select.oninput = function () { - if (writePermission && component.title != "device config") { - var row = left.parentNode; - row.style.backgroundColor = "orangered"; - // Request for command - sendCommand(s, command + " " + this.value); - } else { - alertify.confirm("", "You are connected with " + clientTitle - + ".
" - + "Are you sure you want to modify things here?", - function () { - // User decided to proceed. - writePermission = true; - writePermissionTimeout = setTimeout(function () { - writePermission = false; - }, 3600000); - var row = left.parentNode; - row.style.backgroundColor = "orangered"; - // Request for command - sendCommand(s, command + " " + select.value); - }, function () { - // User decided to cancel - select.value = select.options[select.oldIndex].value - }); - } - }; - - for (var i = 0; i < buttons.length; i++) { - var option = document.createElement('option'); - option.type = "enum"; - option.classList.add("option-params"); - option.value = buttons[i].value; - option.appendChild(document.createTextNode(buttons[i].title)); - select.add(option); - } - select.style.display = "none"; - - var right = document.createElement('span'); - right.classList.add("col-right"); - right.appendChild(select); - return appendToContent(component, left, right); -} - -// ...obsolete -/* ---------------------------------------------------------------------------------- */ -// The following two functions seem unreachable - -/* ########## Is this function used? How? Where? ########## */ -function create_group_row(component) { - // Creates row-element containing link. - var title = component.title; - var row = document.createElement('row'); - row.id = component.name; - row.name = title; - row.classList.add("interactive", "row", "link"); - row.tabIndex = "0"; - - console.log('createGroupRow'); - - row.onclick = function () { - var slideNames = getSlideNames(); - slideNames[0] = component.name; - document.title = "SEA "+ clientTitle + " " + slideNames.join(" "); - history.pushState({func: "gotoGroups", funarg: slideNames.join("%20")}, document.title, "#" + slideNames.join("%20")); - getGroup(s, component.name); - } - - if (title === "console" || title === "device config") { - row.classList.add("interactive", "row", "link", "link-static"); - row.innerHTML = "console"; - } - row.innerHTML = title; - return row; -} - -/* ########## Is this function used? How? Where? ########## */ -function create_rdonly_row(component) { - // Creates row-element containing link AND read-only-item. - var link = component.link; - if (!link) // simple rdonly - return appendToContent(component, createTitle(component), - createParElement(component)); - - // with link - var left = document.createElement('a'); - left.classList.add("col-left"); - left.innerHTML = component.title; - - console.log('ccc') - - left.id = component.name; - left.name = component.title; - left.classList.add("interactive", "link"); - - row = appendToContent(component, left, createParElement(component)); - row.onclick = function () { - this.style.backgroundColor = "orangered"; - left.click(); - } - if (link.charAt(0) == ':') { - left.href = "http://" + location.hostname + link + "/"; - } else { - left.href = link; - } - - row.classList.add("row", "clickable"); - return row; -} - -/* ---------------------------------------------------------------------------------- */ - -function createTitle(component, modules) { - // 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-icon is added - - var left = document.createElement('span'); - // 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.innerHTML = component.title + "(i)"; - // } - - var title = component.title; - if (modules) { - var icon_status = ''; - if (component.statusname) { - left.innerHTML = icon_status; - } - left.innerHTML += '' + title + ''; - if (component.statusname) { - let name = title + '-info' - left.innerHTML += ''; - } - } else { - left.innerHTML = component.title; - } - return left; -} - -function createParElement(component, tag='span', cls='col-right-modules') { - var right = document.createElement(tag); +function create_input_element(component, tag='span', cls='col-right-modules') { + var input_element = document.createElement(tag); + input_element.classList.add('col-right'); if (cls) - right.classList.add(cls); - // right.name = is not sufficient, getElementsByName would not work - right.setAttribute('name', component.name); + input_element.classList.add(cls); + input_element.setAttribute('name', component.name); // Add DOM-property - right.__ctype__ = component.type; - right.classList.add(component.type); - return right; -} - -function appendToContent(component, left, right, edit) { - // Creates row-tag containing infoBox (not visible by default), left side - // (span) and right side (span). - var row = document.createElement('div'); - row.classList.add("row"); - if (component.info) { - row.appendChild(createInfo(component)); - } - row.appendChild(left); - row.appendChild(right); - if (edit) { - row.appendChild(edit); - } - return row; - - function createInfo(component) { - // Creates info-box, which isn't visible by default but can be displayed. - var infoBox = document.createElement('div'); - infoBox.classList.add("info-box"); - - infoBox.onclick = function () { - infoBox.style.display = "none"; - } - - infoBox.innerHTML = component.info; - return infoBox; - } + input_element.__ctype__ = component.type; + return input_element; } /* ---------------------------------------------------------------------------------- */ +function hide_input_elements(){ + let input_elements = document.getElementsByClassName('input-element'); + for (let i = 0; i < input_elements.length; i++) { + input_elements[i].classList.add('input-element-hidden'); + } +} + +function resize_textfield(input) { + if (input.value.length > input.size * 12 / 20) { + var str0 = window.getComputedStyle(input).fontSize; + var str1 = str0.substring(0, str0.length - 2); + if (input.value.length < 43) { + input.style.width = input.value.length * str1 * 12 / 20 + "px"; + } + } else { + input.style.width = "100px"; + } +} + +/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ +// CONTENT + function appendToGridElement(s, title, type, content) { var panel = document.createElement('div'); panel.classList.add("panel"); @@ -854,16 +398,368 @@ function appendToGridElement(s, title, type, content) { gridelements[s].appendChild(gridContainer); } +// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% /* ---------------------------------------------------------------------------------- */ +// obsolete... -function resizeTextfield(input) { - if (input.value.length > input.size * 12 / 20) { - var str0 = window.getComputedStyle(input).fontSize; - var str1 = str0.substring(0, str0.length - 2); - if (input.value.length < 43) { - input.style.width = input.value.length * str1 * 12 / 20 + "px"; - } - } else { - input.style.width = "100px"; - } -} +// function create_pushbutton_row(component) { +// // Creates row-element containing a push button +// var name = component.name; +// var command = component.command; +// var left = createTitle(component); + +// left.id = component.name; +// left.name = component.title; + +// var right = create_input_element(component); +// right.classList.add("push-button"); + +// row = append_to_content(left, right); +// right.onclick = function () { +// if (writePermission) { +// var row = left.parentNode; +// right.style.backgroundColor = "orangered"; +// // Request for command +// sendCommand(s, command); +// } else { +// prompt = true; +// alertify.confirm("", "You are connected with " + clientTitle +// + ".
" +// + "Are you sure you want to modify things here?", +// function () { +// // User decided to proceed. +// writePermission = true; +// writePermissionTimeout = setTimeout(function () { +// writePermission = false; +// }, 3600000); +// var row = left.parentNode; +// row.style.backgroundColor = "orangered"; +// // Request for command +// sendCommand(s, command); +// prompt = false; +// }, function () { +// // User decided to cancel +// prompt = false; +// }); +// } +// } + +// row.classList.add("row"); +// return row; +// } + +// function create_input_row(component) { +// // Creates row-element containing input-item. +// var name = component.name; +// var command = component.command; +// var left = createTitle(component); + +// var input = create_input_element(component, 'input', 'input-text'); +// input.type = "text"; +// input.style.width = "100px"; +// input.addEventListener("focus", function(evt) { +// let elm = evt.target; +// setTimeout(function(){elm.setSelectionRange(0, elm.value.length);},0); +// }); + +// input.onkeydown = function (e) { +// if (e.which === 27 || e.key == "Escape") { +// // User decided to cancel +// input.value = intput.oldValue; +// resize_textfield(input); +// var row = left.parentNode; +// row.style.backgroundColor = "white"; +// } +// } + +// input.onfocus = function () { +// input.oldValue = input.value; + +// if (isTouchDevice) +// setTimeout(function () { +// posTextfield(s, left); +// }, 1); +// } + +// input.onblur = function () { +// if (prompt) { +// return false; +// } +// var row = left.parentNode; +// var value = input.value; +// let oldValue = 'oldValue' in input ? input.oldValue : value; +// if (!('actualValue' in input)) input.actualValue = oldValue; +// actualValue = input.actualValue; +// if (value == actualValue || value == oldValue || +// parseFloat(value) == parseFloat(actualValue) || parseFloat(value) == parseFloat(oldValue)) { +// input.value = actualValue; +// // nothing to do. +// row.style.backgroundColor = "white"; +// return false; +// } +// // User changed value and moved focus to other object. +// alertify.confirm("", "You changed a field without pressing the return key.
" +// + "Hint: press ESC for leaving a field unchanged." +// + "You are connected with " + clientTitle + ".
" +// + "Are you sure you want to change the value of
" +// + name + " from " + actualValue +// + " to " + value + "?", function () { +// // User decided to proceed. +// writePermission = true; +// writePermissionTimeout = setTimeout(function () { +// writePermission = false; +// }, 3600000); +// row.style.backgroundColor = "orangered"; +// // Request for command +// sendCommand(s, command + " " + value); +// resize_textfield(input); +// prompt = false; +// }, function () { +// // User decided to cancel +// input.value = input.actualValue; +// resize_textfield(input); +// row.style.backgroundColor = "white"; +// prompt = false; +// }); +// } + +// var form = document.createElement('form'); +// form.onsubmit = function (e) { +// e.preventDefault(); +// if (writePermission) { +// var row = left.parentNode; +// row.style.backgroundColor = "orangered"; +// // Request for command +// input.actualValue = input.value; +// sendCommand(s, name + " " + input.value); +// input.blur(); +// } else { +// var value = input.value +// prompt = true; +// alertify.confirm("", "You are connected with " + clientTitle +// + ".
" +// + "Are you sure you want to modify things here?", +// function () { +// // User decided to proceed. +// writePermission = true; +// writePermissionTimeout = setTimeout(function () { +// writePermission = false; +// }, 3600000); +// var row = left.parentNode; +// row.style.backgroundColor = "orangered"; +// input.actualValue = value; +// // Request for command +// sendCommand(s, command + " " + value); +// resize_textfield(input); +// prompt = false; +// }, function () { +// // User decided to cancel +// input.value = input.oldValue; +// resize_textfield(input); +// prompt = false; +// }); +// } +// }; +// form.appendChild(input); +// var right = create_input_element(component); +// right.appendChild(form); +// return append_to_content(left, right); + +// 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; + +// // ---------------------> Not working anymore since swiper was removed!!! +// } +// } + +// function create_checkbox_row(component) { +// // Creates row-element containing checkbox-item +// var command = component.command; +// var left = createTitle(component); +// var input = create_input_element(component, 'input', 'parameter-checkbox'); +// input.type = "checkbox"; +// input.onkeyup = function (e) { +// if (e.keyCode === 32) { +// handleCheckbox(); +// } +// } + +// var label = document.createElement('label'); +// label.for = input; +// label.classList.add("parameter-label"); + +// label.onclick = function () { +// handleCheckbox(); +// } + +// function handleCheckbox() { +// if (writePermission) { +// var row = left.parentNode; +// row.style.backgroundColor = "orangered"; +// if (input.checked) { +// var value = "0"; +// input.checked = false; +// } else { +// var value = "1"; +// input.checked = true; +// } +// // Request for command +// sendCommand(s, command + " " + value); +// } else { +// alertify.confirm("", "You are connected with " + clientTitle +// + ".
" +// + "Are you sure you want to modify things here?", +// function () { +// // User decided to proceed. +// writePermission = true; +// writePermissionTimeout = setTimeout(function () { +// writePermission = false; +// }, 3600000); +// var row = left.parentNode; +// row.style.backgroundColor = "orangered"; +// if (input.checked) { +// var value = "0"; +// input.checked = false; +// } else { +// var value = "1"; +// input.checked = true; +// } +// // Request for command +// sendCommand(s, command + " " + value); +// }, function () { +// // User decided to cancel +// }); +// } +// }; + +// var right = document.createElement('span'); +// right.classList.add("col-right"); +// right.appendChild(input); +// right.appendChild(label); +// return append_to_content(left, right); +// } + +// function create_enum_row(component) { +// // Creates row-element containing dropdown-selection. +// var name = component.name; +// var command = component.command; +// var buttons = component.enum_names; +// var left = createTitle(component); +// var select = create_input_element(component, 'select', 'select-params'); +// select.onfocus = function () { +// select.oldIndex = select.selectedIndex; +// } + +// select.oninput = function () { +// if (writePermission && component.title != "device config") { +// var row = left.parentNode; +// row.style.backgroundColor = "orangered"; +// // Request for command +// sendCommand(s, command + " " + this.value); +// } else { +// alertify.confirm("", "You are connected with " + clientTitle +// + ".
" +// + "Are you sure you want to modify things here?", +// function () { +// // User decided to proceed. +// writePermission = true; +// writePermissionTimeout = setTimeout(function () { +// writePermission = false; +// }, 3600000); +// var row = left.parentNode; +// row.style.backgroundColor = "orangered"; +// // Request for command +// sendCommand(s, command + " " + select.value); +// }, function () { +// // User decided to cancel +// select.value = select.options[select.oldIndex].value +// }); +// } +// }; + +// for (var i = 0; i < buttons.length; i++) { +// var option = document.createElement('option'); +// option.type = "enum"; +// option.classList.add("option-params"); +// option.value = buttons[i].value; +// option.appendChild(document.createTextNode(buttons[i].title)); +// select.add(option); +// } +// select.style.display = "none"; + +// var right = document.createElement('span'); +// right.classList.add("col-right"); +// right.appendChild(select); +// return append_to_content(left, right); +// } + +// ...obsolete +/* ---------------------------------------------------------------------------------- */ +// The following two functions seem unreachable + +/* ########## Is this function used? How? Where? ########## */ +// function create_group_row(component) { +// // Creates row-element containing link. +// var title = component.title; +// var row = document.createElement('row'); +// row.id = component.name; +// row.name = title; +// row.classList.add("row"); +// row.tabIndex = "0"; + +// console.log('createGroupRow'); + +// row.onclick = function () { +// var slideNames = getSlideNames(); +// slideNames[0] = component.name; +// document.title = "SEA "+ clientTitle + " " + slideNames.join(" "); +// history.pushState({func: "gotoGroups", funarg: slideNames.join("%20")}, document.title, "#" + slideNames.join("%20")); +// getGroup(s, component.name); +// } + +// if (title === "console" || title === "device config") { +// row.classList.add("row"); +// row.innerHTML = "console"; +// } +// row.innerHTML = title; +// return row; +// } + +/* ########## Is this function used? How? Where? ########## */ +// function create_rdonly_row(component) { +// // Creates row-element containing link AND read-only-item. +// var link = component.link; +// if (!link) // simple rdonly +// return append_to_content(createTitle(component), +// create_input_element(component)); + +// // with link +// var left = document.createElement('a'); +// left.innerHTML = component.title; + +// console.log('ccc') + +// left.id = component.name; + +// row = append_to_content(left, create_input_element(component)); +// row.onclick = function () { +// this.style.backgroundColor = "orangered"; +// left.click(); +// } +// if (link.charAt(0) == ':') { +// left.href = "http://" + location.hostname + link + "/"; +// } else { +// left.href = link; +// } + +// row.classList.add("row"); +// return row; +// } diff --git a/client/jsFiles/SEAWebClientMain.js b/client/jsFiles/SEAWebClientMain.js index ce0f181..24032e5 100644 --- a/client/jsFiles/SEAWebClientMain.js +++ b/client/jsFiles/SEAWebClientMain.js @@ -3,7 +3,7 @@ var MAXBLOCK = 4; // max number of blocks var elements = []; // grid elements -var swiper = []; // This array contains main-swiper-Instances. +// var swiper = []; // This array contains main-swiper-Instances. var hostPort = ""; // Address and port of static html-file. var clientID = ""; // ID given by server when SSE-connection is established. var clientTitle = ""; // Contains name of instrument and device. @@ -12,7 +12,6 @@ var getUpdatesGraphics = true; var initCommands = []; var loadingShown = true; var writePermission = false; -var menuMode = false; var panelOn = true; var firstState = 0; var showParams = false; @@ -127,22 +126,7 @@ function nextInitCommand() { var loadingScreen = document.getElementsByClassName("loading-div")[0]; loadingScreen.style.display = "none"; loadingShown = false; - /* Not working without swiper, necessary??? */ - // if (location.hash) { // there was a #hash part - // var slideNames = location.hash.substr(1); - // gotoGroups(slideNames); - // } console.log("loading finished"); - - // function gotoGroups(slideNames) { - - // slideNames = slideNames.split("%20"); - // var l = Math.min(MAXBLOCK,slideNames.length); - // document.title = "SEA "+ clientTitle + " " + slideNames.join(" "); - // for (var s=0; s MINHEIGHT) { nRows = 2; } - if (menuMode) { - nRows = 1; - nColumns = 1; - } } function sizeChange() { @@ -68,108 +64,110 @@ function adjustGrid() { style(0,"100vw","100vh"); style(1); // hide style(2); // hide - // style(3); // hide + style(3); // hide return; } switch (nColumns) { case 1: - if (menuMode) { - leftWidth = Math.min(100, MINWIDTH / width * 100); - style(1,leftWidth + "vw","100vh"); + if (window['showConsole']) { + if (showParams) { + style(0); // hide + style(1); // hide + style(2,"100vw","50vh"); + style(3,"100vw","50vh"); + } else { + style(0); // hide + style(1,"100vw","50vh"); + style(2); // hide + style(3,"100vw","50vh"); + } } else { - // we may want to switch to 90vh on safari ios (workaround) - style(0); // hide - style(1,"100vw","100vh"); - style(2); // hide - // style(3); // hide - } + if (showParams) { + style(0); // hide + style(1); // hide + style(2,"100vw","100vh"); + style(3); // hide + } else { + style(0); // hide + style(1,"100vw","100vh"); + style(2); // hide + style(3); // hide + } + } break; case 2: + case 3: rightWidth = Math.min(50, MINWIDTH / width * 100); leftWidth = 100 - rightWidth; - if (nRows == 1 || !window['showConsole']) { - if (showParams) { - style(0,leftWidth + "vw","100vh"); - style(1); // hide - style(2,rightWidth + "vw","100vh"); - // style(3); // hide + if (window['showConsole']) { + if (nRows == 1) { + 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"); + } } else { - 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","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"); + } } } 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"); - // } - style(0,leftWidth + "vw","100vh"); - style(1,rightWidth + "vw","50vh"); - style(2,rightWidth + "vw","50vh"); - // style(3); // hide + if (nRows == 1) { + 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 { + 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 + } + } } break; - case 3: - rightWidth = MINWIDTH / width * 100; - leftWidth = 100 - rightWidth; - if (nRows == 1 || !window['showConsole']) { - 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 { - // 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 (window['showConsole']) { + style(0,leftWidth + "vw","100vh"); + style(1,rightWidth + "vw","50vh"); + style(2,rightWidth + "vw","50vh"); + style(3,100 - leftWidth + "vw","50vh"); + } else { style(0,leftWidth + "vw","100vh"); style(1,rightWidth + "vw","100vh"); - // 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(2,rightWidth + "vw","100vh"); + style(3); // hide + } break; default: break;