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

Added live data functionnality + some docs in Python and JS code

Browse Source
This commit is contained in:
l_samenv
2024-07-24 11:41:24 +02:00
parent aa29d89a18
commit 5a82601e8e
6 changed files with 294 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
client/jsFiles/SEAWebClientGraphics.js
View File

@ -28,6 +28,7 @@ in loops called gr
chart = Chart(...): the chartjs chart
*/
// Unused ?
function Timer(){
let start = window.performance.now();
return function(x = "timer"){
@ -35,7 +36,7 @@ function Timer(){
}
}
// Sets the graph background at loading
window.addEventListener('load', function(){
var urlParams = new URLSearchParams(window.location.search);
if(urlParams.has('white')){
@ -58,6 +59,11 @@ function delClass(obj, cls){
}
*/
/**
* Function used to make AJAX request, with three nested functions (POST, GET with returned JSON data, GET)
* @param {string} addr - The endpoint
* @returns This
*/
function AJAX(addr){
var xhr = new XMLHttpRequest();
@ -108,6 +114,14 @@ function AJAX(addr){
}
/**
* Performs a callback on double tap (defined as two taps less than 500ms and in a window of +-40px in x and y directions)
*
* Timeout things maight be useless...
*
* @param {*} callback - The callback to execute
* @returns - Never used
*/
function doubleTap(callback){
var timeout;
var lastTap = 0, lastX=NaN, lastY=NaN;
@ -135,7 +149,13 @@ function doubleTap(callback){
window.addEventListener('touchend', handler);
return {stop: function(){ window.removeEventListener('touchend', handler) }}
}
/**
* Return the highest value out of a time interval in a set of points
* @param {*} array - The array we want to look the highest value for
* @param {*} tmin - The lower bound of the time interval
* @param {*} tmax - The upper boud of the time interval
* @returns The highest found value (y value)
*/
function maxAr(array, tmin, tmax){
return Math.max.apply(Math, array.map(function(o) {
if (o.y == null || o.x < tmin || o.x > tmax) return -1e99;
@ -143,6 +163,13 @@ function maxAr(array, tmin, tmax){
}));
}
/**
* Return the lowest value out of a time interval in a set of points
* @param {*} array - The array we want to look the lowest value for
* @param {*} tmin - The lower bound of the time interval
* @param {*} tmax - The upper boud of the time interval
* @returns The lowest found value (y value)
*/
function minAr(array, tmin, tmax){
return Math.min.apply(Math, array.map(function(o) {
if (o.y == null || o.x < tmin || o.x > tmax) return 1e99;
@ -150,6 +177,12 @@ function minAr(array, tmin, tmax){
}));
}
/**
* Formats the values to display (especially the exponentials)
* @param {*} val - The value to format
* @param {number} significant_digits - The max number of digits to display
* @returns The formatted value as a string
*/
function strFormat(val, significant_digits=13) {
if (val == null) return '';
evalue = val.toExponential(significant_digits-1).replace(/0*e/, 'e').replace(/\.e/, 'e').replace("e+", "e");
@ -161,21 +194,21 @@ function strFormat(val, significant_digits=13) {
}
let graphs = (function (){
let dataset_to_graph_map = {};
let dataset_to_graph_map = {}; // a dictionnary mapping a variable name to a two values array, containing its graph index and its position inside the graph
let blocks, liveMode=true, top_vars=[], bottom_vars=[];
let legendFlag = false, currentZoomMode = isTouchDevice ? 'xy' : 'x';
let prevTime = null, prevMin = null, prevMax = null, prevGraph = null; // zoom speed limitation
let cursorLinePos = null;
let cursorLinePos = null; // the position of the cursor line (given by its x value)
let type = 'linear';
let type = 'linear'; // type of graphs axis to display
let ngraphs = 0; // current number of graphs
let graph_array = [];
let graph_elm_array = [];
let vars_array = [];
let prev_blk = {};
let tag_dict = {};
let graph_array = []; // an array of Graph objects
let graph_elm_array = []; // an array of HTML divs (with appropriate classes) containing the corresponding Graph objects of graph_array
let vars_array = []; // an array of arrays of curve names, each curve names array is positionned at its graph id
let prev_blk = {};
let tag_dict = {}; // a dictionnary of graph indexes (corresponding to the three indexes of the above arrays), indexed by the tag of the graphs
let currentMinTime = 0, currentMaxTime = 0; // the currently displayed time range
let startTime; // time of query on server
@ -186,11 +219,15 @@ let graphs = (function (){
let container = document.createElement('div');
container.classList.add("graphs-container");
/** The current time corrected for server time */
function now(){
// the current time corrected for server time
return startTime + (performance.now()-recvTime);
}
/**
* Clears a graph (meaning it deletes the datasets for the corresponding Graph object, set the Graph Object to undefined and empties the HTML container) at the given index
* @param {number} gindex - The graph index to clear
*/
function clear(gindex){
let graph_elm = graph_elm_array[gindex];
let graph = graph_array[gindex];
@ -207,6 +244,11 @@ let graphs = (function (){
}
}
/**
*
* @param {*} gindex
*/
function createSelection(gindex){
let graph_elm = graph_elm_array[gindex];
clear(gindex);
@ -262,8 +304,11 @@ let graphs = (function (){
let gotoNowElm = document.createElement('div');
/**
* Sets live mode and enable/disable 'go to now' button
* @param {boolean} mode - Tells if we are in live mode or not
*/
function setLiveMode(mode=null) {
// set live mode and enable/disable 'go to now' button
if (mode !== null) liveMode = mode;
if (liveMode && cursorLinePos === null)
gotoNowElm.innerHTML = '';
@ -274,7 +319,7 @@ let graphs = (function (){
function createGraph(gindex, block){
clear(gindex);
tag_dict[block.tag] = gindex;
let dict = {}
let dict = {} //
for (let curve of block.curves) {
if (curve.show !== false) {
vars_array[gindex].push(curve.name);
@ -314,17 +359,30 @@ let graphs = (function (){
showLegends(legendFlag, false);
if (legendFlag) adjustLegends();
result = AJAX( "http://" + hostPort +
"/updategraph?variables=" + variables() +
"&id=" + clientID).getJSON().then(function(data) {
setLiveMode(data.live);
console.log('LIVE create', liveMode)
})
//console.log('UPDATE LIVE', result);
// result = AJAX( "http://" + hostPort +
// "/updategraph?variables=" + variables() +
// "&id=" + clientID).getJSON().then(function(data) {
// setLiveMode(data.live);
// console.log('LIVE create', liveMode)
// })
// result = AJAX( "http://" + hostPort +
// "/updategraph?" +
// "id=" + clientID).getJSON().then(function(data) {
// setLiveMode(data.live);
// console.log('LIVE create', liveMode)
// })
// //console.log('UPDATE LIVE', result);
})
}
// add dataset to graph with graph_id
/**
* Adds dataset to the Graph object at gindex position
* @param {number} gindex - The index of the Graph object to add dataset to
* @param {string} key - The curve name (variable)
* @param {*} data - The corresponding data points for this curve
* @param {*} opts - Some options for the curve (color, label)
*/
function addDataset(gindex, key, data, data_opts){
let graph = graph_array[gindex];
dataset_to_graph_map[key] = [gindex, graph.addDataset(key, data, data_opts)];
@ -392,6 +450,11 @@ let graphs = (function (){
axis.max = axis.ticks.max = max;
}
/**
* Sets the current viewing window to min and max for each graph
* @param {number} min - The minimum timestamp in milliseconds of the viewing window
* @param {number} max - The maximum timestamp in milliseconds of the viewing window
*/
function setMinMax(min, max){
currentMaxTime = max;
currentMinTime = min;
@ -400,7 +463,8 @@ let graphs = (function (){
}
}
// responsible for new data being displayed on chart
/**
* Responsible for new data being displayed on chart */
function newDataHandler(key, data){
if(!(key in dataset_to_graph_map))
return
@ -468,12 +532,20 @@ let graphs = (function (){
}
console.log("RELOAD")
// AJAX( "http://" + hostPort + "/updategraph?id=" + clientID).getJSON(); // activate updates
result = AJAX("http://" + hostPort +
"/updategraph?variables=" + variables() +
"&id=" + clientID).getJSON().then(function(data) {
setLiveMode(data.live);
console.log('LIVE reload', liveMode)
})
// result = AJAX("http://" + hostPort +
// "/updategraph?variables=" + variables() +
// "&id=" + clientID).getJSON().then(function(data) {
// setLiveMode(data.live);
// console.log('LIVE reload', liveMode)
// })
// result = AJAX("http://" + hostPort +
// "/updategraph?"+
// "id=" + clientID).getJSON().then(function(data) {
// setLiveMode(data.live);
// console.log('LIVE reload', liveMode)
// })
updateAuto(false);
//update();
});
@ -629,6 +701,8 @@ let graphs = (function (){
createGraphs();
activateUpdates();
container.parentNode.querySelector('.panel').classList.add('graphics');
gotoNowElm.addEventListener('click', gotoNow);
@ -691,6 +765,20 @@ let graphs = (function (){
container.parentNode.querySelector('.panel span').appendChild(gotoMainElm);
}
/**
* New function to activate the graph updates
*/
function activateUpdates(){
result = AJAX( "http://" + hostPort +
"/updategraph?" +
"id=" + clientID).getJSON().then(function(data) {
setLiveMode(data.live);
console.log('LIVE create', liveMode)
})
}
function getBlocks(){
return blocks;
}
@ -1180,6 +1268,13 @@ function Graph(gindex, container, x_label, y_label, tag, scaleType = "linear"){
chart.update();
}
/**
* Adds a dataset (curve) to the current graph, and manages the legend for it
* @param {string} key - The curve name (variable)
* @param {*} data - The corresponding data points for this curve
* @param {*} opts - Some options for the curve (color, label)
* @returns The index of this curve in its chart
*/
function addDataset(key, data, opts){
let dataset_index = chart.data.datasets.length;
chart.data.datasets.push({data: data, label: opts.label, key: key,
@ -1283,6 +1378,11 @@ function Graph(gindex, container, x_label, y_label, tag, scaleType = "linear"){
chart.data.datasets[index].data = data;
}
/**
* Sets the current viewing window to min and max
* @param {number} min - The minimum timestamp in milliseconds of the viewing window
* @param {number} max - The maximum timestamp in milliseconds of the viewing window
*/
function setMinMax(min, max){
let ax = chart.options.scales.xAxes[0];
let ay = chart.options.scales.yAxes[0];
@ -1447,6 +1547,11 @@ function Graph(gindex, container, x_label, y_label, tag, scaleType = "linear"){
return self;
}
/**
* Called when new data is received from the server.
* Appends new data to the corresponding curves' datasets
* @param {*} graph - The graph response from the server
*/
function updateCharts2(graph){
if(!graphs.doUpdates()) {
console.log('graphs.doUpdates skipped');
@ -1464,6 +1569,7 @@ function updateCharts2(graph){
// graphs.update();
}
/** Useless (called in graph-draw response case in SEAWebClientCommunication) */
function createCharts2(arg) {
console.log('C2', arg)
}