ShareDraw

Fonctionnement

Interface graphique

• un fragment d'affichage de la liste des utilisateurs du tableau
• un fragment pour la visualisation et l'édition du tableau
• un fragment comportant l'historique des messages de discussion offrant également la possibilité d'envoyer un nouveau message (les destinataires étant sélectionnés dans le fragment de la liste des utilisateurs)

Fragment tableau

Capture et rejeu des dessins

Médium de communication

• Indique que l'on rejoint un tableau blanc:

    {
      "admin": "join"
    }
          

• Indique que l'on quitte un tableau blanc:

    {
      "admin": "leave"
    }
          

• Trace une ellipse de centre (x, y) et de rayon radiusX sur l'axe des abcisses et radiusY sur l'axe des ordonnées (si radiusX = radiusY, il s'agit d'un cercle):

    {
      "draw": {
        "shape": "ellipse",
        "center": [x, y],
        "radius": [radiusX, radiusY]
      }
    }
          

• Trace un rectangle dont le coin supérieur gauche a pour coordonnées (left, top) et le coin inférieur droit (right, bottom):

    {
      "draw": {
        "shape": "rectangle",
        "left": left,
        "top": top,
        "right": right,
        "bottom": bottom
      }
    }
          

• Trace une ligne comportant une succession de segments dont les extrémités sont indiquées en coordonnées ; les coordonnées (xi, yi) sont les coordonnées du début du segment i et de la fin du segment i-1 ; si (x1, y1) = (xn, yn), la ligne est fermée:

    {
      "draw": {
        "shape": "polyline",
        "coordinates": [[x1, y1], [x2, y2], ..., [xn, yn]]
      }
    }
          

• Permet d'écrire du texte (ici "Hello World!") à la position indiquée qui représente le coin supérieur gauche du texte:

    {
      "draw": {
        "shape": "text",
        "position": [x, y],
        "content": "Hello world!"
      }
    }
          

• Permet d'adresser un message au destinataire "foo" (plusieurs destinataires peuvent être indiqués en les séparant par des virgules, il est possible aussi de ne pas spécifier de destinataire en n'indiquant pas la clé "destination" ou alors en utilisant la valeur null ; le message est alors envoyé à tous les membres du tableau):

    {
      "say": {
        "content": "Message to say",
        "destination": "foo"
      }
    }
          

  {
    "draw": {
      ...,
      "options": { ... }
    }
  }
      

• strokeWidth pour indiquer l'épaisseur du tracé du trait (sous la forme d'un flottant)
• strokeColor pour indiquer la couleur du trait (une liste de 4 entiers compris entre 0 et 255 pour le canal alpha et les trois composantes primaires rouge, vert et bleu)
• fillColor pour indiquer la couleur de remplissage du tracé (couleur exprimée de la même façon que strokeColor)
• fontSize pour indiquer la taille de la fonte utilisée pour dessiner du texte

1.   {
       "draw": {
         "shape": "rectangle",
         "left": -1.0,
         "top": -1.0,
         "right": 1.0,
         "bottom": 1.0,
         "options": {
           "strokeWidth": 0.01,
           "strokeColor": [255, 0, 0, 0],
           "fillColor": [255, 255, 0, 0]
         }
       }
     }
           

2.   {
       "draw": {
         "shape": "ellipsis",
         "center": [0.0, 0.0],
         "radius": [1.0, 1.0],
         "options": {
           "strokeWidth": 0.02,
           "strokeColor": [255, 0, 0, 255],
           "fillColor": [0, 0, 0, 0]
         }
       }
     }
           

Améliorations

Documentation

Feuille de route

1. Fonctionnement basique d'une vue pour le tableau blanc. Cette vue doit être connectée à un modèle stockant les formes et doit être rafraîchie lorsque le modèle évolue. On teste cette vue avec un seul type de forme pour commencer.
2. Récupération des tracés des autres utilisateurs. Un service se charge de contacter le serveur web central pour récupérer les tracés correspondant à un tableau donné. Il envoie ces tracés à l'activité qui les rajoute dans son modèle connecté à la vue d'affichage.
3. Envoi des tracés. Un listener enregistré sur le modèle provoque l'envoi des tracés ajoutés localement vers le service qui lui-même les envoie sur le serveur web. Le service communiquant avec le serveur web doit pouvoir s'accomoder des pertes de connectivité.
4. Support du déplacement sur le tableau blanc. L'utilisateur doit pouvoir déplacer la portion du tableau visualisée à l'écran.
5. Support de l'échelle sur le tableau blanc. Le zoom/dezoom à différentes échelles doit être supporté.
6. Support de différentes formes pour le tracés. Il doit être possible de dessiner des rectangles, ellipses, lignes... Les formes sont sélectionnables sur une palette affichée sur le tableau (et déplaçable). Le code est suffisamment modulaire pour pouvoir ajouter avec un moindre effort une nouvelle forme.
7. Utilisation de fragments. Le tableau doit être affichable sous la forme d'un fragment.
8. Support de la fonctionnalité de chat. Deux autres fragments doivent être ajoutés pour afficher la liste des utilisateurs ainsi que la liste des messages postés. Il doit être possible de poster un nouveau message et recevoir les messages envoyés.
9. Sauvegarde en local du tableau. Un tableau doit être sauvegardable localement sous la forme d'un fichier et exportable par bluetooth, email, envoi sur un réseau social... Le tableau doit être consultable hors-ligne avec un curseur permettant d'observer son état à un instant donné.
10. Chiffrement des messages. Les messages privés sont chiffrés avec les clés publiques des destinataires des messages ; chaque utilisateur rejoignant un tableau pouvant intégrer dans son message "join" un champ avec sa clé publique.