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

Some esponsivity bugfixes

Browse Source
This commit is contained in:
Daniel
2025-04-13 10:37:45 +02:00
committed by Markus Zolliker
parent 85fdaa445f
commit 8d668f7de6
6 changed files with 151 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
client/cssFiles/SEAWebClientGroup.css
View File

@ -78,6 +78,43 @@
float: right; float: right;
} }
.modules-title {
display: inline-block;
min-width: 120px;
}
.modules-icon {
display: inline-block;
width: 16px;
height: 16px;
line-height: 16px;
margin-left: 4px;
}
.status-icon {
}
.status-icon-busy {
background-color: yellow;
}
.status-icon-warn {
background-color: orange;
}
.status-icon-error {
background-color: red;
}
.edit-icon {
}
.info-icon {
}
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* TEXT */ /* TEXT */
.input-text { .input-text {

40
client/jsFiles/SEAWebClientCommunication.js
View File

@ -2,7 +2,7 @@
// % COMMUNICATION // % COMMUNICATION
// local debugging: print the name of every executed funtion to the console // local debugging: print the name of every executed funtion to the console
var debug_communication_daniel = 0 var debug_communication_daniel = 0;
var timeoutID; // We need this ID to reset the timer every 30 seconds var timeoutID; // We need this ID to reset the timer every 30 seconds
@ -274,7 +274,7 @@ function reqJSON(s, url, successHandler, errorHandler) {
: new ActiveXObject('Microsoft.XMLHTTP'); : new ActiveXObject('Microsoft.XMLHTTP');
if (debugCommunication) { if (debugCommunication) {
console.log("%cto server (reqJSON): %s", console.log("%cto server (reqJSON): %s",
"color:white;background:lightgreen", url); "color:white;background:darkgreen", url);
} }
xhr.open('get', url, true); xhr.open('get', url, true);
xhr.onreadystatechange = function() { xhr.onreadystatechange = function() {
@ -337,18 +337,16 @@ function successHandler(s, message) {
console.log("%cfrom server (reqJSON): " + message.type, console.log("%cfrom server (reqJSON): " + message.type,
"color:white;background:dimgray", message); "color:white;background:dimgray", message);
} }
// console.log('CASE: ',message.type,', message: ',message);
switch (message.type) { switch (message.type) {
// Response to a "getblock"-server-request. // Response to a "getblock"-server-request.
case "draw": case "draw":
if (debugCommunication) {
console.log(message);
}
if (message.path == "main") { if (message.path == "main") {
// Happens only initially or at device change. // Happens only initially or at device change.
for (var sLocal = 0; sLocal < 2; sLocal++) { // was up to MAXBLOCK // for (var sLocal = 0; sLocal < 2; sLocal++) { // was up to MAXBLOCK
insertSlide(sLocal, message.title, "main", createContent( // insertSlide(sLocal, message.title, "main", createContent(sLocal, message));
sLocal, message)); // }
} insertSlide(1, message.title, "main", createContent(1, message));
insertSlide(2, "", "parameters", createContent(2, {components:[]})); insertSlide(2, "", "parameters", createContent(2, {components:[]}));
} else { } else {
if (message.path == '_overview') { if (message.path == '_overview') {
@ -358,18 +356,19 @@ function successHandler(s, message) {
// In the module-block a parameter was selected // In the module-block a parameter was selected
// -> write parameter-block to grid-element2 // -> write parameter-block to grid-element2
console.log ('col',nColumns); showParams = true;
isl = insertSlide(2, message.title, 'parameters', createContent(sLocal, message)); isl = insertSlide(2, message.title, 'parameters', createContent(2, message));
if (nColumns < 2) { if (nColumns == 1) {
elements[1].style.display = "none"; // hide modules elements[1].style.display = "none"; // hide modules
elements[2].style.display = "inline-block"; // show parameters elements[2].style.display = "inline-block"; // show parameters
} else if (nColumns == 2 || nColumns == 3) { } else if (nColumns == 2 || nColumns == 3) {
elements[1].style.display = "none"; // hide modules // elements[1].style.display = "none"; // hide modules
elements[2].style.display = "inline-block"; // show parameters // elements[2].style.display = "inline-block"; // show parameters
elements[2].style.width = "50vw"; // // // elements[2].style.width = "50vw"; //
if (nRows > 1) { // if (nRows > 1) {
elements[2].style.height = "50vh"; // // elements[2].style.height = "50vh"; //
} // }
adjustGrid();
} }
} }
} }
@ -387,8 +386,7 @@ function successHandler(s, message) {
// Response to a "console"-server-request. // Response to a "console"-server-request.
case "accept-console": case "accept-console":
// draw console only to the last grid-element // draw console only to the last grid-element
insertSlide(3, "console", "console", insertSlide(3, "console", "console",createContentConsole(3));
createContentConsole(sLocal));
nextInitCommand(); nextInitCommand();
// send empty command in order to trigger getting history // send empty command in order to trigger getting history
reqJSON(0, "http://" + hostPort + "/sendcommand?command=&id=" + clientID, successHandler, reqJSON(0, "http://" + hostPort + "/sendcommand?command=&id=" + clientID, successHandler,
@ -405,7 +403,7 @@ function successHandler(s, message) {
begin = timeRange[0] - timeRange[1]; begin = timeRange[0] - timeRange[1];
select.value = begin; select.value = begin;
// Server-request for variable-list.*/ // Server-request for variable-list.*/
console.log('TIME', timeRange) // console.log('TIME', timeRange)
reqJSONPOST(0, "http://" + hostPort + "/getvars", reqJSONPOST(0, "http://" + hostPort + "/getvars",
"time=" + timeRange[0] + ',' + timeRange[1] "time=" + timeRange[0] + ',' + timeRange[1]
+ "&userconfiguration=" + JSON.stringify(getFormattedUserConfigurationFromLocalStorage()) + "&userconfiguration=" + JSON.stringify(getFormattedUserConfigurationFromLocalStorage())

29
client/jsFiles/SEAWebClientGroup.js
View File

@ -13,6 +13,7 @@ function getGroup(s, name) {
if (debug_group_daniel) { if (debug_group_daniel) {
console.log("%cfunction: getGroup", "color:white;background:salmon"); console.log("%cfunction: getGroup", "color:white;background:salmon");
} }
// console.log('name: ',name, ', id: '.ClientID);
reqJSON(s, "http://" + hostPort + "/getblock?path=" + name reqJSON(s, "http://" + hostPort + "/getblock?path=" + name
+ "&id=" + clientID, successHandler, errorHandler); + "&id=" + clientID, successHandler, errorHandler);
} }
@ -37,6 +38,10 @@ function createContent(s, message) {
var content = document.createElement('div'); var content = document.createElement('div');
content.classList.add("content"); content.classList.add("content");
// Process components of the message // 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++) { for (var i = 0; i < message.components.length; i++) {
var component = message.components[i]; var component = message.components[i];
if (!("title" in component)) if (!("title" in component))
@ -138,11 +143,12 @@ function create_rdlink_row(s, component) {
// Creates row-element containing link AND read-only-item. // Creates row-element containing link AND read-only-item.
var name = component.name; var name = component.name;
var status = component.statusname;
var left = createTitle(component); var left = createTitle(component, 1);
left.id = component.name; left.id = component.name;
left.name = component.title; // or setAttribute('name'.. ? left.name = component.title; // or setAttribute('name'.. ?
left.classList.add("interactive", "link"); // left.classList.add("interactive", "link");
left.onclick = function () { left.onclick = function () {
getGroup(s, component.title); getGroup(s, component.title);
@ -491,15 +497,18 @@ function create_enum_row(s, component) {
return appendToContent(component, left, right); return appendToContent(component, left, right);
} }
function createTitle(component) { function createTitle(component, modules) {
if (debug_group_daniel) { if (debug_group_daniel) {
console.log("%cfunction: createTitle", "color:white;background:salmon"); console.log("%cfunction: createTitle", "color:white;background:salmon");
} }
// Creates left side of row-tag containing title. Title may hold additional // Creates left side of row-tag containing title. Title may hold additional
// information, which is shown, when title-tag is clicked. // information, which is shown, when title-tag is clicked.
// At the modules-block a status-oicon is added
var left = document.createElement('span'); var left = document.createElement('span');
var status_icon = document.createElement('p');
status_icon.classList.add("status-icon");
if (component.info) { if (component.info) {
left.classList.add("col-left", "event-toggle-info"); left.classList.add("col-left", "event-toggle-info");
@ -514,8 +523,18 @@ function createTitle(component) {
left.innerHTML = component.title + "<sup><b>(i)</b></sup>"; left.innerHTML = component.title + "<sup><b>(i)</b></sup>";
} else { } else {
left.classList.add("col-left"); if (modules) {
left.innerHTML = component.title; left.innerHTML = '<span class = "modules-title">' + component.title + '</span>'
// + '<span class = "modules-icon status-icon">s</span>'
+ '<img class = "modules-icon" src="res/icon_status_16px.png">'
// + '<span class = "modules-icon edit-icon">e</span>'
+ '<img class = "modules-icon" src="res/icon_edit_16px.png">'
// + '<span class = "modules-icon info-icon">i</span>'
+ '<img class = "modules-icon" src="res/question_mark.png">'
;
} else {
left.innerHTML = component.title;
}
} }
return left; return left;
} }

36
client/jsFiles/SEAWebClientMain.js
View File

@ -18,6 +18,7 @@ var writePermission = false;
var menuMode = false; var menuMode = false;
var panelOn = true; var panelOn = true;
var firstState = 0; var firstState = 0;
var showParams = false;
function Settings() { function Settings() {
if (debug_main_daniel) { if (debug_main_daniel) {
@ -80,7 +81,7 @@ function to_bool(string) {
// example: localhost:5000/SEAWebClient.html?hp=ldmzolliker:5000&dc=1 // example: localhost:5000/SEAWebClient.html?hp=ldmzolliker:5000&dc=1
// hostPort given and debugCommunication switched on // hostPort given and debugCommunication switched on
new Settings() new Settings()
.treat("debugCommunication", "dc", 0, 0) // 1: debug synchronous comm. 2: debug syn and asyn comm .treat("debugCommunication", "dc", 0, 2) // 1: debug synchronous comm. 2: debug syn and asyn comm
.treat("debugGraphics", "dg", to_bool, false) .treat("debugGraphics", "dg", to_bool, false)
.treat("hostPort", "hp", 0, location.hostname + ":" + location.port) .treat("hostPort", "hp", 0, location.hostname + ":" + location.port)
.treat("showMain", "sm", to_bool, true) .treat("showMain", "sm", to_bool, true)
@ -104,7 +105,7 @@ if (window.instrument) {
window.clientTags = args; window.clientTags = args;
} }
console.log('TAGS', window.clientTags); // console.log('TAGS', window.clientTags);
function loadFirstBlocks() { function loadFirstBlocks() {
if (debug_main_daniel) { if (debug_main_daniel) {
@ -183,38 +184,15 @@ window.onload = function() {
document.body.removeChild(crossElement); document.body.removeChild(crossElement);
}else{ }else{
crossElement.onclick = function(){ crossElement.onclick = function(){
if(nColumns == 1){ // if the screen is small, the cross always slides to the next slide if (showParams) {
// let someSwiper = swiper[0]; showParams = false;
// someSwiper.enableSwiping(true); // needed because someSwiper might be the graphs swiper, and swiping is disable by default } else {
// someSwiper.slideNext(); // someSwiper can be anything, it will swipe to the next slide
console.log(elements[0].style.display);
// adjustGrid();
if (elements[0].style.display == "inline-block") { // only graphics is visible
elements[0].style.display = "none"; // hide graphics
elements[1].style.display = "inline-block"; // show modules
elements[2].style.display = "none"; // hide parameters
} else if (elements[1].style.display == "inline-block") { // only modules are visible
elements[0].style.display = "inline-block"; // show graphics
elements[1].style.display = "none"; // hide modules
elements[2].style.display = "none"; // hide parameters
} else if (elements[2].style.display == "inline-block") { // only parameters are visible
elements[0].style.display = "none"; // hide graphics
elements[1].style.display = "inline-block"; // show modules
elements[2].style.display = "none"; // hide parameters
}
}else{ // else it toggles the graphs window's size and triggers the adjustGrid()
window.wideGraphs = ! window.wideGraphs; window.wideGraphs = ! window.wideGraphs;
adjustGrid();
} }
adjustGrid();
} }
} }
// NOT USED ANYMORE -> remove swiper
// Create swiper-instances.
// for (var s = 0; s < MAXBLOCK; s++) {
// swiper[s] = insertSwiper(s);
// }
var homeButton = document.getElementById("home-icon"); var homeButton = document.getElementById("home-icon");
homeButton.onclick = function () { homeButton.onclick = function () {

95
client/jsFiles/SEAWebClientResponsivity.js
View File

@ -9,8 +9,6 @@ var nRows = 1; // Viewport is subdivided in nRows rows.
var gridCountGraphics = 2; // Number of displayed graphics-swipers. var gridCountGraphics = 2; // Number of displayed graphics-swipers.
var MINWIDTH = 400; // Minimal width of block. var MINWIDTH = 400; // Minimal width of block.
var MINHEIGHT = 700; // Minimal height of block. var MINHEIGHT = 700; // Minimal height of block.
let paramSlider = [0,1,2,3]; // the number of the parameter slider to open
let prevActiveSlider = 0;
function createGrid() { function createGrid() {
if (debug_responsivity_daniel) { if (debug_responsivity_daniel) {
@ -83,8 +81,6 @@ function adjustGrid() {
|| document.body.clientWidth; || document.body.clientWidth;
var height = window.innerHeight || document.documentElement.clientHeight var height = window.innerHeight || document.documentElement.clientHeight
|| document.body.clientHeight; || document.body.clientHeight;
paramSlider = [0,1,2,3];
prevActiveSlider = 0;
if (window["hideRightPart"] || window["wideGraphs"]){ if (window["hideRightPart"] || window["wideGraphs"]){
style(0,"100vw","100vh"); style(0,"100vw","100vh");
@ -97,47 +93,84 @@ function adjustGrid() {
switch (nColumns) { switch (nColumns) {
case 1: case 1:
if (menuMode) { if (menuMode) {
leftWidth = Math.min(100, MINWIDTH / width * 100); leftWidth = Math.min(100, MINWIDTH / width * 100);
style(0,leftWidth + "vw","100vh"); style(0,leftWidth + "vw","100vh");
style(1); // hide
style(2); // hide
style(3); // hide
} else { } else {
// we may want to switch to 90vh on safari ios (workaround) // we may want to switch to 90vh on safari ios (workaround)
style(0,"100vw","100vh"); style(0,"100vw","100vh");
style(1); // hide }
style(2); // hide
style(3); // hide
if (elements[0].style.display == "inline-block") { // only graphics is visible
elements[0].style.display = "none"; // hide graphics
elements[1].style.display = "inline-block"; // show modules
elements[2].style.display = "none"; // hide parameters
} else if (elements[1].style.display == "inline-block") { // only modules are visible
elements[0].style.display = "inline-block"; // show graphics
elements[1].style.display = "none"; // hide modules
elements[2].style.display = "none"; // hide parameters
} else if (elements[2].style.display == "inline-block") { // only parameters are visible
elements[0].style.display = "none"; // hide graphics
elements[1].style.display = "inline-block"; // show modules
elements[2].style.display = "none"; // hide parameters
} }
break; break;
case 2: case 2:
rightWidth = Math.min(50, MINWIDTH / width * 100); rightWidth = Math.min(50, MINWIDTH / width * 100);
leftWidth = 100 - rightWidth; leftWidth = 100 - rightWidth;
if (nRows == 1 || !window['showConsole']) { if (nRows == 1 || !window['showConsole']) {
style(0,leftWidth + "vw","100vh"); if (showParams) {
style(1,rightWidth + "vw","100vh"); style(0,leftWidth + "vw","100vh");
style(2); // hide style(1); // hide
style(3); // hide style(2,rightWidth + "vw","100vh");
style(3); // hide
} else {
style(0,leftWidth + "vw","100vh");
style(1,rightWidth + "vw","100vh");
style(2); // hide
style(3); // hide
}
} else { } else {
style(0,leftWidth + "vw","100vh"); if (showParams) {
style(1,rightWidth + "vw","50vh"); style(0,leftWidth + "vw","100vh");
style(2); // hide style(1); // hide
style(3,rightWidth + "vw","50vh"); style(2,rightWidth + "vw","50vh");
style(3,rightWidth + "vw","50vh");
} else {
style(0,leftWidth + "vw","100vh");
style(1,rightWidth + "vw","50vh");
style(2); // hide
style(3,rightWidth + "vw","50vh");
}
} }
break; break;
case 3: case 3:
rightWidth = MINWIDTH / width * 100; rightWidth = MINWIDTH / width * 100;
leftWidth = 100 - rightWidth; leftWidth = 100 - rightWidth;
if (nRows == 1 || !window['showConsole']) { if (nRows == 1 || !window['showConsole']) {
style(0,leftWidth + "vw","100vh"); if (showParams) {
style(1,rightWidth + "vw","100vh"); style(0,leftWidth + "vw","100vh");
style(2); // hide style(1); // hide
style(3); // hide style(2,rightWidth + "vw","100vh");
style(3); // hide
} else {
style(0,leftWidth + "vw","100vh");
style(1,rightWidth + "vw","100vh");
style(2); // hide
style(3); // hide
}
} else { } else {
style(0,leftWidth + "vw","100vh"); if (showParams) {
style(1,rightWidth + "vw","50vh"); style(0,leftWidth + "vw","100vh");
style(2); // hide style(1); // hide
style(3,rightWidth + "vw","50vh"); style(2,rightWidth + "vw","50vh");
style(3,rightWidth + "vw","50vh");
} else {
style(0,leftWidth + "vw","100vh");
style(1,rightWidth + "vw","50vh");
style(2); // hide
style(3,rightWidth + "vw","50vh");
}
} }
break; break;
case 4: case 4:
@ -171,8 +204,6 @@ function style(s, width, height) {
} }
if (width) { if (width) {
// paramSlider[prevActiveSlider] = s;
// prevActiveSlider = s;
elements[s].style.display = "inline-block"; elements[s].style.display = "inline-block";
elements[s].style.width = width; elements[s].style.width = width;
} else { } else {

3
client/jsFiles/SEAWebClientSwiper.js
View File

@ -99,10 +99,9 @@ function replaceSlideContent(slide, title, content) {
function insertSlide(s, title, type, content) { function insertSlide(s, title, type, content) {
if (debug_swiper_daniel) { if (debug_swiper_daniel) {
console.log("%cfunction: insertSlide", "color:white;background:lightblue"); console.log("%cfunction: insertSlide", "color:white;background:lightblue");
console.log("title: ",title);
} }
console.log("title: ",title);
var panel = document.createElement('div'); var panel = document.createElement('div');
panel.classList.add("panel"); panel.classList.add("panel");