jaume
/
infravis-trahust
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

tiny

Browse Source
Rafael
jaume-nualart 7 months ago
parent 840a3a4c4e
commit 987af6e314
3 changed files with 34 additions and 70 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 18
      web-html/config/config.js
  2. 27
      web-html/dash.html
  3. 59
      web-html/js/dash.js

18
web-html/config/config.js
Unescape View File

@ -1,10 +1,12 @@
var MAIN_VARIABLES = [
{"web_title": "TraHus Dynamic dashboard"},
{"homePagageUrl": "./home.html"},
{"subtitle": "..."},
{"x1": "..."},
{"x2": "..."},
{"credits": "Infravis.se (LNU node)"}
]
// MAIN_VARIABLES
head_title = "TraHus Dynamic dashboard";
homePagageUrl = "./home.html";
h1_title = "Welcome to the TräHus flexyboard";
subtitle = 'This application is a flexyboard that enables monitorization of time-series sensors.';
x1 = "...";
x2 = "...";
credits = "Infravis.se (LNU node)";

27
web-html/dash.html
Unescape View File

@ -131,8 +131,8 @@
<nav id ="navbar" class="navbar navbar-dark bg-primary navbar-expand-lg navbar-light bg-light">
</nav>
<h1>Welcome to the TräHus dashboard.</h1>
<p>You selected the project: <span id="myProject"></span></p>
<h1 id="h1_title"></h1>
<p id="subtitle"></p>
<!-- House info card:-->
<div id="myhouse">
@ -160,29 +160,6 @@
</div>
-<!--
TODO:
> ors validation/field required:
https://getbootstrap.com/docs/5.0/forms/validation/#how-it-works
> Add button -> EDIT diagram:
2- When click save dashboart -> function getApiUrls()
> OPEN diagrams in new window!! -> Add button to the form [In a new window]
)
DIAGRAMS:
> Horizon:
-> Tooltip!!!!!
-> Add horizontal-axis values
-->
<!-- ##################### -->
<!-- parallelModal -->
<div class="modal fade" id="parallelModal" tabindex="-1" aria-labelledby="parallelModalLabel" aria-hidden="true">

59
web-html/js/dash.js
Unescape View File

@ -27,8 +27,8 @@ var HTML_navBar = `
</div>
</div>
`;
// LIST OF SENSOR NAME and Families.
// FIXME Get this list from the config/datamap.json file.)
// Get unique list of families
//var listSensors = ["Internal.Temp_SC1.celsius","Internal.Count_SC1.count","MP1_1.Temp_MP1_1_Pos1.celsius","MP1_1.RF_MP1_1_Pos1.percentRH","MP1_1.Temp_MP1_1_Pos2.celsius","MP1_1.RF_MP1_1_Pos2.percentRH","MP1_1.Temp_MP1_1_Pos3.celsius","MP1_1.RF_MP1_1_Pos3.percentRH","MP1_1.Temp_MP1_1_Pos4.celsius","MP1_1.RF_MP1_1_Pos4.percentRH","MP1_1.Temp_MP1_1_Pos5.celsius","MP1_1.RF_MP1_1_Pos5.percentRH","MP1_1.Temp_MP1_1_Pos6.celsius","MP1_1.RF_MP1_1_Pos6.percentRH","MP1_2.Temp_MP1_2_Pos1.celsius","MP1_2.RF_MP1_2_Pos1.percentRH","MP1_2.Temp_MP1_2_Pos2.celsius","MP1_2.RF_MP1_2_Pos2.percentRH","MP1_2.Temp_MP1_2_Pos3.celsius","MP1_2.RF_MP1_2_Pos3.percentRH","MP1_2.Temp_MP1_2_Pos4.celsius","MP1_2.RF_MP1_2_Pos4.percentRH","MP1_2.Temp_MP1_2_Pos5.celsius","MP1_2.RF_MP1_2_Pos5.percentRH","MP1_2.Temp_MP1_2_Pos6.celsius","MP1_2.RF_MP1_2_Pos6.percentRH","MP1_3.RelDisp_MP1_4.percent","MP1_3.AbsDisp_MP1_4.mm","MP1_3.RelDisp_MP2_X.percent","MP1_3.AbsDisp_MP2_X.mm","MP1_3.RelDisp_MP2_Y.percent","MP1_3.AbsDisp_MP2_Y.mm","MP1_5.Temp_MP1_5_Pos1.celsius","MP1_5.RF_MP1_5_Pos1.percentRH","MP1_5.MC_MP1_5_Pos1.percentEMC","MP1_5.Resist_MP1_5_Pos1.Mohm","MP1_5.Temp_MP1_5_Pos2.celsius","MP1_5.RF_MP1_5_Pos2.percentRH","MP1_5.MC_MP1_5_Pos2.percentEMC","MP1_5.Resist_MP1_5_Pos2.Mohm","MP1_5.Temp_MP1_5_Pos3.celsius","MP1_5.RF_MP1_5_Pos3.percentRH","MP1_5.MC_MP1_5_Pos3.percentEMC","MP1_5.Resist_MP1_5_Pos3.Mohm","MP1_5.TempCond_MP1_5.celsius","MP1_5.RFCond_MP1_5.percentRH"];
var listSensors = ["MP1_1.Temp_MP1_1_Pos1.celsius", "MP1_1.RF_MP1_1_Pos1.percentRH", "MP1_1.Temp_MP1_1_Pos2.celsius", "MP1_1.RF_MP1_1_Pos2.percentRH", "MP1_1.Temp_MP1_1_Pos3.celsius", "MP1_1.RF_MP1_1_Pos3.percentRH", "MP1_1.Temp_MP1_1_Pos4.celsius", "MP1_1.RF_MP1_1_Pos4.percentRH", "MP1_1.Temp_MP1_1_Pos5.celsius", "MP1_1.RF_MP1_1_Pos5.percentRH", "MP1_1.Temp_MP1_1_Pos6.celsius", "MP1_1.RF_MP1_1_Pos6.percentRH", "MP1_2.Temp_MP1_2_Pos1.celsius", "MP1_2.RF_MP1_2_Pos1.percentRH", "MP1_2.Temp_MP1_2_Pos2.celsius", "MP1_2.RF_MP1_2_Pos2.percentRH", "MP1_2.Temp_MP1_2_Pos3.celsius", "MP1_2.RF_MP1_2_Pos3.percentRH", "MP1_2.Temp_MP1_2_Pos4.celsius", "MP1_2.RF_MP1_2_Pos4.percentRH", "MP1_2.Temp_MP1_2_Pos5.celsius", "MP1_2.RF_MP1_2_Pos5.percentRH", "MP1_2.Temp_MP1_2_Pos6.celsius", "MP1_2.RF_MP1_2_Pos6.percentRH", "MP1_3.RelDisp_MP1_4.percent", "MP1_3.AbsDisp_MP1_4.mm", "MP1_3.RelDisp_MP2_X.percent", "MP1_3.AbsDisp_MP2_X.mm", "MP1_3.RelDisp_MP2_Y.percent", "MP1_3.AbsDisp_MP2_Y.mm", "MP1_5.Temp_MP1_5_Pos1.celsius", "MP1_5.RF_MP1_5_Pos1.percentRH", "MP1_5.MC_MP1_5_Pos1.percentEMC", "MP1_5.Resist_MP1_5_Pos1.Mohm", "MP1_5.Temp_MP1_5_Pos2.celsius", "MP1_5.RF_MP1_5_Pos2.percentRH", "MP1_5.MC_MP1_5_Pos2.percentEMC", "MP1_5.Resist_MP1_5_Pos2.Mohm", "MP1_5.Temp_MP1_5_Pos3.celsius", "MP1_5.RF_MP1_5_Pos3.percentRH", "MP1_5.MC_MP1_5_Pos3.percentEMC", "MP1_5.Resist_MP1_5_Pos3.Mohm", "MP1_5.TempCond_MP1_5.celsius", "MP1_5.RFCond_MP1_5.percentRH", "Internal.Temp_SC4", "Internal.Count_SC4", "Temp_MP4_1_Pos1", "MP4_1.RF_MP4_1_Pos1", "MP4_1.Temp_MP4_1_Pos2", "MP4_1.RF_MP4_1_Pos2", "MP4_1.Temp_MP4_1_Pos3", "MP4_1.RF_MP4_1_Pos3", "MP4_1.Temp_MP4_1_Pos4", "MP4_1.RF_MP4_1_Pos4", "MP4_1.Temp_MP4_1_Pos5", "MP4_1.RF_MP4_1_Pos5", "MP4_1.Temp_MP4_1_Pos6", "MP4_1.RF_MP4_1_Pos6", "MP4_1.AirPres_MP4_1", "Temp_MP4_2_Pos1", "MP4_2.RF_MP4_2_Pos1", "MP4_2.Temp_MP4_2_Pos2", "MP4_2.RF_MP4_2_Pos2", "MP4_2.Temp_MP4_2_Pos3", "MP4_2.RF_MP4_2_Pos3", "MP4_2.Temp_MP4_2_Pos4", "MP4_2.RF_MP4_2_Pos4", "MP4_2.Temp_MP4_2_Pos5", "MP4_2.RF_MP4_2_Pos5", "MP4_2.Temp_MP4_2_Pos6", "MP4_2.RF_MP4_2_Pos6","AvgWind_Weather", "WEATHER.MomWind_Weather", "WEATHER.Temp_Weather", "WEATHER.DirWind_Weather", "WEATHER.RF_Weather", "WEATHER.RainDay_Weather", "WEATHER.RainRate_Weather", "WEATHER.AirPres_Weather", "AvgWind_Weather", "Internal.Temp_SC1.celsius", "Internal.Count_SC1.celsius", "WEATHER.MomWind_Weather", "WEATHER.Temp_Weather", "WEATHER.DirWind_Weather", "WEATHER.RF_Weather", "WEATHER.RainDay_Weather", "WEATHER.RainRate_Weather", "WEATHER.AirPres_Weather"];
@ -57,9 +57,6 @@ var listParametersOptions = "";
for (var i = 0; i < listParameters.length; i++) {
listParametersOptions += `<option value="${listParameters[i]}">${listParameters[i]}</option>`;
}
// cl(listFamiliesOptions);
// cl(listSensorsOptions);
///////////////////////////////////////////
// Div diagrams buttons: remove, popup:
@ -200,10 +197,6 @@ function openPopupCanvas(button) {
// Extract the HTML file name
var fileName = currentURL.substring(currentURL.lastIndexOf('/') + 1);
// console.log("Current URL: " + currentURL);
// console.log("HTML File Name: " + fileName);
// Get the list of projects
var count = 0; var myNumber;
const projectList = [];
@ -224,9 +217,13 @@ function openPopupCanvas(button) {
////////////////////////////////////////////////////
// DEFAULT INTERFACE BUILDING
document.getElementById("myProject").innerHTML = "My Numner "+myNumber;
var myHouse = PROJECTS.items[myNumber];
document.getElementById("h1_title").innerHTML = h1_title;
document.getElementById("subtitle").innerHTML = subtitle;
// Adding HTML navbar
document.getElementById("navbar").innerHTML = HTML_navBar;
@ -266,7 +263,7 @@ document.getElementById("HDParameter").innerHTML = listParametersOptions;
// house info card:
var card = `
<h5 class="${myHouse.name}">${myHouse.hname}</h5>
<h3 class="${myHouse.name}">${myHouse.hname}</h3>
<div class="d-flex">
<div class="row">
<div class="col-md-6">
@ -343,9 +340,6 @@ document.getElementById("HDParameter").innerHTML = listParametersOptions;
//-----------------------------
// createParallel
async function createParallel(myid,formId, myFormData) {
// cl("form data:: "+myFormData);
// API Request
// Static query paramenters:
const myForm = document.getElementById(formId);
switch (formId) {
case "PD":
@ -357,7 +351,6 @@ document.getElementById("HDParameter").innerHTML = listParametersOptions;
var family = document.getElementById("PDFamSensor").value;
var type = document.getElementById("PDParameter").value;
// Building API query
//var apiUrl = `parallel/dialy?family=${family}&type=${type}&day=${day}`;
var apiUrl = "parallel/daily?family="+family+"&type="+type+"&day="+day;
makeApiRequest(formId, apiUrl, myid, myTitle, family, type, day);
@ -416,11 +409,6 @@ document.getElementById("HDParameter").innerHTML = listParametersOptions;
// BUILDING API query
var apiUrl = "grid/weekly?sensor="+sensor+"&type="+type+"&year="+year+"&week="+week;
makeApiRequest(formId, apiUrl, myid, myTitle, sensor, type, inDate);
// Example data
// var data = [29.33, 28.97, 27.94, 24.75, 23.84, 26.63, 23.32];
// // Call the function with the divId "heatmap-container," starting date "01-01-2023," and the example data
// do_grid_weekly(myid, "01-01-2023", data);
break;
//-------------------------------
@ -434,12 +422,6 @@ document.getElementById("HDParameter").innerHTML = listParametersOptions;
// BUILDING API query
var apiUrl = "grid/monthly?sensor="+sensor+"&type="+type+"&year="+year+"&month="+month;
makeApiRequest(formId, apiUrl, myid, myTitle, sensor, type, year, month);
// var data = [27.94, 20.84, 28.80, 28.90, 27.89, 27.87, 27.80, 27.83, 27.83, 27.89, 27.90, 27.89, 27.89, 27.94, 27.84, 27.89, 27.83, 27.79, 27.91, 27.81, 27.86, 27.83, 27.81, 27.83, 27.90, 27.90, 27.83, 27.86, 27.83, 27.84, 27.90];
// var year = "2023";
// do_grid_monthly(myid, 5, 2023, data); // For May 2023
break;
//-------------------------------
@ -971,11 +953,9 @@ function do_horizon_row(data, myid, title, myDates) {
// Calculate the y-value based on the mouse position
var chartHeight = horizonChart.height();
var yValue = (y / chartHeight) * (d[0][0].max - d[0][0].min) + d[0][0].min;
// var yValue = horizonChart.y().invert(y);
// Retrieve the corresponding date
var dateIndex = Math.floor(x / (canvas.node().width / myDates.length));
//var date = myDates[dateIndex];
var date = myDates[dateIndex];
// Create a tooltip element
@ -995,10 +975,8 @@ function do_horizon_row(data, myid, title, myDates) {
.style('position', 'relative');
// Display y value and date
// tooltip.html(`Date: ${date}<br>Value: ${yValue.toFixed(2)}`);
tooltip.html(`Date: ${date}<br>Value: ${yValue}`);
// Remove the tooltip when mouseout
canvas.on('mouseout', function () {
tooltip.remove();
@ -1137,9 +1115,6 @@ document.querySelectorAll('button[type="submit"]').forEach(button => {
var div = doc.querySelector('div[data-lt-tmp-id^="lt-"]');
var textData = div ? div.innerHTML : 'No div found';
writeInTXT(formId, textData);
// cl("Addtext:");
// cl(fromEditor);
// cl(textData);
} else {
writeIn(formId, formData);
}
@ -1367,6 +1342,20 @@ var firstOpen = true;
// > makeApiRequiest
// > submit nuttons listener
//function to prepare the tha API request upon a board JSON
function loadBoards(myJSON) {
myJSON = '';
//Prepara the variables:
// formId, apiUrl, myid, myTitle, ...args
// for each entry of JSON: make calls: createDiv
// Check if is TXT or DIAGRANM: then call makeApiRequest
}
// Server API:
// Define a function to make the API request
function makeApiRequest(formId, apiUrl, myid, myTitle, ...args) {
@ -1374,7 +1363,6 @@ function makeApiRequest(formId, apiUrl, myid, myTitle, ...args) {
// Store all arguments in an array
myTitle = myTitle || ""; // Define emty if undefined:
myArgs.push(...args);
// cl(myArgs);
switch (formId) {
case "PD":
var family = myArgs[0];
@ -1503,10 +1491,7 @@ function makeApiRequest(formId, apiUrl, myid, myTitle, ...args) {
async function createHiddenVauesDiv(myid, dataName, data) {
// final childs for each data var
var mainDiv = document.getElementById(myid);
// cl("hidden:")
// cl(mainDiv);
const childDiv = document.createElement("div");
//childDiv.id = "hiddenData";
const lastValueElement = document.createElement("div");
lastValueElement.id = dataName;
var data2 = JSON.stringify(data);

Write Preview
Loading…
Cancel
Save