linse/seweb
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pushbutton changed to link in left column

Browse Source
This commit is contained in:
Daniel
2025-05-01 14:32:31 +02:00
committed by Markus Zolliker
parent a8e14eb797
commit d6479a7ece
5 changed files with 97 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
client/cssFiles/SEAWebClientGroup.css
View File

@ -138,6 +138,18 @@
display: inline-block; display: inline-block;
} }
/* ------------------------------ pushbutton ------------------------------ */
.push-button-active {
text-decoration: underline;
cursor: pointer;
}
.push-button-active:hover {
color: blue;
}
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* right */ /* right */
@ -165,9 +177,11 @@
.icon-edit { .icon-edit {
position: absolute; position: absolute;
top: 4px; top: 7px;
right: 2px; right: 0;
cursor: pointer; cursor: pointer;
width: 14px;
height: 14px;
} }
.icon-edit:hover { .icon-edit:hover {
@ -182,9 +196,9 @@
/* ------------------------------ okay-icon ------------------------------ */ /* ------------------------------ okay-icon ------------------------------ */
.icon-okay { .icon-okay {
width: 18px; width: 14px;
height: 18px; height: 14px;
margin-top: 6px; margin-top: 7px;
margin-left: 4px; margin-left: 4px;
} }
@ -201,12 +215,7 @@
text-align: right; text-align: right;
} }
.input-element-button { .input-element-hidden {
display: block;
text-align: right;
}
.input-element-hidden, .input-element-button-hidden {
display: none; display: none;
} }
@ -303,19 +312,6 @@ option {
opacity: 0.85; 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 <- moved here from SEAWebClientSwiper.css */
.panel { .panel {

5
client/jsFiles/SEAWebClientCommunication.js
View File

@ -216,7 +216,6 @@ function updateTarget(component) {
let matches = document.getElementsByName(component.name); let matches = document.getElementsByName(component.name);
let elem = matches[0]; // Should be the only match let elem = matches[0]; // Should be the only match
elem.value = component.value; elem.value = component.value;
let row = elem.closest('div'); let row = elem.closest('div');
row.classList.remove('row-waiting-for-answer'); row.classList.remove('row-waiting-for-answer');
@ -229,7 +228,9 @@ function updateTarget(component) {
} }
} }
elem.actualValue = component.value; elem.actualValue = component.value;
resizeTextfield(elem); if(elem.__ctype__ == 'input') {
resizeTextfield(elem);
}
} }
function updateStatus(component) { function updateStatus(component) {

163
client/jsFiles/SEAWebClientGroup.js
View File

@ -88,6 +88,19 @@ function createLeftColumnForModules(component) {
let modules_title = document.createElement('span'); let modules_title = document.createElement('span');
modules_title.classList.add('modules-title'); modules_title.classList.add('modules-title');
modules_title.innerHTML = component.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); left.appendChild(modules_title);
if (component.statusname) { if (component.statusname) {
let status_info = document.createElement('span'); let status_info = document.createElement('span');
@ -135,8 +148,29 @@ function createLeftColumnForModules(component) {
function createLeftColumnForParameters(component) { function createLeftColumnForParameters(component) {
let left = document.createElement('span'); let left = document.createElement('span');
left.classList.add('col-left'); left.classList.add('col-left');
left.innerHTML = component.title; if (component.type == 'pushbutton') {
left.appendChild(createPushButton (component));
} else {
left.innerHTML = component.title;
}
return left; 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.targetname) {
if (component.type == 'input' || if (component.type == 'input' ||
component.type == 'pushbutton' ||
component.type == 'checkbox' || component.type == 'checkbox' ||
component.type == 'enum' component.type == 'enum'
) { ) {
let input_element = createType(component); let input_element = createType(component);
if (component.type != 'pushbutton') { let icon_edit = createIconEdit(input_element);
let icon_edit = createIconEdit(input_element); right.appendChild(icon_edit);
right.appendChild(icon_edit);
}
right.appendChild(input_element); right.appendChild(input_element);
} }
} }
@ -174,15 +205,12 @@ function createRightColumnForParameters(component) {
right.appendChild(createValue(component)); right.appendChild(createValue(component));
if (component.type == 'input' || if (component.type == 'input' ||
component.type == 'pushbutton' ||
component.type == 'checkbox' || component.type == 'checkbox' ||
component.type == 'enum' component.type == 'enum'
) { ) {
let input_element = createType(component); let input_element = createType(component);
if (component.type != 'pushbutton') { let icon_edit = createIconEdit(input_element);
let icon_edit = createIconEdit(input_element); right.appendChild(icon_edit);
right.appendChild(icon_edit);
}
right.appendChild(input_element); right.appendChild(input_element);
} }
return right; return right;
@ -226,14 +254,7 @@ function createType (component) {
case 'enum': case 'enum':
input_element = createEnum(component); input_element = createEnum(component);
input_element.classList.add('input-element', 'input-element-hidden'); input_element.classList.add('input-element', 'input-element-hidden');
break; 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;
case 'input': case 'input':
input_element = createInputText(component); input_element = createInputText(component);
input_element.classList.add('input-element', 'input-element-hidden'); input_element.classList.add('input-element', 'input-element-hidden');
@ -249,20 +270,6 @@ function createType (component) {
/* ---------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------- */
// input elements // 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) { function createInputText(component) {
// Creates row-element containing input-item. // Creates row-element containing input-item.
@ -270,19 +277,15 @@ function createInputText(component) {
var input = createInputElement(component, 'input', 'input-text'); var input = createInputElement(component, 'input', 'input-text');
input.type = "text"; input.type = "text";
input.style.width = "100px"; input.style.width = "100px";
input.onclick = function (e) {
e.stopPropagation();
}
// Prevent updates, while user is changing textfield // Prevent updates, while user is changing textfield
input.addEventListener("focus", function(evt) { input.addEventListener("focus", function(evt) {
let elm = evt.target; let elm = evt.target;
setTimeout(function(){elm.setSelectionRange(0, elm.value.length);},0); 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) { input.onkeydown = function (e) {
if (e.key == "Escape") { if (e.key == "Escape") {
// User decided to cancel // User decided to cancel
@ -303,52 +306,6 @@ function createInputText(component) {
}, 1); }, 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.<br>"
// + "Hint: press ESC for leaving a field unchanged.<b>"
// + "You are connected with <b>" + clientTitle + "</b>.<br>"
// + "Are you sure you want to change the value of<br><b>"
// + component.name + "</b> from <b>" + actualValue
// + "</b> to <b>" + value + "</b>?",
// 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'); var form = document.createElement('form');
form.onsubmit = function (e) { form.onsubmit = function (e) {
e.preventDefault(); e.preventDefault();
@ -361,11 +318,12 @@ function createInputText(component) {
} else { } else {
sendCommand(s, component.name + " " + input.value); sendCommand(s, component.name + " " + input.value);
} }
row.classList.add('row-waiting-for-answer');
input.blur(); input.blur();
hideInputElements(); hideInputElements();
}; };
form.appendChild(input); form.appendChild(input);
form.appendChild(submit_btn); form.appendChild(createSubmitButton());
return form; return form;
} }
@ -373,21 +331,21 @@ function createCheckbox(component) {
// Creates row-element containing checkbox-item // Creates row-element containing checkbox-item
var input = createInputElement(component, 'input', 'parameter-checkbox'); var input = createInputElement(component, 'input', 'parameter-checkbox');
input.type = "checkbox"; input.type = "checkbox";
input.onclick = function (e) {
input.onclick = function () { e.stopPropagation;
handleCheckbox();
} }
function handleCheckbox() { var form = document.createElement('form');
let row = input.closest('div'); form.onsubmit = function (e) {
e.preventDefault();
var row = form.closest('div');
row.classList.add('row-waiting-for-answer'); row.classList.add('row-waiting-for-answer');
sendCommand(s, component.command + " " + input.checked); sendCommand(s, component.command + " " + input.checked);
// hideInputElements(); hideInputElements();
}; };
form.appendChild(input);
let right = document.createElement('span'); form.appendChild(createSubmitButton());
right.appendChild(input); return form;
return right;
} }
function createEnum(component) { function createEnum(component) {
@ -438,6 +396,17 @@ function createInputElement(component, tag='span', cls='col-right-modules') {
return input_element; 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) // Hides all input elements (input text, pushbotton, enum, checkbox)

18
client/jsFiles/SEAWebClientMain.js
View File

@ -185,24 +185,22 @@ window.onload = function() {
icon_lock_container.onclick = function(){ icon_lock_container.onclick = function(){
let array_icon_edit = document.getElementsByClassName('icon-edit'); let array_icon_edit = document.getElementsByClassName('icon-edit');
let array_button = document.getElementsByClassName('input-element-button'); let array_pushbutton = document.getElementsByClassName('push-button');
if (writePermission == false) {
if (writePermission == false) {
alertify.prompt( "WRITE PERMISSION", "Current device: <b>"+ window.device + "</b><p>Please confirm the instrument:", "" alertify.prompt( "WRITE PERMISSION", "Current device: <b>"+ window.device + "</b><p>Please confirm the instrument:", ""
, function(evt, value) { , function(evt, value) {
// User decided to proceed // User decided to proceed
if (window.instrument.toUpperCase() === value.toUpperCase()) { if (window.instrument.toUpperCase() == value.toUpperCase()) {
writePermission = true; writePermission = true;
icon_lock_container.innerHTML = '<img class = "icon-main icon-lock" src="res/icon_lock_open.png">'; icon_lock_container.innerHTML = '<img class = "icon-main icon-lock" src="res/icon_lock_open.png">';
for(i = 0; i < array_icon_edit.length; i++) { for(i = 0; i < array_icon_edit.length; i++) {
array_icon_edit[i].classList.remove('icon-edit-hidden'); array_icon_edit[i].classList.remove('icon-edit-hidden');
} }
for(i = 0; i < array_button.length; i++) { for(i = 0; i < array_pushbutton.length; i++) {
array_button[i].classList.remove('input-element-button-hidden'); array_pushbutton[i].classList.add('push-button-active');
} }
} else {
console.log(clientTitle);
} }
// prompt = false;
} }
, function() { , function() {
// User decided to cancel // User decided to cancel
@ -214,8 +212,8 @@ window.onload = function() {
for(i = 0; i < array_icon_edit.length; i++) { for(i = 0; i < array_icon_edit.length; i++) {
array_icon_edit[i].classList.add('icon-edit-hidden'); array_icon_edit[i].classList.add('icon-edit-hidden');
} }
for(i = 0; i < array_button.length; i++) { for(i = 0; i < array_pushbutton.length; i++) {
array_button[i].classList.add('input-element-button-hidden'); array_pushbutton[i].classList.remove('push-button-active');
} }
} }
} }

BIN
client/res/icon_sinus.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.3 KiB

After

Width:  |  Height:  |  Size: 5.2 KiB