Présentation :

Cette application est un grand classique. Elle consiste à dessiner dans un cadre. Cette version est inspirée de David Wolber.
Pour commencer, vous dessinerez des lignes et points de différentes couleurs et épaisseurs, puis vous prendrez une photo et l'afficherez comme fond du dessin.

Photo-reportage ?

Cette application peut être déclinée comme une application de reportage (cf.applis intermédiaires) : prendre une photo dans la rue, la dater et la géolocaliser automatiquement, la commenter graphiquement et l'envoyer ...

Ce que vous allez faire :

Vous allez réaliser cette application avec les fonctions suivantes :

• dessiner des points en touchant l'écran,
• tracer des lignes en glissant le doigt sur l'écran,
• choisir la couleur en cliquant sur le bouton correspondant,
• effacer votre dessin,
• changer la taille des points et l'épaisseur des lignes,
• et prendre un photo pour l'afficher en fond d'écran du dessin.

Ce que vous allez apprendre :

Ce tutoriel vous conduira à :

• définir une application par la manière dont elle réagit à une liste d'évènements
  (programmation évènementielle ou event driven programming),
• choisir les composants dont vous avez besoin et les mettre en page (Design)
  • des boutons pour choisir les couleurs, l'épaisseur du trait, effacer ou prendre une photo,
  • un cadre (canvas) pour dessiner et afficher la photo,
  • des arrangements horizontaux pour mettre en page,
  • un appareil photo (camera).
• décrire ce que doit faire l'application pour chaque évènement puis coder ce comportement dans un script associé à cet évènement,
• définir et utiliser des variables, par exemple pour la taille des points.

Ressources en entrée :

Pour cette application, connectez vous au site app Inventor http://ai2.appinventor.mit.edu/?locale=fr_FR et créez un nouveau projet appelé Paintpot. Si vous êtes en groupe, ajoutez vos initiales à la fin, par exemple Paintpot_PH ou suivez les indications de votre animateur.

Réalisation

Décomposition fonctionnelle :

Les fonctions de cette application sont :

1. tracer des points en cliquant dans le cadre,
2. dessiner des lignes en glissant le doigt dans le cadre,
3. changer la couleur avec les boutons,
4. effacer avec un bouton,
5. changer l'épaisseur des lignes et la taille des points,
6. prendre une photo et afficher l'image.

Design de l'application :

Nous allons commencer par définir la partie de l'application qui est visible à l'écran, et choisir toutes les ressources nécessaires à son fonctionnement.

Créer trois boutons pour le choix des couleurs

• Depuis la colonne de gauche, et l'onglet "Interface Utilisateur", glissez/déplacez un Bouton dans la fenêtre. Puis, dans la partie droite, renommez le bouton en BoutonRouge, et modifiez ses propriétés dans la colonne de droite : mettez le texte à “Rouge”, la couleur de fond du bouton à rouge, la taille et la hauteur à automatique.
• idem pour les 2° bouton en bleu et le 3° bouton en vert.

Il est important que le nom des composants permette de savoir à quel type ils appartiennent (bouton, cadre, ...) et leur rôle. Si vous ne le faites pas dans cette phase de Design, vous ne vous en rappellerez plus pendant la programmation des blocs. Soignez votre style, un programme bien écrit doit être facile à lire par des personnes qui ne l'ont pas écrit.

Arranger horizontalement les boutons

On souhaite que les boutons soient disposés horizontalement plutôt que verticalement :

• depuis la catégorie Disposition glissez/déplacez un arrangement horizontal dans la fenêtre,
• renommez cet arrangement ArgtHorCouleurs,
• modifiez la largeur en remplir parent et l'alignement horizontal en centrer,
• puis avec la souris, déplacez les trois boutons dans l'arrangement horizontal.

Testez votre application sur votre téléphone en mode connect.

Ajouter un cadre pour le dessin et l'image

1. Depuis la catégorie Dessin et animation glissez dans la fenêtre un composant cadre. Renommez le composant en CadreDessin, mettez sa largeur à remplir parent et sa hauteur à 320 pixels.
   Nota : Lorsque la propriété sizing de Screen1 est à fixed la largeur de l'écran est de 320 pixels et sa hauteur 480. Si vous passez à responsive, la résolution sera celle du téléphone. Alors, il vaut mieux choisir les tailles en pourcentage.
   
   
2. Mettez la couleur de dessin du cadre à rouge, qui sera la couleur initiale,


3. Vous pouvez importer une image au format jpeg ou png et la choisir comme fond en cliquant dans la fenêtre de la propriété image de fond. Choisissez une image de petite taille, (quelques centaines de pixels en largeur et hauteur) à peu près carrée pour correspondre au facteur d'aspect du cadre.
   Ici nous avons choisi sur internet une image de BSF, retaillée avec Paint à 320x 320 pixels.

   Créer et mettre en page les boutons de dessin et pour la photo :

   • depuis la catégorie Disposition glissez/déplacez un arrangement horizontal dans la fenêtre, sous le cadre image
   • renommez cet arrangement ArgtHorDessin, et mettez sa largeur à remplir parent et son alignement horizontal en centrer,
   • créez quatre boutons dans cet arrangement par glisser/déplacer depuis la catégorie Interface utilisateur et nommez ces boutons : BoutonPrendrePhoto, BoutonEffacer, BoutonGrosTrait, BoutonTraitFin,
     Notez que le nom de ces composants permet de savoir que ce sont des boutons et qu'il permet d'avoir une bonne idée de ce qu'il fait. Par aileurs, notez qu'il n'y a pas de blanc et qu'il est d'usage de mettre une majuscule au début de chaque mot dans le nom, ce qui permet de le lire facilement.
   • si vous le souhaitez, vous pouvez importer des icônes en image de fond des boutons. Choisissez les de petite taille 32x32 ou 64 x64. Vous devrez également fixer leur hauteur et largeur en pixels, pour harmoniser,
   • ajoutez un composant Caméra depuis la catégorie de media. Ce composant n'a pas d'interface visible, il apparait en-dessous de la fenêtre.

Vérifiez le résultat sur votre téléphone ou tablette (Si vous étiez connectés, il est possible que la connection ait été rompue, vous devrez peut-être la relancer). Le résultat devrait avoir cet aspect là :

La partie design est à présent terminée, elle a conduit au choix et à la mise ne page de la liste des composants rappelés ci-dessous, avec leur rôle :

Composant	Groupe	Nom	Rôle fonctionnel
		Screen1	Composant parent obligatoire Alignement horizontal : centrer AppName : PainPot Orientation écran : portrait Icône : néant ou petite image importée dans des les Média.
Arrangement horizontal	Disposition	ArgtHorCouleurs	Encapsule les boutons pour la couleur Hauteur : automatique Largeur : remplir parent Alignement horizontal : centrer
Bouton	Interface utilisateur	BoutonRouge	Sélection rouge (dans arrangement précédent) Hauteur et largeur : automatique Texte : Rouge
Bouton	Interface utilisateur	BoutonBleu	Sélection bleu (dans arrangement précédent) Hauteur et largeur : automatique Texte : Bleu
Bouton	Interface utilisateur	BoutonVert	Sélection rouge (dans arrangement précédent) Hauteur et largeur : automatique Texte : Vert
CadreDessin	Dessin et animation	CadreCarte	Cadre dans lequel les autres boutons Hauteur : 320 px Largeur : remplir parent
Arrangement horizontal	Disposition	ArgtHorDessin	Encapsule les boutons pour la couleur Hauteur : automatique Largeur : remplir parent Alignement horizontal : centrer
Bouton	Interface utilisateur	BoutonPrendrePhoto	Déclenche la prise de photos (dans arrangement précédent) Hauteur et largeur : automatique
Bouton	Interface utilisateur	BoutonEffacer	Effacer le dessin (dans arrangement précédent) Hauteur et largeur : automatique
Bouton	Interface utilisateur	BoutonGrosTrait	Passer à des traits épais et des gros points (dans arrangement précédent) Hauteur et largeur : automatique
Bouton	Interface utilisateur	BoutonTraitFin	Passer à des traits fin et des petits points (dans l'arrangement précédent) Hauteur et largeur : automatique

Programmation :

Après avoir défini l'aspect visuel de l'application et les ressources qu'elle utilise (la caméra), nous allons maintenant pogrammer le comportement de l'application avec des séquences blocs appelés scripts.
Chaque script commence par un évènement et définit le comportement de l'application quand cet évènement se produit. C'est ce que l'on appelle la programmation évènementielle ou event driven programming. Chaque évènement est associ à un gestionnaire d'évènement ou event handler qui correspond - dans App Inventor - aux blocs de couleur beige. (Les blocs verts sont des propriétés, avec une valeur, et les blocs violets sont des fonctions ou procédures ou fonctions).

La liste des évènements disponibles pour la programmation est la liste des évènements de tous les composants que l'on a mobilisé dans la partie design, en l'occurence pour les composants Screen1, les boutons,le Cadre, et la caméra. Vous pouvez les voir en début de liste quand vous sélectionnez un composant dans la colonne de gauche :

Reprenons la liste des fonctions vues au départ, etréécrivons les avec les évènemenst dipsonibles :

Fonction	Evènement et action
Dessiner des points en touchant l'écran,	Quand CadreDessin.Touché dessiner un point aux coordonnées touchées,
Tracer des lignes en glissant le doigt sur l'écran,	Quand CadreDessin.Glissé dessiner une ligne entre le point précédent et le point courant,
Choisir la couleur en cliquant sur le bouton correspondant,	Quand BoutonRouge.Clic mettre la couleur du dessin à rouge, idem pour BoutonBleu et BoutonVert.
Effacer le dessin,	Quand BoutonEffacer.Clic effacer le dessin,
Changer l'épaisseur des lignes et la taille des points,	Quand BoutonGrosTrait.Clic mettre l'épaisseur du trait et la taille du point à une valeur forte (à ajuster)
Prendre un photo et l'afficher en fond d'écran pour le dessin.	Quand BoutonPrendrePhoto.Clic appeler la fonction qui prend une photo. Mais ça ne va pas suffire, il faudra récupérer et afficher la photo, .... on verra ça un peu plus loin.

Pour passer à la programmation du comportement de l'applicataion, vous devez passer de la partie Design à la partie Blocs en cliquant sur le bouton Blocs en haut à droite de la fenêtre. Les scripts du programme seront dans la partie centrale. On va les construire en glisssant des blocs depuis la colonne de gauche où on retrouve les composants définis dans la partie Design. Les blocs disponibles pour chaque composant apparaissent quand on clique sur le composant dans la colonne de gauche. Dans l'exemple ci-dessus, on a sélectionné le composantCadreDessin et la liste des blocs disponibles dans ce composant sont affichés pour que l'on puisse choisir celui que l'on veut : les évènements puis les procédureset les propriétés. Tout script devant commencer par un évènement.

Dessiner un point quand le cadre est touché :

Dans le bloc correspondant à l'évènement Quand CadreDessin.Touché vous allez écrire le script qui dessine un point à l'endroit touché.

1. Dans la colonne de gauche, sélectionnez le composant CadreDessin puis faites glisser dans la partie centrale le bloc Quand CadreDessin.Touché. Les paramètres x et y à l'intérieur de ce bloc nous indiquent l'endroit ou les coordonnées du point touché.
2. De même, toujours depuis le composant CadreDessin, faites glisser dans la partie centrale le bloc CadreDessin.Dessiner cercle, et mettez le dans le bloc précédent. Vous aurez peut être besoin de descendre avec l'ascenceur dans la liste pour voir ce bloc.
   Cette procédure comprend des encoches pour quatre paramètres dont le dernier est déjà assigné à vrai. Les deux premiers centerX et centerY correspondent à l'endroit ou aux coordonnées auxquels le point sera dessiné. Le troisième radius correspond à sa taille en pixels.
   • On va prendre les coordonnées touchées : les paramètres du bloc Quand CadreDessin.Touché
   • pour les mettre dans les coordonées à dessiner dans le bloc CadreDessin.Dessiner cercle.
   Pour ajouter le paramètre x, vous pouvez sélectionner dans la colonne de gauche et le premier onglet (incorporé ou built in)le composant variables, glisser un bloc obtenir vers l'encoche du apramètre x et sélectionner, via le petit triangle de ce bloc, la bonne variable.
   Une manière plus rapide de le faire est de faire passer la souris au dessus du paramètre x dans le bloc Quand CadreDessin.Touché, ce qui aura pour effet de faire apparaitre le bloc recherché que vous pourrez glisser au même endroit.

3. Choisissons maintenant la taille du crayon, ou le rayon (radius) du point ou du cercle.
   Il suffit de mettre une valeur en entrée du paramètre radius de la procédure CadreDessin.Dessiner cercle.
   
   Mais, anticipons un peu et rappelez vous que l'on va devoir changer cette taille. La taille du crayon n'est pas fixe, mais variable. On va donc définir la taille du crayon comme une variable avec un nom pour la manipuler dans le programme, par exemple : tailleDuCrayon (dans les noms de variables, on ne peut pas mettre de blanc).
   D'un côté on va fixer la valeur de cette variable, puis son nom sera utilisé pour remplacer sa valeur. On utilise donc un bloc pour créer la variable et lui donner une valeur, puis on l'utilise à la place du chiffre dans la procédure CadreDessin.Dessiner cercle.
   
   Testez les deux solutions, elles donnent le même résultat, mais dans le deuxième cas, on pourra changer la taille du point en donnant une nouvelle valeur à la variable tailleDuCrayon.
   

   Testez votre application : Quand vous touchez la fenêtre ou le cadre du dessin, un point doit être dessiné à l'endroit touché. La couleur du point doit correspondre àa celle que vous avez choisie dans la paretir Design, c'est la propriété couleur de dessin, donc rouge si vous avez choisi la même couleur que tout à l'heure.

   Dessiner une ligne quand vous glissez ledoigt sur le cadre :

   Après le point dessiné en touchant l'écran, on va dessiner une ligne en glissant le doigt sur l'écran.

   Depuis la colonne de gauche et le composant CadreDessin faites glisser dans la partie centrale le bloc Quand CadreDessin.Glissé, puis faites glisser le bloc CadreDessin.Dessiner ligne et posez le dans le bloc précédent.

   Comme dans le cas précédent, on va utiliser les paramètres renvoéys par l'évènement Glissé pour ensuite dessiner avec la procédure Dessiner ligne.

   Les paramètres renvoyés par l'évènement Quand CadreDessin.Glissé sont Xdébut, Ydébut, Xprécédent, Yprécédent, Xactuel, Yactuel et draggedanysprite.
   • Xdébut et Ydébut correspondent aux coordonnées au moment où j'ai posé le doigt,
   • Xactuel et Yactuel correspondent à la dernière position (quand l'évènement se déclenche),
   • Xprécédent et Yprécédent correspond à l'avant dernière position, sachant que l'évènement se déclenche à chaque fois que le doigt bouge un peu, donc souvent.

   A chaque fois que l'évènement se déclenche, on va donc tracer un trait entre l'avant dernière position et la dernière. On aura ainsi une courbe constituée de petits segments de droite.

Testez votre application en dessinant une ligne.

Changez la couleur en cliquant sur les boutons :

Nous allons maintenant utiliser les boutons pour changer la couleur et pour effécaer le dessin.

1. Depuis la colonne de gauche et le composant BoutonRouge glissez dans la partie centrale le bloc Quand boutonRouge.Clic,
2. Depuis le composant CadreDessin faites glisser le bloc qui permet de mettre la couleur de dessin dans le bloc précédent.
3. Dans l'onglet des couleurs sélectionnez la couleur rouge et assignez la dans l'encoche du bloc précédent
4. Faites la même chose pour les boutons vert et bleu. (vous pouez dupliquer l'évènement du prmeir bouton puis changer le nom du bouton et les couleurs en cliquant sur les triangles associés au nom des boutons paramètres et en changeant les couleurs)

Effacez le dessin :

1. Depuis la gauche et le composant BoutonEffacer glissez le bloc Quand boutonEffacer.Clic,
2. Depuis le composant CadreDessin faites glisser à l'intérieur le bloc CdreDessin.supprimer (qui correspond à effacer ou clear en anglais)

Testez votre application en dessinant des points et ligens de diférentes ouleur et en effaçant.

Changer la taille des points et des lignes

Nous avons vu que la taille du crayon est enregistrée dans une variable, et que cette variable est utilisée dans le bloc de dessin. Nous allons modifier la taille des points, (puis l'épaisseur des lignes) avec les boutons BoutonGrosTrait etBoutonTraitFin

1. Depuis la gauche et le composant BoutonGrosTrait glissez le bloc Quand BoutonGrosTrait.clic dans la fenêtre,
2. Depuis les variables (catégorie Incorporé ou Built In glissez le bloc Mettre ... à à l'intérieur du bloc précédent,
3. Puis, en cliquant sur le triangle à l'intérieur du paramètre de ce bloc, sélectionnez la variable tailleduCrayon définie plus haut,
4. et affectez une valeur avec un bloc de la catgorie des mathématiques, par exemple 10.
5. Faites la même chose avec le bouton BoutonTraitfin avec une valeur de 5.

Testez votre application : La taille des points doit maintenant changer en fonction du dernier bouton sur lequel vous avez appuyé.

Pour changer l'épaisseur du trait, on va utiliser les mêmes boutons. La petite différence par rapport aux points, c'est que l'épaisseur du trait n'est pas un paramètre dans la fonction .Dessiner ligne mais une propriété du cadre, la .Largeur ligne.
On peut la modifier directement, sans utiliser de variable, mais ça peut être une bonne idée de le faire.

1. Depuis la gauche et le composant CadreDessin glissez le bloc CadreDessin.Largeur ligen à l'intérieur du bloc Quand BoutonGrosTrait.clic, avec la commande qui change la taille du crayon.
2. et affectez une valeur avec un bloc de la catégorie des mathématiques, par exemple 5.
3. Faites la même chose pour le bouton BoutonTraitfin avec une valeur de 2.

Testez votre application :La taille des lignes doit également changer.

Prendre une photo:

App Inventor permet d'utiliser les ressources de votre téléphone portable, ses capteurs et en aprticulier l'appareil photo. Ces capteurs et les fonctions associées permettent de réaliser des applications très variées.
Pour prendre une photo (ou une vidéo) et la récupérer dans l'application, on procède en deux temps :

1. Dans un premier temps, on demande une prise de photo en appelant la procédure camera.Prendre photo. Cette procédure lance une application (déjà présente sur votre téléphone) qui va prendre la photo. Mais le script qui a lancé la demande de photo n'attend pas la réponse, il continue et exécute les blocs qui suivent la demande de photo.
2. Dans un deuxième temps, quand l'utilisateur a pris et validé la photo, l'évènement Caméra.après prise photo se déclenche et c'est dans les cipt de cet évènement que l'on va récupérer la photo et l'afficher dans le cadre.

Nous allons donc demander une photo quand on clique sur le bouton BoutonPrendrePhoto et au déclenchement de l'évènement Quand Camera.après prise photo, récupérer cette photo pour l'afficher come fond d'image du CadreDessin.

1. Depuis la gauche et le composant BoutonPrendrePhoto glissez le bloc Quand BoutonPrendrePhoto.clic dans la fenêtre,
2. Depuis le composant Camera1 glissez le bloc de procédure Appeler Camera1.Prendre photo et placez le à l'intérieur du bloc précédent,
3. toujours depuis le composant Camera1 glissez le bloc Quand Camera.Apres prise photo dans la fenêtre des blocs. Cet évènement comprend le paramètre image qui contient la photo que l'on pourra mettre en fond d'image du CadreDessin.
4. Depuis le composant CadreDessin faites glisser la commande mettre CadreDessin.Image de fond à l'intérieur du bloc précédent,
5. et mettez le paramètre image dans l'encoche de mettre CadreDessin.ImageDeFond, ce qui correspond à mettre ou assigner l'image à l'image de fond du cadre.

.

Testez votre application : Cliquez sur le bouton pour prendre une photo, ce qui doit conduire à l'ouverture d'une application de prise de photo (elle peut varier selon les applications installées sur votre smartphone).
après validation de la photo, l'image préscédente (si vous en aviez mise une) est remplacée et c'est votre photo qui s'affiche, et vous pouvez dessiner dessus, ...

Transférer l'application sur le portable:

Dans lapahse de développement, on effectue généralement les tests avec le portable en mode "connecté". C'est pratique car les modifications du programme depuis le PC sont immédiatement répercutés sur le téléphone. PAr contre l'application n'est pas réellement téléchargée sur le téléphone.
Pour le fire, lorsque l'application est au point, reportez vous au cours et vidéos sur l'installation, mais en résumé : dans l'onglet "construire" en haut à gauche de la fenêtre, sélectionnez"App (Donnez le code QR pour fichier .apk)" et sur votre prtable lancez l'aI2 companion et scannez le QR code.Après quelques dizaines de secondes, il vous proposera d'installer l'application. Autorisez et validez cette installation (paramètres de sécurité). L'application est alors installée et vous pouvez l'ouvrir.

Code de l'application

Améliorez cette application

Quelles sont les améliorations que vous pouvez apporter et comment les réaliser ?
quelques pistes :

• Remplacez les boutons gros trait et trait fin par des boutons qui augmenten ou réduisent la taille du trait, avec certaines limites,
• ou utilisez un composant Ascenceur,
• Affichez la couleur active à côté des autres boutons, pour la connaitre avant de dessiner,

Revue et discussion des notions mises en oeuvre

Les étapes dans la réalisation d'une application :

• L'analyse initiale : définir ce que va faire l'application, pour qui, à quel besoin elle répond.
  Dans cette phase, il vous faut un crayon, un papier mais aussi des copains à qui vous pouvez soumettre vos idées. Ca n'est pas de la programmation, mais c'est important.
• Le développement :
  1. Design de l'interface utilisateur et le choix des ressources,
  2. Programmation : scripts ou séquences d'instructions (ou de blocs) qui font suite à un évènement,

C'est le plus souvent un processus itératif, les idées s'améliorent au fil de la réalisation, mais faites bien attention à garder en tête vos priorités.

• Vérifiez TRES souvent ce que ça donne sur votre téléphone,testez à chaque étape, n'attendez pas d'avoir terminé un gros morceau,
• Une erreur ou un petit accident sont vite arrivés ... surtout quand vous êtes le plus pressés. Sauvegardez régulièrement des étapes ou versions intermédiaires, en particulier avec les points de contrôle (checkpoints).
• Transférez souvent votre programme vers le mobile, travaillez de préférence en mode connecté (ou debug interactif),
• Faites des essais pour mettre au point et vérifier le bon fonctionnement.
• Dans la partie design :
  • Choisir/trouver les composants
  • Le choix du nom des composants a t-il un impact théorique ou pratique sur la phase suivante de programmation ?
    Il a un impact pratique car le nom va permettre de se rappeler à quoi correspond chaque composant quand on va écrire le programme. Par exemple : "BoutonScan" permet de se rappeler qu'il s'agit bien du bouton de scan. Par contre, ça n'a aucune importance pour le programme. On aurait très bien pu appeler ce bouton "Michel" ou "MaBicyclette". Vous pouvez le renommer et vir que le programme marche exactement pareil. La différence est pratique, ni informatique ou théorique.
  • Le design permet de choisir les principales propriétés des composants. Il restera possible de modifier ces propriétés ensuite dans le programme, mais ça n'est pas toujours nécessaire.
• Dans la partie Programmation : les évènements et les blocs utilisés :
  • Quels évènements avons nous pris en compte ?
    • les interventiosn de l'utilisateur : Clics sur les boutons, cadre touché ou glissé,
    • et les évènement déclenchés apr des fonctions du smartphone : l'arrivée de la photo après la prise de vue.
  • Les blocs ont plusieurs formes : lesquelles et à quoi correspondent-elles ?
  • idem pour la couleur ?
• Transfert permanent du programme vers le téléphone ou la tablette : Vous avez utilisé deux modes de communication avec le portable :
  • le premier (mode connecté), dans la phase de développement, où l'application reste contrôlée depuis le PC, ce qui permet des tests et modifications rapides,
  • le second (mode construire ou build) où l'application est téléchargée sur le portable et fonctionne de façon indépendante.