Voilà, voilà :
String pageHTML = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ESP32 Routeur photovoltaïque</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
</head>
<body onload="init();">
<h1 style="text-align: center;">ESP32 Routeur photovoltaïque</h1>
<div style="text-align: center;">
<button id="maj-DT">MaJ Date & Heure</button>
<button onclick="updateChart(1);" class="button button-data">Forme Courant & Tension</button>
<button onclick="updateChart(2);" class="button button-data">Historique Puissance</button>
<a href="download-data"><button class="button button-data">Télécharger les données</button></a>
</div>
<div id = "txt1">
<p>Date et Heure : <span id="DetH">0.00</span></p>
<p>Puissance active (W) : <span id="PA">0.00</span></p>
</div>
<div id = "txt2">
<p>Puissance max : <input type="number" id="pMaxMod" value="1000" min="0"> <button onclick="ajusterPmax()">Ajuster</button></p>
</div>
<canvas id="myChart1" width="800" height="300" style="display: none"></canvas>
<canvas id="myChart2" width="800" height="300" style="display: none"></canvas>
<script>
let txt1 = document.getElementById("txt1");
let txt2 = document.getElementById("txt2");
const interval = 2000;
let intervalId = -1;
let pAjustee = 1000; // Limite par défaut du nombre de points affichés
function init() {
txt1.style.display = "none";
txt2.style.display = "none";
}
function ajusterPmax() {
const newPmax = document.getElementById('pMaxMod').value;
const parsedPmax = parseInt(newPmax, 10); // On force la base 10 pour la conversion
if (!isNaN(parsedPmax) && parsedPmax > 0) {
pAjustee = parsedPmax;
chart2.options.scales.y0.max = pAjustee;
chart2.update();
fetch('/modifVal?val='+pAjustee);
}
}
document.getElementById('maj-DT').addEventListener('click', function() {
fetch('/maj-DT')
.then(response => response.text())
.then(data => {
document.getElementById('DetH').textContent = data;
});
});
const ctx1 = document.getElementById('myChart1').getContext('2d');
const chart1 = new Chart(ctx1, {
type: 'line',
data: {
labels: [],
datasets: [{
label: "Tension",
yAxisID: 'y0',
data: [],
borderColor: 'rgb(75, 192, 192)',
tension: 0.3 // Filtrage du signal ; doit être compris entre 0 (pas de filtrage) et 1 (filtrage max)
},
{
label: "Courant",
yAxisID: 'y1',
data: [],
borderColor: 'rgb(192, 192, 75)',
tension: 0.3
}]
},
options: {
scales: {
x: {
display: true,
title : {
display: true,
text: 'Echantillons',
}
},
y0: {
display: true,
position: 'left',
title : {
display: true,
text: 'Tension (V)',
}
},
y1: {
display: true,
position: 'left',
title : {
display: true,
text: 'Courant (A)',
}
}
}
}
});
const ctx2 = document.getElementById('myChart2').getContext('2d');
const chart2 = new Chart(ctx2, {
type: 'line',
data: {
labels: [],
datasets: [{
pointRadius: 0,
label: "Historique Puissance",
yAxisID: 'y0',
data: [],
borderColor: 'blue',
tension: 0.3 // Filtrage du signal ; doit être compris entre 0 (pas de filtrage) et 1 (filtrage max)
},
{
pointRadius: 0,
label: "Historique Tension",
yAxisID: 'y1',
data: [],
borderColor: 'green',
tension: 0.3
},
{
pointRadius: 0,
label: "Historique Courant",
yAxisID: 'y2',
data: [],
borderColor: 'red',
tension: 0.3
}]
},
options: {
plugins: {
zoom: {
zoom: {
drag: { // En sélectionnant une zone autour de la valeur à zoommer
enabled: true,
},
wheel: { // Avec la molette de la souris
enabled: true,
},
pinch: { // En pincement avec deux doigts sur un écran tactile
enabled: true,
},
mode: 'x',
onZoom: ({ chart2 }) => console.log('Debut Zoom'),
onZoomComplete: ({ chart2 }) => console.log('Fin Zoom'),
},
pan: {
enabled: true,
mode: 'x',
modifierKey: 'ctrl',
onPan: ({ chart2 }) => console.log('Debut Pan'),
onPanStart: ({ chart2 }) => console.log('Lancement Pan'),
onPanComplete: ({ chart2 }) => console.log('Fin Pan'),
},
},
},
scales: {
x: {
display: true,
title : {
display: true,
text: 'Date et heure',
}
},
y0: {
min : 0,
max : pAjustee,
display: true,
position: 'right',
title : {
display: true,
text: 'Puissance (W)',
}
},
y1: {
min : 0,
max : 300,
display: true,
position: 'left',
title : {
display: true,
text: 'Tension (V)',
}
},
y2: {
min : 0,
max : 20,
display: true,
position: 'left',
title : {
display: true,
text: 'Courant (A)',
}
}
}
}
});
function updateChart(type) {
if (type == 1) {
fetch('/maj-DT')
.then(response => response.text())
.then(data => {
document.getElementById('DetH').textContent = data;
});
fetch('/pActive')
.then(response => response.text())
.then(data => {
document.getElementById('PA').textContent = data;
});
if (intervalId == -1) {
intervalId = setInterval(updateChart, interval, 1);
}
fetch('/formeUI')
.then(response => response.text())
.then(data => {
const rows = data.split('\n');
const labels = [];
const values0 = [];
const values1 = [];
let indx = 0;
rows.forEach(row => {
const [value0, value1] = row.split(',');
labels.push(indx++);
values0.push(parseFloat(value0));
values1.push(parseFloat(value1));
});
chart1.data.labels = labels;
chart1.data.datasets[0].data = values0;
chart1.data.datasets[1].data = values1;
chart1.update();
});
txt1.style.display = 'block';
txt2.style.display = 'none';
document.getElementById('myChart1').style.display = 'block';
document.getElementById('myChart2').style.display = 'none';
} else {
if (intervalId != -1) {
clearInterval(intervalId);
}
intervalId = -1;
fetch('/histoUIP')
// fetch('/histo')
.then(response => response.text())
.then(data => {
const rows = data.split('\n');
const labels = [];
const values0 = [];
const values1 = [];
const values2 = [];
let indx = 0;
rows.forEach(row => {
const [label, value0, value1, value2] = row.split(',');
// const [value0, value1, value2] = row.split(',');
labels.push(label);
// labels.push(indx++);
values0.push(parseFloat(value0));
values1.push(parseFloat(value1));
values2.push(parseFloat(value2));
});
chart2.resetZoom();
chart2.data.labels = labels;
chart2.data.datasets[0].data = values0;
chart2.data.datasets[1].data = values1;
chart2.data.datasets[2].data = values2;
chart2.update();
});
txt1.style.display = 'none';
txt2.style.display = 'block';
document.getElementById('myChart1').style.display = 'none';
document.getElementById('myChart2').style.display = 'block';
}
}
</script>
</body>
</html>
)rawliteral";