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

Working jumps (routes) + goToNow now reloads

Browse Source
This commit is contained in:
l_samenv
2024-08-14 08:27:59 +02:00
parent 58d44dd4d7
commit 5735fe9f01
7 changed files with 193 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
client/jsFiles/SEAWebClientCommunication.js
View File

@ -345,7 +345,7 @@ function successHandler(s, message) {
begin = timeRange[0] - timeRange[1];
select.value = begin;
// Server-request for variable-list.*/
reqJSON(0, "http://" + hostPort + "/getvars?time=" + timeRange + "&id="
reqJSON(0, "http://" + hostPort + "/getvars?time=" + timeRange + "&all=False&id="
+ clientID, successHandler, errorHandler);
break;
// Response to a "getvars"-server-request.
@ -365,7 +365,8 @@ function successHandler(s, message) {
} else {
nextInitCommand();
}*/
graphs.receivedVars(message.blocks);
// graphs.receivedVars(message.blocks);
graphs.initGraphs(message.blocks);
nextInitCommand();
break;
// Response to a "graph"-server-request.

238
client/jsFiles/SEAWebClientGraphics.js
View File

@ -446,7 +446,7 @@ let graphs = (function (){
}*/
}
}
graph.setMinMax(minTime,maxTime);
graph.setMinMax(currentMinTime,currentMaxTime);
graph.autoScaleIf();
graph.update();
showLegends(legendFlag, false);
@ -804,11 +804,49 @@ let graphs = (function (){
}
function jumpToDate(dateTimestampMs, timeValueMs, mode){
let msLeftTimestamp = dateTimestampMs + timeValueMs;
let msRightTimestamp = msLeftTimestamp + 24*60*60*1000;
if (liveMode && msRightTimestamp < lastTime) setLiveMode(false);
setMinMax(msLeftTimestamp, msRightTimestamp);
updateAuto();
cursorLine(null);
let msLeftTimestampGetVars = 0, msLeftTimestampGetGraph = 0 , msRightTimestampGetVars = 0, msRightTimestampGetGraph = 0;
msLeftTimestampGetVars = dateTimestampMs;
msLeftTimestampGetGraph = dateTimestampMs;
if(mode == DatesPopup.TIME){
msRightTimestampGetVars = dateTimestampMs + timeValueMs;
}
else if(mode == DatesPopup.ALL){ // we ignore time
msRightTimestampGetVars = dateTimestampMs + 24*60*60*1000 - 1000; // we exclude the very beginning of the next day
}
msRightTimestampGetGraph = dateTimestampMs + 24*60*60*1000 - 1000;
AJAX("http://" + hostPort + "/getvars?time=" + msLeftTimestampGetVars/1000 + "," + msRightTimestampGetVars/1000 + "&all=" +allQueryParameterRepresentation(mode) + "&id="+ clientID).getJSON().then(function(data){
blocks = data.blocks;
maxTime = msRightTimestampGetGraph;
minTime = msLeftTimestampGetGraph;
currentMaxTime = maxTime + 60000;
currentMinTime = minTime;
globalIndicators.getIndicatorsMap()[datesKey].update(currentMinTime);
ngraphs = 0; // forces all the graphs to reset
createGraphs();
if (liveMode && msRightTimestampGetGraph < lastTime) setLiveMode(false);
});
}
function allQueryParameterRepresentation(mode){
if(mode == DatesPopup.ALL){
return "True";
}
else {
return "False";
}
}
function shiftOlder(){
@ -881,15 +919,28 @@ let graphs = (function (){
}
/**
* Removes the cursor, sets the window visualisation to [now-previousDelta, now], goes for live mode and updates
* Removes the cursor, gets the var + graphs for now (window visualisation to [now-30min, now]) and ask for updates
*/
function gotoNow() {
cursorLine(null);
if (!liveMode) {
setMinMax(graphs.now() - (currentMaxTime - currentMinTime), graphs.now());
}
setLiveMode(true);
updateAuto();
let msRightTimestamp = graphs.now();
let msLeftTimestamp = msRightTimestamp - 30*60*1000;
cursorLine(null);
AJAX("http://" + hostPort + "/getvars?time=" + msLeftTimestamp/1000 + "," + msRightTimestamp/1000 + "&all=False&id="+ clientID).getJSON().then(function(data){
currentMaxTime = msRightTimestamp + 60000;
currentMinTime = msLeftTimestamp;
maxTime = msRightTimestamp;
minTime = msLeftTimestamp;
blocks = data.blocks;
ngraphs = 0;
createGraphs();
globalIndicators.getIndicatorsMap()[datesKey].update(currentMinTime);
activateUpdates();
});
}
/*
@ -906,6 +957,62 @@ let graphs = (function (){
}
*/
function buildGraphicsUI(){
let f = 0;
insertSlide(f, " ", "graphics", container);
let currentSwiper = swiper[f];
function setSlidingMode(mode) {
currentSwiper.params.noSwipingClass = mode ? "allow-swipe" : "swiper-slide-main";
}
currentSwiper.enableSwiping(false);
currentSwiper.on('reachBeginning', function () {
currentSwiper.enableSwiping(false);
})
let graphicsPanel = container.parentNode.querySelector('.panel')
graphicsPanel.classList.add('graphics');
graphicsPanel.childNodes[0].style.visibility = "hidden"; // hides the span added by the swippers
// The cross to display "main" panel at the location of the graphs
let gotoMainElm = document.createElement('div');
gotoMainElm.innerHTML = "&#215;";
gotoMainElm.addEventListener('click', function () {
currentSwiper.enableSwiping(true);
console.log("MAIN")
currentSwiper.slideNext();
});
globalIndicators.loadIndicators(graphicsPanel);
globalControls.loadControls(graphicsPanel);
loadGraphicsMenu(graphicsPanel);
graphicsPanel.appendChild(gotoMainElm);
gotoMainElm.style.marginTop = "auto";
gotoMainElm.style.marginBottom = "auto";
gotoMainElm.style.marginRight = "6px";
gotoMainElm.style.color = "white";
gotoMainElm.style.cursor = "pointer";
created = true;
if (isTouchDevice) {
doubleTap(removeCursor);
} else {
window.addEventListener('dblclick', removeCursor);
showLegends(true, false);
adjustLegends();
}
}
function initGraphs(blocks){
if(!created){
buildGraphicsUI();
created = true;
}
receivedVars(blocks);
}
/**
* Holds the received variables from the /getvars call, gets the server time, insert slide (?),
* create the graphs, activate SSE graph-update messages, sets the different event listeners
@ -920,104 +1027,18 @@ let graphs = (function (){
}
AJAX("http://" + hostPort + "/gettime?time=-1800,0&id="+ clientID).getJSON().then(function(data){
startTime = data.time[1]*1000;
maxTime = startTime + 60000;
console.log('MAXTIME', maxTime - Date.now());
maxTime = startTime;
currentMaxTime = maxTime + 60000;
// console.log('MAXTIME', currentMaxTime - Date.now());
minTime = data.time[0]*1000;
recvTime = performance.now();
blocks = blocks_arg;
createGraphs();
activateUpdates();
});
// g_varlist = getVarlist(nblocks)
let f = 0;
insertSlide(f, " ", "graphics", container);
blocks = blocks_arg;
createGraphs();
activateUpdates();
let graphicsPanel = container.parentNode.querySelector('.panel')
graphicsPanel.classList.add('graphics');
graphicsPanel.childNodes[0].style.visibility = "hidden"; // hides the span added by the swippers
// The cross to display "main" panel at the location of the graphs
let gotoMainElm = document.createElement('div');
gotoMainElm.innerHTML = "&#215;";
gotoMainElm.addEventListener('click', function () {
currentSwiper.enableSwiping(true);
console.log("MAIN")
currentSwiper.slideNext();
});
if(!created){
globalIndicators.loadIndicators(graphicsPanel);
globalControls.loadControls(graphicsPanel);
loadGraphicsMenu(graphicsPanel);
graphicsPanel.appendChild(gotoMainElm);
gotoMainElm.style.marginTop = "auto";
gotoMainElm.style.marginBottom = "auto";
gotoMainElm.style.marginRight = "6px";
gotoMainElm.style.color = "white";
gotoMainElm.style.cursor = "pointer";
created = true;
}
// gotoNowElm.addEventListener('click', gotoNow);
//gotoNowElm.innerHTML = "go to now";
// container.parentNode.querySelector('.panel span').appendChild(gotoNowElm);
// Removes the cursor then applies the changes
// function removeCursor(evt=null) {
// graphs.cursorLine(null);
// graphs.update();
// }
if (isTouchDevice) {
doubleTap(removeCursor);
} else {
window.addEventListener('dblclick', removeCursor);
showLegends(true, false);
adjustLegends();
// let zoomMode = document.createElement('div');
/**
* Sets the HTML button for the y-zoom depending on the current mode
*/
// function setInnerZoomMode(){
// if (currentZoomMode == 'y') {
// zoomMode.innerHTML = "<strong>&#9746;</strong> y-zoom";
// } else {
// zoomMode.innerHTML = "<strong>&#9744;</strong> y-zoom";
// }
// prevTime = null; // reset zoom speed time
// }
// setInnerZoomMode();
/**
* Inverts the zoom mode (x<->y)
*/
// function toggleZoomMode(){
// if (currentZoomMode == 'y')
// currentZoomMode = 'x';
// else
// currentZoomMode = 'y';
// setInnerZoomMode();
// for (let gr of graph_array) {
// if (gr) gr.setZoomMode(currentZoomMode);
// }
// }
// zoomMode.addEventListener('click', toggleZoomMode);
// container.parentNode.querySelector('.panel span').appendChild(zoomMode);
}
let currentSwiper = swiper[f];
function setSlidingMode(mode) {
currentSwiper.params.noSwipingClass = mode ? "allow-swipe" : "swiper-slide-main";
}
currentSwiper.enableSwiping(false);
currentSwiper.on('reachBeginning', function () {
currentSwiper.enableSwiping(false);
})
// container.parentNode.querySelector('.panel span').appendChild(gotoMainElm);
}
@ -1261,6 +1282,7 @@ let graphs = (function (){
shiftOlder: shiftOlder,
shiftNewer: shiftNewer,
jumpToDate: jumpToDate,
initGraphs: initGraphs,
}
})();