143 lines
4.4 KiB
JavaScript
143 lines
4.4 KiB
JavaScript
let myChart; // Declare a global variable to hold the chart instance
|
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
// Objects / variables
|
|
const video_selector = document.getElementById("video_selector");
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const projectId = urlParams.get("id");
|
|
|
|
// Initialisation
|
|
generateViewMetric(projectId);
|
|
|
|
PopulateSelect(video_selector, projectId);
|
|
|
|
video_selector.addEventListener("change", () => {
|
|
generateViewMetric(projectId);
|
|
});
|
|
|
|
document.getElementById("projets").addEventListener("click", () => {
|
|
window.location.href = "../index.html";
|
|
current_project = "";
|
|
});
|
|
|
|
global_project_list = JSON.parse(localStorage.getItem("project_list"));
|
|
document.getElementById("name_project").innerHTML =
|
|
global_project_list[projectId - 1].name;
|
|
|
|
fetch("https://timelapse.kerboul.me/api/smile")
|
|
.then((response) => response.blob())
|
|
.then((blob) => {
|
|
const url = URL.createObjectURL(blob);
|
|
let tableBody = document.getElementById("imageSource");
|
|
let row = document.createElement("tr");
|
|
|
|
for (let i = 0; i < 1500; i++) {
|
|
let imageTD = document.createElement("td");
|
|
imageTD.innerHTML = `<img id="${i}" src="${url}" />`;
|
|
row.appendChild(imageTD);
|
|
|
|
if ((i + 1) % 3 === 0 && i !== 0) {
|
|
tableBody.appendChild(row);
|
|
row = document.createElement("tr"); // Create a new row
|
|
}
|
|
}
|
|
|
|
// Append the last row if there are remaining images
|
|
if (row.childNodes.length > 0) {
|
|
tableBody.appendChild(row);
|
|
}
|
|
});
|
|
|
|
// Add event listener for the toggle button
|
|
document.getElementById("toggle-view").addEventListener("click", () => {
|
|
const tableImage = document.getElementById("content1");
|
|
if (tableImage.classList.contains("hiddenTable")) {
|
|
tableImage.classList.remove("hiddenTable");
|
|
tableImage.classList.add("full-view");
|
|
document.getElementById("toggle-view").innerHTML = "See first images";
|
|
} else {
|
|
tableImage.classList.remove("full-view");
|
|
tableImage.classList.add("hiddenTable");
|
|
document.getElementById("toggle-view").innerHTML = "See all images";
|
|
}
|
|
});
|
|
});
|
|
|
|
async function generateViewMetric(projectId) {
|
|
const ctx = document.getElementById("metric_viewer").getContext("2d");
|
|
let Hygrometrie = [];
|
|
let Temperature = [];
|
|
let datesMeasurement = [];
|
|
|
|
let measurements;
|
|
let current_video_datas;
|
|
|
|
// Wait for the video_selector to be populated
|
|
await new Promise((resolve) => {
|
|
const checkExist = setInterval(() => {
|
|
if (document.getElementById("video_selector").options.length > 0) {
|
|
clearInterval(checkExist);
|
|
resolve();
|
|
}
|
|
}, 100); // check every 100ms
|
|
});
|
|
|
|
const videoId = document.getElementById("video_selector").value;
|
|
|
|
measurements = await getDataMetrics(projectId);
|
|
current_video_datas = await getDataVideoFromApi(videoId);
|
|
|
|
let samples = convertStringToArray(current_video_datas[0]["measurement_ids"]);
|
|
tempoMeasure = filterAndSortMeasurementsByIds(measurements,samples)
|
|
tempoMeasure.forEach((measure) => {
|
|
datesMeasurement.push(measure.timestamp)
|
|
Temperature.push(measure.temperature)
|
|
Hygrometrie.push(measure.hydrometrie)
|
|
});
|
|
|
|
// Destroy the existing chart instance if it exists
|
|
if (myChart) {
|
|
myChart.destroy();
|
|
}
|
|
|
|
// Create a new chart instance
|
|
myChart = new Chart(ctx, {
|
|
type: "line",
|
|
data: {
|
|
labels: datesMeasurement,
|
|
datasets: [
|
|
{
|
|
label: "Température (F°)",
|
|
data: Temperature,
|
|
fill: false,
|
|
borderColor: "rgba(75, 192, 192, 1)",
|
|
tension: 0.1,
|
|
yAxisID: "y", // Use the default y-axis
|
|
},
|
|
{
|
|
label: "Hygrometrie (%)",
|
|
data: Hygrometrie,
|
|
fill: false,
|
|
borderColor: "rgba(153, 102, 255, 1)",
|
|
tension: 0.1,
|
|
yAxisID: "y1", // Use the second y-axis
|
|
},
|
|
],
|
|
},
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
position: "left",
|
|
},
|
|
y1: {
|
|
beginAtZero: true,
|
|
position: "right",
|
|
grid: {
|
|
drawOnChartArea: false, // Only want the grid lines for one axis to show up
|
|
},
|
|
},
|
|
},
|
|
},
|
|
});
|
|
} |