Manipulations des images

Afin que notre serveur soit plus « visuel », nous utiliserons la technologie HTML des CANVAS. L’exemple ci dessous, permet d’afficher une image (le plan de la maison) et de superposer sur cette image l’état des contacts d’alarme.

Img_Plan_Simpl

Pour construire le plan j’ai utilisé Lucidchart (sous Chrome) puis j’ai récupéré l’image sous Paint.net (http://www.getpaint.net/index.html) l’édition peut aussi se faire sous Ubuntu avec Pinta (http://pinta-project.com/).

Ensuite j’ai colorié chaque ouverture de porte et pir puis découpé et collé dans des images différentes (la position de chaque dessin sur le plan étant donné par la coordonnée « Sélection Haut Gauche ».

 <!DOCTYPE HTML>   
 <!-- Comment construire une image composite sur une page web -->  
 <html>  
 <head>   
 <meta charset="utf-8" /> <!-- Encodage de la page -->   
 <title>JavaScript: Test Image dans Canvas</title> <!-- Titre de la page -->   
 <!-- Debut du code Javascript -->   
 <script language="javascript" type="text/javascript">   
 var canvas= null; // objet Canvas   
 var contextCanvas = null; // objet context Canvas   
 var coulFond="rgb(255,255,153)";   
 var temp=25; // variable de température  
 var humi=50; // variable d'humidité  
 window.onload = function() { // fonction au lancement   
 canvas = document.getElementById("nomCanvas"); // declare objet canvas a partir id = nom   
 if (canvas.getContext){ // la fonction getContext() renvoie True si canvas accessible   
  contextCanvas = canvas.getContext("2d"); // objet context global permettant acces aux fonctions de dessin   
  contextCanvas.fillStyle = coulFond; // couleur de remplissage rgb 0-255   
  contextCanvas.fillRect (0, 0, canvas.width, canvas.height); // on trace le canvas rectangle qui aura les dimensions définies dans le Body  
  contextCanvas.font = "10px Verdana"; // police du Canvas   
  contextCanvas.fillStyle = "rgb(0,0,255)"; // couleur de remplissage rgb 0-255   
  contextCanvas.fillRect (256,266, 1,1); // rectangle   
  contextCanvas.fillStyle = "rgb(0,0,0)"; // couleur remplissage   
  contextCanvas.fillText("Température : "+temp.toString()+"° Humidité : "+humi.toString()+"%", 256, 266); // affiche text   
  var c=document.getElementById("nomCanvas");  
  var ctx=c.getContext("2d");  
  var img=document.getElementById("fond");  
  ctx.drawImage(img,0,0);  
  //var img=document.getElementById("aon");  
  //ctx.drawImage(img,0,0);  
  var img=document.getElementById("portailcours");  
  ctx.drawImage(img,54,316);  
  var img=document.getElementById("portecours");  
  ctx.drawImage(img,167,168);  
  var img=document.getElementById("porteentree");  
  ctx.drawImage(img,469,185);  
  var img=document.getElementById("porteparking");  
  ctx.drawImage(img,475,56);  
  var img=document.getElementById("portail");  
  ctx.drawImage(img,758,48);  
  var img=document.getElementById("portillon");  
  ctx.drawImage(img,766,189);  
  var img=document.getElementById("pirparking");  
  ctx.drawImage(img,390,46);  
  var img=document.getElementById("pirentree");  
  ctx.drawImage(img,392,157);  
  var img=document.getElementById("thermo");  
  ctx.drawImage(img,190,270);  
  } // fin si canvas existe   
 } // fin window.onload  
 </script>  
 </head>   
 <body >   
  <!-- On place le canvas dans la page -->  
  <canvas id="nomCanvas" width="822" height="378"></canvas>   
  <!-- Déclaration des images sans les afficher (width et height = 0)-->  
  <img id="fond" src="PlanMaison.png" alt="Plan" width="0" height="0">  
  <img id="aon" src="AlarmeOn.png" alt="AOn" width="0" height="0">  
  <img id="portailcours" src="PortailCours.png" alt="PCours" width="0" height="0">  
  <img id="portecours" src="PorteCours.png" alt="PoCours" width="0" height="0">  
  <img id="porteentree" src="PorteEntree.png" alt="PoEntree" width="0" height="0">  
  <img id="porteparking" src="PorteParking.png" alt="PoParking" width="0" height="0">  
  <img id="portail" src="Portail.png" alt="Portail" width="0" height="0">  
  <img id="portillon" src="Portillon.png" alt="Portillon" width="0" height="0">  
  <img id="pirparking" src="PirParking.png" alt="Pirpark" width="0" height="0">  
  <img id="pirentree" src="PirEntree.png" alt="Pirpark" width="0" height="0">  
  <img id="thermo" src="Thermo.png" alt="Thermo" width="0" height="0">  
 </body>   
 </html>   

Les fichiers de cet exemple sont ici : https://app.box.com/s/2sivyqsk4vfoglw83tel

Plus compliqué, il s’agit de détecter un click sur une des images du canevas (pour actualiser la température et/ou pour activer ou désactiver les contacts…). L’exmple suivant affiche les coordonnées de la souris lorsque l’on clique sur le thermomètre Température = X, Humidité = Y sinon affiche une fenêtre.

Exemple_Click

 <!DOCTYPE HTML>   
 <!-- Comment construire une image composite HTML cliquable en partie -->  
 <html>  
 <head>   
 <meta charset="utf-8" /> <!-- Encodage de la page -->   
 <title>JavaScript: Test Image dans Canvas</title> <!-- Titre de la page -->   
 <!-- Debut du code Javascript -->   
 <script language="javascript" type="text/javascript">   
 var canvas= null; // objet Canvas   
 var contextCanvas = null; // objet context Canvas   
 var coulFond="rgb(255,255,153)";   
 var temp=25; // variable de température  
 var humi=50; // variable d'humidité  
 //-- Calcul des coordonnées de la souris  
 function getMousePos(canvas, evt) {  
   var rect = canvas.getBoundingClientRect();  
   return {  
      x: evt.clientX - rect.left,  
      y: evt.clientY - rect.top  
     };  
   }  
 //-- Exemple de fonction traitant le résultat du click  
 function doOnClick(message)  
      {alert(message);  
      }  
 function doRefrechTemp()  
      {  
      //-- on efface la zone de texte  
       contextCanvas.fillStyle = coulFond;  
   contextCanvas.clearRect(253, 252, 231, 22);  
   //-- On ecrit la valeur  
      contextCanvas.font = "10px Verdana"; // police du Canvas   
   contextCanvas.fillRect (256,266, 1,1); // rectangle   
   contextCanvas.fillStyle = "rgb(0,0,0)"; // couleur remplissage   
   contextCanvas.fillText("Température : "+temp.toString()+"° Humidité : "+humi.toString()+"%", 256, 266); // affiche text   
      }  
 window.onload = function() { // fonction au lancement   
 canvas = document.getElementById("nomCanvas"); // declare objet canvas a partir id = nom   
 //-- Déclaration de l'événement sur click (autre = mousedown, mouseup, mousemove, mouseout, mouseover)  
    canvas.addEventListener('click', function(evt) {  
     var mousePos = getMousePos(canvas, evt);  
           if ((mousePos.x>200 && mousePos.x<215) &&(mousePos.y>270 && mousePos.y<330))  
       {var message = 'Click sur le thermométre X= ' + mousePos.x + ', Y=' + mousePos.y;  
             temp=mousePos.x;  
                humi=mousePos.y;  
       doOnClick (message);  
                doRefrechTemp();}  
           else  
             {var message = 'Click ailleurs X= ' + mousePos.x + ', Y=' + mousePos.y;  
       doOnClick (message);}  
    }, false);  
 //-- Détection de la présence d'un canevas  
 if (canvas.getContext){ // la fonction getContext() renvoie True si canvas accessible   
  contextCanvas = canvas.getContext("2d"); // objet context global permettant acces aux fonctions de dessin   
  contextCanvas.fillStyle = coulFond; // couleur de remplissage rgb 0-255   
  contextCanvas.fillRect (0, 0, canvas.width, canvas.height); // on trace le canvas rectangle qui aura les dimensions définies dans le Body  
  var c=document.getElementById("nomCanvas");  
  var ctx=c.getContext("2d");  
  var img=document.getElementById("fond");  
  ctx.drawImage(img,0,0);  
  //var img=document.getElementById("aon");  
  //ctx.drawImage(img,0,0);  
  var img=document.getElementById("portailcours");  
  ctx.drawImage(img,54,316);  
  var img=document.getElementById("portecours");  
  ctx.drawImage(img,167,168);  
  var img=document.getElementById("porteentree");  
  ctx.drawImage(img,469,185);  
  var img=document.getElementById("porteparking");  
  ctx.drawImage(img,475,56);  
  var img=document.getElementById("portail");  
  ctx.drawImage(img,758,48);  
  var img=document.getElementById("portillon");  
  ctx.drawImage(img,766,189);  
  var img=document.getElementById("pirparking");  
  ctx.drawImage(img,390,46);  
  var img=document.getElementById("pirentree");  
  ctx.drawImage(img,392,157);  
  var img=document.getElementById("thermo");  
  ctx.drawImage(img,190,270);  
  } // fin si canvas existe   
 } // fin window.onload  
 </script>  
 </head>   
 <body >   
  <!-- On place le canvas dans la page -->  
  <canvas id="nomCanvas" width="822" height="378"></canvas>   
  <!-- Déclaration des images sans les afficher (width et height = 0)-->  
  <img id="fond" src="PlanMaison.png" alt="Plan" width="0" height="0">  
  <img id="aon" src="AlarmeOn.png" alt="AOn" width="0" height="0">  
  <img id="portailcours" src="PortailCours.png" alt="PCours" width="0" height="0">  
  <img id="portecours" src="PorteCours.png" alt="PoCours" width="0" height="0">  
  <img id="porteentree" src="PorteEntree.png" alt="PoEntree" width="0" height="0">  
  <img id="porteparking" src="PorteParking.png" alt="PoParking" width="0" height="0">  
  <img id="portail" src="Portail.png" alt="Portail" width="0" height="0">  
  <img id="portillon" src="Portillon.png" alt="Portillon" width="0" height="0">  
  <img id="pirparking" src="PirParking.png" alt="Pirpark" width="0" height="0">  
  <img id="pirentree" src="PirEntree.png" alt="Pirpark" width="0" height="0">  
  <img id="thermo" src="Thermo.png" alt="Thermo" width="0" height="0">  
 </body>   
 </html>   

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

Articles récents
Commentaires récents
fatima sur Bienvenue !
AdminDroid sur Bienvenue !
fatima sur Bienvenue !
Archives
Catégories
%d blogueurs aiment cette page :