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

40
client/jsFiles/SEAWebClientCommunication.js
View File

@ -2,7 +2,7 @@
// % COMMUNICATION
// 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
@ -274,7 +274,7 @@ function reqJSON(s, url, successHandler, errorHandler) {
: new ActiveXObject('Microsoft.XMLHTTP');
if (debugCommunication) {
console.log("%cto server (reqJSON): %s",
"color:white;background:lightgreen", url);
"color:white;background:darkgreen", url);
}
xhr.open('get', url, true);
xhr.onreadystatechange = function() {
@ -337,18 +337,16 @@ 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 (debugCommunication) {
console.log(message);
}
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));
}
// 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:[]}));
} else {
if (message.path == '_overview') {
@ -358,18 +356,19 @@ function successHandler(s, message) {
// In the module-block a parameter was selected
// -> write parameter-block to grid-element2
console.log ('col',nColumns);
isl = insertSlide(2, message.title, 'parameters', createContent(sLocal, message));
if (nColumns < 2) {
showParams = true;
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"; //
}
// 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();
}
}
}
@ -387,8 +386,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(sLocal));
insertSlide(3, "console", "console",createContentConsole(3));
nextInitCommand();
// send empty command in order to trigger getting history
reqJSON(0, "http://" + hostPort + "/sendcommand?command=&id=" + clientID, successHandler,
@ -405,7 +403,7 @@ function successHandler(s, message) {
begin = timeRange[0] - timeRange[1];
select.value = begin;
// Server-request for variable-list.*/
console.log('TIME', timeRange)
// console.log('TIME', timeRange)
reqJSONPOST(0, "http://" + hostPort + "/getvars",
"time=" + timeRange[0] + ',' + timeRange[1]
+ "&userconfiguration=" + JSON.stringify(getFormattedUserConfigurationFromLocalStorage())

29
client/jsFiles/SEAWebClientGroup.js
View File

@ -13,6 +13,7 @@ function getGroup(s, name) {
if (debug_group_daniel) {
console.log("%cfunction: getGroup", "color:white;background:salmon");
}
// console.log('name: ',name, ', id: '.ClientID);
reqJSON(s, "http://" + hostPort + "/getblock?path=" + name
+ "&id=" + clientID, successHandler, errorHandler);
}
@ -37,6 +38,10 @@ 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))
@ -138,11 +143,12 @@ function create_rdlink_row(s, component) {
// Creates row-element containing link AND read-only-item.
var name = component.name;
var status = component.statusname;
var left = createTitle(component);
var left = createTitle(component, 1);
left.id = component.name;
left.name = component.title; // or setAttribute('name'.. ?
left.classList.add("interactive", "link");
// left.classList.add("interactive", "link");
left.onclick = function () {
getGroup(s, component.title);
@ -491,15 +497,18 @@ function create_enum_row(s, component) {
return appendToContent(component, left, right);
}
function createTitle(component) {
function createTitle(component, modules) {
if (debug_group_daniel) {
console.log("%cfunction: createTitle", "color:white;background:salmon");
}
// Creates left side of row-tag containing title. Title may hold additional
// information, which is shown, when title-tag is clicked.
// At the modules-block a status-oicon is added
var left = document.createElement('span');
var status_icon = document.createElement('p');
status_icon.classList.add("status-icon");
if (component.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>";
} else {
left.classList.add("col-left");
left.innerHTML = component.title;
if (modules) {
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;
}

36
client/jsFiles/SEAWebClientMain.js
View File

@ -18,6 +18,7 @@ var writePermission = false;
var menuMode = false;
var panelOn = true;
var firstState = 0;
var showParams = false;
function Settings() {
if (debug_main_daniel) {
@ -80,7 +81,7 @@ function to_bool(string) {
// example: localhost:5000/SEAWebClient.html?hp=ldmzolliker:5000&dc=1
// hostPort given and debugCommunication switched on
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("hostPort", "hp", 0, location.hostname + ":" + location.port)
.treat("showMain", "sm", to_bool, true)
@ -104,7 +105,7 @@ if (window.instrument) {
window.clientTags = args;
}
console.log('TAGS', window.clientTags);
// console.log('TAGS', window.clientTags);
function loadFirstBlocks() {
if (debug_main_daniel) {
@ -183,38 +184,15 @@ window.onload = function() {
document.body.removeChild(crossElement);
}else{
crossElement.onclick = function(){
if(nColumns == 1){ // if the screen is small, the cross always slides to the next slide
// let someSwiper = swiper[0];
// someSwiper.enableSwiping(true); // needed because someSwiper might be the graphs swiper, and swiping is disable by default
// 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()
if (showParams) {
showParams = false;
} else {
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");
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 MINWIDTH = 400; // Minimal width 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() {
if (debug_responsivity_daniel) {
@ -83,8 +81,6 @@ function adjustGrid() {
|| document.body.clientWidth;
var height = window.innerHeight || document.documentElement.clientHeight
|| document.body.clientHeight;
paramSlider = [0,1,2,3];
prevActiveSlider = 0;
if (window["hideRightPart"] || window["wideGraphs"]){
style(0,"100vw","100vh");
@ -97,47 +93,84 @@ function adjustGrid() {
switch (nColumns) {
case 1:
if (menuMode) {
leftWidth = Math.min(100, MINWIDTH / width * 100);
style(0,leftWidth + "vw","100vh");
style(1); // hide
style(2); // hide
style(3); // hide
leftWidth = Math.min(100, MINWIDTH / width * 100);
style(0,leftWidth + "vw","100vh");
} else {
// we may want to switch to 90vh on safari ios (workaround)
style(0,"100vw","100vh");
style(1); // hide
style(2); // hide
style(3); // hide
// we may want to switch to 90vh on safari ios (workaround)
style(0,"100vw","100vh");
}
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;
case 2:
rightWidth = Math.min(50, MINWIDTH / width * 100);
leftWidth = 100 - rightWidth;
if (nRows == 1 || !window['showConsole']) {
style(0,leftWidth + "vw","100vh");
style(1,rightWidth + "vw","100vh");
style(2); // hide
style(3); // hide
if (showParams) {
style(0,leftWidth + "vw","100vh");
style(1); // 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 {
style(0,leftWidth + "vw","100vh");
style(1,rightWidth + "vw","50vh");
style(2); // hide
style(3,rightWidth + "vw","50vh");
if (showParams) {
style(0,leftWidth + "vw","100vh");
style(1); // hide
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;
case 3:
rightWidth = MINWIDTH / width * 100;
leftWidth = 100 - rightWidth;
if (nRows == 1 || !window['showConsole']) {
style(0,leftWidth + "vw","100vh");
style(1,rightWidth + "vw","100vh");
style(2); // hide
style(3); // hide
if (showParams) {
style(0,leftWidth + "vw","100vh");
style(1); // 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 {
style(0,leftWidth + "vw","100vh");
style(1,rightWidth + "vw","50vh");
style(2); // hide
style(3,rightWidth + "vw","50vh");
if (showParams) {
style(0,leftWidth + "vw","100vh");
style(1); // hide
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;
case 4:
@ -171,8 +204,6 @@ function style(s, width, height) {
}
if (width) {
// paramSlider[prevActiveSlider] = s;
// prevActiveSlider = s;
elements[s].style.display = "inline-block";
elements[s].style.width = width;
} else {

3
client/jsFiles/SEAWebClientSwiper.js
View File

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