 |
Vous n'êtes pas connecté. Connexion |
 |
Page modifiée à 11:11, 1 Mar 2013 par MichelBuffaTest
Cours Web 2.0 Casablanca 2013De $1Table des matières
IntroductionCe cours a pour but de vous donner une première expérience de HTML5 (HTML, css3, javascript). SupportsCSS 2 + quelques bouts de 3
Projet à rendreDate limite jeudi 21 mars 2013 ! Le sujet, les modalités c'est ici : Projet Miage Casablanca 2013 TP1: installation de l'environnement de développement, premiers exercicesInstallation des logicielsDans ce TP vous commencerez par vérifier que vous disposez d'un editeur de texte ou un IDE Html5 / javascript. Je vous conseille fortement l'éditeur de texte : sublime text 2 (simple et léger). Vous pouvez aussi utiliser WebStorm ou encore Netbeans (un peu lourd). Vous vous assurez que vous disposez de navigateurs webs récents :
Et que ce dernier est à jours ! Vous pouvez tester si vous navigateur supporte bien les fonctionnalités HTML5 : http://html5test.com/. Une score aux alentours de 400 est souhaitable! Etude des exemples vus en coursPrenez le temps de parcourir les exemples vus en cours, passez un peu de temps à regarder les sources, n'hésitez pas à les modifier pour voir... Passez au moins 30 minutes à explorer... Ecriture d'un formulaire HTML5Dans cet exercice, vous allez créer une page index.html qui contiendra un formulaire HTML5 que vous soumettrez à une Servlet par la suite, pour tester. On fera la partie Servlet plus tard... Pour le moment utilisez l'outil que vous voulez pour créer le formulaire HTML (sublime text 2, webstorm, netbeans, etc). Je vous conseille d'utiliser aussi jsbin.com pour valider de petits exemples. Avec le menu jsbin/create milestone vous pouvez sauvegarder plusieurs versions de vos travaux. Copiez collez les URLs sinon ils seront perdus. Le formulaire devra permettre de saisir votre nom, prénom, age (avec type = number), date d'inscription, adresse (plusieurs champs: rue, code postal sur 6 chiffres avec attribut regexp et placeholder, ville, pays avec auto-complétion par champs <datalist>), email, home page, et un mot de passe dans deux champs séparés (pour valider). Vous utiliserez au maximum les possibilité des formulaires HTML5, c'est-à-dire: les types spécialisés email, tel, url, date, etc. Vous utiliserez aussi des règles CSS pour mettre en rouge les champs non valides, les attributs pour indiquer des valeurs exemples et des regexps pour valider le code postal. Vous utilisez comme dans l'exemple présent sur la page des Exemples HTML5 vus en cours l'API de validation des formulaires pour vérifier que les passwords sont bien identiques. Une fois que la page fonctionne, vous écrirez une Servlet ou un bout de code PHP qui récupère les éléments du formulaire et les affiche dans une page de réponse. Le but de cet exercice est de vous faire jouer au maximum avec les formulaires HTML5. Intégration de la géolocalisationVous rajoutere dans le formulaire un bouton permettant de récupérer la longitude et la latitude de la positon courante. Vous afficherez ces valeurs dans un champs du formulaire de l'exercice précédent qui se remplira automatiquement. Vous afficherez dans un second temps la position sur une carte google map. Soumettez le formulaire et affichez la longitude et la latitude reçue par le serveur. Maintenant, inspirez-vous de l'exemple proposé sur la page des exemples et qui utilise le reverse geocoder de google map pour transformer la longitude et la latitude en adresse. Utilisez cet exemple pour pré-remplir le formulaire avec une option "trouver l'adresse à partir de ma position". Pour trouver l'adresse à partir d'une latitude et d'une longitude, il faut regarder l'api de google : https://developers.google.com/maps/documentation/geocoding/#ReverseGeocoding Il y a un exemple codé dans la page des exemples:
Exercices avec la vidéoOn veut maintenant pouvoir ajouter une image à son formulaire, sa photo... Soit en la choisissant via un bouton, soit en faisant un drag'n'drop. On veut voir une preview de la photo dans la page. On verra plus tard comment l'envoyer au serveur. On veut aussi pouvoir la capturer à partir de la vidéo. Vous vous inspirerez des exemples pour intégrer une image dans votre formulaire. Exercices avec le dessin dans un canvasOn veut pouvoir enregistrer une signature avec la souris en dessinant dans un canvas. Vous ajouterez à votre formulaire un canvas et du code javascript pour pouvoir dessiner une signature à l'intérieur. Regardez les exemples pour vous en inspirer. Regardez les différents tutoriaux pour voir comment récupérer le contenu du canvas sous la forme d'une image. Rajouter des styles via CSS pour bien présenter la page de formulaireAidez-vous des exemples CSS donnés au début de ce TP pour styler votre formulaire et lui donner une apparence un peu plus sympathique. Notamment, j'aimerais bien que vous utilisiez des bordures pour séparer les différentes parties du formulaire: la partie adresse/géolocalisation, la partie nom, prénom, password, email, la partie image/signature, etc. Par la suite, dans le TP2 nous reprendrons la page de ce formulaire pour utiliser les nouveaux tags de structure de HTML5 (<footer><header><article><section> etc.)
TP2 : découverte d'un logiciel de dessinTélécharger l'archive à étudierToutes les sources de ce TP sont dans cette archive (4Mbytes). Dézippez-la, vous devriez avoir un répertoire "Paint_HTML5_Multi_Tutorial". Et à l'intérieur des sous-répertoires step1, step2, etc... qui correspondent à chaque étape dans ce document. Ouvrez donc ce répertoire avec l'outil WebStorm (menu file/open directory). Vous devriez donc pouvoir étudier et exécuter facilement les diverses versions du petit programme de dessin sur lequel nous allons travailler. Step 1 : le paint le plus simple !Allez dans le répertoire"step 1". Vous pouvez tester cet exemple en ouvrant paint.html dans votre navigateur. Remarquez ces lignes en tête du fichier : <!DOCTYPE HTML>
<!-- Note : in HTML5 the DOCTYPE can be memorized by a normal human being -->
<!-- Common mistake : if we put a comment before the doctype element, Internet Explorer will not
consider the document as a HTML5 document and the canvas tag for example,
will not be displayed ! -->
Le DOCTYPE est le tout nouveay ultra-simple DOCTYPE de HTML5 DOCTYPE, yeah ! Si vous ecrivez n'importe quoi avant la déclaration du DOCTYPE, IE9 ne considérera plus le fichier comme du HTML5, et cet exemple ne fonctionnera pas ! L'élément<canvas> de la page sera ignoré. Les autres navigateurs cependant tolèrent qu'on puisse avoir des choses avant le DOCTYPE, pas la série des Internet Explorers... Ensuite, dans le fichier, on délcare une feuille de style CSS et quelques scripts JavaScript. Oui, dans cette partie du TP on utilise jQuery pour la manipulation du DOM et pour la gestion des événements. HTML5 proposes la méthode document.querySelector(...) qui supporte des sélécteurs du DOM similaires à ceux de jQuery mais c'est plus long à écrire que $(...), etjQuery utilises querySelector en interne... <link rel="stylesheet" href="css/paint.css" /> <script src="js/jquery-1.7.2.min.js"></script> <script src="js/utils.js"></script> <script src="js/paint.js"></script> Le fichier paint.js contient le code de la partie "dessiner quand la souris bouge" du programme de paint, alors que utils.js contient juste une fonction utilitaire pour récupérer correctement la position de la souris dans le <canvas>. Lorsque le document est entièrement chargé (et le DOM prêt), on crée un objet Paint, qui contient la majeure partie des fonctionnalités écrites en JavaScript. Oui, ici on fait du JavaScript objet. On verra qu'en JavaScript, une fonction est un objet, une variable un attribut et une fonction dans une fonction: une méthode ! Le $(document).ready(function() {.....}); est une manière d'exécuter un bout de code uniquement quand le DOM est prêt. C'est une méthode proposée par jQuery pour remplacer les <body onload=...> et autres document.addActionListener("load", init());... <script type="text/javascript">
// Run when the DOM is ready
$(document).ready(function () {
// Create the pseudo object which will handle the main canvas
paint = new PaintObject("canvasMain");
});
</script>
Le paramètre ("canvasMain") est l'Id du tag <canvas> que vous trouverez un peu plus loin dans la page, dans la partie "HTML" : <canvas id="canvasMain">
<p>Canvas tag not supported by your browser</p>
</canvas>
Regardons maintenant le code de l'objet PaintObject dans le fichier paint.js ... Tout d'abord on voir qu'on récupère une référence sur le canvas, et aussi sur le contexe associé à ce canvas. Ce contexte contient les méthodes et propriétés pour dessiner dans le canvas. function PaintObject(canvas) {
// get handle of the main canvas, as a DOM object, not as a jQuery Object.
var mainCanvas = $("#"+canvas).get(0);
var mainContext = mainCanvas.getContext('2d');
...
On ajoute aussi un écouteur pour les mouvements souris sur le canvas (là c'est fait avec jQuery) : // Bind event on the canvas
$("#canvasMain").mousemove(this.mouseMoveListener);
this.mouseListener est une méthode de PaintObject qui dessine une ligne à chaque déplacement souris, depuis la position précédente à la position courante : // Mouse motion listener for drawing lines
this.mouseMoveListener = function (event) {
// we delegate the computation of the mouse position
// to a utility function (in utils.js) as this is not so trivial
// we must take into account insets, etc.
var mousePos = getMousePos(mainCanvas, event);
// Let's draw some lines that follow the mouse pos
if (!started) {
previousMousePos = mousePos;
started = true;
} else {
mainContext.beginPath();
mainContext.moveTo(previousMousePos.x, previousMousePos.y);
mainContext.lineTo(mousePos.x, mousePos.y);
mainContext.closePath();
// draws as wireframe the drawing orders between beginPath() and closePath()
mainContext.stroke();
previousMousePos = mousePos;
}
};
Remarquez que pour dessiner une ligne on déclare un chemin avec mainContext.beginPath(), on se place le curseur à une position pour "poser le crayon" (moveTo), on trace une ligne depuis cette position jusqu'à une autre (lineTo), et on ferme le chemin (closePath). Le chemin est dessiné réellement par l'appel de mainContext.stroke(). "stroke" = en mode fil de fer, "fill" = en mode remplissage. Dans notre cas on dessine en fil de fer et l'apparence est définie par la valeur courante de mainContext.strokeStyle, par défaut c'est la couleur noire. Attention : si vous oubliez de fermer le chemin (pas de closePath), alors à chaque mouvement de la souris on redessine le chemin en entier et ce chemin contiendra toutes les lignes depuis le début ! En effet: mainContext.stroke() dessine tous les ordres de dessin depuis l'appel de context.beginPath() ... si un beginPath() est appelé alors qu'un chemin a déjà été commencé, il est ignoré. Remarquez aussi comment nous calculons la taille du canvas en fonction de la taille de la fenêtre du navigateur. On aurait pu le faire à l'aide d'une règle CSS avec des pourcentages sur les propriétés width et height du canvas, mais malheureusement cela "grossit" aussi le contenu du canvas et produisant des gros carrés comme lorsqu'on grossit une image. Ainsi il est préférable d'ajuster la taille du canvas depuis du JavaScript : // Canvas doesnt scale well with '%' in CSS so we use a little trick.
// We give them the size of one of their parent node which can be scalable.
mainCanvas.height = $("#content")[0].clientHeight;
mainCanvas.width = $("#content")[0].clientWidth;
TODO:
Step 2 : ajout des événements mouseUp, mouseMove, mouseDown, création d'un objet pour le dessinAllez dans le dossier "step 2". Vous pouvez tester cet exemple en ouvrant paint.html dans votre navigateur. Cette fois-ci on ne dessine que lorsque le bouton de la souris est enfoncé. On a aussi séparé le code qui effectue le dessin du code d'initialisation du PaintObject. Le fichier drawingtools.js contiendra dorénavant les "objets de dessin" comme le crayon, lignes, rectangles, cercles etc... alors que paint.js s'occupe juste de créer les contextes, déclarer les événements etc. Encore une fois on utilise jQuery pour les événements (paint.js): // Create the drawing tool
var drawingTool = new pencilDrawingTool();
// Bind events on the canvas
$("#canvasMain").mousedown(drawingTool.mouseDownListener);
$("#canvasMain").mousemove(drawingTool.mouseMoveListener);
$("#canvasMain").mouseup(drawingTool.mouseUpListener);
Voici le contenu du fichier drawingtool.js avec simplement in outil qui dessine en mode "crayon". Remarquez les trois écouteurs pour les événements souris: // Previous position of the mouse
var previousMousePos;
// Drawing tool object
function pencilDrawingTool() {
this.mouseDownListener = function (event) {
paint.started = true;
previousMousePos = getMousePos(paint.getFrontCanvas(), event);
};
this.mouseMoveListener = function (event) {
// we delegate the computation of the mouse position
// to a utility function as this is not so trivial
var mousePos = getMousePos(paint.getMainCanvas(), event);
// Let's draw some lines that follow the mouse pos
if (paint.started) {
paint.getMainContext().beginPath();
paint.getMainContext().moveTo(previousMousePos.x, previousMousePos.y);
paint.getMainContext().lineTo(mousePos.x, mousePos.y);
paint.getMainContext().closePath();
paint.getMainContext().stroke();
}
previousMousePos = mousePos;
};
this.mouseUpListener = function (event) {
paint.started = false;
}
};
Step 3 : ajout d'un second canvas transparent superposé au canvas principal, pour dessiner des "lignes élastiques"Allez dans le répertoire "step 3" directory. Vous pouvez tester cet exemple en ouvrant paint.html dans votre navigateur. Cet exemple montre une utilisation très intéressante des canvas: leur utilisation en "overlay" ou si vous préférez, comme des "calques photoshop". En utilisant des propriétés CSS de positionnement relatif et en donnant à la propriété z-index de chaque canvas une valeur différente on peut choisir lequel est devant l'autre. Par défaut les canvas sont transparents. Si on efface une partie d'un canvas à l'aide de la méthode context.clearRect(x, y, width, height) alors on pourra "voir à travers cette partie". On va utiliser cet effet pour dessiner des lignes "élastiques" (des lignes qui suivent la souris) dans un canvas transparent, le "front canvas", placé devant le canvas normal (le "main canvas"). Pour animer la ligne qu'on trace quand la souris bouge, on efface le canvas, on dessine la ligne, on efface le canvas, on dessine la ligne à la nouvelle position, etc... Ajout d'un canvas au-dessus de l'autre: Cette opération est réalisée dans paint.js : // Prepare a second canvas on top of the previous one, kind of second "layer"
var frontCanvas = document.createElement('canvas');
frontCanvas.id = 'canvasFront';
// Add the temporary canvas as a second child of the mainCanvas parent.
mainCanvas.parentNode.appendChild(frontCanvas);
// Get the context for drawing in the canvas
var frontContext = frontCanvas.getContext('2d');
this.getFrontCanvas = function () {
return frontCanvas;
}
this.getFrontContext = function () {
return frontContext;
}
Ajout d'un outil "ligne" dans drawingtools.js On déclare un tableau qui va contenir les différents outils (pencil, line, etc) : var DEFAULT_TOOL = 'pencil'; ... // Create the drawing tool var drawingTool = new setOfDrawingTools[DEFAULT_TOOL](); Et on a modifié la gestion des événements souris pour qu'on appelle le bon écouteur sur l'outil courant. // bind events. We use a function multiplexEvent that will call the proper listeners
// methods of the currentTool.
this.bindMultiplexEvents = function () {
$("#canvasFront").mousedown(this.multiplexEvents);
$("#canvasFront").mousemove(this.multiplexEvents);
$("#canvasFront").mouseup(this.multiplexEvents);
}
// if currentTool is pencil, and event.type is mousemove, will
// call pencil.mousemouve(event), if currentTool is line and
// event.type is mouseup, will call line.mouseup(event) etc.
this.multiplexEvents = function (event) {
currentTool[event.type](event);
}
...remarquez que dans drawingtools.js, dans l'outil "ligne", on ne dessine que dans le front canvas, et juste avant de dessiner la ligne élastique, on efface le contenu de ce canvas, ce qui donne l'illusion que la ligne est animée et qu'elle suit la souris: // the Line Drawing Tool Object
setOfDrawingTools.line = function () {
this.mousedown = function (event) {
paint.started = true;
previousMousePos = getMousePos(paint.getFrontCanvas(), event);
};
this.mousemove = function (event) {
var mousePos = getMousePos(paint.getFrontCanvas(), event);
if (paint.started) {
// Clear front canvas before drawing the elastic line in a new position
paint.getFrontContext().clearRect(0, 0, paint.getFrontCanvas().width,
paint.getFrontCanvas().height);
paint.getFrontContext().beginPath();
paint.getFrontContext().moveTo(previousMousePos.x, previousMousePos.y);
paint.getFrontContext().lineTo(mousePos.x, mousePos.y);
paint.getFrontContext().stroke();
paint.getFrontContext().closePath();
}
};
this.mouseup = function (event) {
paint.started = false;
}
};
Dans le fichier paint.html , on a jouté quelques spans pour pouvoir choisir les différents outis dans un menu sur la droite de l'écran: <div id="drawCommands">
<h6>Pick a tool</h6>
<span id="line">line</span>
<span id="pencil">pencil</span>
</div>
Et dans paint.js on détecte les clicks souris sur ces spans : // Handle the drawing tools menu. The selected entry value can be 'Pencil',
// 'Line' etc.
this.changeDrawingTool = function () {
// this.id is the id of the selected menu item
drawingTool = new setOfDrawingTools[this.id]();
}
// Bind the changeDrawingTool function onClick to every menu items.
$("#drawCommands").find("span").click(this.changeDrawingTool);
Petit problème : comment conserver la ligne dans le dessin final quand on relâche le bouton de la souris ?
Step 4 : dessiner le contenu du front canvas dans le main canvas quand on relâche la souris en mode ligneAllez dans le répertoire step 4. Vous pouvez tester cet exemple en ouvrant paint.html dans votre navigateur. Cette fois on va conserver la ligne qu'on est en train de dessiner dans le dessin final, lorsqu'on relâche le bouton de la souris. On va détecter sur le font canvas l'événement mouseUp et on va juste dessiner le front canvas dans le main canvas. La fonction de dessin d'image permet en effet de prendre comme paramètre une image mais aussi une vidéo ou un canvas ! Dans paint.js cela se passe dans la méthode drawFrontCanvasOnMainCanvas() de PaintObject. On utilise mainContext pour dessiner le front canvas dans le "main canvas", juste après on efface le contenu du front canvas avec le frontContext. this.drawFrontCanvasOnMainCanvas = function () {
mainContext.drawImage(frontCanvas, 0, 0);
// after copying the front canvas content, we clear it !
frontContext.clearRect(0, 0, frontCanvas.width, frontCanvas.height);
}
Et on appelle cette méthode depuis l'écouteur d'événements mouseUp() dans l'outil "ligne" : // The Line Drawing Tool Object
setOfDrawingTools.line = function () {
...
this.mouseup = function (event) {
paint.started = false;
paint.drawFrontCanvasOnMainCanvas();
}
};
Step 5 : ajout d'outils pour dessiner des rectangles et des cerclesAllez dans le répertoire step 5. Vous pouvez tester cet exemple en ouvrant paint.html dans votre navigateur. Cette fois-ci, nous avons suivi une méthode similaire à l'ajout de lignes élastiques, mais pour ajouter des outils de dessin de cercles et de rectangles. Vous pouvez les étudier dans le fichier drawingtools.js. Regardez en parallèle les sites contenant des tutoriaux sur les canvas (ou le cours) pour voir comment fonctionnent les méthodes de tracé de cercles ou de rectangles. Remarquez aussi qu'en ayant conçu intelligemment notre petit programme, le framework très simple permet de rajouter facilement des fonctions pour dessiner du texte, des images, etc. Step 6 : utilisation des styles de dessin, de nouveaux champs input HTML5 (color, range)Allez dans le répertoire step 6. Vous pouvez tester cet exemple en ouvrant paint.html dans votre navigateur. Cette fois-ci on a ajouté des nouveaux champs input dans la page, pour choisir la couleur et l'épaisseur du trait. Vous pourrez une fois testé, remplacer les <input class="color"/> par des vrais champs html5 de type color comme indiqué dans les commentaires. <ul>
<li>Fill color:
<!-- if running opera you may try : <input id="fillColor" type="color"
value="FFFFFF" /> instead of this jscolor input field -->
<input id="fillColor" class="color" value="FFFFFF" />
</li>
<li>Stroke color:
<!-- if running opera you may try :<input id="strokeColor" type="color"
value="FFFFFF" /> -->
<input id="strokeColor" class="color" value="000000" />
</li>
<li>
<!-- works only in Chrome and Opera, will display a standard input text in Firefox -->
Stroke size: <input id="strokeSize" type="range"
min="0" max="20" value="1" step="0.5"
style="position:relative;top:6px;" />
</li>
<li>
Fill shapes : <input id="fillShapes" type="checkbox" checked />
</li>
</ul>
On a utilisé un <input type="range"... /> pour sélectionner l'épaisseur du trait. Pour la selection de couleurs, on a utilisé un "polyfill", un champ <input class="color" /> qui fonctionne avec la librairie jscolor.js . Si vous utilisez un navigateur qui supporte <input type="color" /> il est préférable d'utiliser la version native. Modifiez juste le code et voyez que cela marche toujours. Vous venez de faire la connaissance avec la manière dont certaines librairies de "rétro compatibilité" comme modernizr fonctionnent pour donner à de vieux navigateurs la possibilité de faire fonctionner des pages utilisant des nouveautés de HTML5. Dans paint.js on gère les valeurs de ces champs qui vont affecter les styles de dessin (dans mainCanvas et dans frontCanvas) : // Handle the color menus
mainContext.strokeStyle = frontContext.strokeStyle = "#" + $("#strokeColor").val();
$("#strokeColor").change(function() {
mainContext.strokeStyle = frontContext.strokeStyle = "#" + $("#strokeColor").val();
});
mainContext.fillStyle = frontContext.fillStyle = "#" + $("#fillColor").val();
$("#fillColor").change(function() {
mainContext.fillStyle = frontContext.fillStyle = "#" + $("#fillColor").val();
});
// handle the stroke size
mainContext.lineWidth = frontContext.lineWidth = $("#strokeSize").val();
$("#strokeSize").change(function() {
mainContext.lineWidth = frontContext.lineWidth = $("#strokeSize").val();
});
var fillShapes = true;
// handle the check box that specifies if we fill shapes
//this.fillShapes = $("#fillShapes").attr('checked');
$("#fillShapes").change(function(){
fillShapes = $(this).attr("checked");
});
Ces valeurs sont "globales" et tout dessin fait avec stroke ou fill par les contextes les prendra en compte. Step7 : travail à faire par vous, ajout de nouvelles fonctions !Dans cette étape on vous demande de rajouter:
TP3 : découverte des web sockets HTML5Pour ce TP vous aurez besoin d'un micro serveur qui gère les web sockets. On va utiliser NodeJS un serveur web très populaire en ce moment pour les applications multi-participantes HTML5. Il est écrit en Python mais il embarque l'interpréteur JavaScript V8 de Chrome. Le code applicatif côté serveur n'est ni du PHP, ni du Java, mais du ... JavaScript ! Etude d'un programme de chatWe will use the NodeJS web serverNodeJS est un serveur très très minimal par défaut mais on peut l'étendre en lui ajoutant des "modules". Exemple de modules que nous allons utiliser:
IMPORTANT: les auteurs de NowJS travaillaient dans une startup qui a été racheté et le site nowJS.com est fermé ("I'm no longer maintaining NowJS. I don't have much time to devote to NowJS as I'm working full-time on another startup. I'm sorry to drop the ball on development and bugs! You might want to look at other projects like dnode which are still being actively developed. Darshan") . Des développeurs ont repris le projet open source et ont annoncé qu'ils continuaient à le maintenir. En attendant, vous pouvez consulter la dernière version du site archivée ici : http://web.archive.org/web/201107142...p://nowjs.com/. Il existe d'autres solutions alternatives à nowJS comme : http://www.meteor.com ou Installation de NodeJSSous windows c'est assez compliqué à cause de certains modules qui nécessitent une recompilation à la volée. Pour ce TP au lieu d'installer NodeJS depuis le site officiel, puis utiliser la commande "npm" (Node Package Manager), qui télécharge les modules un par un, vous allez directement installer les logiciels qui vous ont été donnés sur la clé USB au début des TPs:
Une fois tout ceci installé, ouvrez une fenêtre DOS et tapez "node --version", cela devrait afficher "node 0.6.x..." Test d'une première application NodeJS
var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello World\n');
}).listen(8124, "127.0.0.1");
console.log('Server running at http://127.0.0.1:8124/');
Sauvez le et exécutez la commande suivante : node test.js
Ouvrez cet URL dans votre navigateur ! Vous devriez avoir :
Vous venez d'exécuter votre première application NodeJS ;-) Test de l'application de chatAllez dans le répertoire où vous avez dézippé ChatNowJs.zip. Exécutez la commande : "node simpleChat_server.js", et ouvrez http://localhost:8080 dans votre navigateurr. Ouvrez deux onglets sur cet URL, vous devez avoir un champ de saisie dans chaque page. Tapez quelque chose, cela devrait apparaitre dans l'autre fenêtre (les deux sont en réalité des clients connectés au même serveur de WebSockets ). Etude de l'application de chatDeux fichiers tout petits à étudier !
Ouvrez ces fichiers avec un éditeur : ouch que c'est... petit ! Oui, on utilise ici la notion d'objets distribués, le code client qui tourne dans le navigateur appelle du code qui tourne dans le serveur et inversement. Pas de réseau au milieu ! En fait si... mais on fait comme si il n'y en avait pas ! Le module NodeJS qui fait ceci est magique, il s'appelle NowJS ! NowJS définit une "poche magique" appelée "now" : en fait une variable JavaScript que l'on manipule depuis le code qui tourne sur le client, dans le navigateur, et qui contient les variables et méthodes et objets partagés entre le client et le serveur distant. Le serveur peut utiliser une variable "everyone.now" pour définir et utiliser les variables et méthodes partagées. Par exemple, côté serveur on définit la fonctionn Serveur : everyone.now.distributeMessage = function(message){
everyone.now.receiveMessage(this.now.name, message);
};
Appel par un des clients (voir simpleChat.html) : $("#send-button").click(function(){
now.distributeMessage($("#text-input").val());
$("#text-input").val("");
});
Ainsi un clic sur le bouton "send" dans la page exécute Client : now.receiveMessage = function(name, message){
$("#messages").append("<br>" + name + ": " + message);
}
Et cette fonction, localisée côté client, va juste afficher dans la page le texte du message reçu ! De la même manière, une variable déclarée côté client comme: now.name = prompt("What's your name?", "");
Peut être récupérée directement par le serveur à l'aide de Serveur : everyone.now.distributeMessage = function(message){
everyone.now.receiveMessage(this.now.name, message);
};
A l'aide de ce paradigme, NowJS permet de développer très rapidement des applications collaboratives avec des WebSockets. Remarquez que les objets sont envoyés tels quels, pas en XML ou en JSON ! (Ils sont en réalité transformés en JSON en coulisse).
Une fois que vous avez étudié, et compris le simpleChat, essayez le Multiroomchat, Récupérer votre id (ipconfig) , exécuter la commande suivante node multiroomchat_server.js Donner l'ip à votre voisin et tester le chat multi participant, essayer de comprendre le code du serveur multiroomchat_server.js et du client multiroomchat.html
TP4 : etudier la partie multi-participants du Paint (steps 7 et 8)On ajoute la partie "chat" au programme de paintAllez dans le répertoire "step 7". Arrêtez NodeJS si il tourne encore. Regardez le fichier server.js : // Use the express module for nodeJS
// Express is a framework for implementing a more
// complete web server with nodeJS
var express = require('express');
var app = express.createServer();
// Indicate where static files are located
app.configure(function () {
app.use(express.static(__dirname + '/client/'));
});
app.get('/', function (req, res) {
//res.render('client/paint.html');
res.redirect("/paint.html");
});
app.listen(8080);
// Creation of a web socket server using nowJS
var nowjs = require("now");
var everyone = nowjs.initialize(app);
nowjs.on("connect", function () {
console.log("Joined: " + this.user.clientId);
});
nowjs.on("disconnect", function () {
console.log("Left: " + this.user.clientId);
});
// Function called by a chat client, passes the message to each client
// connected by calling its processIncomingChatMessage shared function
everyone.now.distributeMessage = function (message) {
// send the message to everyone
everyone.now.processIncomingChatMessage(this.now.name, message);
};
Ce code est similaire à celui du chat que nous avons étudié précédemment, à part que cette fois-ci nous utilisons le module "express" de NodeJS pour créer le serveur HTTP (13 premières lignes). Express permet de servir correctement des pages HTML qui incluent des fichiers JavaScript, des images ou des feuilles de style CSS. En effet, par défaut, ce que faisait l'exemple du chat, c'est uniquement servir un fichier html tout bête. Là, express saura envoyer les bons types Mime (content/html, application/javascript, text/css) lorsqu'il servira les différents fichiers. Exécutez la commande suivante : "node server.js", et ouvrez "http://localhost" dans votre navigateur. Vous devriez voir le même programme s'exécuter que dans l'étape "step 6", mais avec en plus un chat en bas de la page ! REMARQUE: Pour ceux qui ont un Mac ou qui sont sous Linux, ou ceux qui veulent faire fonctionner les exemples avec Node 0.8.x et pas le node 0.6.x, sachez que le module NowJS n'est plus compatible avec le module "express". On pourra simplement utiliser un module semblable à "express", le module "connect", voici le code qui va bien. Si vous travaillez avec le NodeJS qui vous a été donné, n'en faites rien ! var connect = require("connect");
var nowjs = require("now");
var http = require("http");
var app = connect();
app.use(connect.static(__dirname + '/client'));
var httpApp = http.createServer(app).listen(8080);
var everyone = nowjs.initialize(httpApp);
nowjs.on("connect", function () {
console.log("Joined: " + this.user.clientId);
});
nowjs.on("disconnect", function () {
console.log("Left: " + this.user.clientId);
});
// Function called by a chat client, passes the message to each client
// connected by calling its processIncomingChatMessage shared function
everyone.now.distributeMessage = function (message) {
// send the message to everyone
everyone.now.processIncomingChatMessage(this.now.name, message);
};
FIN DE LA REMARQUE Ouvrez deux onglets avec le même URL, testez le chat... A la fois le paint et le chat devraient fonctionner. Dans la prochaine étape, nous utiliserons le canal du chat pour transférer les ordres de dessin. Regardez le code source maintenant. Nous avons isolé le code JavaScript du chat dans le fichier chat.js, et nous avons ajouté le champ de saisie du chat dans la page paint.html. On utilise un <div> pour afficher les messages. Voici les additions au fichier paint.html : <head>
...
<!-- NowJS is a High level lib built on top of socket.io.
Uses WebSockets if available. The page needs to
be served by the NodeJS server -->
<script src="js/chat.js"></script>
<script src="/nowjs/now.js"></script>
<script type="text/javascript">
// Run when the DOM is ready
$(document).ready(function () {
// Create the pseudo object which will handle the main canvas
paint = new PaintObject("canvasMain");
// Bind events to the canvas
paint.bindMultiplexEvents();
// Init the chat system
now.ready(function () {
// We must be sure "now" exists. So we prompt the user only
// when the shared variable "now" is ready !
// prompts a dialog and asks for a nickname
now.name = prompt("What's your name?", "");
//Create the pseudo object which will handle the chat
chat = new ChatObject();
});
});
</script>
</head>
Remarquez que paint.html inclut un fichier now/now.js file qui est servi par NodeJS, ce fichier ne fait pas partie du projet, il est envoyé par le serveur, par son module NowJS. Le fichier now.js est en réalité localisé dans le répertoire node_modules/now dans le répertoire step 7. Sans ce répertoire node_modules, il serait impossible de faire fonctionner notre application. De même, si on ouvre paint.html en tant que file://, cela ne peut pas non plus fonctionner. Remarquez qu'on initialise le chat qu'une fois que le DOM est prêt, dans la fonction $(document).ready() de jQuery. C'est la manière de jQuery d'implémenter le <body onload=...> Et voilà les quatre lignes à la fin du fichier paint.html, pour le chat, ce sont les mêmes qu'on avait dans l'exemple du chat tout seul: <div id="chat">
<div id="chatMessages"></div>
<input type="text" id="chatTextInput">
<button class="menuButton" type="button" id="chatSendButton">Send</button>
</div>
Voici le code qui gère le click sur le bouton, et qui envoie le texte entré dans le champs de saisie. C'est le même que dans le chat tout seul, il est situé dans le fichier chat.js: var chat;
function ChatObject() {
// Handle message input for the chat
// When the send button has been clicked... or when the enter key has been
// pressed -> send content to the chat
// server
$("#chatTextInput").keypress(function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 13) {
sendChatMessage();
}
});
$("#chatSendButton").click(function () {
sendChatMessage();
});
function sendChatMessage() {
if ($("#chatTextInput").val() != "") {
// This function is defined on the JavaScript code that runs on the server
now.distributeMessage($("#chatTextInput").val());
$("#chatTextInput").val("");
}
}
// This function is called when a chat message arrives. Called by the server !
now.processIncomingChatMessage = function (username, message) {
// appends the incoming message to the messageLogs
$("#chatMessages").append("<p><strong>" + username + "</strong> : " +
message + "</p>");
$("#chatMessages").get(0).scrollTop = $("#chatMessages").get(0).scrollHeight;
}
};
Step 8 : Broadcaster les ordres de dessinAllez dans le répertoire "step 8". Arrêtez NodeJS si il tourne encore. Exécutez le programme comme pour le step 7. Coté serveur : on broadcaste les ordres de dessin, sauf à l'envoyeurCette fois-ci, sans rien toucher au code du chat, on a rajouté juste une simple méthode appelable depuis les clients, pour broadcaster les ordres de dessin. Les ordres de dessin sont des objets JavaScript qui contiendront tout ce qu'il faut pour que le récepteur puisse reproduire le dessin quand il recevra l'ordre. Ainsi, si quatre personnes sont connectées, et que la première trace une ligne, les trois autres recevront un objet paintCommand comme {type:line, x1:20, y1:50, x2:123, y2:240}, il suffira de tester paintCommand.type pour tracer une ligne de (paintCommand.x1, paintCommand.y1) jusqu'au pixel (paintCommand.x2, paintCommand.y2)
Serveur (fichier server.js) : everyone.now.distributePaintCommand = function (paintCommand) {
// send the paint command to everyone except sender
everyone.exclude(this.user.clientId).now.processPaintCommand(paintCommand);
};
On utilise aussi une autre feature très pratique du module NowJS : la possibilité d'exclure quelqu'un lors du broadcast: ici l'expéditeur. La partie En effet, si un client dessine une ligne, elle est déjà dessiné sur son écran, pas la peine qu'il recoive son propre message pour dessiner une ligne déjà dessinée. C'est la seule différence avec le chat où on renvoit les messages à tout le monde y compris à l'expéditeur. Envoi des ordres de dessinDans le client, l'envoi des ordres de dessin est situé dans chaque drawing tool (crayon, ligne, cercle, etc). Regardons juste l'outil "ligne" dansle fichier drawingtools.js : // The Line Drawing Tool Object
setOfDrawingTools.line = function () {
...
this.mousemove = function (event) {
...
sendLineMove(mousePos);
};
// Send the line to other clients.
function sendLineMove(mousePos) {
var paintCommand = {};
paintCommand.type = 'lineMove';
paintCommand.previousMousePos = previousMousePos;
paintCommand.currentMousePos = mousePos;
paintCommand.properties = paint.getCurrentContextProperties();
now.distributePaintCommand(paintCommand);
}
this.mouseup = function (event) {
...
paint.sendOrderToDrawFrontCanvasOnMainCanvas();
}
};
On a ajouté une méthode Une fois construit, on envoie cet objet au serveur pour qu'il le broadcaste, en appelant la méthode Traitement des ordres de dessin qu'on reçoit du serveurPremièrement, on a définit dans le fichier paint.html une méthode appelable par le serveur: now.processPaintCommand (paintCommand) . As it is defined as a method of the now object, it is callable by the server code. <script type="text/javascript">
// Run when the DOM is ready
$(document).ready(function () {
// prompts a dialog and asks for a nickname
now.ready(function () {
...
now.processPaintCommand = function (paintCommand) {
paint.processPaintCommand(paintCommand);
};
...
});
});
</script>
Ainsi, chaque fois que le serveur appelle processPaintCommand() chez les clients connectés, cette méthode appelera à son tour paint.processPaintCommand(paintCommand), une méthode de l'objet paint, localisée dans le fichier the paint.js. Elle reproduit le dessin correspondant à l'ordre reçu: this.processPaintCommand = function (paintCommand) {
// save contexts on a stack, method provided by the canvas API
mainContext.save();
frontContext.save();
// change current contexts so that they are same as sender contexts
this.changeContextsProperties(paintCommand.properties);
switch (paintCommand.type) {
...
case 'lineMove' :
// clear the content of the front canvas
frontContext.clearRect(0, 0, frontCanvas.width, frontCanvas.height);
// draw the line, using values received in the paintCommand...
...
break;
...
case 'drawFrontCanvasOnMainCanvas' :
// Got the order to draw front canvas on main canvas
this.drawFrontCanvasOnMainCanvas();
break;
}
// restore contexts, current color, etc. From canvas API
mainContext.restore();
frontContext.restore();
}
C'est un concept très simple: je reçois l'ordre de dessiner une ligne, je trace une ligne ! En fait, il y a une toute petite complication concernant les propriétés du dessin, si on est en train de dessiner en vert et qu'on reçoit l'ordre de dessiner en rouge, il faudra changer momentanément la couleur pour du rouge, puis remettre comme c'était avant, en vert !!!! On appelle cela "changer les contextes"... voici au final ce que l'on fait quand on reçoit un ordre de dessin:
Pour la sauvegarde et la restauration, on utilise les méthodes save() et restore() du contexte des canvas, elles sont dans l'API des canvas. Ces méthodes permettent de sauvegarder sur une pile plusieurs contextes consécutifs et de les dépiler. Vous pouvez aussi regarder comment nous avons traité les ordres de dessin pour les différents outils implémentés (rectangle, cercle, etc).
Utilisation de la webcam pour dessiner avec l'image courante de la webcam et la transmettre (step8)STEP 7 => outils webcam STEP 8 => outils webcam + transmition sur avec nowjs ( pour que ça fonctionne 127.0.0.1:8080 et pas localhost:8080) Juste pour le fun on a ajouté la possibilité de dessiner des rectangles avec pour contenu l'image courante de la webcam. Ceci ne marche qu'avec Opera ou Chrome. Initialiser l'API getUserMediaComme dans les exemples du cours HTML5 concernant la webcam, on a ajouté une ligne pour initialiser la webcam dans le fichier paint.html, et on a mis le code JavaScript propre à la webcam dans le fichier webcam.js
Voici le fichier webcam.js. L'élément d'id "output" est un tag <video> situé lui aussi dans la page paint.html, c'est lui qui affiche la vidéo de la webcam, sur la droite de l'écran.
Principe d'utilisation de la webcam :
and you are done ! Ces lignes suffisent à afficher la webcam dans la page. Peindre avec des images en provenance de la vidéo de la webcamOn a juste ajouté un "webcam" drawing tool dans drawingtools.js :
On utilise la même chose que pour l'outil rectangle sauf qu'on utilise la fonction pour dessiner des images (paint.getFrontContext().drawImage(video, .....)), avec comme paramètre le tag vidéo. Cela revient, comme dans les exemples du cours où on prend des snapshots d'une vidéo qui joue, à dessiner l'image courante de la vidéo. Envoie des images pour broadcast. On les envoie en format base64 en tant que dataURLL'astuce ici consiste à dessiner l'image de la vidéo dans un canvas invisible, qui fait la taille du rectangle qu'on dessine. Ceci permet de n'envoyer qu'une petite image, et pas une image pleine résolution. On récupère le contenu de ce canvas, sous la forme d'un dataURL, et on l'envoie au serveur pour broadcast. On utilise ma méthode offScreenCanvas.toDataURL("image/png") pour récupérer l'image png du canvas non visible encodée en base64. Les WebSockets sont sur HTTP et HTTP est un protocole texte ! Et le format base64 c'est du texte ! On a ajouté quelques lignes au webcam drawing tool:
Traiter les images reçues en base64 pour les dessinerOn a ajouté quelques lignes dans paint.js , là où on traite les ordres de dessin reçus. Remarquez que lorsqu'on reçoit une image encodée, on reconstruit un objet de type image (var img = new Image(); et img.src = paintCommand.data... On ne peut dessiner l'image que dans le callback img.onload(), voir les exemples du cours sur le dessin d'image, on ne peut faire que de cette manière...
Ajouter le texte, au paint multi ! 1) Recupérer la fonction de texte faite dans le tp précédent. 2) On définit une fonction sendText dans le fichier drawingTools.js (qui contruit l'objet qui va etre envoyé) 3)On définit un "case" en plus dans la fonction processPaintCommand dans le fichier paint.js (qui définit ce qu'il faut faire lorsqu'on recoit un objet de type texte) |
Powered by MindTouch Deki Open Source Edition v.8.08 |
