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

console, modules

Browse Source
This commit is contained in:
Daniel
2025-04-16 18:37:32 +02:00
parent 3be94ba3f6
commit 0ec5672068
8 changed files with 77 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
client/cssFiles/SEAWebClientConsole.css
View File

@ -8,6 +8,7 @@
width: 100%;
padding: 26px 0px 0px 0px;
background-color: darkgray;
display: none;
}
.commandline {
@ -33,6 +34,6 @@
width: 100%;
height: 100%;
overflow-y: auto;
background-color: white;
color: black;
background-color: #303030;
color: lightgray;
}

2
client/cssFiles/SEAWebClientGraphics.css
View File

@ -37,7 +37,7 @@
width: 100%;
display: flex;
flex-flow: column;
margin-top: 30px;
/* margin-top: 30px; */
}
.graph{

27
client/cssFiles/SEAWebClientGroup.css
View File

@ -110,6 +110,8 @@
opacity: .8;
}
/* ------------------------------ status-icon ------------------------------ */
.status-icon {
border-radius: 50%;
background-color: lightgray;
@ -137,18 +139,21 @@
background-color: red;
}
.info-icon:hover {
/* opacity: .6; */
cursor: pointer;
transform: scale(90%);
transition: .5s;
}
.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;
}
.edit-icon:hover {
/* opacity: .6; */
cursor: pointer;
transform: scale(90%);
transition: .5s;
.status-icon:hover ~ .status-info {
opacity: 1.0;
}
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

3
client/cssFiles/SEAWebClientMain.css
View File

@ -136,6 +136,8 @@ meta, body {
overflow: hidden;
}
/* ------------------------------ log ------------------------------ */
.grid-element-3 {
position: absolute;
display: block;
@ -144,6 +146,7 @@ meta, body {
height: 0;
opacity: .9;
z-index: 1000;
/* transition: 1s; */
}
.grid-element-3-visible {

49
client/jsFiles/SEAWebClientCommunication.js
View File

@ -231,7 +231,7 @@ function updateValues(message, src) {
for (var j = 0; j < matches.length; j++) {
let elem = matches[j];
let type = elem.__ctype__;
let type = elem.__ctype__; // -> Show Dom-Properties
if (type == "rdonly" || type == "rdlink") {
let text = htmlEscape(component.formatted);
if (text) {
@ -271,13 +271,19 @@ function updateStatus(component) {
if (debug_communication_daniel) {
console.log("%cfunction: updateStatus", "color:white;background:darkblue");
}
let matches = document.getElementsByName(component.name);
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
let status_info = document.getElementsByName(component.name.split(":")[0] + '-info')[0];
if(status_info) {
status_info.innerHTML = component.formatted;
}
switch (statusCode) {
case 0:
status_icon.classList.add('status-icon-disabled');
@ -375,40 +381,25 @@ function successHandler(s, message) {
console.log("%cfrom server (reqJSON): " + message.type,
"color:white;background:dimgray", message);
}
// console.log('CASE: ',message.type,', message: ',message);
switch (message.type) {
// Response to a "getblock"-server-request.
case "draw":
if (message.path == "main") {
// Happens only initially or at device change.
// for (var sLocal = 0; sLocal < 2; sLocal++) { // was up to MAXBLOCK
// insertSlide(sLocal, message.title, "main", createContent(sLocal, message));
// }
insertSlide(1, message.title, "main", createContent(1, message));
insertSlide(2, "", "parameters", createContent(2, {components:[]}));
appendToGridElement(1, message.title, "main", createContent(1, message));
appendToGridElement(2, "", "parameters", createContent(2, {components:[]}));
} else {
if (message.path == '_overview') {
// remove comment of next line when you want overview _instead_ of Graphics
// isl = insertSlide(s, message.title, "_overview", createContent(sLocal, message));
} else {
// In the module-block a parameter was selected
// -> write parameter-block to grid-element2
// In the module-block a parameter was selected
// -> write parameter-block to grid-element2
isl = appendToGridElement(2, message.title, 'parameters', createContent(2, message));
if (nColumns == 1) {
elements[1].style.display = "none"; // hide modules
elements[2].style.display = "inline-block"; // show parameters
showParams = true;
document.getElementById('close-cross').innerHTML = '<img class = "icon-close" src="res/icon_close.png">';
isl = insertSlide(2, message.title, 'parameters', createContent(2, message));
if (nColumns == 1) {
elements[1].style.display = "none"; // hide modules
elements[2].style.display = "inline-block"; // show parameters
} else if (nColumns == 2 || nColumns == 3) {
// elements[1].style.display = "none"; // hide modules
// elements[2].style.display = "inline-block"; // show parameters
// // elements[2].style.width = "50vw"; //
// if (nRows > 1) {
// elements[2].style.height = "50vh"; //
// }
adjustGrid();
}
} else if (nColumns == 2 || nColumns == 3) {
} else {
}
}
nextInitCommand();
@ -425,7 +416,7 @@ function successHandler(s, message) {
// Response to a "console"-server-request.
case "accept-console":
// draw console only to the last grid-element
insertSlide(3, "console", "console",createContentConsole(3));
appendToGridElement(3, "console", "console",createContentConsole(3));
nextInitCommand();
// send empty command in order to trigger getting history
reqJSON(0, "http://" + hostPort + "/sendcommand?command=&id=" + clientID, successHandler,

3
client/jsFiles/SEAWebClientGraphics.js
View File

@ -349,6 +349,7 @@ function loadGraphicsMenu(panel){
panel.appendChild(menuGraphicsPopup);
menuGraphicsPopup.getContainer().style.top = "28px";
menuGraphicsPopup.getContainer().style.right = "20px";
menuGraphicsPopup.style.position = "absolute";
panel.appendChild(graphicsMenuControl);
graphicsMenuControl.style.marginLeft="6px";
graphicsMenuControl.style.marginRight="22px";
@ -1018,7 +1019,7 @@ let graphs = (function (){
function buildGraphicsUI(){
let f = 0;
insertSlide(f, " ", "graphics", container);
appendToGridElement(f, " ", "graphics", container);
// let currentSwiper = swiper[f];

39
client/jsFiles/SEAWebClientGroup.js
View File

@ -38,10 +38,6 @@ function createContent(s, message) {
var content = document.createElement('div');
content.classList.add("content");
// Process components of the message
// console.log("create content");
// console.log("message: ",message);
// console.log('length: ',message.components.length);
for (var i = 0; i < message.components.length; i++) {
var component = message.components[i];
if (!("title" in component))
@ -528,11 +524,14 @@ function createTitle(component, modules) {
var title = component.title;
if (modules) {
var icon_status = '<img name = ' + title + ':status class = "modules-icon status-icon" src="res/icon_status.png">';
if (component.statusname) {
left.innerHTML = icon_status;
}
left.innerHTML += '<span class = "modules-title">' + component.title + '</span>';
left.innerHTML += '<span class = "modules-title">' + title + '</span>';
if (component.statusname) {
let name = title + '-info'
left.innerHTML += '<span name = ' + name + ' class = "status-info"></span>';
}
} else {
left.innerHTML = component.title;
}
@ -543,12 +542,12 @@ function createParElement(component, tag='span', cls='col-right') {
if (debug_group_daniel) {
console.log("%cfunction: createParElement", "color:white;background:salmon");
}
var right = document.createElement(tag);
if (cls)
right.classList.add(cls);
// right.name = is not sufficient, getElementsByName would not work
right.setAttribute('name', component.name);
// Add DOM-property
right.__ctype__ = component.type;
return right;
}
@ -585,7 +584,31 @@ function appendToContent(component, left, right) {
row.appendChild(createInfo(component));
}
row.appendChild(left);
console.log(component);
row.appendChild(right);
return row;
}
function appendToGridElement(s, title, type, content) {
if (debug_swiper_daniel) {
console.log("%cfunction: appendToGridElement", "color:white;background:lightblue");
console.log("title: ",title);
}
var panel = document.createElement('div');
panel.classList.add("panel");
titlewrapper = document.createElement('span');
titlewrapper.innerHTML = title;
panel.appendChild(titlewrapper);
var gridContainer = document.createElement('div');
gridContainer.classList.add("grid-container");
// Store type so it can be found easiely later.
gridContainer.slideType = type;
gridContainer.appendChild(panel);
gridContainer.appendChild(content);
var gridelements = document.getElementsByClassName('grid-element');
gridelements[s].innerHTML = "";
gridelements[s].appendChild(gridContainer);
}

2
client/jsFiles/SEAWebClientSwiper.js
View File

@ -96,7 +96,7 @@ function replaceSlideContent(slide, title, content) {
slide.replaceChild(content, slide.childNodes[1])
}
function insertSlide(s, title, type, content) {
function insertSlideXXX(s, title, type, content) {
if (debug_swiper_daniel) {
console.log("%cfunction: insertSlide", "color:white;background:lightblue");
console.log("title: ",title);