TP2 : un paint HTML5

Un peu de lecture

1. Parcourir les différents liens proposés dans la page des ressources HTML 5, s'attarder un peu plus longuement sur la partie consacrée au widget de type Canvas. Parcourir en particulier le premier lien avec un peu d'attention.
2. Faire intégralement le tutorial http://dev.opera.com/articles/view/h...nvas-painting/

Un peu de codage

1. Rajouter de quoi dessiner un cercle,
2. Rajouter de quoi choisir la couleur du dessin (aide : vous pouvez soit utiliser un menu, soit un canvas dans lequel vous dessinez des rectangles colorés, soit carrément, vous piquez le colorPicker widget de cet exemple, vous devrez un peu plonger dans les sources...). Google est votre ami !

Un peu de réflexion

1. Vous devrez maintenant récupérer les évènements de dessin car nous allons plus tard les transférer sur le réseau (n'oubliez pas le fil rouge de ce cours : un pictionary multi-joueurs !), pour cela, vous ajouterez un gestionnaire d'événements sur la souris, et vous commencerez par écrire (en français) la description des dessins ("ligne droite dessinée entre (12,15) et (134, 145)", "cercle dessiné en (59, 37) de rayon 45", "dessin à main levé, path="(12, 16), (25, 45), (46, 67), etc...), ).
2. Maintenant, vous stockerez ces événements de manière plus formelle sous la forme d'objets javascript (un array de points pour le dessin à main levé, etc.). Réflechissez à un format facilement transmissible sur le réseau et facilement décodable de chez le destinataire !

Un peu de persistence

Nous allons maintenant sauvegarder nos dessins dans une base de donnée SQL du navigateur, le tout depuis du javascript ! La norme HTML5 exige que les navigateurs intègrent une BD SQL légère. Commencez par regarder l'exemple du cours et par le faire fonctionner : http://slides.html5rocks.com/#web-sql-db.

Sous chrome, si vous utilisez le raccourci ctrl-shift-i (sous windows, sous mac, faire command-alt-i, sous linux, cherchez donc !), vous verrez la console des développeurs webkit

 Regardez maintenant le source du transparent correspondant (vous pouvez le retrouver en faisant "view source" et en cherchant le mot-clé "SQL"). On trouve en particulier le code qui crée la base et la table :

function createTable() {
   db.transaction(function(tx) {
      tx.executeSql("CREATE TABLE Table1Test (id REAL UNIQUE, text TEXT)", [],
                  function(tx) {  log.innerHTML = '"Table1Test" created!' },
                                  onError);
   });
}