Station de Montagne Page d`accueil

Station de Montagne
Page d'accueil :
Un chalet à la montagne dispose d'un serveur Web basé sur un raspberry PI. La page d'accueil
permet de présenter la température, l'humidité et la pression atmosphérique. Par la suite, la vidéo
enregistrée par une webcam pourra être également affichée sur cette page. La figure suivante
présente la page à réaliser :
bandeau marge 1 %
Hauteur 20 %
meteo
Marge 2 %
Largeur 25 %
Hauteur 70 %
fond
Préparation des images :
video
Largeur 50 %
Hauteur 50 %
Position par rapport au haut de la page 40 %
Position par rapport à la gauche 40 %
Pour optimiser les performances de votre site, GIMP permet de retoucher les images (compression,
découpage, modification du format...)
Modifiez les 3 icons en changeant le texte pour le mettre en français. Exportez les 3 icons au format
PNG au format JPG en réduisant leur taille à 10 ko et modifiez leur nom en utilisant
thermometre.jpg, hygrometre.jpg et barometre.jpg.
Procédez de la même manière pour l'image de fond représentant le chalet. Trouvez le meilleur
compromis pour garder une image sans qu’elle soit pixelisée et suffisamment réduite malgré tout.
Chargez l'image de la vue sur la montagne, sélectionnez la partie de l'image pour faire le bandeau,
copier la sélection et collez cette dernière comme nouvelle image. Exportez le résultat au format
JPG en optimisant le rendu.
Construction de la page :
Avec NetBeans, créez un projet StationDeMontagne. Ce projet contient 2 fichiers index.html et
montagne.css
La page est constituée de 4 conteneurs (<div> … </div>) dont les noms sont donnés en gras avec la
figure ci-dessus. Chacun de ces éléments est en position fixe
Le conteneur meteo contient 3 conteneurs permettant d'afficher les trois grandeurs météorologiques
l'affichage de la première est donné par le code HTML suivant :
La valeur 25,2 est à remplacer par l'appel de la fonction CGI correspondante, idem pour les autres
grandeurs
Les classes sont définies dans le fichier css comme indiqué ci-après.
Pour que la page soit rafraîchie périodiquement, ajoutez la ligne
Ici la page est rafraîchie toutes les 30 secondes.
Publication de votre page sur le raspberry PI :
Dans un répertoire montagne dans le dossier /var/www/ copier les fichiers générés avec NetBeans
en leur donnant les autorisations nécessaires.
Assurez-vous que le répertoire /usr/lib/cgi-bin contient bien vos trois exécutables cgi pour lire les
capteurs de la carte SenseHat.