Cours de Spécialité

Environnement de Travail

L’environnement de travail mis à votre disposition est le suivant:

• Station de travail PC avec système d’exploitation Linux
• Navigateur IceWeasel (proche de Mozilla Firefox)
• L’environnement de travail MIT AppInventor2 BETA
• Un téléphone / une tablette sous Android (HTC ou Motorola ou le votre)

Premiers Pas

1. La première chose à faire est d’exécuter le navigateur IceWeasel (sur le bureau ou dans le dock en bas au milieu) et d’entrer l’adresse suivante: http://ai2.appinventor.mit.edu
2. Soit vous possédez un compte google et vous l’utilisez pour vous connecter à App Inventor. Sinon utilisez une de vos adresses e-mail pour créer un compte.
3. Vous êtes maintenant sur la page de gestion des projets d’AppInventor2. La première chose est de créer un nouveau projet. Une fois créé, vous êtes automatiquement redirigés vers la page de votre projet. Cette page contient les différents éléments que vous pouvez ajouter dans l’application: boutons, images, horloges, capteurs…
4. Une fois que vous avez choisi les composants que vous utiliserez, vous pouvez passer à la vue block (bouton en haut à droite) pour spécifier comment vont fonctionner / réagir vos composants.

Première application

Vous allez créer une application plutôt basique pour comprendre le fonctionnement de la programmation par blocs. Il s’agira d’entrer votre prénom dans une zone de texte et une fois validé, l’application affichera “Bonjour” suivi de votre prénom.

Insertion des différents composants

Vous avez besoin des éléments suivants:

• 2 éléments de type Label (un que vous initialisez à “Quel est votre prénom”, l’autre étant vide)
• 1 TextBox
• 1 Button (dont le champ texte sera Valider)

Disposez les de manière à avoir le premier label, la textbox, le button, le deuxième label. Vous pouvez éventuellement ajouter d’autres éléments.

Les fonctionnalités des différents composants

Une fois que vous avez défini et placé vos différents composants, il faut définir le fonctionnement de chacun des composants et leurs interactions éventuelles avec d’autres composants.

1. Cliquer sur le bouton Blocks.
2. Sur la gauche de la fenêtre, vous avez deux (parmi trois) onglets intéressants: Built-In qui contient la logique générique et dans My Blocks vous pouvez contrôler les composants que vous avez ajouter.
3. Pour cette application, l’objectif est de renseigner automatiquement le deuxième label, un fois que le button sera cliqué. Dans l’onglet Screen1, repérez le Button1 et prenez le premier élément (when Button1.click do) et déposer le sur le plan de travail (au centre). Vous pouvez constater que les blocs ont la forme de pièces de puzzle et donc il n’est pas possible de connecter des éléments qui ne “‘“s’emboîtent” pas.
4. Si on devait résumer ce que doit faire notre application, on l’écrirait de la façon suivante:

“Quand le bouton est cliqué, affecter le texte du label2 au texte “Bonjour ” concaténé avec le texte de la TextBox.”

Réaliser le diagramme qui réalise cette action.
5. Pour tester votre application, il y a plusieurs solutions… et nous recommandons la dernière (la plus simple):

• créer un nouvel émulateur (en haut à droite). Attendre le chargement de l’émulateur. Le chargement de l’émulateur et parfois très long à cause de nombreuses mises à jour.
• par USB, cela suppose l’installation de quelques logiciels (voir https://appinventor.mit.edu/explore/ai2/linux pour plus d’informations).
• en utilisant l’AI Companion qui nécessite une connexion Wi-Fi, vous pouvez utiliser le WiFi PolytechGuests avec le mot de passe ` tupop_xu`. L’application se trouve à l’adresse https://appinventor.mit.edu/explore/ai2/setup-device-wifi.html.

Tester le bon fonctionnement de votre application

Envoi de messages par Bluetooth

Il s’agit maintenant de créer une application qui envoie / reçoit des messages par bluetooth. Il faudra créer 2 applications (ou alors se partager le travail entre étudiants: un étudiant crée un serveur et un autre crée le client). Vous pouvez vous appuyer sur le tutoriel disponible ici https://coldstreams.com/appinventor/2015/01/23/part-1-basic-bluetooth-communications-using-app-inventor/ pour réaliser cette application.

Alternative (mode distanciel)

L’intérêt d’un système embarqué est qu’il dispose à la fois de capacité de calcul et de capteurs (GPS, accélération,…). Pour cette application, nous allons utiliser l’accéléromètre disponible dans le smartphone. L’objectif de cette application est de simuler le déplacement d’une bille sur un plateau (ici le smartphone) que l’on peut incliner.

Composants

Vous avez besoin des éléments suivants:

• Un canvas qui va servir de support à la bille
• Une Ball qui sera un élément mobile
• Un AccelerometerSensor qui va pouvoir détecter les mouvements du téléphone
• Une (ou deux) Clock nécessaire(s) pour l’utilisation des capteurs

Première version

Placez vous dans le block editor. L’élément clé pour une application qui utilise des capteurs est le timer (clock), pour lequel on peut définir la fréquence de mise à jour (Clock1.TimerInterval) et les actions à réaliser à chaque mise à jour (le bloc Clock1.Timer). Comme vous avez pu le constater, il est possible de modifier la position de la balle via ses coordonnées (SetBall1.X ou SetBall1.Y). De même, l’accéléromètre vous fournit l’accélération en X et en Y.

1. Réaliser le diagramme qui permet l’incrément de la position de la balle en fonction des valeurs de l’accélérateur.
2. En affichant les valeurs de l’accéléromètre (via un label par exemple), que constatez vous sur les données fournies par l’accéléromètre en X ? Corrigez ce problème
3. Que se passe-t’il quand vous touchez les bords ? Est ce que la balle rebondit ?

Version plus réaliste

Pour améliorer votre application, plusieurs choses sont possibles. Un point important est aussi de factoriser les actions en utilisant des procédures (dans le menu définition) ceci permet de garder votre plan de travail lisible.

1. Utilisation de deux timers. Pour avoir un mouvement plus fluide, on utilise en général un timer d’affichage (mis à jour toutes les 50 msec soit 20 images par seconde) qui ne fait que l’affectation de la nouvelle position et un timer de simulation plus rapide pour les calculs de la position.
2. Un mouvement plus physique. Pour cela on se base sur les équations de la mécanique du solide et un schéma d’intégration numérique dit explicite. Nous ne rentrons pas dans les détails mais cela signifie que:

V.x = V.x + A.x * dt,  V.y = V.y + A.y * dt

P.x = P.x + V.x * dt,  P.y = P.y + V.y * dt

où P, V, A représentent respectivement la position, vitesse accélération et dt la durée du timer de simulation. On utilisera des variables intermédiaires Vx et Vy pour calculer la vitesse de la balle.

1. Des rebonds contre les parois. Pour gérer les rebonds, on va prendre un exemple simple. Supposons que notre balle va heurter le bord droit de l’écran. Pour gérer le rebond, il faut inverser sa vitesse en X. On gère de la même manière le bord gauche. Pour les bords haut et bas, on inverse la vitesse en Y. Il est même possible d’ajouter un amortissement en multipliant la vitesse modifiée par une valeur inférieure à 1.
2. Et encore plus :) Vous pouvez ajouter des vibrations quand vous touchez un bord, des obstacles sur le plateau, vous pouvez permettre de prendre la balle pour la déplacer manuellement….