diff --git a/client/cssFiles/SEAWebClientSwiper.css b/client/cssFiles/SEAWebClientSwiper.css deleted file mode 100644 index 48ca40a..0000000 --- a/client/cssFiles/SEAWebClientSwiper.css +++ /dev/null @@ -1,54 +0,0 @@ -@CHARSET "UTF-8"; - -/* This file is obsolete because the swoiper was removed */ - -.swiper-container-main { - width: 100%; - height: 100%; - overflow: hidden; -} - -.swiper-slide-main { - background-color: white; - overflow: hidden; - width: 100%; - height: 100%; - padding-bottom: 30px; -} - -.swiper-button-prev.swiper-button-disabled, -.swiper-button-next.swiper-button-disabled { - opacity: 0; -} -/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ -/* PANEL */ -.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; -} - -.slide-close-icon { - transition: 0.4s; - cursor: pointer; - float: right; - padding-right: 6px; - height: 100%; - fill: white; -} - -.toggle-updates-graphics { - float: right; -} \ No newline at end of file diff --git a/client/jsFiles/SEAWebClientGroup.js b/client/jsFiles/SEAWebClientGroup.js index b8fde68..8e2f419 100644 --- a/client/jsFiles/SEAWebClientGroup.js +++ b/client/jsFiles/SEAWebClientGroup.js @@ -1,8 +1,11 @@ -// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% -// % GROUP - +var writePermission = false; +var showParams = false; +var showConsole = false; var prompt = false // True while a prompt is opened. +// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +// COMMUNICATION + function getGroup(s, name) { console.log('name: ',name, ', id: '.ClientID); reqJSON(s, "http://" + hostPort + "/getblock?path=" + name @@ -14,6 +17,9 @@ function sendCommand(s, command) { + "&id=" + clientID, successHandler, errorHandler); } +// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +// GROUP + function createContent(message) { // Depending on the message received from the server the content of the // group is created dynamically. Handles draw-message. @@ -58,64 +64,9 @@ function createRowForModules(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'); - value.classList.add('col-right-value'); - value.setAttribute('name', component.name); - value.__ctype__ = 'rdonly'; - right.appendChild(value); - - if (component.type == 'input' || - component.type == 'pushbutton' || - component.type == 'checkbox' || - component.type == 'enum' - ) { - var input_element; - switch (component.type) { - 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', 'input-element-button-hidden'); - break; - case 'input': - input_element = createInput(component); - input_element.classList.add('input-element', 'input-element-hidden'); - break; - case 'checkbox': - input_element = createCheckbox(component); - input_element.classList.add('input-element', 'input-element-hidden'); - break; - } - if (component.type != 'pushbutton') { - let icon_edit = createIconEdit(); - right.appendChild(icon_edit); - } - right.appendChild(input_element); - } + let left = createLeftColumnForParameters(component); + let right = createRightColumnForParameters(component); return appendToContent(left, right); - - function createIconEdit () { - let icon_edit = document.createElement('img'); - icon_edit.setAttribute('src', 'res/icon_edit.png'); - icon_edit.classList.add('icon-modules', 'icon-edit', 'icon-edit-hidden'); - - icon_edit.onclick = function () { - let is_hidden = input_element.classList.contains('input-element-hidden'); - hideInputElements(); - if (is_hidden) { - input_element.classList.remove('input-element-hidden'); - } - } - - return icon_edit; - } } function appendToContent(left, right) { @@ -182,43 +133,115 @@ function createLeftColumnForModules(component) { } } +function createLeftColumnForParameters(component) { + let left = document.createElement('span'); + left.classList.add('col-left'); + left.innerHTML = component.title; + return left; +} + /* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ // RIGHT COLUMN function createRightColumnForModules(component) { + var right = document.createElement('span'); right.classList.add('col-right', 'col-right-modules'); - let value = document.createElement('span'); - value.classList.add('col-right-value'); - value.setAttribute('name', component.name); - // value.__ctype__ = component.type; - value.__ctype__ = 'rdonly'; - right.appendChild(value); + + right.appendChild(createValue(component)); + if (component.targetname) { - var input_element = createInput(component); - input_element.classList.add('input-element', 'input-element-hidden'); - let icon_edit = createIconEdit(); - right.appendChild(icon_edit); + 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); + } + right.appendChild(input_element); + } + } + return right; +} + +function createRightColumnForParameters(component) { + + let right = document.createElement('span'); + right.classList.add('col-right-parameters'); + + 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); + } right.appendChild(input_element); } return right; +} - function createIconEdit () { - let icon_edit = document.createElement('img'); - icon_edit.setAttribute('src', 'res/icon_edit.png'); - icon_edit.classList.add('icon-modules', 'icon-edit', 'icon-edit-hidden'); +function createValue (component) { + let value = document.createElement('span'); + value.classList.add('col-right-value'); + value.setAttribute('name', component.name); + value.__ctype__ = 'rdonly'; + return value; +} - icon_edit.onclick = function (event) { - event.stopPropagation() - let is_hidden = input_element.classList.contains('input-element-hidden'); - hideInputElements(); - if (is_hidden) { - input_element.classList.remove('input-element-hidden'); - } - } - - return icon_edit; +function createIconEdit (input_element) { + + let icon_edit = document.createElement('img'); + icon_edit.setAttribute('src', 'res/icon_edit.png'); + icon_edit.classList.add('icon-modules', 'icon-edit'); + if (writePermission == false) { + icon_edit.classList.add('icon-edit-hidden'); } + + icon_edit.onclick = function (event) { + event.stopPropagation() + let is_hidden = input_element.classList.contains('input-element-hidden'); + hideInputElements(); + if (is_hidden) { + input_element.classList.remove('input-element-hidden'); + } + } + + return icon_edit; +} + +function createType (component) { + let input_element; + switch (component.type) { + 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; + case 'input': + input_element = createInputText(component); + input_element.classList.add('input-element', 'input-element-hidden'); + break; + case 'checkbox': + input_element = createCheckbox(component); + input_element.classList.add('input-element', 'input-element-hidden'); + break; + } + return input_element; } /* ---------------------------------------------------------------------------------- */ @@ -239,7 +262,7 @@ function createPushbutton(component) { return elem; } -function createInput(component) { +function createInputText(component) { // Creates row-element containing input-item. var command = component.command; var input = createInputElement(component, 'input', 'input-text'); diff --git a/client/jsFiles/SEAWebClientMain.js b/client/jsFiles/SEAWebClientMain.js index 3da5261..e1306a4 100644 --- a/client/jsFiles/SEAWebClientMain.js +++ b/client/jsFiles/SEAWebClientMain.js @@ -1,9 +1,5 @@ // %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% // % INIT - -var MAXBLOCK = 4; // max number of blocks -var elements = []; // grid elements -// var swiper = []; // This array contains main-swiper-Instances. var hostPort = ""; // Address and port of static html-file. var clientID = ""; // ID given by server when SSE-connection is established. var clientTitle = ""; // Contains name of instrument and device. @@ -11,11 +7,7 @@ var getUpdates = true; var getUpdatesGraphics = true; var initCommands = []; var loadingShown = true; -var writePermission = false; var panelOn = true; -var firstState = 0; -var showParams = false; -var showConsole = false; function Settings() { // get key/value pairs from search part of the URL and fill into query @@ -190,14 +182,24 @@ window.onload = function() { let array_icon_edit = document.getElementsByClassName('icon-edit'); let array_button = document.getElementsByClassName('input-element-button'); if (writePermission == false) { - writePermission = true; - icon_lock_container.innerHTML = ''; - 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'); + alertify.confirm("WRITE PERMISSION", "You are working on "+ clientTitle + ". Are You sure you want to change things here?", + function () { + // User decided to proceed. + prompt = false; + + writePermission = true; + icon_lock_container.innerHTML = ''; + 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'); + } } + , function () { + // User decided to cancel + prompt = false; + }); } else { writePermission = false; icon_lock_container.innerHTML = ''; diff --git a/client/jsFiles/SEAWebClientResponsivity.js b/client/jsFiles/SEAWebClientResponsivity.js index a2ad971..d1878c0 100644 --- a/client/jsFiles/SEAWebClientResponsivity.js +++ b/client/jsFiles/SEAWebClientResponsivity.js @@ -3,14 +3,17 @@ var nColumns = 1; // Viewport is subdivided in nColumns columns. 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. +var MAXBLOCK = 4; // max number of blocks +var elements = []; // grid elements function createGrid() { - // Creates grid-elements. By default only the first one is shown - // and - // takes the whole viewport. + // Creates grid-elements. + // 1 - graphics + // 2 - modules + // 3 - parameters + // 4 - log var elements = []; for (var i = 0; i < 4; i++) { var element = document.createElement('div'); @@ -52,8 +55,8 @@ function sizeChange() { } function adjustGrid() { - // Determines size of grid-elements depending on number of columns 'nColumns' and - // rows 'nRows' + // Determines size of grid-elements depending on number + // of columns 'nColumns' and rows 'nRows' var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; diff --git a/client/jsFiles/SEAWebClientSwiper.js b/client/jsFiles/SEAWebClientSwiper.js deleted file mode 100644 index a03fa79..0000000 --- a/client/jsFiles/SEAWebClientSwiper.js +++ /dev/null @@ -1,148 +0,0 @@ -// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% -// % SWIPER - -// This file is obolete, swiper was removed! - -function insertSwiper(s) { - // Create an empty swiper-instance and append the swiper-container to - // 'grid-element' s. - - var container = document.createElement('div'); - container.classList.add("swiper", "swiper-container-main"); - elements[s].appendChild(container); - - var swiperwrapper = document.createElement('div'); - swiperwrapper.classList.add("swiper-wrapper", "swiper-wrapper-main"); - swiperwrapper.s = s; - container.appendChild(swiperwrapper); - - var paginationWrapper = document.createElement('div'); - paginationWrapper.classList.add("swiper-pagination"); - container.appendChild(paginationWrapper); - - var buttonPrev = document.createElement("div"); - buttonPrev.classList.add("swiper-button-prev", "swiper-button-black"); - - var buttonNext = document.createElement("div"); - buttonNext.classList.add("swiper-button-next", "swiper-button-black"); - - var swiper = new Swiper(container, { - direction : 'horizontal', - pagination: { - el: paginationWrapper, - clickable: true, - }, - watchOverflow: true, - spaceBetween : 0, - navigation:{ - prevEl: buttonPrev, - nextEl: buttonNext - }, - noSwiping: true, // this activates the noSwipingClass functionality - }); - //console.log(swiper); - - // the graphics slide will disable swiping (use hide box instead) - if (isTouchDevice) { - function enableSwiping(allow) { - swiper.params.noSwipingClass = allow ? null : "swiper-slide-main"; - } - } else { - function enableSwiping(allow) { - buttonPrev.style.display = allow ? 'block' : 'none'; - buttonNext.style.display = allow ? 'block' : 'none'; - } - swiper.params.noSwipingClass = "swiper-slide-main"; - container.appendChild(buttonPrev); - container.appendChild(buttonNext); - } - swiper.enableSwiping = enableSwiping; - return swiper; -} - -function findSlide(s, type) { - var i; - for (i = 0; i < swiper[s].slides.length; i++) { - if (swiper[s].slides[i].slideType === type) { - if (debug_swiper_daniel) { - console.log ('found slide ',i); - } - return i; - } - } - return null; -} - -function replaceSlideContent(slide, title, content) { - titlewrapper = slide.childNodes[0].childNodes[0]; - titlewrapper.innerHTML = title; - slide.replaceChild(content, slide.childNodes[1]) -} - -function insertSlideXXX(s, title, type, content) { - 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); - - let pos = 0; - return pos; -} - -function createCloseButton(s) { - // Creates 'span'-element containing close-button. - var wrapper = document.createElement('span'); - wrapper.onclick = function () { - swiper[s].removeSlide(swiper[s].activeIndex); - swiper[s].slidePrev(); - }; - var closeButton = ''; - wrapper.innerHTML = closeButton; - return wrapper; -} - -function createUpdateButton(s){ - // Creates 'span'-element containing update-button (Should be removed later!) - var button = document.createElement('span'); - button.classList.add("interactive", "toggle-updates-graphics") - button.onclick = function () { - getUpdatesGraphics = ! getUpdatesGraphics; - button.innerHTML = "updates = "+getUpdatesGraphics; - }; - button.innerHTML = "updates: "+getUpdatesGraphics; - return button; -} - -function defaultSlidePos(s) { - return s < 3 ? 0 : swiper[s].slides.length-1; -} - -function getSlideNames() { - var names = [] - for (var s=0; s 0) { - name = sw.slides[sw.activeIndex].slideType; - } - names.push(); - } - for (var s=MAXBLOCK-1; s>=0; s--) { - if (names[s] != "") break; - names.pop(); - } - return names; -} diff --git a/client/res/arrow.png b/client/res/arrow.png index c9b5c00..16666a2 100644 Binary files a/client/res/arrow.png and b/client/res/arrow.png differ diff --git a/client/res/question_mark.png b/client/res/question_mark.png index 1096bfc..ae7ec40 100644 Binary files a/client/res/question_mark.png and b/client/res/question_mark.png differ diff --git a/client/res/x_zoom_white_wide.png b/client/res/x_zoom_white_wide.png deleted file mode 100644 index 037aee2..0000000 Binary files a/client/res/x_zoom_white_wide.png and /dev/null differ diff --git a/client/res/y_zoom_white_wide.png b/client/res/y_zoom_white_wide.png deleted file mode 100644 index 509966b..0000000 Binary files a/client/res/y_zoom_white_wide.png and /dev/null differ