Aide sur page HTML pour station météo

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 :laughing:

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 :flushed:

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">&deg;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">&deg;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>

Bonjour

je viens d'essayer ...
bah ca tient sur l'ecran tant que je reduis pas la taille ...

donc il suffit de reduire la taille des caracteres en fonction de la taille de l'ecran.

dans h2 et dans p du css changer la font size a 2.0 et ca passe (a vérifier) possible d'ajuster en augmentant progressivement si necessaire genre 2.2 ou 2.5

On doit pouvoir gagner aussi de la place en réduisant la taille des marges. Il y en a à plusieurs niveaux (html et container).

Pourquoi tu met un contour de page aussi grand?
Juste en l'enlevant cela ça passe sur une ligne.
Il y aussi comme tu es en flex, les deux éléments on la même taille alors que l'heure est beaucoup moins volumineux.

Bonjour,

Tout d'abord merci d'avoir pris le temps de me répondre.

Je sais pas si c’est du bricolage mais comme ça, ça me convient mieux :

J'ai modifié les font size, merci pour le tuyau @jfs59 :


<!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: 2.2rem; color: white;
    }

    .units {
      font-size: 1.2rem;
    }

    .imgunits {
      font-size: 2.8rem;
    }

    .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 class="imgunits">
    <i class="fas fa-thermometer-half" style="color:white;"></i> 
    <span id="temperature1"></span>
    <sup class="units">&deg;C</sup>
  </p>
  <p class="imgunits">
    <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 class="imgunits">
    <i class="fas fa-thermometer-half" style="color:white;"></i> 
    <span id="temperature2"></span>
    <sup class="units">&deg;C</sup>
  </p>
  <p class="imgunits">
    <i class="fas fa-tint" style="color:white;"></i> 
    <span id="humidite2"></span>
    <sup class="units">%</sup>
  </p>
  </div>
</body>

Par contre il semble qu'il y ait beaucoup plus de marge en bas qu'en haut, enfin l'ensemble n'est pas centré quoi. Et je ne sais pas trop comment faire ça.

@fdufnews, @terwal, j’ai aussi tenté de retirer les marges du html, donc le code initial avec cette modification :


html {
      font-family: Arial;
      display: inline-block;
      background-color: #0E1835;
    }

Mais ça ne correspond pas vraiment à ce que je veux car c’est trop collé de chaque côté, sans marge (logique vous me direz !) :

Est-ce que je pourrai garder les marges html en virant le flex, pour avoir un conteneur de date beaucoup plus grand que celui de l'heure ?

Bref on cherche pas le code le plus beau et propre mais bon, j'aimerai pas un code trop cracra et qui ressemble un peu à ce que j'ai en tête :slight_smile:

(Désolé pour le double message mais je pouvais pas mettre 2 images et citer 3 personnes dans un seul !)

Encore merci !
François

Oui c'est normal :slight_smile:

En mode plus ou moins crade
tu peux rajouter
style="flex:66%;" et style="flex:33%;" sur es balises P
et text-align: center ; dans le style du container avec display:flex

D'ailleurs j'aurais bien mis aussi l'heure centré, plutôt qu'a droite

J'avais proposé de les réduire pas de les supprimer.

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.