Exemple de 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.
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.
<!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>
Andro Pebble 
Votre commentaire