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;
}
/* ------------------------------ 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 {

5
client/jsFiles/SEAWebClientCommunication.js
View File

@ -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) {

163
client/jsFiles/SEAWebClientGroup.js
View File

@ -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.<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');
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)

18
client/jsFiles/SEAWebClientMain.js
View File

@ -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: <b>"+ window.device + "</b><p>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 = '<img class = "icon-main icon-lock" src="res/icon_lock_open.png">';
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');
}
}
}

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