Skip to content
Snippets Groups Projects
Commit 17979587 authored by Teo Serra's avatar Teo Serra
Browse files

week15 start developing UI page

parent 7dedc8b9
Branches
No related tags found
No related merge requests found
Pipeline #455516 passed
Stage: test
Stage: deploy
Hide whitespace changes
Inline Side-by-side
content/WeeklyAssignments/week15.md 0 → 100644
+ 28
− 0
View file @ 17979587
+++
title = 'Week 15 : Interface and Application Programming'
fa = "circle-user"
faVariant = "solid"
toc = true
weight = 15
+++
### Summary
***
### Assignments
#### Group Assignment
* Compare as many tool options as possible.
#### Individual Assignments
* Write an application that interfaces a user with
an input &/or output device that you made.
***
### HTML page
[Here](./files/week15/week15_UI.html)
\ No newline at end of file
static/files/week15/script.js 0 → 100644
+ 62
− 0
View file @ 17979587
let port = null; // Référence au port série
let currentMessage = ''; // Message en cours de réception
async function connectToSerial() {
try {
// Vérifier si le port série est déjà ouvert
if (port && port.readable) {
console.log("Le port série est déjà ouvert.");
return;
}
port = await navigator.serial.requestPort();
console.log("Port série ouvert avec succès.");
await port.open({ baudRate: 9600 });
console.log("Port série connecté.");
const reader = port.readable.getReader();
console.log("Lecteur de port série créé.");
while (true) {
const { value, done } = await reader.read();
if (done) {
// Le port série a été fermé, désactivé ou a perdu la connexion.
reader.releaseLock();
console.log("Lecteur de port série libéré.");
break;
}
// Convertir les données en chaîne de texte
const textData = new TextDecoder().decode(value);
console.log("Données reçues:", textData);
// Concaténer les nouvelles données avec les données précédentes
currentMessage += textData;
// Vérifier si le message se termine par le délimiteur ('\n')
if (currentMessage.endsWith('\n')) {
// Supprimer le délimiteur du message
const cleanedMessage = currentMessage.trim();
console.log("Message complet:", cleanedMessage);
// Traiter le message complet ici (supposons que c'est une chaîne JSON).
try {
const data = JSON.parse(cleanedMessage);
console.log("Données traitées:", data);
document.getElementById('ambientTemp').textContent = data.ambient.toFixed(2);
document.getElementById('objectTemp').textContent = data.object.toFixed(2);
} catch (error) {
console.error("Erreur de parsing JSON:", error);
}
// Réinitialiser le message en cours de réception
currentMessage = '';
}
}
} catch (error) {
console.error('Il y a eu un problème avec la lecture des données:', error);
}
}
document.getElementById('connect').addEventListener('click', connectToSerial);
\ No newline at end of file
static/files/week15/week15_UI.html 0 → 100644
+ 91
− 0
View file @ 17979587
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Température MLX90614</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
#container {
width: 80%;
margin: 50px auto;
background-color: #fff;
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
}
.temperature {
margin-top: 20px;
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid #ddd;
padding-top: 10px;
}
.temperature span {
font-size: 24px;
color: #555;
}
.label {
font-size: 18px;
color: #777;
}
button {
display: block;
margin: 20px auto;
padding: 10px 20px;
font-size: 16px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #0056b3;
}
canvas {
display: block;
margin: 20px auto;
width: 80%;
max-width: 800px;
height: auto;
}
</style>
</head>
<body>
<div id="container">
<h1>Température MLX90614</h1>
<div class="temperature">
<div class="label">Température ambiante:</div>
<span id="ambientTemp">Chargement...</span>°C
</div>
<div class="temperature">
<div class="label">Température de l'objet:</div>
<span id="objectTemp">Chargement...</span>°C
</div>
<canvas id="temperatureChart"></canvas>
<button id="connect">Connecter au Périphérique</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="./script.js"></script>
</body>
</html>
static/files/week15/week15_UI_Working.html 0 → 100644
+ 81
− 0
View file @ 17979587
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Température MLX90614</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
#container {
width: 80%;
margin: 50px auto;
background-color: #fff;
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
}
.temperature {
margin-top: 20px;
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid #ddd;
padding-top: 10px;
}
.temperature span {
font-size: 24px;
color: #555;
}
.label {
font-size: 18px;
color: #777;
}
button {
display: block;
margin: 20px auto;
padding: 10px 20px;
font-size: 16px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div id="container">
<h1>Température MLX90614</h1>
<div class="temperature">
<div class="label">Température ambiante:</div>
<span id="ambientTemp">Chargement...</span>°C
</div>
<div class="temperature">
<div class="label">Température de l'objet:</div>
<span id="objectTemp">Chargement...</span>°C
</div>
<button id="connect">Connecter au Périphérique</button>
</div>
<script src="./script.js"></script>
</body>
</html>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment