Swiper removed
- Swiper removal work in progress + Fine debugging for every js-file
This commit is contained in:
Daniel
@ -128,6 +128,14 @@ meta, body {
|
||||
border: solid 4px dimgray;
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
padding-bottom: 30px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
|
||||
/* CLOSE CROSS */
|
||||
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
/* PANEL */
|
||||
.panel {
|
||||
background-color: #303030;
|
||||
position: absolute;
|
||||
/* position: absolute; */
|
||||
z-index: 20;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
|
||||
@ -1,6 +1,9 @@
|
||||
// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
|
||||
// % COMMUNICATION
|
||||
|
||||
// local debugging: print the name of every executed funtion to the console
|
||||
var debug_communication_daniel = 0;
|
||||
|
||||
var timeoutID; // We need this ID to reset the timer every 30 seconds
|
||||
|
||||
// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
|
||||
@ -8,6 +11,10 @@ var timeoutID; // We need this ID to reset the timer every 30 seconds
|
||||
|
||||
|
||||
function buildUpdateConnection() {
|
||||
if (debug_communication_daniel) {
|
||||
console.log("%cfunction: buildUpdateConnection", "color:white;background:darkblue");
|
||||
}
|
||||
|
||||
// Establishes server-sent-event-connection, which is used for all sorts of
|
||||
// updates and exists as long as the client is running.
|
||||
// Executed at programstart (see also SEAWebClientMain.js).
|
||||
@ -58,6 +65,10 @@ function buildUpdateConnection() {
|
||||
}
|
||||
|
||||
function handleUpdateMessage(src, message) {
|
||||
if (debug_communication_daniel) {
|
||||
console.log("%cfunction: handleUpdateMessage", "color:white;background:darkblue");
|
||||
}
|
||||
|
||||
// Handles incoming SSE-messages depending on type of message.
|
||||
|
||||
if (debugCommunication > 1) {
|
||||
@ -86,7 +97,7 @@ function handleUpdateMessage(src, message) {
|
||||
sizeChange();
|
||||
} else {
|
||||
clientTitle = message.instrument + " " + message.device;
|
||||
console.log('loadBlocks', message);
|
||||
// console.log('loadBlocks', message);
|
||||
loadFirstBlocks();
|
||||
}
|
||||
document.title = clientTitle;
|
||||
@ -100,8 +111,8 @@ function handleUpdateMessage(src, message) {
|
||||
instrument.style.width = 'auto'
|
||||
device.style.width = 'auto'
|
||||
instrument.innerHTML = message.instrument
|
||||
// device.innerHTML = message.device
|
||||
console.log('ID', initCommands);
|
||||
device.innerHTML = message.device
|
||||
// console.log('ID', initCommands);
|
||||
nextInitCommand();
|
||||
break;
|
||||
// console-update-message: Confirms a command.
|
||||
@ -175,6 +186,10 @@ function handleUpdateMessage(src, message) {
|
||||
}
|
||||
|
||||
function htmlEscape(str) {
|
||||
if (debug_communication_daniel) {
|
||||
console.log("%cfunction: htmlEscape", "color:white;background:darkblue");
|
||||
}
|
||||
|
||||
str = "" + str;
|
||||
if (!str) return "";
|
||||
return str.replace(/&/g, '&').replace(/"/g, '"').replace(/'/g,
|
||||
@ -182,6 +197,10 @@ function htmlEscape(str) {
|
||||
}
|
||||
|
||||
function resetTimer(src) {
|
||||
if (debug_communication_daniel) {
|
||||
console.log("%cfunction: resetTimer", "color:white;background:darkblue");
|
||||
}
|
||||
|
||||
// Executed every time a heartbeat-message is obtained.
|
||||
// If no heartbeat-messages are obtained for a certain amount of time,
|
||||
// an error-message is thrown.
|
||||
@ -197,6 +216,10 @@ function resetTimer(src) {
|
||||
}
|
||||
|
||||
function updateValues(message, src) {
|
||||
if (debug_communication_daniel) {
|
||||
console.log("%cfunction: updateValues", "color:white;background:darkblue");
|
||||
}
|
||||
|
||||
// Handles changes of parameter-values
|
||||
|
||||
for (var i = 0; i < message.updates.length; i++) {
|
||||
@ -246,6 +269,10 @@ function updateValues(message, src) {
|
||||
// XMLHttpRequest
|
||||
|
||||
function reqJSON(s, url, successHandler, errorHandler) {
|
||||
if (debug_communication_daniel) {
|
||||
console.log("%cfunction: reqJSON", "color:white;background:darkblue");
|
||||
}
|
||||
|
||||
var xhr = typeof XMLHttpRequest != 'undefined' ? new XMLHttpRequest()
|
||||
: new ActiveXObject('Microsoft.XMLHTTP');
|
||||
if (debugCommunication) {
|
||||
@ -272,6 +299,10 @@ function reqJSON(s, url, successHandler, errorHandler) {
|
||||
}
|
||||
|
||||
function reqJSONPOST(s, url, parameters, successHandler, errorHandler) {
|
||||
if (debug_communication_daniel) {
|
||||
console.log("%cfunction: reqJSONPOST", "color:white;background:darkblue");
|
||||
}
|
||||
|
||||
var xhr = typeof XMLHttpRequest != 'undefined' ? new XMLHttpRequest()
|
||||
: new ActiveXObject('Microsoft.XMLHTTP');
|
||||
if (debugCommunication) {
|
||||
@ -300,6 +331,10 @@ function reqJSONPOST(s, url, parameters, successHandler, errorHandler) {
|
||||
|
||||
|
||||
function successHandler(s, message) {
|
||||
if (debug_communication_daniel) {
|
||||
console.log("%cfunction: successHandler", "color:white;background:darkblue");
|
||||
}
|
||||
|
||||
// Handles incoming XMLHttp-messages depending on type of message.
|
||||
// s: slide number or -1 for replacing slide in all slider instances
|
||||
if (debugCommunication) {
|
||||
@ -320,28 +355,46 @@ function successHandler(s, message) {
|
||||
}
|
||||
insertSlide(2, "", "parameters", createContent(2, {components:[]}));
|
||||
} else {
|
||||
if (s < 0) { // redraw: check for slides in all swiper instances
|
||||
// not used any more?
|
||||
for (var isw = 0; isw < MAXBLOCK; isw ++) {
|
||||
var isl = findSlide(isw, message.path);
|
||||
if (isl !== null) {
|
||||
var slide = swiper[isw].slides[isl];
|
||||
if (slide) {
|
||||
console.log("redraw", isw, isl);
|
||||
replaceSlideContent(slide, message.title,
|
||||
createContent(isw, message));
|
||||
}
|
||||
}
|
||||
}
|
||||
} else if (message.path == '_overview') {
|
||||
// NOT USED ANYMORE -> remove swiper
|
||||
// if (s < 0) { // redraw: check for slides in all swiper instances
|
||||
// // not used any more?
|
||||
// for (var isw = 0; isw < MAXBLOCK; isw ++) {
|
||||
// var isl = findSlide(isw, message.path);
|
||||
// if (isl !== null) {
|
||||
// var slide = swiper[isw].slides[isl];
|
||||
// if (slide) {
|
||||
// console.log("redraw", isw, isl);
|
||||
// replaceSlideContent(slide, message.title,
|
||||
// createContent(isw, message));
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// } 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));
|
||||
// swiper[sLocal].slideTo(isl); /* go to found slide */
|
||||
} else {
|
||||
// insertSlide(s, message.title, message.path, createContent(s, message));
|
||||
let sLocal = paramSlider[s];
|
||||
isl = insertSlide(sLocal, message.title, 'parameters', createContent(sLocal, message));
|
||||
swiper[sLocal].slideTo(isl); /* go to found slide */
|
||||
// let sLocal = paramSlider[s];
|
||||
|
||||
// *************************************************************************************
|
||||
|
||||
// In the module-block a parameter was selected
|
||||
// -> write parameter-block to grid-element2
|
||||
// If nColumns < 3, hide modules (grid-element1) and show parameters (grid-element2)
|
||||
|
||||
// Set flag showParams (-> if there are only three columns, hide modules, not parameters)
|
||||
// See also SEAWebClientMain.js
|
||||
|
||||
showParams = 1;
|
||||
console.log ('col',nColumns);
|
||||
isl = insertSlide(2, message.title, 'parameters', createContent(sLocal, message));
|
||||
if(nColumns < 2) {
|
||||
elements[1].style.display = "none"; // show modules
|
||||
elements[2].style.display = "inline-block"; // hide parameters
|
||||
}
|
||||
// swiper[sLocal].slideTo(isl); /* go to found slide */
|
||||
}
|
||||
}
|
||||
nextInitCommand();
|
||||
@ -357,9 +410,9 @@ function successHandler(s, message) {
|
||||
break;
|
||||
// Response to a "console"-server-request.
|
||||
case "accept-console":
|
||||
// draw console, only on the first and the last swiper
|
||||
insertSlide(0, "console", "console",
|
||||
createContentConsole(sLocal));
|
||||
// draw console
|
||||
// insertSlide(0, "console", "console",
|
||||
// createContentConsole(sLocal));
|
||||
insertSlide(3, "console", "console",
|
||||
createContentConsole(sLocal));
|
||||
nextInitCommand();
|
||||
@ -434,6 +487,10 @@ function successHandler(s, message) {
|
||||
}
|
||||
|
||||
function errorHandler(status) {
|
||||
if (debug_communication_daniel) {
|
||||
console.log("%cfunction: errorHandler", "color:white;background:darkblue");
|
||||
}
|
||||
|
||||
if (debugCommunication) {
|
||||
console.log("error", status);
|
||||
}
|
||||
|
||||
@ -510,11 +510,13 @@ let graphs = (function (){
|
||||
if (liveMode && cursorLinePos === null)
|
||||
// gotoNowElm.innerHTML = '';
|
||||
// globalControls.getControlsMap()[goToNowKey].changeToAlt();
|
||||
console.log("Need to change to nothing");
|
||||
// console.log("Need to change to nothing");
|
||||
;
|
||||
else
|
||||
// gotoNowElm.innerHTML = 'go to now';
|
||||
// globalControls.getControlsMap()[goToNowKey].changeToMain();
|
||||
console.log("Need to change to seen");
|
||||
// console.log("Need to change to seen");
|
||||
;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -525,7 +527,7 @@ let graphs = (function (){
|
||||
* @param {{tag:string, unit:string, curves:[{name:string, label:string, color:string}]}} block - The information of the block to create
|
||||
*/
|
||||
function createGraph(gindex, block){
|
||||
console.log("clear for create graph", gindex)
|
||||
// console.log("clear for create graph", gindex)
|
||||
clear(gindex);
|
||||
tag_dict[block.tag] = gindex;
|
||||
let dict = {} // {string: [name:string, label:string, color:string]}
|
||||
@ -1021,16 +1023,16 @@ let graphs = (function (){
|
||||
let f = 0;
|
||||
insertSlide(f, " ", "graphics", container);
|
||||
|
||||
let currentSwiper = swiper[f];
|
||||
// let currentSwiper = swiper[f];
|
||||
|
||||
function setSlidingMode(mode) {
|
||||
currentSwiper.params.noSwipingClass = mode ? "allow-swipe" : "swiper-slide-main";
|
||||
}
|
||||
// function setSlidingMode(mode) {
|
||||
// currentSwiper.params.noSwipingClass = mode ? "allow-swipe" : "swiper-slide-main";
|
||||
// }
|
||||
|
||||
currentSwiper.enableSwiping(false);
|
||||
currentSwiper.on('reachBeginning', function () {
|
||||
currentSwiper.enableSwiping(false);
|
||||
})
|
||||
// currentSwiper.enableSwiping(false);
|
||||
// currentSwiper.on('reachBeginning', function () {
|
||||
// currentSwiper.enableSwiping(false);
|
||||
// })
|
||||
|
||||
let graphicsPanel = container.parentNode.querySelector('.panel')
|
||||
graphicsPanel.classList.add('graphics');
|
||||
@ -1122,7 +1124,7 @@ let graphs = (function (){
|
||||
"/updategraph?" +
|
||||
"id=" + clientID).getJSON().then(function(data) {
|
||||
setLiveMode(data.live);
|
||||
console.log('LIVE create', liveMode)
|
||||
// console.log('LIVE create', liveMode)
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
@ -1,37 +1,52 @@
|
||||
// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
|
||||
// % GROUP
|
||||
|
||||
// local debugging: print the name of every executed funtion to the console
|
||||
var debug_group_daniel = 0;
|
||||
|
||||
var writePermissionTimeout; // Sets writePermission to 'false, restarts by
|
||||
// user-interaction.
|
||||
|
||||
var prompt = false // True while a prompt is opened.
|
||||
|
||||
function getGroup(s, name) {
|
||||
var found = false;
|
||||
if (name == "") {
|
||||
swiper[s].slideTo(defaultSlidePos(s));
|
||||
return;
|
||||
if (debug_group_daniel) {
|
||||
console.log("%cfunction: getGroup", "color:white;background:salmon");
|
||||
}
|
||||
for (var i = 0; i < swiper[s].slides.length; i++) {
|
||||
var slideType = swiper[s].slides[i].slideType;
|
||||
if (slideType == name) {
|
||||
found = true;
|
||||
swiper[s].slideTo(i);
|
||||
}
|
||||
}
|
||||
if (!found && name != "console" && name != "graphics") {
|
||||
|
||||
// var found = false;
|
||||
// if (name == "") {
|
||||
// swiper[s].slideTo(defaultSlidePos(s));
|
||||
// return;
|
||||
// }
|
||||
// for (var i = 0; i < swiper[s].slides.length; i++) {
|
||||
// var slideType = swiper[s].slides[i].slideType;
|
||||
// if (slideType == name) {
|
||||
// found = true;
|
||||
// swiper[s].slideTo(i);
|
||||
// }
|
||||
// }
|
||||
// if (!found && name != "console" && name != "graphics") {
|
||||
// Server-request for group.
|
||||
reqJSON(s, "http://" + hostPort + "/getblock?path=" + name
|
||||
+ "&id=" + clientID, successHandler, errorHandler);
|
||||
}
|
||||
// }
|
||||
}
|
||||
|
||||
function sendCommand(s, command) {
|
||||
if (debug_group_daniel) {
|
||||
console.log("%cfunction: sendCommand", "color:white;background:salmon");
|
||||
}
|
||||
|
||||
reqJSON(s, "http://" + hostPort + "/sendcommand?command=" + encodeURIComponent(command)
|
||||
+ "&id=" + clientID, successHandler, errorHandler);
|
||||
}
|
||||
|
||||
function createContent(s, message) {
|
||||
if (debug_group_daniel) {
|
||||
console.log("%cfunction: createContent", "color:white;background:salmon");
|
||||
}
|
||||
|
||||
// Depending on the message received from the server the content of the
|
||||
// group is created dynamically. Handles draw-message.
|
||||
|
||||
@ -52,6 +67,10 @@ function createContent(s, message) {
|
||||
}
|
||||
|
||||
function gotoGroups(slideNames) {
|
||||
if (debug_group_daniel) {
|
||||
console.log("%cfunction: gotoGroups", "color:white;background:salmon");
|
||||
}
|
||||
|
||||
slideNames = slideNames.split("%20");
|
||||
var l = Math.min(MAXBLOCK,slideNames.length);
|
||||
document.title = "SEA "+ clientTitle + " " + slideNames.join(" ");
|
||||
@ -61,7 +80,12 @@ function gotoGroups(slideNames) {
|
||||
}
|
||||
|
||||
function create_group_row(s, component) {
|
||||
if (debug_group_daniel) {
|
||||
console.log("%cfunction: create_group_row", "color:white;background:salmon");
|
||||
}
|
||||
|
||||
// Creates row-element containing link.
|
||||
|
||||
var title = component.title;
|
||||
|
||||
var row = document.createElement('row');
|
||||
@ -87,6 +111,10 @@ function create_group_row(s, component) {
|
||||
}
|
||||
|
||||
function create_rdonly_row(s, component) {
|
||||
if (debug_group_daniel) {
|
||||
console.log("%cfunction: create_rdonly_row", "color:white;background:salmon");
|
||||
}
|
||||
|
||||
// Creates row-element containing link AND read-only-item.
|
||||
|
||||
var link = component.link;
|
||||
@ -119,7 +147,12 @@ function create_rdonly_row(s, component) {
|
||||
}
|
||||
|
||||
function create_rdlink_row(s, component) {
|
||||
if (debug_group_daniel) {
|
||||
console.log("%cfunction: create_rdlink_row", "color:white;background:salmon");
|
||||
}
|
||||
|
||||
// Creates row-element containing link AND read-only-item.
|
||||
|
||||
var name = component.name;
|
||||
|
||||
var left = createTitle(component);
|
||||
@ -134,6 +167,10 @@ function create_rdlink_row(s, component) {
|
||||
}
|
||||
|
||||
function create_pushbutton_row(s, component) {
|
||||
if (debug_group_daniel) {
|
||||
console.log("%cfunction: create_pushbutton_row", "color:white;background:salmon");
|
||||
}
|
||||
|
||||
// Creates row-element containing a push button
|
||||
|
||||
var name = component.name;
|
||||
@ -181,6 +218,10 @@ function create_pushbutton_row(s, component) {
|
||||
}
|
||||
|
||||
function create_input_row(s, component) {
|
||||
if (debug_group_daniel) {
|
||||
console.log("%cfunction: create_input_row", "color:white;background:salmon");
|
||||
}
|
||||
|
||||
// Creates row-element containing input-item.
|
||||
|
||||
var name = component.name;
|
||||
@ -304,12 +345,20 @@ function create_input_row(s, component) {
|
||||
}
|
||||
|
||||
function posTextfield(s, left) {
|
||||
if (debug_group_daniel) {
|
||||
console.log("%cfunction: posTextfield", "color:white;background:salmon");
|
||||
}
|
||||
|
||||
var content = swiper[s].slides[swiper[s].activeIndex].childNodes[1];
|
||||
var row = left.parentNode;
|
||||
content.scrollTop = row.offsetTop - 30;
|
||||
}
|
||||
|
||||
function resizeTextfield(input) {
|
||||
if (debug_group_daniel) {
|
||||
console.log("%cfunction: resizeTextfield", "color:white;background:salmon");
|
||||
}
|
||||
|
||||
if (input.value.length > input.size * 12 / 20) {
|
||||
var str0 = window.getComputedStyle(input).fontSize;
|
||||
var str1 = str0.substring(0, str0.length - 2);
|
||||
@ -322,7 +371,12 @@ function resizeTextfield(input) {
|
||||
}
|
||||
|
||||
function create_checkbox_row(s, component) {
|
||||
if (debug_group_daniel) {
|
||||
console.log("%cfunction: create_checkbox_row", "color:white;background:salmon");
|
||||
}
|
||||
|
||||
// Creates row-element containing checkbox-item
|
||||
|
||||
var command = component.command;
|
||||
|
||||
var left = createTitle(component);
|
||||
@ -392,7 +446,12 @@ function create_checkbox_row(s, component) {
|
||||
}
|
||||
|
||||
function create_enum_row(s, component) {
|
||||
if (debug_group_daniel) {
|
||||
console.log("%cfunction: create_enum_row", "color:white;background:salmon");
|
||||
}
|
||||
|
||||
// Creates row-element containing dropdown-selection.
|
||||
|
||||
var name = component.name;
|
||||
var command = component.command;
|
||||
var buttons = component.enum_names;
|
||||
@ -449,6 +508,10 @@ function create_enum_row(s, component) {
|
||||
}
|
||||
|
||||
function createTitle(component) {
|
||||
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.
|
||||
|
||||
@ -474,6 +537,10 @@ function createTitle(component) {
|
||||
}
|
||||
|
||||
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);
|
||||
@ -484,6 +551,10 @@ function createParElement(component, tag='span', cls='col-right') {
|
||||
}
|
||||
|
||||
function createInfo(component) {
|
||||
if (debug_group_daniel) {
|
||||
console.log("%cfunction: createInfo", "color:white;background:salmon");
|
||||
}
|
||||
|
||||
// Creates info-box, which isn't visible by default but can be displayed.
|
||||
|
||||
var infoBox = document.createElement('div');
|
||||
@ -498,6 +569,10 @@ function createInfo(component) {
|
||||
}
|
||||
|
||||
function appendToContent(component, left, right) {
|
||||
if (debug_group_daniel) {
|
||||
console.log("%cfunction: appendToContent", "color:white;background:salmon");
|
||||
}
|
||||
|
||||
// Creates row-tag containing infoBox (not visible by default), left side
|
||||
// (span) and right side (span).
|
||||
|
||||
|
||||
@ -1,6 +1,9 @@
|
||||
// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
|
||||
// % INIT
|
||||
|
||||
// local debugging: print the name of every executed funtion to the console
|
||||
var debug_main_daniel = 0;
|
||||
|
||||
var MAXBLOCK = 4; // max number of blocks
|
||||
var elements = []; // grid elements
|
||||
var swiper = []; // This array contains main-swiper-Instances.
|
||||
@ -15,11 +18,16 @@ var writePermission = false;
|
||||
var menuMode = false;
|
||||
var panelOn = true;
|
||||
var firstState = 0;
|
||||
var showParams = 0;
|
||||
|
||||
function Settings() {
|
||||
if (debug_main_daniel) {
|
||||
console.log("%cfunction: Settings", "color:white;background:limegreen");
|
||||
}
|
||||
|
||||
// get key/value pairs from search part of the URL and fill into query
|
||||
var qstr = location.search;
|
||||
console.log(qstr);
|
||||
// console.log(qstr);
|
||||
if (qstr) {
|
||||
var a = (qstr[0] === '?' ? qstr.substr(1) : qstr).split('&');
|
||||
for (var i = 0; i < a.length; i++) {
|
||||
@ -62,6 +70,10 @@ function Settings() {
|
||||
}
|
||||
|
||||
function to_bool(string) {
|
||||
if (debug_main_daniel) {
|
||||
console.log("%cfunction: to_bool", "color:white;background:limegreen");
|
||||
}
|
||||
|
||||
// everything else than false, 0 or an empty string is considered as true
|
||||
return !/^(false|FALSE|False|0|)$/.test(string);
|
||||
}
|
||||
@ -73,7 +85,7 @@ new Settings()
|
||||
.treat("debugGraphics", "dg", to_bool, false)
|
||||
.treat("hostPort", "hp", 0, location.hostname + ":" + location.port)
|
||||
.treat("showMain", "sm", to_bool, true)
|
||||
.treat("showConsole", "sc", to_bool, false)
|
||||
.treat("showConsole", "sc", to_bool, true)
|
||||
.treat("showOverview", "so", to_bool, false)
|
||||
.treat("showGraphics", "sg", to_bool, true) // false)
|
||||
.treat("hideRightPart", "hr", to_bool, false) //used to completely disable the right part
|
||||
@ -93,6 +105,9 @@ if (window['instrument']) {
|
||||
console.log('TAGS', window['clientTags']);
|
||||
|
||||
function loadFirstBlocks() {
|
||||
if (debug_main_daniel) {
|
||||
console.log("%cfunction: loadFirstBlocks", "color:white;background:limegreen");
|
||||
}
|
||||
|
||||
if (showMain) pushInitCommand("getblock?path=main&", "main")
|
||||
if (showConsole) pushInitCommand("console?", "console")
|
||||
@ -107,28 +122,36 @@ function loadFirstBlocks() {
|
||||
}
|
||||
|
||||
function nextInitCommand() {
|
||||
// do the next init request
|
||||
if (initCommands.length > 0) {
|
||||
next = initCommands.shift();
|
||||
cmd = next[0]
|
||||
text = next[1]
|
||||
var loadingSpan = document.getElementsByClassName("loading-span")[0];
|
||||
loadingSpan.innerHTML = loadingSpan.innerHTML + "<br>loading " + htmlEscape(text) + " ...";
|
||||
reqJSON(0, "http://" + hostPort + "/" + cmd + "id=" + clientID, successHandler, errorHandler);
|
||||
} else if (loadingShown) {
|
||||
var loadingScreen = document.getElementsByClassName("loading-div")[0];
|
||||
loadingScreen.style.display = "none";
|
||||
loadingShown = false;
|
||||
if (location.hash) { // there was a #hash part
|
||||
var slideNames = location.hash.substr(1);
|
||||
gotoGroups(slideNames);
|
||||
if (debug_main_daniel) {
|
||||
console.log("%cfunction: nextInitCommand", "color:white;background:limegreen");
|
||||
}
|
||||
|
||||
// do the next init request
|
||||
if (initCommands.length > 0) {
|
||||
next = initCommands.shift();
|
||||
cmd = next[0]
|
||||
text = next[1]
|
||||
var loadingSpan = document.getElementsByClassName("loading-span")[0];
|
||||
loadingSpan.innerHTML = loadingSpan.innerHTML + "<br>loading " + htmlEscape(text) + " ...";
|
||||
reqJSON(0, "http://" + hostPort + "/" + cmd + "id=" + clientID, successHandler, errorHandler);
|
||||
} else if (loadingShown) {
|
||||
var loadingScreen = document.getElementsByClassName("loading-div")[0];
|
||||
loadingScreen.style.display = "none";
|
||||
loadingShown = false;
|
||||
if (location.hash) { // there was a #hash part
|
||||
var slideNames = location.hash.substr(1);
|
||||
gotoGroups(slideNames);
|
||||
}
|
||||
console.log("loading finished");
|
||||
}
|
||||
console.log("loading finished");
|
||||
}
|
||||
}
|
||||
|
||||
function pushInitCommand(cmd, text) {
|
||||
initCommands.push([cmd, text]);
|
||||
if (debug_main_daniel) {
|
||||
console.log("%cfunction: pushInitCommand", "color:white;background:limegreen");
|
||||
}
|
||||
|
||||
initCommands.push([cmd, text]);
|
||||
}
|
||||
|
||||
window.onload = function() {
|
||||
@ -151,57 +174,78 @@ window.onload = function() {
|
||||
}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
|
||||
// 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()
|
||||
window["wideGraphs"] = !window['wideGraphs'];
|
||||
adjustGrid();
|
||||
window["wideGraphs"] = !window['wideGraphs'];
|
||||
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");
|
||||
// for (var s = 0; s < MAXBLOCK; s++) {
|
||||
// swiper[s] = insertSwiper(s);
|
||||
// }
|
||||
|
||||
// var homeButton = document.getElementById("home-icon");
|
||||
|
||||
// TODO : uncomment this code with the right URL to navigate to when the way to select the instrument will be decided.
|
||||
homeButton.onclick = function () {
|
||||
window.location = "/select";
|
||||
};
|
||||
buildUpdateConnection();
|
||||
if (location.hash) {
|
||||
console.log("hash in url", location.hash);
|
||||
initSlides = location.hash.substring(1);
|
||||
} else {
|
||||
initSlides = "";
|
||||
}
|
||||
// Initialisation will be continued, when SSE-connection is established
|
||||
// and id-message is obtained.
|
||||
// (see also at SEAWebClientCommunication.js)
|
||||
addEventListener("popstate", function (e) {
|
||||
if (e.state) {
|
||||
if (loadingShown) {
|
||||
if (initSlides != e.state.funarg) {
|
||||
console.log("hash mismatch", initSlides, e.state.funarg);
|
||||
initSlides = e.state.funarg;
|
||||
}
|
||||
} else {
|
||||
console.log("popstate", e.state.func, e.state.funarg);
|
||||
window[e.state.func](e.state.funarg);
|
||||
}
|
||||
} else {
|
||||
document.title = "SEA "+ clientTitle;
|
||||
for (var s=0; s<MAXBLOCK; s++) {
|
||||
swiper[s].slideTo(defaultSlidePos(s));
|
||||
}
|
||||
}
|
||||
})
|
||||
// if (location.hash) {
|
||||
// console.log("hash in url", location.hash);
|
||||
// initSlides = location.hash.substring(1);
|
||||
// } else {
|
||||
// initSlides = "";
|
||||
// }
|
||||
// // Initialisation will be continued, when SSE-connection is established
|
||||
// // and id-message is obtained.
|
||||
// // (see also at SEAWebClientCommunication.js)
|
||||
// addEventListener("popstate", function (e) {
|
||||
// if (e.state) {
|
||||
// if (loadingShown) {
|
||||
// if (initSlides != e.state.funarg) {
|
||||
// console.log("hash mismatch", initSlides, e.state.funarg);
|
||||
// initSlides = e.state.funarg;
|
||||
// }
|
||||
// } else {
|
||||
// console.log("popstate", e.state.func, e.state.funarg);
|
||||
// window[e.state.func](e.state.funarg);
|
||||
// }
|
||||
// } else {
|
||||
// document.title = "SEA "+ clientTitle;
|
||||
// for (var s=0; s<MAXBLOCK; s++) {
|
||||
// swiper[s].slideTo(defaultSlidePos(s));
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
};
|
||||
|
||||
function toggleHeader() {
|
||||
if (debug_main_daniel) {
|
||||
console.log("%cfunction: toggleHeader", "color:white;background:limegreen");
|
||||
}
|
||||
|
||||
// Show and hide box showing name of the current device ('see also
|
||||
// SEAWebClient.html')
|
||||
|
||||
|
||||
@ -1,6 +1,9 @@
|
||||
// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
|
||||
// % RESPONSIVITY
|
||||
|
||||
// local debugging: print the name of every executed funtion to the console
|
||||
var debug_responsivity_daniel = 0;
|
||||
|
||||
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.
|
||||
@ -10,6 +13,10 @@ let paramSlider = [0,1,2,3]; // the number of the parameter slider to open
|
||||
let prevActiveSlider = 0;
|
||||
|
||||
function createGrid() {
|
||||
if (debug_responsivity_daniel) {
|
||||
console.log("%cfunction: createGrid", "color:white;background:olive");
|
||||
}
|
||||
|
||||
// Creates grid-elements. By default only the first one is shown
|
||||
// and
|
||||
// takes the whole viewport.
|
||||
@ -24,6 +31,10 @@ function createGrid() {
|
||||
}
|
||||
|
||||
function determineViewportSize() {
|
||||
if (debug_responsivity_daniel) {
|
||||
console.log("%cfunction: determineViewportSize", "color:white;background:olive");
|
||||
}
|
||||
|
||||
// Number of columns 'nColumns' and rows 'nRows' is determined depending on available
|
||||
// viewport-size.
|
||||
|
||||
@ -52,11 +63,19 @@ function determineViewportSize() {
|
||||
}
|
||||
|
||||
function sizeChange() {
|
||||
if (debug_responsivity_daniel) {
|
||||
console.log("%cfunction: sizeChange", "color:white;background:olive");
|
||||
}
|
||||
|
||||
determineViewportSize();
|
||||
adjustGrid();
|
||||
}
|
||||
|
||||
function adjustGrid() {
|
||||
if (debug_responsivity_daniel) {
|
||||
console.log("%cfunction: adjustGrid", "color:white;background:olive");
|
||||
}
|
||||
|
||||
// Determines size of grid-elements depending on number of columns 'nColumns' and
|
||||
// rows 'nRows'
|
||||
|
||||
@ -147,9 +166,13 @@ function adjustGrid() {
|
||||
}
|
||||
|
||||
function style(s, width, height) {
|
||||
if (debug_responsivity_daniel) {
|
||||
console.log("%cfunction: style", "color:white;background:olive");
|
||||
}
|
||||
|
||||
if (width) {
|
||||
paramSlider[prevActiveSlider] = s;
|
||||
prevActiveSlider = s;
|
||||
// paramSlider[prevActiveSlider] = s;
|
||||
// prevActiveSlider = s;
|
||||
elements[s].style.display = "inline-block";
|
||||
elements[s].style.width = width;
|
||||
} else {
|
||||
|
||||
@ -1,7 +1,14 @@
|
||||
// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
|
||||
// % SWIPER
|
||||
|
||||
// local debugging: print the name of every executed funtion to the console
|
||||
var debug_swiper_daniel = 0;
|
||||
|
||||
function insertSwiper(s) {
|
||||
if (debug_swiper_daniel) {
|
||||
console.log("%cfunction: insertSwiper", "color:white;background:lightblue");
|
||||
}
|
||||
|
||||
// Create an empty swiper-instance and append the swiper-container to
|
||||
// 'grid-element' s.
|
||||
|
||||
@ -59,30 +66,53 @@ function insertSwiper(s) {
|
||||
}
|
||||
|
||||
function findSlide(s, type) {
|
||||
if (debug_swiper_daniel) {
|
||||
console.log("%cfunction: findSlide" , "color:white;background:lightblue");
|
||||
console.log (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;
|
||||
}
|
||||
}
|
||||
if (debug_swiper_daniel) {
|
||||
console.log ('found no slide ');
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function replaceSlideContent(slide, title, content) {
|
||||
if (debug_swiper_daniel) {
|
||||
console.log("%cfunction: replaceSlideContent", "color:white;background:lightblue");
|
||||
}
|
||||
|
||||
titlewrapper = slide.childNodes[0].childNodes[0];
|
||||
titlewrapper.innerHTML = title;
|
||||
slide.replaceChild(content, slide.childNodes[1])
|
||||
}
|
||||
|
||||
function insertSlide(s, title, type, content) {
|
||||
if (debug_swiper_daniel) {
|
||||
console.log("%cfunction: insertSlide", "color:white;background:lightblue");
|
||||
}
|
||||
|
||||
// console.log("title: ",title," s: ",s);
|
||||
|
||||
// Inserts new group to instance s of Swiper. return inserted position
|
||||
|
||||
var isl = findSlide(s, type);
|
||||
var slide = swiper[s].slides[isl];
|
||||
if (slide) { // slide already exists
|
||||
replaceSlideContent(slide, title, content);
|
||||
return isl;
|
||||
}
|
||||
// Removed, Swiper will be removed, so there´s no need to look for swiper slides.
|
||||
// Instead content will be replaced
|
||||
// var isl = findSlide(s, type);
|
||||
// var slide = swiper[s].slides[isl];
|
||||
// if (slide) { // slide already exists
|
||||
// replaceSlideContent(slide, title, content);
|
||||
// return isl;
|
||||
// }
|
||||
var panel = document.createElement('div');
|
||||
panel.classList.add("panel");
|
||||
|
||||
@ -101,44 +131,56 @@ function insertSlide(s, title, type, content) {
|
||||
panel.appendChild(createUpdateButton(s));
|
||||
}*/
|
||||
|
||||
slide = document.createElement('div');
|
||||
slide.classList.add("swiper-slide", "swiper-slide-main");
|
||||
var gridContainer = document.createElement('div');
|
||||
// gridContainer.classList.add("swiper-slide", "swiper-slide-main");
|
||||
gridContainer.classList.add("grid-container");
|
||||
// Store type so it can be found easiely later.
|
||||
slide.slideType = type;
|
||||
slide.appendChild(panel);
|
||||
slide.appendChild(content);
|
||||
gridContainer.slideType = type;
|
||||
gridContainer.appendChild(panel);
|
||||
gridContainer.appendChild(content);
|
||||
|
||||
// Graphics-slide is put at mostleft position.
|
||||
if (type == "graphics" || type == "_overview") {
|
||||
swiper[s].prependSlide(slide);
|
||||
swiper[s].slideTo(0);
|
||||
return 0;
|
||||
}
|
||||
swiper[s].appendSlide(slide);
|
||||
if (type == "console") {
|
||||
if (s === 3) {
|
||||
// Slide mostright swiper-instance to last position (console)
|
||||
swiper[3].slideNext();
|
||||
}
|
||||
return swiper[s].slides.length - 1;
|
||||
}
|
||||
// if (type == "graphics" || type == "_overview") {
|
||||
// swiper[s].prependSlide(slide);
|
||||
// swiper[s].slideTo(0);
|
||||
// return 0;
|
||||
// }
|
||||
// swiper[s].appendSlide(slide);
|
||||
// if (type == "console") {
|
||||
// if (s === 3) {
|
||||
// // Slide mostright swiper-instance to last position (console)
|
||||
// swiper[3].slideNext();
|
||||
// }
|
||||
// return swiper[s].slides.length - 1;
|
||||
// }
|
||||
|
||||
var gridelements = document.getElementsByClassName('grid-element');
|
||||
gridelements[s].innerHTML = "";
|
||||
gridelements[s].appendChild(gridContainer);
|
||||
|
||||
let pos = 0;
|
||||
if (swiper[s].slides.length > 1) {
|
||||
var consoleslide = swiper[s].slides[swiper[s].slides.length - 2];
|
||||
if (consoleslide.slideType == "console") {
|
||||
// shift Console-slide to mostright position.
|
||||
swiper[s].removeSlide(swiper[s].slides.length - 2);
|
||||
swiper[s].appendSlide(consoleslide);
|
||||
// Slide to position of new slide
|
||||
pos = swiper[s].slides.length - 2;
|
||||
} else {
|
||||
pos = swiper[s].slides.length - 1;
|
||||
}
|
||||
}
|
||||
swiper[s].slideTo(pos);
|
||||
|
||||
// if (swiper[s].slides.length > 1) {
|
||||
// var consoleslide = swiper[s].slides[swiper[s].slides.length - 2];
|
||||
// if (consoleslide.slideType == "console") {
|
||||
// // shift Console-slide to mostright position.
|
||||
// swiper[s].removeSlide(swiper[s].slides.length - 2);
|
||||
// swiper[s].appendSlide(consoleslide);
|
||||
// // Slide to position of new slide
|
||||
// pos = swiper[s].slides.length - 2;
|
||||
// } else {
|
||||
// pos = swiper[s].slides.length - 1;
|
||||
// }
|
||||
// }
|
||||
// swiper[s].slideTo(pos);
|
||||
return pos;
|
||||
}
|
||||
|
||||
function createCloseButton(s) {
|
||||
if (debug_swiper_daniel) {
|
||||
console.log("%cfunction: createCloseButton", "color:white;background:lightblue");
|
||||
}
|
||||
|
||||
// Creates 'span'-element containing close-button.
|
||||
var wrapper = document.createElement('span');
|
||||
wrapper.onclick = function () {
|
||||
@ -151,6 +193,10 @@ function createCloseButton(s) {
|
||||
}
|
||||
|
||||
function createUpdateButton(s){
|
||||
if (debug_swiper_daniel) {
|
||||
console.log("%cfunction: createUpdateButton", "color:white;background:lightblue");
|
||||
}
|
||||
|
||||
// Creates 'span'-element containing update-button (Should be removed later!)
|
||||
var button = document.createElement('span');
|
||||
button.classList.add("interactive", "toggle-updates-graphics")
|
||||
@ -163,22 +209,30 @@ function createUpdateButton(s){
|
||||
}
|
||||
|
||||
function defaultSlidePos(s) {
|
||||
if (debug_swiper_daniel) {
|
||||
console.log("%cfunction: defaultSlidePos", "color:white;background:lightblue");
|
||||
}
|
||||
|
||||
return s < 3 ? 0 : swiper[s].slides.length-1;
|
||||
}
|
||||
|
||||
function getSlideNames() {
|
||||
var names = []
|
||||
for (var s=0; s<MAXBLOCK; s++) {
|
||||
var sw = swiper[s];
|
||||
var name = "";
|
||||
if (sw.activeIndex != defaultSlidePos(s) && sw.slides.length > 0) {
|
||||
name = sw.slides[sw.activeIndex].slideType;
|
||||
if (debug_swiper_daniel) {
|
||||
console.log("%cfunction: getSlideNames", "color:white;background:lightblue");
|
||||
}
|
||||
names.push();
|
||||
}
|
||||
for (var s=MAXBLOCK-1; s>=0; s--) {
|
||||
if (names[s] != "") break;
|
||||
names.pop();
|
||||
}
|
||||
return names;
|
||||
|
||||
var names = []
|
||||
for (var s=0; s<MAXBLOCK; s++) {
|
||||
var sw = swiper[s];
|
||||
var name = "";
|
||||
if (sw.activeIndex != defaultSlidePos(s) && sw.slides.length > 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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user