Projet | ​​​​Mini projet - Web |  CSS & JS - Sélecteur à 5 positions

Contexte

Nous construisons une page web. Elle représente un vumètre exposé ci-contre. Deux boutons vert et rouge permettront d'orienter son aiguille.
Cette page pourra constituer une commande à distance via le web.
​
Sa composition nécessite l'usage de script css pour son style et de javascript pour sa réactivité.

Construction de deux images

On extrait deux images à partir d'une trouvée sur le web.

  1. Faire une recherche avec le mot-clé stressometer et récupérer l'image.
  2. A l'aide d'un éditeur (ex: paint ou irfanview) séparer l'aiguille de l'échelle de couleur et enregistrer les deux images dans un répertoire sous un des formats jpg ou png.

HTML - déclaration des éléments

Nous intégrons maintenant les images dans une page html. Nous pourrons nous prompter avec le site w3Schools.com.

  1. Construire la page web avec les images puis l'enregistrer dans le même répertoire. La page devrait apparaître alors selon la figure ci-contre.

CSS - positionnement des éléments

Nous superposons les deux images. Pour cela nous ajoutons un élément <style> à notre page  web. Voir w3Schools.com. Nous obtiendrons alors le rendu ci-contre.

  1. Définir la largeur de l'échelle de couleur avec la propriété width.
  2. Superposer et dimensionner l'aiguille avec la propriété position et les propriétés width, left, top

CSS - orientation de l'aiguille

Cette page du site w3Schools.com nous aide à cela.

  1. Faire tourner l'aiguille avec le script proposé. Le centre de rotation est situé au centre de l'image! 
  2. Modifier le centre de rotation à l'aide de ​cette page. Les coordonnées x et y du centre, en blanc sur la figure ci-contre, s'expriment en % des dimensions de l'image à partir du point O, coin haut et gauche. Ex : x approche 40% de la largeur de l'image de l'aiguille ci-contre.
  3. ​Relever les cinq angles correspondant aux couleurs de l'échelle.

JS - rotation de l'aiguille

Nous plaçons les deux boutons sur notre page. Voir cette page.

  1. Ajouter les boutons et les styliser avec les propriétés margin, width, padding, font-size, border-radius, box-shadow.
  2. Lire ce script puis l'intégrer comme indiqué dans la page web.
  3. Adapter le script aux boutons comme indiqué afin que les fonctions Javascript left() et right() s'exécutent lors des appuis.
  4. Compléter la fonction rotArr() du script afin que l'aiguille s'oriente tour à tour sur les couleurs de l'échelle.

JS - Envoi de l'orientation de l'aiguille

Finalement on envoie l'orientation de l'aiguille à ​cette page.  Pour cela nous ajoutons les 4 instructions présentées ci-dessous, successivement et en bonne place entre les balises <script> et </script> de notre page HTML.
  • var url="http://sin.nexgate.ch/site/vu.php?ind="+cnt;
  • var xmlhttp=new XMLHttpRequest();
  • xmlhttp.open("GET",url,true);
  • xmlhttp.send();
  1. Compléter le code Javascript afin d'établir le lien. La durée d'envoi est paramétrée à 5s.

Autre vumètre

  • Reprendre l'activité en choisissant un autre vumètre ou cadran, dial, issu d'une recherche d'image sur le web.

rendu de la page web