diff --git a/client/cssFiles/SEAWebClientGroup.css b/client/cssFiles/SEAWebClientGroup.css index 4f34c37..8dd4edf 100644 --- a/client/cssFiles/SEAWebClientGroup.css +++ b/client/cssFiles/SEAWebClientGroup.css @@ -138,6 +138,18 @@ display: inline-block; } + +/* ------------------------------ pushbutton ------------------------------ */ + +.push-button-active { + text-decoration: underline; + cursor: pointer; +} + +.push-button-active:hover { + color: blue; +} + /* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* right */ @@ -165,9 +177,11 @@ .icon-edit { position: absolute; - top: 4px; - right: 2px; + top: 7px; + right: 0; cursor: pointer; + width: 14px; + height: 14px; } .icon-edit:hover { @@ -182,9 +196,9 @@ /* ------------------------------ okay-icon ------------------------------ */ .icon-okay { - width: 18px; - height: 18px; - margin-top: 6px; + width: 14px; + height: 14px; + margin-top: 7px; margin-left: 4px; } @@ -201,12 +215,7 @@ text-align: right; } -.input-element-button { - display: block; - text-align: right; -} - -.input-element-hidden, .input-element-button-hidden { +.input-element-hidden { display: none; } @@ -303,19 +312,6 @@ option { opacity: 0.85; } -/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ -/* PUSH-BUTTON */ - -.push-button { - border: 2px solid dimgray; - border-radius: 4px; - display: inline-block; - width: 16px; - height: 16px; - top: 5px; - z-index: 50; -} - /* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* PANEL <- moved here from SEAWebClientSwiper.css */ .panel { diff --git a/client/jsFiles/SEAWebClientCommunication.js b/client/jsFiles/SEAWebClientCommunication.js index 89db5b7..6f6233a 100644 --- a/client/jsFiles/SEAWebClientCommunication.js +++ b/client/jsFiles/SEAWebClientCommunication.js @@ -216,7 +216,6 @@ function updateTarget(component) { let matches = document.getElementsByName(component.name); let elem = matches[0]; // Should be the only match elem.value = component.value; - let row = elem.closest('div'); row.classList.remove('row-waiting-for-answer'); @@ -229,7 +228,9 @@ function updateTarget(component) { } } elem.actualValue = component.value; - resizeTextfield(elem); + if(elem.__ctype__ == 'input') { + resizeTextfield(elem); + } } function updateStatus(component) { diff --git a/client/jsFiles/SEAWebClientGroup.js b/client/jsFiles/SEAWebClientGroup.js index d8c1af2..ed78cfe 100644 --- a/client/jsFiles/SEAWebClientGroup.js +++ b/client/jsFiles/SEAWebClientGroup.js @@ -88,6 +88,19 @@ function createLeftColumnForModules(component) { let modules_title = document.createElement('span'); modules_title.classList.add('modules-title'); modules_title.innerHTML = component.title; + if (component.type == 'pushbutton') { + modules_title.classList.add('push-button'); + if (writePermission == true) { + modules_title.classList.add('push-button-active'); + } + modules_title.onclick = function () { + if (writePermission == true) { + let row = button.closest('div'); + row.classList.add('row-waiting-for-answer'); + sendCommand(s, component.command); + } + } + } left.appendChild(modules_title); if (component.statusname) { let status_info = document.createElement('span'); @@ -135,8 +148,29 @@ function createLeftColumnForModules(component) { function createLeftColumnForParameters(component) { let left = document.createElement('span'); left.classList.add('col-left'); - left.innerHTML = component.title; + if (component.type == 'pushbutton') { + left.appendChild(createPushButton (component)); + } else { + left.innerHTML = component.title; + } return left; + + function createPushButton (component) { + let button = document.createElement('span'); + button.classList.add('push-button'); + if (writePermission == true) { + button.classList.add('push-button-active'); + } + button.innerHTML = component.title; + button.onclick = function () { + if (writePermission == true) { + let row = button.closest('div'); + row.classList.add('row-waiting-for-answer'); + sendCommand(s, component.command); + } + } + return button; + } } /* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @@ -151,15 +185,12 @@ function createRightColumnForModules(component) { if (component.targetname) { if (component.type == 'input' || - component.type == 'pushbutton' || component.type == 'checkbox' || component.type == 'enum' ) { let input_element = createType(component); - if (component.type != 'pushbutton') { - let icon_edit = createIconEdit(input_element); - right.appendChild(icon_edit); - } + let icon_edit = createIconEdit(input_element); + right.appendChild(icon_edit); right.appendChild(input_element); } } @@ -174,15 +205,12 @@ function createRightColumnForParameters(component) { right.appendChild(createValue(component)); if (component.type == 'input' || - component.type == 'pushbutton' || component.type == 'checkbox' || component.type == 'enum' ) { let input_element = createType(component); - if (component.type != 'pushbutton') { - let icon_edit = createIconEdit(input_element); - right.appendChild(icon_edit); - } + let icon_edit = createIconEdit(input_element); + right.appendChild(icon_edit); right.appendChild(input_element); } return right; @@ -226,14 +254,7 @@ function createType (component) { case 'enum': input_element = createEnum(component); input_element.classList.add('input-element', 'input-element-hidden'); - break; - case 'pushbutton': - input_element = createPushbutton(component); - input_element.classList.add('input-element-button'); - if (writePermission == false) { - input_element.classList.add('input-element-button-hidden'); - } - break; + break; case 'input': input_element = createInputText(component); input_element.classList.add('input-element', 'input-element-hidden'); @@ -249,20 +270,6 @@ function createType (component) { /* ---------------------------------------------------------------------------------- */ // input elements -function createPushbutton(component) { - // Creates row-element containing a push button - var button = createInputElement(component, 'button', 'push-button'); - button.setAttribute('type', 'button'); - - button.onclick = function () { - let row = button.closest('div'); - // row.classList.add('row-waiting-for-answer'); - sendCommand(s, component.command); - } - let elem = document.createElement('span'); - elem.appendChild(button); - return elem; -} function createInputText(component) { // Creates row-element containing input-item. @@ -270,19 +277,15 @@ function createInputText(component) { var input = createInputElement(component, 'input', 'input-text'); input.type = "text"; input.style.width = "100px"; - + input.onclick = function (e) { + e.stopPropagation(); + } // Prevent updates, while user is changing textfield input.addEventListener("focus", function(evt) { let elm = evt.target; setTimeout(function(){elm.setSelectionRange(0, elm.value.length);},0); }); - let submit_btn = document.createElement('input'); - submit_btn.setAttribute('type', 'image'); - submit_btn.classList.add('icon-modules', 'icon-okay'); - submit_btn.setAttribute('src', 'res/icon_okay.png'); - submit_btn - input.onkeydown = function (e) { if (e.key == "Escape") { // User decided to cancel @@ -303,52 +306,6 @@ function createInputText(component) { }, 1); } - // input.onclick = function (e) { - // e.stopPropagation(); - // } - - // input.onblur = function () { - // if (prompt) { - // return false; - // } - // var row = input.closest('div'); - // row.classList.add('row-waiting-for-answer'); - // 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.classList.remove('row-waiting-for-answer'); - // 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
" - // + component.name + " from " + actualValue - // + " to " + value + "?", - // function () { - // // User decided to proceed. - // row.classList.add('row-waiting-for-answer'); - // // Request for command - // sendCommand(s, component.command + " " + value); - // resizeTextfield(input); - // prompt = false; - // hideInputElements(); - // }, function () { - // // User decided to cancel - // input.value = input.actualValue; - // resizeTextfield(input); - // row.classList.remove('row-waiting-for-answer'); - // prompt = false; - // hideInputElements(); - // }); - // } - var form = document.createElement('form'); form.onsubmit = function (e) { e.preventDefault(); @@ -361,11 +318,12 @@ function createInputText(component) { } else { sendCommand(s, component.name + " " + input.value); } + row.classList.add('row-waiting-for-answer'); input.blur(); hideInputElements(); }; form.appendChild(input); - form.appendChild(submit_btn); + form.appendChild(createSubmitButton()); return form; } @@ -373,21 +331,21 @@ function createCheckbox(component) { // Creates row-element containing checkbox-item var input = createInputElement(component, 'input', 'parameter-checkbox'); input.type = "checkbox"; - - input.onclick = function () { - handleCheckbox(); + input.onclick = function (e) { + e.stopPropagation; } - function handleCheckbox() { - let row = input.closest('div'); + var form = document.createElement('form'); + form.onsubmit = function (e) { + e.preventDefault(); + var row = form.closest('div'); row.classList.add('row-waiting-for-answer'); sendCommand(s, component.command + " " + input.checked); - // hideInputElements(); + hideInputElements(); }; - - let right = document.createElement('span'); - right.appendChild(input); - return right; + form.appendChild(input); + form.appendChild(createSubmitButton()); + return form; } function createEnum(component) { @@ -438,6 +396,17 @@ function createInputElement(component, tag='span', cls='col-right-modules') { return input_element; } +function createSubmitButton () { + let submit_btn = document.createElement('input'); + submit_btn.setAttribute('type', 'image'); + submit_btn.classList.add('icon-modules', 'icon-okay'); + submit_btn.setAttribute('src', 'res/icon_okay.png'); + submit_btn.onclick = function (e) { + e.stopPropagation(); + } + return submit_btn; +} + /* ---------------------------------------------------------------------------------- */ // Hides all input elements (input text, pushbotton, enum, checkbox) diff --git a/client/jsFiles/SEAWebClientMain.js b/client/jsFiles/SEAWebClientMain.js index 1526fbc..750eeae 100644 --- a/client/jsFiles/SEAWebClientMain.js +++ b/client/jsFiles/SEAWebClientMain.js @@ -185,24 +185,22 @@ window.onload = function() { icon_lock_container.onclick = function(){ let array_icon_edit = document.getElementsByClassName('icon-edit'); - let array_button = document.getElementsByClassName('input-element-button'); - if (writePermission == false) { + let array_pushbutton = document.getElementsByClassName('push-button'); + + if (writePermission == false) { alertify.prompt( "WRITE PERMISSION", "Current device: "+ window.device + "

Please confirm the instrument:", "" , function(evt, value) { // User decided to proceed - if (window.instrument.toUpperCase() === value.toUpperCase()) { + if (window.instrument.toUpperCase() == value.toUpperCase()) { writePermission = true; icon_lock_container.innerHTML = ''; for(i = 0; i < array_icon_edit.length; i++) { array_icon_edit[i].classList.remove('icon-edit-hidden'); } - for(i = 0; i < array_button.length; i++) { - array_button[i].classList.remove('input-element-button-hidden'); + for(i = 0; i < array_pushbutton.length; i++) { + array_pushbutton[i].classList.add('push-button-active'); } - } else { - console.log(clientTitle); } - // prompt = false; } , function() { // User decided to cancel @@ -214,8 +212,8 @@ window.onload = function() { for(i = 0; i < array_icon_edit.length; i++) { array_icon_edit[i].classList.add('icon-edit-hidden'); } - for(i = 0; i < array_button.length; i++) { - array_button[i].classList.add('input-element-button-hidden'); + for(i = 0; i < array_pushbutton.length; i++) { + array_pushbutton[i].classList.remove('push-button-active'); } } } diff --git a/client/res/icon_sinus.png b/client/res/icon_sinus.png index aa61bf1..2c9987c 100644 Binary files a/client/res/icon_sinus.png and b/client/res/icon_sinus.png differ