Aller au contenu


Information tutoriel

  • Ajouté le: juil. 17 2018 01:56
  • Date Updated: sept. 11 2018 03:20
  • Lectures: 252
 


* * * * *
0 Notes

MIT Inventor2 - Création Appli Android de pilotage robot mobile

Réaliser une application de pilotage de robot mobile sur smartphone avec MIT Inventor2 .

Posté par gerardosamara on juil. 17 2018 01:56

Bonjour les makers,
 
Ce tutoriel propose de créer une application de pilotage de robot mobile  à l'aide de l'outil cloud de création d'application MIT Inventor2 , basé sur cet exemple d'écran de pilotage robot  :
 
Screenshot_20180704-074510.png
 
 
Nous suivrons les étapes suivantes du développement de l'application Android :
 
- Prérequis 1 : Ouverture d'un compte MIT Inventor2 et créer  le projet "Tuto appli MIT pilotage robot mobile"
- Prérequis 2 : Installation de l'app Android "MIT A2 Companion" pour installer l 'app de pilotage du robot sur le smartphone Android.
- Prérequis 3 :  Le robot mobile basé RPI est connecté en wifi
- Implanter sur l'écran du smartphone les objets  de type bouton , étiquette , retour vidéo de la caméra PI
- Programmer le fonctionnement attendu de ces objets de pilotage du robot mobile ( programmation par blocks )

 

Puis 
 
-  Mettre en place un protocole de communication en Wifi entre le RPI3 du robot et l'application Android

Non pris en compte dans le tutoriel  pour le moment :

- Evolutions / améliorations possibles de l'appli MIT ( commande demi-tour .... )

- Amélioration du script python du RPI3 robot pour exécuter les ordres recus ( AV , AR ...)

 
1) Ouverture compte MIT Inventor et création projet "Tuto appli MIT pilotage robot mobile"
 
Pour utiliser MIT Inventor 2 , il faut d'abord aller sur le site ai2.appinventor.mit.edu qui va vous rediriger vers une page de connexion à MIT.edu avec une adresse mail existante "gmail.com"  ou qui va vous permettre la creation de compte gmail.com si vous n'en avez pas ( ....  c'est une appli developpée par Google et maintenu par le MIT donc ..)
 
login mit edu.PNG
 
 
Une fois sur le site MIT App EDU ,  Cliquez sur le bouton "Start new projet "  , un écran de smartphone vide est affichée sur la page du projet 
 
start new projet Mit edu.PNG
 
 
La prochaine étape sera de positionner  sur l'écran du smartphone les différents objets qui serviront à piloter le robot mobile.
 
 
2) Implanter sur l'écran du smartphone les objets  de type bouton , étiquette , retour vidéo de la caméra PI
 
L'outil MIT visualisé contient :
 
- une colonne "palette" avec les objets d'interfaces utilisateur   : bouton ... et connectivity : web
- une colonne de composants  correspondants aux objets interface utilisateurs que nous avons fait glisser de la colonne palette vers l'écran du smartphone , en respectant la position voulue
- une colonne properties pour modifier les paramètres des objets utilisés
 
Dans notre cas cela devrait apparaitre comme ceci , après avoir fait glisser les objets sur l'écran du smartphone à la bonne position et paramétrer les bonnes données "properties" des objets :
 
- TableArrangement = 3 colomns , 2 rows , width = fill parent
- Button 1 à 6 : witdh = 33% pour faire tenir 3 boutons sur une rangée
- Label1 et Label : width = 50% pour ... vous savez pourquoi
- Web ( fonction http post )
 
MIT ecran.PNG
 
 
Reste à renommer les objets pour ( boutons et Etiquettes ) et le titre de l'écran qu'ils correspondent à  l'écran proposé pour le tuto ..... et sauvegarder
 
Tuto MIT Ecran 1.PNG
 
 
 
3)  Programmer le fonctionnement attendu de ces objets de pilotage du robot mobile ( programmation par blocks )
 
Pour accéder au mode  "Block" , quitter le mode Designer en clickant sur le bouton "Block"  .
 
Une page est  affichée avec une colonne de catégories de blocks ( controle , ... )  et un espace vide destiné à recevoir les blocks  ayant été "déposés" de la colonne  Blocks vers l'espace de programmation Blocks.
 
Tuto MIT Ecran 2.PNG
 
A ce stade nous allons mettre le minimum de blocks pour  tester la chaine complète de l'installation de l'appli MIT sur un smartphone  soit :
 
- 2 variables adresse IP:Port du robot  ( rpi et Pi Cam )
- le bouton de retour à l'écran d'accueil  ( fleche arrière sur le smartphone)
- L'affichage du flux video de la PI Cam
 
 
Tuto blocks 1.PNG
 
 
4) Installation de l'app Android "MIT A2 Companion"
 
Sur le play Store , chercher l"application "MIT AI2 Companion" et l'installer  .
A l'ouverture de MIT AI2 Companion , cet écran est affiché .
La fonction "scan QR code" sera utilisé  avec MIT inventor 2 lorque l'application aura été générée afin de l'installer sur le smartphone
Dans l'onglet Connect de MIT Inventor2 , sélectionner MIT AI2 companion
 
 
MIT AI2 Companion.png
 
5) Installation de l'application MIT minimum sur le smartphone Android
 
Le projet  ayant été sauvegardé , lancer  la fabrication de l'appli MIT en sélectionnant l'onglet "Build"  +  app (  Provide Qr code for .apk )
 
Tuto MIT Ecran 3.PNG
 
 Ensuite dans MIT AI2 Comanion ,  Clicker sur "Scan QR Code" pour scanner le QR code affiché dans MIT Inventor 2   et installer l'application sur le smartphone
 
Une fois installée , ouvrir l'application "Tuto App Robot mobile ed1 ".
L'écran ci-dessous doit s'afficher .
Le retour video sera affiché , si vous avez une PI Cam opérationnelle sur le RPI du robot mobile connecté en Wifi.
Le bouton "flèche arrière" du smartphone fonctionne ( fermeture application)
Les boutons ne sont pas encore programmés pour  commander le robot
 
 
tuto app mit.png
 
 
6) Complément de programmation pour les boutons et  affichage de la la trace des messages de commande échangés avec le robot
 
Les blocs  de programmation relatifs aux boutons et étiquttees de visualisation des messages de pilotage du robot ont été ajoutés dans MIT Inventor2  ( pour un bouton seulement )
.
L'application envoie des messages HTTP/POST/Commande robot  vers le robot mobile avec réponse HTTP/200 OK . Cela suppose que le RPI du robot puisse recevoir ces messages de commande du robot ( start , avant .. )  , les traiter et répondre "200 OK"
( voir chapitre 8)
 
 
tuto blocks .png
 
 
7) Présentation des boutons sous forme d'icones
 
 
La présentation des boutons de commande du robot sous forme d'icone  permets d'avoir un design plus "sexy"  et  ajouter cette fonction consiste à :
 
- Télécharger dans MIT Inventor2  / Media les 6 fichiers contenant les icones pour les boutons de commandes
- Dans les propriétés de chaque bouton ( start dans l'exemple ) ,  cliquer sur "Image" pour affecter un fichier image
 
 
icon bouton.PNG
 
 
Pour terminer ce tutoriel , il reste à générer l'application dans MIT inventor2 puis à l'installer sur le smartphonr avc MIT AI2 Companion et à tester.
 
Suite appui sur le bouton "Start" , la commande robot est bien affichée ( <start>  ) mais sans réponse du robot "200 OK"  car la communication avec le robot n'a pas été faite dans le tutoriel pour traiter le message <start>
 
tuto app final.png
 
 
8) Mise en place d'un protocole de communication en WIFI entre le RPI3 et l'application Android
 
Principe :

Un script python installé sur le serveur RPI3 du robot et basé sur le protocole sockets TCP permets de tester entre le Rpi3 et l'app Android pour la transmission des commands du robot ( Start , Stop , AV AR ... ) :

- L'app Android envoie  une requette Http POST recue vers le serveur RPI3
- le serveur RPI3 réponds un HTTP/1.1 200 OK avec les headers à l'app Android
- Le message envoyé et la réponse recue sont affichés dans l'app Android
 
Script python dans le RPI3 du robot



#!/usr/bin/python3.4
# coding: utf-8 # -*-coding:Utf-8 -*

import socket

host = ''
port = 8481

connexion_server = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
connexion_server.bind((host, port))
connexion_server.listen(5)
print("Le serveur écoute à présent sur le port {}".format(port))

connexion_client, infos_connexion = connexion_server.accept()
print(infos_connexion)

msg_recu = b""
# header response code 200
h = 'HTTP/1.1 200 OK\n'
h += 'Server: Simple-Python-HTTP-Server\n'
h += 'Content-Length: 0\n'
h += 'Connection: keep-alive\n\n'
# Boucle  
while msg_recu != b"Stop":
    msg_recu = connexion_client.recv(1024)
    if msg_recu:
         print(msg_recu.decode())
         connexion_client.send(h.encode())
         print(h) # response code 200
         print(infos_connexion)
 
print("Fermeture de la connexion")
connexion_client.close()
connexion_server.close()