[TUTO] AppInventor : le pot de peinture

PaintPot : (Part 1)
Traduit du tutoriel original : http://www.appinventorbeta.com/learn/tutorials/paintpot/paintpot-part1.html
ce tutoriel introduit le composant " Canvas " pour créer de simple dessins en deux dimensions.
Vous allez ici créer une application qui vous permettra de dessiner sur votre smartphone.


N.B : PaintPot fut un des premiers programmes développé pour montrer le potentiel des ordinateurs personnels, dans les années 70.

Ce que vous allez créer

Avec le PaintPot(Pot de peinture), vous pourez :

- Trempez votre doigt dans un pot de peinture virtuelle pour sélectionner une couleur,
- Faire glisser votre doigt sur l'écran pour tracer des lignes,
- Tapoter l'écran pour créer des points,
- Utiliser un bouton pour effacer votre oeuvre,
- Utiliser une image en tant que fond d'écran.

Ce tutoriel part du principe que vous avez réalisé le tutoriel traduit par Ibalpha : HelloPurr (dans le topic TUTO Ma première application AppInventor).
Ce tutoriel introduit ces concepts : Le composant Canvas pour dessiner, les composant Arrangement pour avoir plus de control sur l'affichage, Les évènements utilisateurs qui utilisent des éléments (arguments) ; et les variables.

Avant de commencer
Soyez sûre que votre ordinateur et votre smartphone soit prêts à utiliser AppInventor et lancer la page web de App Inventor : appinventor.googlelabs.com.
Démarrer un nouveau projet dans la fenêtre du Designer et nommez le PaintPot. Ouvrez l'éditeur de Block, clickez sur " Connect to Phone " et vérifiez que votre téléphone affiche l'aperçu de l'application.

Ecran Titre
Pour commencer, rendez-vous sur le panneau " Properties " situé à droite du designer et changer l'attribut Title en PaintPot. Vous devriez constater le changement sur votre smartphone avec le nouveau titre dans la barre de titre.

Il y a trois type de nom dans App Inventor et il est facile de les confondre :
- Le nom que vous choisissez pour votre project surlequel vous travaillez. Ce sera aussi le nom de votre application si vous exporter un paquet d'application (fichier .apk).
- Le nom "Screen1", que vous verrez dans la liste des composants d'application ; ne peut pas être renommer dans cette version de App Inventor.
- Le titre de l'écran que vous verrez dans la barre de titre du smartphone. Par défaut il se nomme "screen1" (comme pour HelloPurr) ; mais vous pouvez le changer comme on vient de la faire pour PaintPot.

Mettre en place des composants
Vous utiliserez ces composants pour créer PaintPot.

- 3 boutons pour sélectionner les couleurs (Rouge, vert et Bleu) et 1 pour effacer le tableau (canvas).
- 1 Canvas, la surface dessinable. Ce canvas a une image de fond d'écran, attribut BackgroundImage : l'image de HelloPurr par exemple une image.
- Il y a aussi un composant que vous ne voyez pas : le HorizontalArrangement pour aligner 3 boutons sur une même ligne.

Ce fera 5 composants, regroupé dans 1, pour cette application.

Les boutons de couleurs
1 Faîtes glisser un bouton depuis le Viewer ; changez l'attribut Text du bouton à " Rouge " et appliquer un fond de couleur rouge (BackgroundColor)
2 Cliquez sur le Button1 dans liste des composant du viewer pour le mettre en surbrillance (peut-être déjà le cas) et cliquez sur Rename pour l’appeler BtRouge.
3 De la même manière, créer 2 autres boutons (ou plus), nommé BtBleu et BtVert, en les plaçant en-dessous du bouton rouge.

Voilà comment cela devrait apparaître dans le Designer, avec les noms de boutons présenté comme une liste de composant du projet. Dans ce projet, vous avez changé le nom des composants plutôt que de les laisser par défaut comme dans le tuto HelloPurr. Utiliser des nom clair et bien organisé rendra votre projet plus lisible pour vos et vos collègues, pensez-y.

Vous devriez aussi voir les 3 boutons sur l'écran du téléphone.

Agencement avec " Screen Arrangement "
Vous devriez avoir maintenant 3 boutons, les uns en dessous des autres.
La prochaine étape consistera à les positionner horizontalement ; vous ferez cela en utilisant le composant " HorizontalArrangement ".

A partir de la palette " Screen Arrangement " (et non Basic), glissez un composant HorizontalArrangement et placez le sous les boutons. Changez le nom de ce composant en " TroisBoutons ". Dans le panneau Properties du composant, changez l'attribut Width (largeur) en Fill Parent (adapté au block conteneur : la dimension en pixel de l'écran dans ce cas ; l'écran étant le " block conteneur " total).
Déplacez les boutons dans le composant "TroisBoutons" les uns à côtés des autres. Vous verrez une ligne vertical bleue indiquant le futur emplacement du composant que vous y glissez. Si vous regardez la liste des composant, vous verrez 3 boutons inclus dans " TroisBoutons " pour montrer qu'ils sont maintenant des sous-composants. Remarquez que tous les composants sont inclus dans " Screen1 ".

Vous devriez aussi voir vos 3 boutons alignés dans une rangée sur l'écran du smartphone, bien que les choses pourraient ne pas être exactement comme sur le designer (en échangeant à plusieurs reprises les boutons de place, le problème se résout de lui-même).
De plus, l'aperçu du composant Arrangement(horizontal) n'apparaît pas dans le smartphone.

En général, vous utiliserez ScreenArrangement pour créer de simples alignements verticaux ou horizontaux. Vous pourrez créer des agencements plus complex en imbriquant des composant de Screen Arrangement de plus, il existe aussi un composant TableArrangement (non présenté dans ce tutoriel).

Le Canvas et le bouton Effacer
Les deux composants finals sont le canvas etle bouton effacer.

De la palette Basic, faîtes glisser un composant Canvas dans le Viewer. Changez son nom en "Canvas_de_dessin". Définissez sa largeur sur "Fill Parent" et son height(largeur/hauteur) à 300px. Ajouter une image de fond. Cliquez sur le champs qui contient "None.."(aucun) à côté de l'attribut BackgroundImage dans le panneau Properties du canvas ; vous pouvez utiliser la même image kitty.png du tuto précédent ou laisser aller votre imagination (une image de feuille de papier, un mur à tagguer, un style de tableau blanc, la photo d'un membre de votre famille...).
Vous pouvez utiliser n'importe quelle image que vous souhaitez, mais pensez à la redimensionner aux dimensions en pixel de l'écran de votre smartphone afin d'éviter une image trop volumineuse qui provoquerait un temps de chargement de votre application important.
A partir de la palette, glissez le dernier composant bouton sur l'écran, en le plaçant sous le canvas. Changez son "Id" (identifiant, en fait le nom) en BoutonEffacer et son attribut Text en Effacer.

Vous venez de compléter les étapes pour mettre en place les éléments graphique de votre application.

Voilà comment cela doit rendre dans le Designer.


Maintenant, vous allez définir comment les composants vont se comporter.

Ajouter des comportements aux composant
Le Blocks Editor devrait déjà être ouvert. Tout d'abord vous allez installer les boutons qui changeront la couleur de la peinture.

Ajoutez les évènement utilisateur
Dans Blocks Editor:

- Passez à la colonne "My Blocks"
- Ouvrez le Drawer(liste des blocks) du BoutonRouge et glissez-en le block when_ButtonRed.Click vers le centre.
- Ouvre le Drawer du Canvas_de_dessin. Glissez-en le block set_Canvas_de_dessin.PaintColor_to vers le centre (vous pourriez avoir à scroller la liste du Drawer) et placez le dans la section "do" du block when_ButtonRed.Click.
- Passez à la colonne "Built-In". Ouvrez le Drawer de Colors et glissez-en le block pour la couleur Rouge vers le centre pour la mettre dans l'encoche set_Canvas_de_dessin_PaintColor_to.
- Répétez l'opération pour chacun des boutons de couleurs que vous avez créé...

Le bouton final à mettre en place est le bouton Effacer. Passez à la colonne My Blocks.
Créer un évènement d'utilisateur pour le BoutonEffacer en glissant le when_BoutonEffacer.click du Drawer vers le centre. Depuis le drawer du Canvas_de_dessin, glissez call_Canvas_de_dessin.clear et placez le dans la section "do" du block when_BoutonEffacer.Click.

Les blocks des boutons devraient ressembler à ça :


Ajouter des évènements de toucher d'utilisateurs
Pour la prochaine étape : dessiner sur le Canvas. Vous gèrerez ce qui se passera quand vous toucherez le canvas. Vous créerez un point là vous poserez votre doigt ou dessinerez une ligne en faisant glisser votre doigt doucement sur le canvas.

Dans le Blocks Editor, ouvrez le Drawer du Canvas et glissez en when_Canvas_de_dessin.Touched au centre (le workspace/espace de travail). Au moment où vous placerez le block sur le workspace, 3 greffes/plugs s'ajouterons automatiquement à sa droite : x, y et toucherSprite.

Vous avez déjà vu les évènement au click d'un bouton. Les Clicks sont simples à gérer, car il n'y a rien à savoir à son sujet que le moment auquel il est effectué. D'autres évènements d'utilisateurs tel que "When...Touched" nécessite d'autres informations à propos de l'évènement. Dans App Inventor, cette information est exprimable par la valeur des éléments associé à un évènement utilisateur. Pour le "When...Touched" évènement, les deux premiers arguments sont le x(coordonnées en x) et le y(...) de l'endroit où débute le contact(touch). Nous aborderons touchedSprite dans un autre tutoriel.

Pour cet évènement de contact(touch), vous allez faire se dessiner un petit cercle(un point plutôt) à un point de coordonnée x et y. Glissez-en la commande call_canvas_de_dessin.DrawCircle du Drawer du canvas et placez le dans la section "do" du when_Canvas_de_dessin.Touched. Dans la partie droite du Canvas_de_dessin.DrawCircle se situe donc 3 sockets où vous devrez spécifiez la valeur des coordonnées x et y de l'endroit où le cercle devra être dessiné, et r son radius(diamètre).

Pour x et y, vous utiliserez les valeurs des éléments qu'induisent le contact(touché) de l'utilisateur : ouvrez le Drawer de My Definitions en haut de la colonne ; trouvez les block concernant la valeur de x et de y. Ces blocks ont été automatiquement créé lorsque vous avez fait glisser l'évènement de touché (when...touched) dans la workspace. Faîtes les glissez dans les sockets du block Canvas_de_dessin.Touched ; assurez vous de faire glisser les Value blocks, pas les Names blocks (ils se ressemblent).

Vous allez aussi devoir spécifier le diamètre du cercle : 5(pixels) et une bonne valeur pour cette app.
Cliquez sur une zone vide de la workspace to faire apparaître le un menu simplifié et sélectionner "math" (en vert). Sélectionner ensuite 123 de la liste deroulante pour créer un block de nombre. Changer 123 en 5 et encastrez le slot r(radius=diamètre).

Vous pouvrez aussi seulement taper 5 suivit de la touche retour pour créer un block de nombre d'une valeur de 5. C'est un exemple de Typeblocking : si vous commencez à taper, le Block Editor montrera une liste de blocks dont le nom correspond à ce que vous tapez ; si c'est un nombre cela créera un block de nombre.

Voilà comment les évènement de touché utilisateur devrait avoir l'air :


Essayez certaines manipulation sur le téléphone : touchez une couleur, puis toucher le canvas : cela devrait laisser un point à chaque endroit que vous toucherez. Toucher le bouton Effacer devrait supprimer vos dessin du canvas.

Ajouter des évènements de glisse
Finalement, vous allez ajouter un évènement de glissé utilisateur. Voici la différence en un touché et une glisse : un touché est lorsque vous placez votre doigt sur le canvas et le retirer sans l'avoir bougé. Une glisse est quand vous placez le doigt sur le canvas et le déplacez tout en gardant le contact. Quand vous glissez votre doigt tout au long de l'écran, cela permettra de dessiner une ligne incurvé à l'endroit où vous déplacerez votre doigt. Ce que vous allez en fait faire c'est dessiner des centaines de minuscule courtes lignes : chaque fois que vous bougez votre doigt, même un tout petit
peu, vous rallongez la ligne à partir de la dernière position de votre doigt à sa nouvelle position.

Un évènement de glisse vient avec 6 éléments : 3 pairs de coordonnées de x et de y qui montrent :
1 - La position de votre doigt quand la glisse débuta.
2 - La position actuelle de votre doigt
3 - La position juste avant l'actuelle.
* - Il y a aussi un "sprite" (ça désaltère et c'est... non rien) que nous allons ignorer pour ce tutoriel.

Maintenant vous allez dessinez une ligne en glissant de la position précédente à l'actuelle en créant un block de glisse utilisateur :
- A partir du Drawer du Canvas_de_dessin, faîtes glisser le block when_Canvas_de_dessin.Dragged jusqu'au workspace.
- Aussi, du Drawer du canvas, glissez le block call_Canvas_de_dessin.Drawline dans le slot "do" du block when_Canvas_de_dessin.

Cliquez sur le Drawer de My Definitions. Vous devriez voir le block pour l'élément dont vous avez besoin. Faîtes glisser les Value Block correspondant sur les slots appropriés dans le when_Canvas_de_dessin.Dragged : x1 et y1 devront être prevx et prevy; x2 et y2 devront être être currentx et currenty.

Voilà le résultat :


Testez votre travail en l'essayant sur le smartphone : faîtes glisser vos doigts sur l'écran pour dessiner des lignes et des courbes ; touchez l'écran pour faire des points. Utilisez le bouton effacer pour... effacer.

Review
Voici les idées et concept vus dans ce tutoriel :

> Vous pouvez utiliser les composants de ScreenArrangement pour spécifier des agencements en y plaçant les composants les uns en dessous des autres.
> Le composant Canvas vous permet d'y dessiner dessus. Il peut aussi sentir les touchés et les glisses.
> Beaucoup d'évènements utilisateurs sont appellés avec des informations à propos de l'évènements, tel que les coordonnées d'où l'écran a été touché. Ce genre d'information est représenté par les éléments. Quand vous séléctionnez un évènement d'utilisateur qui dispose d'éléments, App Inventor crée des blocks de valeurs (Value blocks) pour ces derniers et les place dans le Drawer de My Definitions.

Dans une hypothétique deuxième partie, vous verrez comment utiliser les variables globales pour créer des points de différentes tailles.
Note du traducteur :... mais les plus curieux et perspicace d'entre vous peuvent déjà les utilisé : cette partie 1 vous donne toute les infos pour vous en sortir ; manque plus qu'à fouillé dans les drawers...

V1.0
> A venir : correction orthographique.

Sympa merci même si j'ai la flemme de tout lire, je lirais ca demain.

Bravo, jolie tutoriel !

Tutoriel bien traduit excelent merci !

Sujet déplacé dans Logiciels et tutoriels nécessaires au développement