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

Merge branch 'daniel' of https://gitlab.psi.ch/samenv/seweb into daniel

Browse Source
This commit is contained in:
Daniel
2025-03-19 09:51:19 +01:00
parent f2b12301ee 958e472f3b
commit 2da1798d42
13 changed files with 821 additions and 485 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
client/jsFiles/SEAWebClientCommunication.js
View File

@ -17,9 +17,9 @@ function buildUpdateConnection() {
// 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).
// Executed at program start (see also SEAWebClientMain.js).
var path = "http://" + hostPort + "/update";
var path = "http://" + hostPort + "/update?" + window.clientTags;
if (debugCommunication) {
console.log("%cto server (SSE): " + path,
"color:white;background:lightblue");
@ -29,8 +29,7 @@ function buildUpdateConnection() {
var src = new EventSource(path);
} catch (e) {
console.log(e)
alertify.prompt(
"NETWORK ERROR",
alertify.prompt("NETWORK ERROR",
"Failed to establish connection to data-server at the given address!"
+ "Try to enter HOST and PORT of the data-server manually!",
hostPort, function(evt, value) {
@ -50,9 +49,7 @@ function buildUpdateConnection() {
src.onerror = function(e) {
console.log(e);
console.log('EVTSRC error')
alertify
.prompt(
"NETWORK ERROR",
alertify.prompt("NETWORK ERROR",
"Failed to establish connection to data-server at the given address!"
+ "Try to enter HOST and PORT of the data-server manually!",
hostPort, function(evt, value) {
@ -306,7 +303,7 @@ function reqJSONPOST(s, url, parameters, successHandler, errorHandler) {
var xhr = typeof XMLHttpRequest != 'undefined' ? new XMLHttpRequest()
: new ActiveXObject('Microsoft.XMLHTTP');
if (debugCommunication) {
console.log("%cto server (reqJSON): %s",
console.log("%cto server (reqJSONPOST): %s",
"color:white;background:lightgreen", url);
}
xhr.open('post', url, true);
@ -408,8 +405,11 @@ function successHandler(s, message) {
begin = timeRange[0] - timeRange[1];
select.value = begin;
// Server-request for variable-list.*/
reqJSONPOST(0, "http://" + hostPort + "/getvars", "time=" + timeRange[1] + "&userconfiguration=" + JSON.stringify(getFormattedUserConfigurationFromLocalStorage()) + "&id="
+ clientID, successHandler, errorHandler);
console.log('TIME', timeRange)
reqJSONPOST(0, "http://" + hostPort + "/getvars",
"time=" + timeRange[0] + ',' + timeRange[1]
+ "&userconfiguration=" + JSON.stringify(getFormattedUserConfigurationFromLocalStorage())
+ "&id=" + clientID, successHandler, errorHandler);
break;
// Response to a "getvars"-server-request.
case "var_list":
@ -429,6 +429,7 @@ function successHandler(s, message) {
nextInitCommand();
}*/
// graphs.receivedVars(message.blocks);
document.getElementById("device").innerHTML = message.device
graphs.initGraphs(message.blocks);
nextInitCommand();
break;

54
client/jsFiles/SEAWebClientGraphics.js
View File

@ -371,10 +371,9 @@ function loadExportPopup(){
*/
function exportCallback(selectedVariables, startDateTimeMs, endDateTimeMs, nan, binning=null){
let binningParam = "None";
if (binning !== null)
binningParam = binning
let exportURL = "http://" + hostPort + "/export?time=" + startDateTimeMs/1000 + "," + endDateTimeMs/1000 + "&variables=" + selectedVariables + "&nan=" + nan + "&interval=" + binningParam + "&id=" + clientID
if (binning === null || binning == "None")
binning = "";
let exportURL = "http://" + hostPort + "/export?time=" + startDateTimeMs/1000 + "," + endDateTimeMs/1000 + "&variables=" + selectedVariables + "&nan=" + nan + "&interval=" + binning + "&id=" + clientID
let a = document.createElement('a');
a.href = exportURL
a.download = true
@ -417,7 +416,7 @@ let graphs = (function (){
let minTime, maxTime; // the queried time range
let lastTime = 0; // time of most recent data point
let resolution = undefined; // current window resolution (ms/pixel)
// let resolution = undefined; // current window resolution (ms/pixel)
let activateUpdateTimeout = undefined; // timeout for the activateUpdates function
let updateAutoTimeout = undefined; // timeout for the updateAuto function (used in onZoomCompleteCallback)
@ -491,7 +490,7 @@ let graphs = (function (){
if(idx != -1){ //if the clicked block is displayed somewhere, we create a selection window
createSelection(idx); // We will create a selection at the gindex
}
}
}
createGraph(gindex, block); // we create at the current shown selector (gindex), the graph corresponding to the one clicked (block)
})
selection.appendChild(bel);
@ -542,12 +541,13 @@ let graphs = (function (){
varlist = vars_array[gindex];
let graph_elm = graph_elm_array[gindex];
timeDeltaAxis = maxTime - minTime
setResolution(timeDeltaAxis)
resolution = getResolution((maxTime - minTime) / 1000)
AJAX("http://" + hostPort + "/graph?time=" + minTime/1000 + "," + maxTime/1000 + "&variables=" + varlist + "&interval=" + resolution + "&id=" + clientID).getJSON().then(function(data){
//console.log('Graph', block, data)
AJAX("http://" + hostPort + "/graph?time=" + minTime/1000 + "," + maxTime/1000
+ "&variables=" + varlist
+ "&interval=" + resolution
+ "&id=" + clientID).getJSON().then(function(data){
// console.log('Graph', block, data);
let graph = new Graph(gindex, graph_elm, "Time", block.unit, block.tag, type);
graph_array[gindex] = graph;
@ -559,7 +559,6 @@ let graphs = (function (){
for(let e of data.graph[key]){
pdata.push({x: e[0]*1000, y: e[1]});
}
addDataset(gindex, key, pdata, dict[key])
// if(pdata.length > 0){
// addDataset(gindex, key, pdata, dict[key])
@ -777,10 +776,12 @@ let graphs = (function (){
max = max/1000;
}
timeDelta = currentMaxTime - currentMinTime
setResolution(timeDelta)
resolution = getResolution((currentMaxTime - currentMinTime) / 1000)
AJAX("http://" + hostPort + "/graph?time=" + min + ","+max+"&variables=" + variables() + "&interval=" + resolution + "&id=" + clientID).getJSON().then(function(data){
AJAX("http://" + hostPort + "/graph?time=" + min + ","+max
+"&variables=" + variables()
+ "&interval=" + resolution
+ "&id=" + clientID).getJSON().then(function(data){
for(let key in data.graph){
let pdata = [];
for(let e of data.graph[key]){
@ -893,10 +894,10 @@ let graphs = (function (){
* Sets the resolution of the viewing window in milliseconds
* @param {*} timeDelta - The difference between the maximum time and the minimum time of the window
*/
function setResolution(timeDelta){
resolution = Math.ceil((timeDelta / container.getBoundingClientRect().width))
function getResolution(timeDelta){
return Math.ceil((timeDelta / container.getBoundingClientRect().width))
}
/**
* The callback to be called when the user click on the "Jump" button of the date selector
* Gets the vars + device name for the selected date+time, then rebuilds the graphs
@ -915,7 +916,10 @@ let graphs = (function (){
msRightTimestampGetVars = dateTimestampMs + timeValueMs;
msRightTimestampGetGraph = dateTimestampMs + 24*60*60*1000;
AJAX("http://" + hostPort + "/getvars").postForm("time=" + msRightTimestampGetVars/1000 + "&userconfiguration=" + JSON.stringify(getFormattedUserConfigurationFromLocalStorage()) + "&id="+ clientID).then(function(data){
AJAX("http://" + hostPort + "/getvars").postForm(
"time=" + msRightTimestampGetVars/1000
+ "&userconfiguration=" + JSON.stringify(getFormattedUserConfigurationFromLocalStorage())
+ "&id="+ clientID).then(function(data){
blocks = data.blocks;
document.getElementById("device").innerHTML = data.device
maxTime = msRightTimestampGetGraph;
@ -989,7 +993,10 @@ let graphs = (function (){
window["wideGraphs"] = false; // will have no effect if hideRightPart is true
adjustGrid();
AJAX("http://" + hostPort + "/getvars").postForm("time=" + msRightTimestamp/1000 + "&userconfiguration=" + JSON.stringify(getFormattedUserConfigurationFromLocalStorage()) + "&id="+ clientID).then(function(data){
AJAX("http://" + hostPort + "/getvars").postForm(
"time=" + msRightTimestamp/1000 + "&userconfiguration="
+ JSON.stringify(getFormattedUserConfigurationFromLocalStorage())
+ "&id="+ clientID).then(function(data){
currentMaxTime = msRightTimestamp + 60000;
currentMinTime = msLeftTimestamp;
@ -1063,7 +1070,7 @@ let graphs = (function (){
currentMaxTime = maxTime;
currentMinTime = minTime;
}
AJAX("http://" + hostPort + "/gettime?time=-1800,0&id="+ clientID).getJSON().then(function(data){
AJAX("http://" + hostPort + "/gettime?time=" + window['timerange'] + "&id="+ clientID).getJSON().then(function(data){
startTime = data.time[1]*1000;
maxTime = startTime;
currentMaxTime = maxTime + 60000;
@ -1291,7 +1298,10 @@ let graphs = (function (){
function applySettingsCallback(userConfiguration){
cursorLine(null);
AJAX("http://" + hostPort + "/getvars").postForm("time=" + currentMaxTime/1000 + "&userconfiguration=" + JSON.stringify(userConfiguration) + "&id="+ clientID).then(function(data){
AJAX("http://" + hostPort + "/getvars").postForm(
"time=" + currentMaxTime/1000
+ "&userconfiguration=" + JSON.stringify(userConfiguration)
+ "&id="+ clientID).then(function(data){
blocks = data.blocks;
document.getElementById("device").innerHTML = data.device
maxTime = currentMaxTime;

38
client/jsFiles/SEAWebClientMain.js
View File

@ -90,6 +90,21 @@ new Settings()
.treat("hideRightPart", "hr", to_bool, false) //used to completely disable the right part
.treat("wideGraphs", "wg", to_bool, false) //used to toggle the size of the graphs part
.treat("showAsync", "sa", to_bool, false)
.treat("device", "dev", 0, "")
.treat("server", "srv", 0, "")
.treat("instrument", "instrument", 0, "")
.treat("timerange", "time", 0, "-1800,0")
if (window.instrument) {
window.clientTags = "&instrument=" + window.instrument;
} else {
let args = '';
if (window.server) { args += "&stream=" + window.server; }
if (window.device) { args += "&device=" + window.device; }
window.clientTags = args;
}
console.log('TAGS', window.clientTags);
function loadFirstBlocks() {
if (debug_main_daniel) {
@ -99,11 +114,19 @@ function loadFirstBlocks() {
if (showMain) pushInitCommand("getblock?path=main&", "main")
if (showConsole) pushInitCommand("console?", "console")
if (nColumns == 1) { // probably mobile phone}
if (showGraphics) pushInitCommand("gettime?time=-1800,0&", "graphics")
if (showGraphics) pushInitCommand("gettime?time=" + window.timerange + "&", "graphics")
if (showOverview) pushInitCommand("getblock?path=_overview&", "overview")
var goFS = document.getElementById('header');
goFS.addEventListener(
'click',
function () {
document.body.requestFullscreen();
},
false,
);
} else {
if (showOverview) pushInitCommand("getblock?path=_overview&", "overview")
if (showGraphics) pushInitCommand("gettime?time=-1800,0&", "graphics")
if (showGraphics) pushInitCommand("gettime?time=" + window.timerange + "&", "graphics")
// last is shown first
}
}
@ -156,7 +179,7 @@ window.onload = function() {
let crossElement = document.getElementById("close-cross");
if(window["hideRightPart"]){
if(window.hideRightPart){
document.body.removeChild(crossElement);
}else{
crossElement.onclick = function(){
@ -180,7 +203,7 @@ window.onload = function() {
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();
}
}
@ -194,10 +217,9 @@ window.onload = function() {
// 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 = "http://" + location.hostname + ":8800/";
// };
homeButton.onclick = function () {
window.location = "/select_experiment";
};
buildUpdateConnection();
// if (location.hash) {
// console.log("hash in url", location.hash);