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

Some bugfixes for input elements

Browse Source
This commit is contained in:
Daniel
2025-04-24 18:12:38 +02:00
parent 0d5ffd72a8
commit ff0c00cabb
4 changed files with 151 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
client/SEAWebClient.html
View File

@ -34,8 +34,6 @@
<!-- CSS-Files -->
<link rel="stylesheet" href="externalFiles/alertify.css">
<!-- <link rel="stylesheet" href="externalFiles/swiper-bundle.min.css"> -->
<!-- <link rel="stylesheet" href="cssFiles/SEAWebClientSwiper.css"> -->
<link rel="stylesheet" href="cssFiles/SEAWebClientGroup.css">
<link rel="stylesheet" href="cssFiles/SEAWebClientConsole.css">
<link rel="stylesheet" href="cssFiles/SEAWebClientGraphics.css">
@ -43,8 +41,6 @@
<!-- JS-Files -->
<script src="externalFiles/alertify.js"></script>
<script src="externalFiles/eventsource.js"></script>
<!-- <script src="externalFiles/d3.min.js"></script> -->
<!-- <script src="externalFiles/swiper-bundle.min.js"></script> -->
<!-- <script src="externalFiles/Chart.bundle.min.js"></script> -->
<script src="externalFiles/chart.umd.min.js"></script>
<script src="externalFiles/luxon.min.js"></script>
@ -55,7 +51,6 @@
<!-- <script src="externalFiles/chartjs-zoom.js"></script> -->
<script src="jsFiles/SEAWebClientLocalStorage.js"></script>
<script src="jsFiles/SEAWebClientResponsivity.js"></script>
<!-- <script src="jsFiles/SEAWebClientSwiper.js"></script> -->
<script src="jsFiles/SEAWebClientGroup.js"></script>
<script src="jsFiles/SEAWebClientConsole.js"></script>
<script src="jsFiles/SEAWebClientGraphics.js"></script>

42
client/cssFiles/SEAWebClientGroup.css
View File

@ -57,7 +57,7 @@
height: 12px;
line-height: 16px;
opacity: .8;
text-align: top;
vertical-align: top;
margin-bottom: 4px;
}
@ -66,7 +66,8 @@
.col-left {
display: inline-block;
min-width: 140px;
width: 155px;
vertical-align: top;
}
/* ------------------------------ info ------------------------------ */
@ -131,15 +132,18 @@
/* right */
.col-right-modules {
float: right;
display: inline-block;
width: 180px;
}
.col-right-parameters {
float: right;
display: inline-block;
width: 180px;
}
.col-right-value {
padding-right: 4px;
display: block;
text-align: right;
}
.col-right-disabled {
@ -149,7 +153,9 @@
/* ------------------------------ edit-icon ------------------------------ */
.edit-icon {
float: right;
position: absolute;
top: 4px;
right: 2px;
cursor: pointer;
}
@ -270,3 +276,27 @@ option {
border: 2px solid dimgray;
border-radius: 4px;
}
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* PANEL <- moved here from SEAWebClientSwiper.css */
.panel {
background-color: #303030;
/* position: absolute; */
z-index: 20;
width: 100%;
height: 30px;
}
.panel:not(.graphics) {
color: white;
text-align: center;
padding: 6px 6px 6px 6px;
}
.panel.graphics{
display: flex;
justify-content: flex-end;
}
.toggle-updates-graphics {
float: right;
}

36
client/jsFiles/SEAWebClientCommunication.js
View File

@ -192,7 +192,7 @@ function updateValues(message, src) {
// Handles changes of parameter-values
for (var i = 0; i < message.updates.length; i++) {
let component = message.updates[i];
let value = component.value;
let comp_value = component.value;
let matches = document.getElementsByName(component.name);
// Check for status updates
@ -210,27 +210,25 @@ function updateValues(message, src) {
elem.innerHTML = text;
}
} else if (type == "input") {
let row = elem.parentNode.parentNode.parentNode;
let row = elem.closest('div');
row.style.backgroundColor = "white";
let mval = elem.value;
let oldValue = ('oldValue' in elem) ? elem.oldValue : mval;
if (value != mval && parseFloat(value) != parseFloat(mval) && value != oldValue) {
if (elem == document.activeElement
|| oldValue != mval) {
let oldValue = ('oldValue' in elem) ? elem.oldValue : elem.value;
if (comp_value != elem.value && parseFloat(comp_value) != parseFloat(elem.value) && comp_value != oldValue) {
if (elem == document.activeElement || oldValue != elem.value) {
row.style.backgroundColor = "orange";
} else {
elem.value = value;
elem.value = comp_value;
}
}
elem.actualValue = value;
resize_textfield(elem);
elem.actualValue = comp_value;
resizeTextfield(elem);
} else if (type == "checkbox") {
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');
if (value === 'False') {
console.log('receive: ', comp_value);
if (comp_value == 'False' || comp_value == 'false' || comp_value == 0) {
elem.checked = false;
} else {
elem.checked = true;
@ -242,7 +240,7 @@ function updateValues(message, src) {
let options = elem.childNodes;
for (var j = 0; j < options.length; j++) {
if (options[j].label == value) {
if (options[j].label == comp_value) {
elem.value = j + 1;
}
}
@ -370,16 +368,8 @@ function successHandler(s, message) {
isl = appendToGridElement(2, message.title, 'parameters', createContent(message));
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 = '<img class = "icon-close" src="res/icon_close.png">';
}
// else if (nColumns == 2 || nColumns == 3) {
// adjustGrid();
// } else {
// adjustGrid();
// }
}
nextInitCommand();
// Request for updates.

192
client/jsFiles/SEAWebClientGroup.js
View File

@ -29,10 +29,10 @@ function createContent(message) {
component.command = component.name;
if (message.title == 'modules') {
let row = create_row_for_modules(component);
let row = createRowForModules(component);
content.appendChild(row);
} else {
let row = create_row_for_parameters(component);
let row = createRowForParameters(component);
content.appendChild(row);
}
}
@ -42,13 +42,13 @@ function createContent(message) {
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
// ROW
function create_row_for_modules(component) {
let left = create_left_column(component, 1);
function createRowForModules(component) {
let left = createLeftColumnForModules(component);
left.id = component.name;
left.setAttribute('name', 'component.title');
let right = create_right_column_for_modules(component);
let row = append_to_content(left, right);
let right = createRightColumnForModules(component);
let row = appendToContent(left, right);
row.onclick = function () {
getGroup(s, component.title);
@ -57,8 +57,10 @@ function create_row_for_modules(component) {
return row;
}
function create_row_for_parameters(component) {
let left = create_left_column(component);
function createRowForParameters(component) {
let left = document.createElement('span');
left.classList.add('col-left');
left.innerHTML = component.title;
let right = document.createElement('span');
right.classList.add('col-right-parameters');
let value = document.createElement('span');
@ -72,26 +74,40 @@ function create_row_for_parameters(component) {
component.type == 'checkbox' ||
component.type == 'enum'
) {
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);
let input_element;
switch (component.type) {
case 'enum':
input_element = createEnum(component);
break;
case 'pushbutton':
input_element = createPushbutton(component);
break;
case 'input':
input_element = createInput(component);
break;
case 'checkbox':
input_element = createCheckbox(component);
break;
}
input_element.classList.add('input-element', 'input-element-hidden');
edit.onclick = function () {
let icon_edit = document.createElement('img');
icon_edit.setAttribute('src', 'res/icon_edit.png');
icon_edit.classList.add('modules-icon', 'edit-icon');
icon_edit.onclick = function () {
let is_hidden = input_element.classList.contains('input-element-hidden');
hide_input_elements();
hideInputElements();
if (is_hidden) {
input_element.classList.remove('input-element-hidden');
}
}
right.appendChild(edit);
right.appendChild(icon_edit);
right.appendChild(input_element);
}
return append_to_content(left, right);
return appendToContent(left, right);
}
function append_to_content(left, right) {
function appendToContent(left, right) {
let row = document.createElement('div');
row.classList.add("row");
row.appendChild(left);
@ -102,32 +118,28 @@ function append_to_content(left, right) {
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
// LEFT COLUMN
function create_left_column(component, modules) {
function createLeftColumnForModules(component) {
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;
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(create_info(component));
}
return left;
@ -139,20 +151,20 @@ function create_left_column(component, modules) {
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 = '<b>' + component.title + '</b>: ' + component.info;
return infoBox;
function create_info(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 = '<b>' + component.title + '</b>: ' + component.info;
return infoBox;
}
}
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
// RIGHT COLUMN
function create_right_column_for_modules(component) {
function createRightColumnForModules(component) {
var right = document.createElement('span');
right.classList.add('col-right', 'col-right-modules');
let value = document.createElement('span');
@ -173,9 +185,9 @@ function create_right_column_for_modules(component) {
/* ---------------------------------------------------------------------------------- */
// input elements
function create_pushbutton(component) {
function createPushbutton(component) {
// Creates row-element containing a push button
var elem = create_input_element(component);
var elem = createInputElement(component);
elem.classList.add("push-button");
elem.onclick = function (e) {
console.log('click pushbutton');
@ -188,10 +200,10 @@ function create_pushbutton(component) {
return elem;
}
function create_input(component) {
function createInput(component) {
// Creates row-element containing input-item.
var command = component.command;
var input = create_input_element(component, 'input', 'input-text');
var input = createInputElement(component, 'input', 'input-text');
input.type = "text";
input.style.width = "100px";
input.addEventListener("focus", function(evt) {
@ -204,10 +216,10 @@ function create_input(component) {
// User decided to cancel
let input = e.target;
input.value = input.oldValue;
resize_textfield(input);
resizeTextfield(input);
var row = input.closest('div');
row.style.backgroundColor = "white";
hide_input_elements();
hideInputElements();
}
}
@ -247,16 +259,16 @@ function create_input(component) {
row.style.backgroundColor = "orangered";
// Request for command
sendCommand(s, command + " " + value);
resize_textfield(input);
resizeTextfield(input);
prompt = false;
hide_input_elements();
hideInputElements();
}, function () {
// User decided to cancel
input.value = input.actualValue;
resize_textfield(input);
resizeTextfield(input);
row.style.backgroundColor = "white";
prompt = false;
hide_input_elements();
hideInputElements();
});
}
@ -269,7 +281,7 @@ function create_input(component) {
input.actualValue = input.value;
sendCommand(s, component.name + " " + input.value);
input.blur();
hide_input_elements();
hideInputElements();
};
form.appendChild(input);
return form;
@ -287,9 +299,9 @@ function create_input(component) {
}
}
function create_checkbox(component) {
function createCheckbox(component) {
// Creates row-element containing checkbox-item
var input = create_input_element(component, 'input', 'parameter-checkbox');
var input = createInputElement(component, 'input', 'parameter-checkbox');
input.type = "checkbox";
input.onclick = function () {
@ -302,7 +314,7 @@ function create_checkbox(component) {
row.style.backgroundColor = "orangered";
console.log('send ', input.checked);
sendCommand(s, component.command + " " + input.checked);
// hide_input_elements();
// hideInputElements();
};
let right = document.createElement('span');
@ -310,10 +322,10 @@ function create_checkbox(component) {
return right;
}
function create_enum(component) {
function createEnum(component) {
// Creates row-element containing dropdown-selection.
var buttons = component.enum_names;
var select = create_input_element(component, 'select', 'select-params');
var select = createInputElement(component, 'select', 'select-params');
for (var i = 0; i < buttons.length; i++) {
var option = document.createElement('option');
@ -330,7 +342,7 @@ function create_enum(component) {
let index = select.value - 1;
console.log('send', buttons[index].title);
sendCommand(s, component.command + " " + select.value);
// hide_input_elements();
// hideInputElements();
};
select.onfocus = function () {
@ -343,7 +355,7 @@ function create_enum(component) {
return right;
}
function create_input_element(component, tag='span', cls='col-right-modules') {
function createInputElement(component, tag='span', cls='col-right-modules') {
var input_element = document.createElement(tag);
input_element.classList.add('col-right');
if (cls)
@ -356,14 +368,14 @@ function create_input_element(component, tag='span', cls='col-right-modules') {
/* ---------------------------------------------------------------------------------- */
function hide_input_elements(){
function hideInputElements(){
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) {
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);
@ -404,7 +416,7 @@ function appendToGridElement(s, title, type, content) {
/* ---------------------------------------------------------------------------------- */
// obsolete...
// function create_pushbutton_row(component) {
// function createPushbutton_row(component) {
// // Creates row-element containing a push button
// var name = component.name;
// var command = component.command;
@ -413,10 +425,10 @@ function appendToGridElement(s, title, type, content) {
// left.id = component.name;
// left.name = component.title;
// var right = create_input_element(component);
// var right = createInputElement(component);
// right.classList.add("push-button");
// row = append_to_content(left, right);
// row = appendToContent(left, right);
// right.onclick = function () {
// if (writePermission) {
// var row = left.parentNode;
@ -456,7 +468,7 @@ function appendToGridElement(s, title, type, content) {
// var command = component.command;
// var left = createTitle(component);
// var input = create_input_element(component, 'input', 'input-text');
// var input = createInputElement(component, 'input', 'input-text');
// input.type = "text";
// input.style.width = "100px";
// input.addEventListener("focus", function(evt) {
@ -468,7 +480,7 @@ function appendToGridElement(s, title, type, content) {
// if (e.which === 27 || e.key == "Escape") {
// // User decided to cancel
// input.value = intput.oldValue;
// resize_textfield(input);
// resizeTextfield(input);
// var row = left.parentNode;
// row.style.backgroundColor = "white";
// }
@ -514,12 +526,12 @@ function appendToGridElement(s, title, type, content) {
// row.style.backgroundColor = "orangered";
// // Request for command
// sendCommand(s, command + " " + value);
// resize_textfield(input);
// resizeTextfield(input);
// prompt = false;
// }, function () {
// // User decided to cancel
// input.value = input.actualValue;
// resize_textfield(input);
// resizeTextfield(input);
// row.style.backgroundColor = "white";
// prompt = false;
// });
@ -552,20 +564,20 @@ function appendToGridElement(s, title, type, content) {
// input.actualValue = value;
// // Request for command
// sendCommand(s, command + " " + value);
// resize_textfield(input);
// resizeTextfield(input);
// prompt = false;
// }, function () {
// // User decided to cancel
// input.value = input.oldValue;
// resize_textfield(input);
// resizeTextfield(input);
// prompt = false;
// });
// }
// };
// form.appendChild(input);
// var right = create_input_element(component);
// var right = createInputElement(component);
// right.appendChild(form);
// return append_to_content(left, right);
// return appendToContent(left, right);
// function posTextfield(s, left) {
// if (debug_group_daniel) {
@ -580,11 +592,11 @@ function appendToGridElement(s, title, type, content) {
// }
// }
// function create_checkbox_row(component) {
// function createCheckbox_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');
// var input = createInputElement(component, 'input', 'parameter-checkbox');
// input.type = "checkbox";
// input.onkeyup = function (e) {
// if (e.keyCode === 32) {
@ -644,16 +656,16 @@ function appendToGridElement(s, title, type, content) {
// right.classList.add("col-right");
// right.appendChild(input);
// right.appendChild(label);
// return append_to_content(left, right);
// return appendToContent(left, right);
// }
// function create_enum_row(component) {
// function createEnum_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');
// var select = createInputElement(component, 'select', 'select-params');
// select.onfocus = function () {
// select.oldIndex = select.selectedIndex;
// }
@ -698,7 +710,7 @@ function appendToGridElement(s, title, type, content) {
// var right = document.createElement('span');
// right.classList.add("col-right");
// right.appendChild(select);
// return append_to_content(left, right);
// return appendToContent(left, right);
// }
// ...obsolete
@ -738,8 +750,8 @@ function appendToGridElement(s, title, type, content) {
// // 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));
// return appendToContent(createTitle(component),
// createInputElement(component));
// // with link
// var left = document.createElement('a');
@ -749,7 +761,7 @@ function appendToGridElement(s, title, type, content) {
// left.id = component.name;
// row = append_to_content(left, create_input_element(component));
// row = appendToContent(left, createInputElement(component));
// row.onclick = function () {
// this.style.backgroundColor = "orangered";
// left.click();