Bonjour,
J’ai réalisé une station météo qui fonctionne bien, mais j’avoue que sur l’interface, comme je suis une bille en web (html/css), c’est pas top
Déjà la date passe toujours sur 2 lignes, du coup là page devient plus grande que l’écran (5 pouces, 800x480). Voici une capture d’écran :
L’idée c’est d’avoir en haut à gauche la date, en haut à droite l’heure, puis une sorte de tableau avec les données. 1ère ligne température/humidité intérieure, 2ème ligne extérieur. Et bien sûr que le tout tienne sur l’écran quelque soit la date !
Est-ce qu’une âme charitable voudrait bien y jeter un œil et m’aider svp ?
Soyez indulgents, je sais que c’est pas top ce que j’ai fait ici
Merci beaucoup !!
Voici le code de mon index.html :
<!DOCTYPE HTML><html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="css/all.css">
<style>
html {
font-family: Arial;
display: inline-block;
margin-left: 70px;
margin-right: 70px;
background-color: #0E1835;
}
h2 {
font-size: 3.0rem;
color: white;
}
p {
font-size: 3.0rem; color: white;
}
.units {
font-size: 1.2rem;
}
.dht-labels {
font-size: 1.5rem;
vertical-align:middle;
padding-bottom: 15px;
}
.container {
display: flex;
}
.container>* {
margin: 50 0px;
flex: 1;
}
.time {
text-align: right;
}
</style>
</head>
<body>
<div class="container">
<p>
<span id="current_date"></span>
</p>
<p class="time">
<span id="current_time"></span>
</p>
</div>
<div class="container">
<h2><i class="fas fa-home" style="color:white;"></i> </h2>
<p>
<i class="fas fa-thermometer-half" style="color:white;"></i>
<span id="temperature1"></span>
<sup class="units">°C</sup>
</p>
<p>
<i class="fas fa-tint" style="color:white;"></i>
<span id="humidite1"></span>
<sup class="units">%</sup>
</p>
</div>
<div class="container">
<h2><i class="fas fa-cloud-sun" style="color:white;"></i> </h2>
<p>
<i class="fas fa-thermometer-half" style="color:white;"></i>
<span id="temperature2"></span>
<sup class="units">°C</sup>
</p>
<p>
<i class="fas fa-tint" style="color:white;"></i>
<span id="humidite2"></span>
<sup class="units">%</sup>
</p>
</div>
</body>
<script>
setInterval(function ( ) {
var url = 'http://192.168.0.20/temperature';
var aPromise = fetch(url);
aPromise
.then(function(response) {
console.log("OK! Server returns a response object:");
console.log(response);
if(!response.ok) {
throw new Error("HTTP error, status = " + response.status);
}
response.text()
.then(function(myText) {
console.log("Text:");
console.log(myText);
document.getElementById("temperature1").innerHTML = parseFloat(myText).toFixed(1);
})
.catch(function(error) {
// Never happened.
});
})
.catch(function(error) {
console.log("Noooooo! Something error:");
// Network Error!
console.log(error);
//document.getElementById("temperature1").innerHTML = "--";
});
}, 2000 ) ;
setInterval(function ( ) {
var url = 'http://192.168.0.20/humidity';
var aPromise = fetch(url);
aPromise
.then(function(response) {
console.log("OK! Server returns a response object:");
console.log(response);
if(!response.ok) {
throw new Error("HTTP error, status = " + response.status);
}
response.text()
.then(function(myText) {
console.log("Text:");
console.log(myText);
document.getElementById("humidite1").innerHTML = parseFloat(myText).toFixed(1);
})
.catch(function(error) {
// Never happened.
});
})
.catch(function(error) {
console.log("Noooooo! Something error:");
// Network Error!
console.log(error);
//document.getElementById("humidite1").innerHTML = "--";
});
}, 2000 ) ;
setInterval(function ( ) {
var url = 'http://192.168.0.30/temperature';
var aPromise = fetch(url);
aPromise
.then(function(response) {
console.log("OK! Server returns a response object:");
console.log(response);
if(!response.ok) {
throw new Error("HTTP error, status = " + response.status);
}
response.text()
.then(function(myText) {
console.log("Text:");
console.log(myText);
document.getElementById("temperature2").innerHTML = parseFloat(myText).toFixed(1);
})
.catch(function(error) {
// Never happened.
});
})
.catch(function(error) {
console.log("Noooooo! Something error:");
// Network Error!
console.log(error);
//document.getElementById("temperature2").innerHTML = "--";
});
}, 2000 ) ;
setInterval(function ( ) {
var url = 'http://192.168.0.30/humidity';
var aPromise = fetch(url);
aPromise
.then(function(response) {
console.log("OK! Server returns a response object:");
console.log(response);
if(!response.ok) {
throw new Error("HTTP error, status = " + response.status);
}
response.text()
.then(function(myText) {
console.log("Text:");
console.log(myText);
document.getElementById("humidite2").innerHTML = parseFloat(myText).toFixed(1);
})
.catch(function(error) {
// Never happened.
});
})
.catch(function(error) {
console.log("Noooooo! Something error:");
// Network Error!
console.log(error);
//document.getElementById("humidite2").innerHTML = "--";
});
}, 2000 ) ;
</script>
<script>
<!--
function pause(ms)
{
return new Promise(resolve => setTimeout(resolve, ms));
}
-->
async function afficherDate()
{
while(true)
{
await pause(1000);
var cejour = new Date();
var options = {weekday: "short", month: "long", day: "2-digit"};
var date = cejour.toLocaleDateString("fr-FR", options);
var heure = ("0" + cejour.getHours()).slice(-2) + ":" + ("0" + cejour.getMinutes()).slice(-2);
document.getElementById('current_time').innerHTML = heure;
document.getElementById("current_date").innerHTML = date;
}
}
afficherDate();
</script>
</html>