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

WEB:: ready to show the first protoype in pre-alfa only-client-side

Browse Source
Rafael
jaume-nualart 8 months ago
parent a4baccc428
commit 73761e6084
2 changed files with 237 additions and 88 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. 165
      web-html/dash.html
  2. 160
      web-html/js/dash.js

165
web-html/dash.html
Unescape View File

@ -110,6 +110,7 @@
<!-- <span class="badge bg-danger">Parallel diagrams</span> -->
<button type="button" class="btn btn-danger rounded-pill" data-bs-toggle="modal" data-bs-target="#parallelModal">new Parallel</button>
<button type="button" class="btn btn-secondary rounded-pill" onclick="writeIn('col-left');">TEST</button>
<button type="button" class="btn btn-secondary rounded-pill" onclick="writeOut('parallel-left');">TEST</button>
<button type="button" class="btn btn-secondary rounded-pill" onclick="writeInTXT('col-left');">TXT</button>
<!-- <button type="button" class="btn btn-danger" onclick="dialogPopup('parallel');">TEST Parallel</button> -->
</div>
@ -135,15 +136,28 @@
TODO:
> DONE Adapt all the ids to each diagram (so, no repeated ids)
> DONE ADD sensors selection before the time selection. In top of the Modal
> For each diagram: add metainfo -> title and info about data, legend (in case is not there) and axis info.
Added title only
> DONE Resize columns
> DONE Write function for generaion of Grids and Horizon
DONE > Parallel: change Choose sensor for Choose SensorFamily
DONE > Horizon: change Daily for Weekly
> Remove Print button
> Add button -> EDIT diagram:
1- when submit form -> write a hidden DIV after the diagram's DIV with the form values
2- When click edit button -> open the form -> Make the option SEÑECTED -> Fill in the values from the hidden DIV.
> OPEN diagrams in new window!! -> Add button to the form [In a new window]
DIAGRAMS:
> Parallel:
>>
> Grid:
>> Check calendar wiew ad other views
>> Add "axis" nemes
> Horizon: -> OR change to new d3js area charts ???)
DONE >> Check canvas contents
>> Check mouseover value
>> Add horizontal-axis values
> HALF DONE For each diagram: PDF, Print, Data export and Delete-diagram buttons
> THEN server-side!
> Check FORMS -> Get selected data when summit forms
@ -169,12 +183,12 @@
<div class="modal-content">
<div class="modal-header">
<div id="parallel-v-pills-tab">
<ul class="nav flex-column nav-pills me-6" id="parallel-pills-tab" role="tablist">
<ul class="nav flex-column nav-pills me-3" id="parallel-pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="disabled nav-link fw-bold" id="parallel-pills-default-tab" data-bs-toggle="pill" data-bs-target="#parallel-pills-default" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Parallel diagram</button>
<button class="nav-link fw-bold active" id="parallel-pills-intro-tab" data-bs-toggle="pill" data-bs-target="#parallel-pills-intro" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Parallel diagram</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link active" id="parallel-pills-default-tab" data-bs-toggle="pill" data-bs-target="#parallel-pills-default" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Add text</button>
<button class="nav-link" id="parallel-pills-default-tab" data-bs-toggle="pill" data-bs-target="#parallel-pills-default" type="button" role="tab" aria-controls="pills-empty" aria-selected="true">Add text</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="parallel-pills-home-tab" data-bs-toggle="pill" data-bs-target="#parallel-pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Yearly view</button>
@ -191,47 +205,45 @@
<!-- TABS CONTENT --------------------------------------------------- -->
<div class="tab-content col-md-10 myheight" id="pills-tabContent">
<div class="tab-content col-md-10" id="pills-tabContent">
<!-- INTRO TAB------------------------ -->
<div class="tab-pane fade show active" id="parallel-pills-intro" role="tabpanel" aria-labelledby="pills-intro-tab">
<p>Welcome to diagram generation :</p>
</div>
<!-- DEFAULT TAB------------------------ -->
<div class="tab-pane fade show active" id="parallel-pills-default" role="tabpanel" aria-labelledby="pills-default-tab">
<div id="parallelSelectFamily" class="input-group date">
<p>Add any text: comments, descriptions, definitions,... :</p>
<div id="editor-container"></div>
<form id="PText" class="addtext">
<div id="editor-container"></div>
<div class="mytextarea" id="editor1"></div>
<div class="tab-pane fade show" id="parallel-pills-default" role="tabpanel" aria-labelledby="pills-default-tab">
<p>Add any text: comments, descriptions, definitions,... :</p>
<form id="HText" class="addtext">
<div class="mytextarea" id="editor3"></div>
<!-- SUBMIT BUTTON -->
<p>&nbsp;</p>
<div class="col-auto">
<div class="col-auto">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
<!-- YEARLY VIEW TAB------------------ -->
<div class="tab-pane fade show" id="parallel-pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
<p>Yearly view</p>
<form id="PY">
<p>Selelct a sensor family:</p>
<div>
<span class="col-md-3">Diagram title: </span>
<input id="PYTitle" name="PYTitle" type="text" class="span2">
</div>
<p>&nbsp;</p>
<p>Selelct a sensor family:</p>
<div id="SelectSensor" class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-list-ul" aria-hidden="true"></i></span>
<select id="PYSensor" name="PYSensor" class="form-select col-md-3 span2" aria-label="parallel-family-select">
<option selected>select sensor</option>
<option value="hause1-sennsor1">sensor 1</option>
<option value="hause1-sennsor2">sensor 2</option>
<option value="hause1-sennsor3">sensor 3</option>
<option value="hause1-sennsor4">sensor 4</option>
<option value="hause1-sennsor5">sensor 5</option>
<option selected>select sensor family</option>
<option value="hause1-sennsor1">family 1</option>
<option value="hause1-sennsor2">family 2</option>
<option value="hause1-sennsor3">family 3</option>
<option value="hause1-sennsor4">family 4</option>
<option value="hause1-sennsor5">family 5</option>
</select>
</div>
<p>&nbsp;</p>
@ -270,12 +282,12 @@
<div id="SelectSensor" class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-list-ul" aria-hidden="true"></i></span>
<select id="PMSensor" name="PMSensor" class="form-select col-md-3 span2" aria-label="parallel-family-select">
<option selected>select sensor</option>
<option value="hause1-sennsor1">sensor 1</option>
<option value="hause1-sennsor2">sensor 2</option>
<option value="hause1-sennsor3">sensor 3</option>
<option value="hause1-sennsor4">sensor 4</option>
<option value="hause1-sennsor5">sensor 5</option>
<option selected>select sensor family</option>
<option value="hause1-sennsor1">family 1</option>
<option value="hause1-sennsor2">family 2</option>
<option value="hause1-sennsor3">family 3</option>
<option value="hause1-sennsor4">family 4</option>
<option value="hause1-sennsor5">family 5</option>
</select>
</div>
<p>&nbsp;</p>
@ -344,12 +356,12 @@
<div id="SelectSensor" class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-list-ul" aria-hidden="true"></i></span>
<select id="PDSensor" name="PDSensor" class="form-select col-md-3 span2" aria-label="parallel-family-select">
<option selected>select sensor</option>
<option value="hause1-sennsor1">sensor 1</option>
<option value="hause1-sennsor2">sensor 2</option>
<option value="hause1-sennsor3">sensor 3</option>
<option value="hause1-sennsor4">sensor 4</option>
<option value="hause1-sennsor5">sensor 5</option>
<option selected>select sensor family</option>
<option value="hause1-sennsor1">family 1</option>
<option value="hause1-sennsor2">family 2</option>
<option value="hause1-sennsor3">family 3</option>
<option value="hause1-sennsor4">family 4</option>
<option value="hause1-sennsor5">family 5</option>
</select>
</div>
<p>&nbsp;</p>
@ -392,7 +404,7 @@
<div id="grid-v-pills-tab">
<ul class="nav flex-column nav-pills me-3" id="grid-pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="disabled nav-link fw-bold active" id="grid-pills-default-tab" data-bs-toggle="pill" data-bs-target="#grid-pills-default" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Grid diagram</button>
<button class="nav-link fw-bold active" id="grid-pills-intro-tab" data-bs-toggle="pill" data-bs-target="#grid-pills-intro" type="button" role="tab" aria-controls="pills-empty" aria-selected="true">Grid diagram</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="grid-pills-default-tab" data-bs-toggle="pill" data-bs-target="#grid-pills-default" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Add text</button>
@ -413,11 +425,16 @@
<div class="tab-content col-md-10" id="pills-tabContent">
<!-- INTRO TAB------------------------ -->
<div class="tab-pane fade show active" id="grid-pills-intro" role="tabpanel" aria-labelledby="pills-intro-tab">
<p>Welcome to diagram generation :</p>
</div>
<!-- DEFAULT TAB------------------------ -->
<div class="tab-pane fade show active" id="grid-pills-default" role="tabpanel" aria-labelledby="pills-default-tab">
<div id="gridSelectFamily" class="input-group date">
<p>Add any text: comments, descriptions, definitions,... :</p>
<form id="GText" class="addtext">
<div class="tab-pane fade show" id="grid-pills-default" role="tabpanel" aria-labelledby="pills-default-tab">
<p>Add any text: comments, descriptions, definitions,... :</p>
<form id="HText" class="addtext">
<div class="mytextarea" id="editor3"></div>
<!-- SUBMIT BUTTON -->
<p>&nbsp;</p>
@ -425,8 +442,6 @@
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
<!-- YEARLY VIEW TAB------------------ -->
@ -530,7 +545,7 @@
<!-- WEEKLY (day) VIEW TAB------------------ -->
<div class="tab-pane fade" id="grid-pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
<p>Weekly view: <i>select a week by clicking on a Monday.</i></p>
<form id="GW" class="addtext">
<form id="GW">
<div>
<span class="col-md-3">Diagram title: </span>
<input id="GWTitle" name="GWTitle" type="text" class="span2">
@ -590,7 +605,7 @@
<div id="horizon-v-pills-tab">
<ul class="nav flex-column nav-pills me-3" id="horizon-pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="disabled nav-link fw-bold active" id="horizon-pills-default-tab" data-bs-toggle="pill" data-bs-target="#horizon-pills-default" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Horozon diagram</button>
<button class="nav-link fw-bold active" id="horizon-pills-intro-tab" data-bs-toggle="pill" data-bs-target="#horizon-pills-intro" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Horozon diagram</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="horizon-pills-default-tab" data-bs-toggle="pill" data-bs-target="#horizon-pills-default" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Add text</button>
@ -602,7 +617,7 @@
<button class="nav-link" id="horizon-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#horizon-pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Monthly view</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="horizon-pills-contact-tab" data-bs-toggle="pill" data-bs-target="#horizon-pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Daily view</button>
<button class="nav-link" id="horizon-pills-contact-tab" data-bs-toggle="pill" data-bs-target="#horizon-pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Weekly view</button>
</li>
</ul>
</div>
@ -611,9 +626,14 @@
<!-- TABS CONTENT --------------------------------------------------- -->
<div class="tab-content col-md-10" id="pills-tabContent">
<!-- INTRO TAB------------------------ -->
<div class="tab-pane fade show active" id="horizon-pills-intro" role="tabpanel" aria-labelledby="pills-intro-tab">
<p>Welcome to diagram generation :</p>
</div>
<!-- DEFAULT TAB------------------------ -->
<div class="tab-pane fade show active" id="horizon-pills-default" role="tabpanel" aria-labelledby="pills-default-tab">
<div class="tab-pane fade show" id="horizon-pills-default" role="tabpanel" aria-labelledby="pills-default-tab">
<p>Add any text: comments, descriptions, definitions,... :</p>
<form id="HText" class="addtext">
<div class="mytextarea" id="editor3"></div>
@ -740,11 +760,11 @@
<div id="horizon-SelectYearMonth" class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-calendar3" aria-hidden="true"></i></span>
<select id="HMYearMonth" name="HMYearMonth" type="text" class="span2">
</select>
<input id="HMYearMonth" name="GMYearMonth" type="text" class="span2">
</div>
<p>&nbsp;</p>
<!-- TIME SELECT -->
<div class="form-group col-md-12">
<label for="time">Time</label>
@ -806,6 +826,7 @@
<!-- DD/MM/YYYY SELECT -->
<div id="horizonSelectYearMonthWeek" class="input-group date">
<label for="time">Select a week,<br />(clicking in a Monday)</label>
<span class="input-group-text input-group-addon"><i class="bi bi-calendar3" aria-hidden="true"></i></span>
<input id="HWYear" name="HWYear" type="text" class="span2">
</div>
@ -1052,11 +1073,14 @@ function handleSubmit(event) {
}
async function createMyDiv(myid, myColumn) {
myButtons =`
<span class="corner-close" onclick="removeDiv(this)"><i class="fa fa-close"></i></span>
<span class="corner-popup" onclick="openPopup(this)"><i class="fa fa-window-maximize"></i></span>
<span class="corner-print" onclick="printWindow(this)"><i class="fa fa-print"></i></span>
`;
var buttonOpenPopup = [];
buttonOpenPopup["col-left"] = '<span class="corner-popup" onclick="openPopup(this)"><i class="fa fa-window-maximize"></i></span>';
buttonOpenPopup["col-center"] = '<span class="corner-popup" onclick="openPopup(this)"><i class="fa fa-window-maximize"></i></span>';
buttonOpenPopup["col-right"] = '<span class="corner-popup" onclick="openPopupCanvas(this)"><i class="fa fa-window-maximize"></i></span>';
myButtons ='<span class="corner-close" onclick="removeDiv(this)"><i class="fa fa-close"></i></span>'+buttonOpenPopup[myColumn]+'<span class="corner-print" onclick="printWindow(this)"><i class="fa fa-print"></i></span>';
cl(buttonOpenPopup[myColumn]);
myTitle = "<h4>This is the title</h4>";
node = document.createElement("div");
node.setAttribute("id", myid);
@ -1067,17 +1091,6 @@ function handleSubmit(event) {
document.getElementById(myid).innerHTML = myButtons+myTitle;
}
// function addButtonsToDiv(targetDiv) {
// myButtons =`
// <span class="corner-close" onclick="removeDiv(this)"><i class="fa fa-close"></i></span>
// <span class="corner-popup" onclick="openPopup(this)"><i class="fa fa-window-maximize"></i></span>
// <span class="corner-print" onclick="printWindow(this)"><i class="fa fa-print"></i></span>
// `;
// // Get a reference to the 'myDiv' element
// var div = document.getElementById(targetDiv);
// // Append the content from 'myButtons' to 'myDiv'
// div.innerHTML = myButtons;
// }
////////////////////////////////////////////////
//// DIAGRAMS
@ -1122,6 +1135,7 @@ function handleSubmit(event) {
// Horizon
async function createHorizon(myid) {
var path = "DATA/projects/"+myHouse.name+"/horizon/";
var mytest = [{ x: 0, y: 10 },{ x: 1, y: 20 },{ x: 2, y: 30 }] // ...more data points...
datas = ["Temp_MP1_1_Pos1", "Temp_MP1_1_Pos2", "Temp_MP1_1_Pos3", "Temp_MP1_1_Pos4", "Temp_MP1_1_Pos5", "Temp_MP1_1_Pos6"];
//, "Temp_MP1_2_Pos1", "Temp_MP1_2_Pos2", "Temp_MP1_2_Pos3", "Temp_MP1_2_Pos4", "Temp_MP1_2_Pos5", "Temp_MP1_2_Pos6"];
datas.forEach(element => {
@ -1129,6 +1143,7 @@ function handleSubmit(event) {
require(file, true);
horizon_row(element, myid);
});
horizon_row(mytest, myid);
cl(myid);
//parallel("#"+myid, myxs, sample);
@ -1151,7 +1166,7 @@ function handleSubmit(event) {
format: "mm/yyyy",
weekStart: 1,
startDate: "01/2018",
endDate: "12(2023",
endDate: "12/2023",
startView: 1,
minViewMode: 1,
maxViewMode: 2,

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

@ -117,7 +117,7 @@ function do_block(num_nodes, nodesXline, nodex, nodey, stroke, nx, ny) {
}
// HORIZON
function horizon_row(data, myid) {
function horizon_rowXXX(data, myid) {
var horizonChart = d3.horizonChart()
.height(50)
.title(data)
@ -133,21 +133,71 @@ function horizon_row(data, myid) {
}
function horizon_row(data, myid) {
var horizonChart = d3.horizonChart()
.height(50)
.title(data)
.colors(['#313695', '#4575b4', '#74add1', '#abd9e9', '#fee090', '#fdae61', '#f46d43', '#d73027']);
var horizons1 = d3.select(myid).selectAll('.horizon1')
.data([eval(data)])
.enter()
.append('div')
.attr('class', 'horizon')
.attr('title', function (d, i) {
return i;
})
.each(horizonChart)
.each(function (d, i) {
var canvas = d3.select(this).select('canvas');
canvas.on('mouseover', function () {
// Get the mouse position relative to the canvas
var [x, y] = d3.mouse(this);
// Calculate the y-value based on the mouse position
var chartHeight = horizonChart.height(); // You may need to adjust this based on your chart's configuration
var yValue = (y / chartHeight) * (d.max - d.min) + d.min; // Adjust this calculation as needed
// Create a tooltip element
var tooltip = d3.select('body').append('div')
.attr('class', 'tooltip')
.style('position', 'absolute')
.style('background-color', 'rgba(255, 255, 255, 0.8)')
.style('padding', '5px')
.style('border', '1px solid #ddd')
.style('border-radius', '3px')
.style('pointer-events', 'none')
.style('font-size', '12px');
// Position the tooltip next to the mouse
tooltip.style('left', (x + 10) + 'px')
.style('top', (y + 10) + 'px');
// Display x and y values
tooltip.html('X: ' + x.toFixed(2) + '<br>Y: ' + yValue.toFixed(2));
// Remove the tooltip when mouseout
canvas.on('mouseout', function () {
tooltip.remove();
});
});
});
}
////////////////
// FUNCTIONS
// Shortening console.log()
function cl(print) {return console.log(print)};
// Load data as JS files
// // file to load dinamycally_
// var fileJS = "DATA/projects/house1/parallel/2-xs.js";
// // Calling the loading function:
// require(fileJS);
// // Getting the data:
// console.log("myxs");
// console.log(myxs);
function require(script) {
$.ajax({
url: script,
@ -209,7 +259,7 @@ function require(script) {
}
// Function to open a new window with the div content
function openPopupXXX(button) {
function openPopup(button) {
const divContent = button.parentElement.innerHTML;
const newWindow = window.open('', '', 'width=600,height=400');
newWindow.document.write('<html><head><title>Popup Window</title></head><body>');
@ -218,7 +268,7 @@ function require(script) {
newWindow.document.close();
}
function openPopup(button) {
function openPopupXX(button) {
const divContent = button.parentElement.innerHTML;
// Open a new window
@ -237,7 +287,7 @@ function require(script) {
newWindowHead.appendChild(element.cloneNode(true));
}
}
// Write the content of the DIV to the new window's body
newWindow.document.write('<div>' + divContent + '</div>');
@ -248,6 +298,90 @@ function require(script) {
newWindow.document.close();
}
// @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@2222
function openPopupCanvas(button) {
function exportCanvasToNewWindow(dataURLs, textContents, titles, initialTitle) {
// Open a new window
const newWindow = window.open('', '', 'width=800,height=400');
// Write the basic HTML structure to the new window
newWindow.document.write('<html><head><title>Canvas Export</title></head><body>');
// Create an <h2> element for the initialTitle and prepend it to the container
const initialH2 = newWindow.document.createElement('h2');
initialH2.textContent = initialTitle;
newWindow.document.body.appendChild(initialH2);
// Create a container div for canvas, text, and titles
const containerDiv = newWindow.document.createElement('div');
containerDiv.style.display = 'flex';
containerDiv.style.flexWrap = 'wrap'; // Allow elements to wrap to the next line
// Loop through each canvas, text, and title
for (let i = 0; i < dataURLs.length; i++) {
// Create a div for each canvas, text, and title
const div = newWindow.document.createElement('div');
div.style.marginRight = '20px'; // Add spacing between elements
// Create an image element with the captured canvas content
const canvasImage = new Image();
canvasImage.src = dataURLs[i];
div.appendChild(canvasImage);
// Create a <p> element for the text content
const textElement = newWindow.document.createElement('p');
textElement.textContent = textContents[i];
div.appendChild(textElement);
// Create a <span> element for the title content
const titleElement = newWindow.document.createElement('span');
titleElement.className = 'title';
titleElement.textContent = titles[i];
div.appendChild(titleElement);
// Append the div to the container
containerDiv.appendChild(div);
}
// Append the container div to the new window
newWindow.document.body.appendChild(containerDiv);
// Close the HTML structure
newWindow.document.write('</body></html>');
newWindow.document.close();
}
// Get all the canvas, text, and title elements inside the div with id "col-right"
const colRightDiv = document.getElementById('col-right');
const canvasElements = colRightDiv.querySelectorAll('canvas');
const textElements = colRightDiv.querySelectorAll('p');
const titleElements = colRightDiv.querySelectorAll('.title');
// Extract data URLs from canvas elements
const dataURLs = Array.from(canvasElements).map((canvas) => canvas.toDataURL());
// Extract text content from <p> elements
const textContents = Array.from(textElements).map((p) => p.textContent);
// Extract title content from <span class="title"> elements
const titles = Array.from(titleElements).map((span) => span.textContent);
// Define the initialTitle
const initialTitle = "Initial Title"; // Replace with your desired title
// Call the function to export all canvas, text, and title content to a new window
exportCanvasToNewWindow(dataURLs, textContents, titles, initialTitle);
}

Write Preview
Loading…
Cancel
Save