Initial commit
This commit is contained in:
124
Ecran Lilygot-T-RGB/Code tests/Send_mass_data/data/index.html
Normal file
124
Ecran Lilygot-T-RGB/Code tests/Send_mass_data/data/index.html
Normal file
@@ -0,0 +1,124 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Transfert d'image vers ESP32</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Transfert d'image vers ESP32</h1>
|
||||
|
||||
<form id="imageForm">
|
||||
<input type="file" id="imageInput" accept="image/*">
|
||||
<input type="submit" value="Envoyer">
|
||||
</form>
|
||||
|
||||
<div id="result">
|
||||
<!-- L'image convertie en tableau C sera affichée ici -->
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const form = document.getElementById("imageForm");
|
||||
const input = document.getElementById("imageInput");
|
||||
|
||||
input.addEventListener("change", function () {
|
||||
const file = input.files[0];
|
||||
|
||||
if (file) {
|
||||
const reader = new FileReader();
|
||||
const chunkSize = 1024; // Taille du paquet (en octets)
|
||||
|
||||
reader.onload = function(event) {
|
||||
const image = new Image();
|
||||
image.src = event.target.result;
|
||||
|
||||
image.onload = function() {
|
||||
const canvas = document.createElement("canvas");
|
||||
canvas.width = 480;
|
||||
canvas.height = 480;
|
||||
const context = canvas.getContext("2d");
|
||||
|
||||
context.drawImage(image, 0, 0, 480, 480);
|
||||
|
||||
const imageData = context.getImageData(0, 0, 480, 480).data;
|
||||
const outputArray = [];
|
||||
|
||||
for (let i = 0; i < imageData.length; i += 4) {
|
||||
const r = imageData[i];
|
||||
const g = imageData[i + 1];
|
||||
const b = imageData[i + 2];
|
||||
const rgb565 = ((r >> 3) << 11) | ((g >> 2) << 5) | (b >> 3);
|
||||
outputArray.push(`0x${rgb565.toString(16).toUpperCase()}, `);
|
||||
}
|
||||
|
||||
const resultDiv = document.getElementById("result");
|
||||
resultDiv.innerHTML = `<h2>Image convertie en tableau C :</h2><pre id="completeData">${outputArray.join("")}</pre>`;
|
||||
};
|
||||
};
|
||||
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
});
|
||||
|
||||
form.addEventListener("submit", function (event) {
|
||||
event.preventDefault(); // Empêche l'envoi du formulaire
|
||||
|
||||
const completeData = document.getElementById("completeData").textContent;
|
||||
const chunkSize = 1024*4; // Taille du paquet (en octets)
|
||||
const chunks = chunkString(completeData, chunkSize); // Divisez les données en paquets
|
||||
|
||||
// Fonction pour diviser une chaîne de caractères en morceaux de taille donnée
|
||||
function chunkString(str, size) {
|
||||
const chunks = [];
|
||||
for (let i = 0; i < str.length; i += size) {
|
||||
chunks.push(str.slice(i, i + size));
|
||||
}
|
||||
return chunks;
|
||||
}
|
||||
|
||||
// Ajoutez "Begin" au début et "End" à la fin
|
||||
chunks.unshift("Begin");
|
||||
chunks.push("End");
|
||||
|
||||
// Fonction pour envoyer un paquet à l'ESP32 avec délai
|
||||
// Fonction pour envoyer un paquet à l'ESP32 avec délai
|
||||
function sendChunksWithDelay(chunks, index) {
|
||||
if (index < chunks.length) {
|
||||
const chunk = chunks[index];
|
||||
// Afficher le paquet dans la console
|
||||
//console.log(`Envoi du paquet ${index + 1}: ${chunk}`);
|
||||
|
||||
// Créez un objet FormData pour envoyer le paquet
|
||||
const formData = new FormData();
|
||||
formData.append("imageChunk", chunk);
|
||||
|
||||
// Envoyez le paquet à l'ESP32
|
||||
fetch("/sendImageChunk", {
|
||||
method: "POST",
|
||||
body: formData,
|
||||
})
|
||||
.then((response) => {
|
||||
if (response.ok) {
|
||||
console.log(`Paquet ${index + 1}/${chunks.length} envoyé avec succès à l'ESP32.`);
|
||||
} else {
|
||||
throw new Error("Erreur lors de l'envoi du paquet.");
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
})
|
||||
.finally(() => {
|
||||
// Planifiez l'envoi du prochain paquet après un délai de 1000 millisecondes (1 seconde)
|
||||
setTimeout(() => {
|
||||
sendChunksWithDelay(chunks, index + 1);
|
||||
}, 10);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Commencez l'envoi des chunks avec délai, en commençant par le premier (index 0)
|
||||
sendChunksWithDelay(chunks, 0);
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user