Bienvenue aux nouveaux arrivants sur FantasPic !

- Pensez à lire les règles durant votre visite, il n'y en a pas beaucoup, mais encore faut-il les respecter .
- N’hésitez pas à faire des remarques et/ou suggestions sur le Forum, dans le but de l'améliorer et de rendre vos prochaines visites plus agréables.
- Vous pouvez regarder votre "panneau de l'utilisateur" afin de configurer vos préférences.
- Un passage par "l'utilisation du forum" est recommandé pour connaître les fonctionnalités du forum.

--- L’équipe FantasPic ---
Commentez, partagez et proposez des Tutos en langage C !
App inventor2 et les PICS
Jérémy
Administrateur du site
Administrateur du site
Messages : 2042
Âge : 39
Enregistré en : juillet 2015
Localisation : Dans le sud
Contact :

#1 Message par Jérémy » dim. 21 févr. 2016 15:43

Bonjour à tous ,
Image

Voici un petit Tutoriel sur APPinventor 2 . Il en existe un tas sur la toile, que vous trouverez en googlant en voici quelques un parmi tant d'autres:
- http://sig.fgranotier.info/IMG/pdf/debu ... ventor.pdf
- http://ww2.ac-poitiers.fr/sciences-inge ... ?article88
- http://www.lifl.fr/~rouillar/cours_app_ ... entor.html


Je n'ai pas trouvé de tutoriel dédié à la communication avec les PICs par bluetooth.
C'est donc pourquoi j'ai décidé de vous montrer quelques petites choses la dessus, si vous aviez l'intention de faire une application de communication avec un module bluetooth et un PIC pour la première fois , ce tutoriel est fait pour vous !.

Il vous faudra un compte Google pour pouvoir utiliser App inventor 2 , ensuite :
- Sur votre PC allez a cette adresse http://ai2.appinventor.mit.edu/ , afin de concevoir votre programme.
- Sur votre device(tab ou smartphone) télécharger l'application dans le playstore : MIT AI2 Companion pour pouvoir scanner et exécuter le programme.

Il vous faudra aussi un module Bluetooth relié à un PIC .( sujet non abordé dans ce tuto). J'utilise pour ma part un Module RN-41 et ma carte EasyPICv7.

En faisant ce tuto, je découvre moi-même le monde de APP INVENTOR . Je vous propose de rendre ce tuto participatif, et le faire ainsi évolué au fil des découvertes des forumeurs qui voudront bien les partager.
Vous devez certainement connaitre la programmation des PIC , alors App INVENTOR devrait être une formalité . C'est pourquoi je ne rentrerais pas dans les détails, mais brosserais un tableau pour vous en sortir rapidement grâce à des exemples.

Pour débuter je dirais que APP INVENTOR est assez intuitif au départ, grâce à un système de glisser/coller, mais mérite une certaine gymnastique quand on veut peaufiner un peu le travail.
Je n'ai pas compris certaines commandes, je ne pourrais donc pas m'entendre dessus, mais elles sont toutes testées .

1/ Bouton de connexion et de déconnexion

==> La toute première chose à faire c’est bien évidemment, de se connecter à son module bluetooth branché sur le PIC avec un device comme une tablette ou un smartphone.

Pour ce faire on va créer un sélecteur de liste ( pour choisir notre module bluetooth) afin de se connecter et un Bouton de déconnexion. Ces boutons seront mis dans un arrangement horizontal pour les aligner.
Au démarrage seul le bouton "connexion" devra être visible étant donné que l'on est pas encore connecté . Il faut donc rendre invisible le bouton "déconnexion" ( dans paramètres -> décoché la case visible).
Il faudra également rajouter le module "client bluetooth" que vous trouverez dans l'onglet connectivité ( à gauche). faite le glisser sur votre écran, il doit se rajouter tout en bas en tant "composants non-visibles"

idea Pensez à renommer tout vos ajouts pour vous y retrouver par la suite.

Voici un exemple en mode "designer" :[spoil]Image[/spoil]
A votre de guise de mettre de la couleur de modifier la font ou le texte etc ...

Nous allons maintenant affecter des actions sur nos boutons.
Pour cela nous devons passé en mode "Blocks". Je vous laisse farfouiller un peu dans les menus à gauche, ce sera formateur !. essayez d'obtenir ceci .

[spoil]Image[/spoil]

Traduction :

a/ Quand vous cliquez sur Connexion( CàD sur la liste_connexion), il récupère les équipements reconnus et appairés(noms et adresses), et les place comme éléments de la liste_connexion que vous voyez apparaitre. Ceci se fait avant d'avoir cliquez sur élément de la liste.

b/ La première ligne est la plus importante. On appelle le client bluetooth et on lui demande de se connecter sur l’équipement que l'on vient de sélectionner dans la liste . Un mot de passe peut vous être demandé, quand vous allez réellement essayé de vous connecter, suivant le paramétrage des modules.
Le reste est assez simple, on va agir sur les boutons. En mettant la caractéristique visibleà vrai et à faux suivant si on veut afficher ou non les éléments. Dans notre cas, comme on s'est connecté, on peut cacher le bouton de connexion et on rend visible notre bouton pour se déconnecter .

c/ Quand notre bouton déconnexion est visible donc "cliquable", c'est l'action qui se passe quand on clic sur le bouton de déconnexion. On appelle le client c'est à dire qu'on s'adresse a lui, et on lui dit de se déconnecter.
Bien sur on pense à inverser la visibilité des boutons pour pouvoir se reconnecter par la suite.

Voila normalement vous pouvez maintenant vous connecter à votre module Bluetooth. C'est bien beau mais va falloir le faire bosser un peu ce module ! .

2/ Tester votre programme

Plusieurs options s'offre à vous.

==> a/ l’émulateur est comme un simulateur. Il vous faut avant tout,l’installer sur votre PC. Il se comportera comme un device. Une fois votre programme fini sur le site de MIT, Il faut lancer l'émulateur sur votre PC. Ensuite ouvrir votre projet avec l'émulateur: faire -> Onglet Connect/Emulteur. Si tout va bien Le logiciel devrait lancé l'émulateur. Je trouve que ça prends pas mal de temps !. Ceci est plus fait pour ceux qui ne possède pas de device adapté, mais aussi pour testé l'application seulement et non la communication car bien évidemment vous ne pourrez pas vous connecter en bluetooth avec votre PC ( sauf si vous avec une clé BT bien sur).

==> b/ La création d'un Qr code ( espèce de code barre mais avec des points). Pour ma part c'est ce que j'ai utilisé à chaque fois.Je trouve cette méthode plus rapide et au moins on test avec un vrai device. Grâce à l'application MIT AI2 Companion, je scan ce QRcode (en cliquant sur scan code :D ) et je suis les directives :
- ma tablette me propose d’installer le logiciel, il faut accepté .
- en principe il faut allez dans les paramétrages de votre device onglet général -> sécurité -> pour autoriser les sources inconnues à installer un logiciel.
- Vous n'avez plus qu'a ouvrir le programme fraichement installé pour voir votre application !

==> c/ Le téléchargement directement du programme sur votre PC. Ensuite il vous faudra le mettre sur votre device par cable USB par exemple sur votre device. Vous pouvez télécharger le programme sur votre pc en faisant : Onglet build/construire -> save apk to my computer .

==> d/ En simulant le programme par votre device en se connectant, soit par code , ou par USB. Onglet Connect puis -> AI companion ou USB .

idea Le fichier .apk sont comme un .exe de votre PC mais pour device android.

Voila, à vous de voir la méthode qui vous va le mieux !


3/ Création bouton de commande

Pour rendre concret ce tuto, je vous propose de créer une application toute simple pour assimiler les bases. nous allons allumer une led branchée sur notre PIC pour bien visualiser le dialogue.
Nous avons besoin de créer des boutons pour cela . un BP pour allumer une led un autre pour éteindre la led . Afin d'être plus agréable et compléter ce tutoriel, nous allons rajouter une image de led grise pour signaler que la led est éteinte et rouge pour dire qu'elle est allumée.

Voici les images ( clic droit dessus puis enregistrer l'image sous ) :
Image Image


Allez au boulot !!!


Attention!! Pensez à créer un "arrangement horizontal" dans l'onglet disposition pour y placer les Boutons "Allumer la LED", "Éteindre la LED" et les images. L'image led_grise sera visible au démarrage et l’image Led_rouge Non-visible .

Vous devriez obtenir quelques chose comme ça .

[spoil]Image[/spoil]

Il est temps de faire un point sur la façon de faire .

Le déroulé d'une communication :

En effet en appuyant sur le Bouton BP_led_ON vous devez envoyer un ordre par bluetooth à votre pic . Mais comment savoir que cet ordre à bien été reçu ?
Rien ne vous dis que vous avec la connexion ! Il va donc falloir attendre un accusé de reception de la part du PIC pour s'assurer que l'ordre à bien été exécuté.

Le principe est le suivant :
- Appui sur le Bouton -> Envoi de l'ordre "allumer la led" .
- Si Le PIC reçoit l'ordre:
Il allume la led et envoi à son tour un message, "j'ai allumé la led". Notre device reçoit ce message et de se fait indique que l'ordre à été reçu ET exécuter , en changeant dans notre exemple l’image de la led de grise à rouge.
- Si le PIC ne reçoit pas cet ordre, il ne renvoi rien donc pas de changement de led. Cela nous montre que la led n'est pas allumée. On peut ré-appuyer sur le Bouton.

Ainsi on s'assure à chaque fois que l'ordre est bien reçu et effectué. Il faudra faire pareil pour l'extinction.

Repassons en mode block sur notre Bouton, que nous avons appelez BP_led_ON.
Nous avons dis que sur l'appui du BP nous envoyons un texte seulement. Il faudra tout de même veiller à envoyer un également un "Cariage return" après le mot pour que le PIC comprenne la fin.
Le changement de l'image et du bouton se fera seulement à la reception de l'AR. cela donnera :

[spoil]Image[/spoil]
idea
Traduction sur l'appui du BP BP_led_ON on appelle le module et on lui envoie un texte distinctif . ici "ON" suivi d'un "CR"
Traduction sur l'appui du BP BP_led_OFF on appelle le module et on lui envoie un texte distinctif . ici "OFF" suivi d'un "CR"

Par la suite, Les choses vont se compliquées un peu.

4/ Réception d'informations

C'est bien beau d'envoyer des ordres , mais on vient d'en parler, il faut aussi en recevoir (Accusé-Réception). Pour ça il va falloir surveiller si l'on reçoit quelques choses ou non par bluetooth ( dans notre buffer = mémoire tampon ou sont stockées les bytes reçus).

Pour surveiller la reception il va falloir définir une horloge de surveillance.
==> En mode "designer" vous trouverez l'horloge dans l'onglet capteur. Faites la glissée sur votre écran, elle apparait en bas dans " composants non-visible". Nous allons la régler sur 100ms( dans propriétés-> Intervalle chronomètre). Cela signifie que toute les 100ms nous allons pouvoir effectuer une tâche. Ici nous allons vérifier si on a reçu quelques choses ou non dans notre buffer.

N'ayez pas peur ce n'est très compliqué , il faut juste bien assimilé le fonctionnement d'accusé reception.

Commençons par créer une condition quand notre horloge arrive à son terme. Comme nous l'avons réglée sur 100ms, la condition sera vraie toutes les 100ms.
Une bonne habitude à prendre c'est de vérifier et de faire quelques choses seulement si on est encore connecté à un module, cela évite des déboires par la suite. nous rajouterons donc toujours cette vérification en début de condition .
Pour vérifier notre buffer il faut utiliser la commande Octets disponibles pour la reception. Cela nous indique que le buffer est remplit et donc que l'on à reçu une information. Donc si le buffer est supérieur à 0 c'est qu'il est remplit.

[spoil]Image[/spoil]

idea Traduction : Quand l'horloge arrive à 100ms ( donc toutes les 100ms :twisted: ) : SI le device est connecté à un module ET SI il y à quelque chose dans le buffer alors on exécute une consigne.

Notre buffer est remplit, mais qu'est ce qu'on en fait ??

On va tout simplement le lire et le comparer . on aurait aussi pu le stocker dans une variable ou même l'afficher. Dans ce buffer il y aura donc ce que nous a envoyer notre PIC.

Si le mot reçu, correspond à celui attendu bingo !!. On à reçu une consigne valide, on va pouvoir faire quelque chose.
Afin de vérifier cela, nous allons indiquer que nous attendons du texte (indiquer le nombre octets attendus) et le comparer avec le mot. Si le texte reçu est bien égal au mot alors c'est bon !. Nous allons pouvoir mettre à jour nos boutons et l'image, pour indiquer que la led à bien été allumée ou éteinte.

[spoil]Image[/spoil]

idea Traduction: SI le mot reçu de 2 octets par le client bluetooth est égale à on, alors cela signifie que la led à été allumée par le PIC, on passe notre bouton allumer_ON à invisible , et on met l’image Led_Rouge visible en masquant le reste.
SI le mot reçu de 3 octets par le client bluetooth est égale à off Alors on fait l'inverse.

Bravo !!! :bravo:

Et voila se tuto se termine . J’espère qu'il vous aura dégrossi le tableau sur la communication d'un device et d'un PIC .

Même si ce n'ai pas le sujet de ce tuto voici la partie du code MikroC qui permet de faire le test.
Vous remarquerez que j'utilise le LCD pour être plus explicite sur ce que reçoit le PIC .
Je ne test que les deux premiers octets reçus ! donc je test "on" et "of" et non "off" .
J'envoie également deux fois de suite histoire de doubler pour éviter une éventuelle erreur.
J'envoie toute les 500ms l'état réel de ma LED, que je reçoive ou non un ordre. Ainsi dans un programme plus complexe , si ma LED venait à changer d'état j'en serais quand même avertit, même sans avoir reçu d'ordre!

[spoil]

Code : Tout sélectionner

while (1) {

    if (DataReady)                   // Si une donnée est recue dans le buffer
       {
         GIE_bit  = 0;               // Interdit les Interutpions le temps du traitement
         DataReady = 0;              // RAZ le flag
         Index_Buffer = 0;           // Raz l'index du buffer

         if ( (txt[0] == 'o') && (txt[1] == 'f') ) // on verifie le mot de commande "off"
            {
              Led = 0 ;     // Eteint la LED
            }

         else if ( (txt[0] == 'o') && txt[1] == 'n')  // on verifie le mot de commande "on"
            {
              Led = 1 ;    // Allume la LED
            }
         Lcd_Out(2,1,"   ");    // Efface le texte
         Lcd_Out(2,1,txt);      // Affiche le texte présent dans le buffer

         GIE_bit = 1;                // On ré-active les INT sur reception UART
       }

        if (Led == 0)       // On envoie l'état actuelle de la led
           {
              UART1_Write_text("off"); // Mot de reconnaisance pour la tablette 
              UART1_Write_text("off"); // On double ca mange pas de pain et ca evite les erreurs
           }

        if (Led == 1)
           {
              UART1_Write_text("on"); // Mot de reconnaisance pour la tablette
              UART1_Write_text("on"); // On double ca mange pas de pain et ca evite les erreurs
           }
         delay_ms(500);
 }
[/spoil]

http://www.dailymotion.com/video/x3tfeoz

Et le dossier .apk si vous n'arrivez pas à reproduire l'application :
Tutoriel.rar
Vous n’avez pas les permissions nécessaires pour voir les fichiers joints à ce message.
C'est en faisant des erreurs, que l'on apprend le mieux !!!

App inventor2 et les PICS
sylvain54
Avatar de l’utilisateur
Amateur
Amateur
Messages : 178
Âge : 45
Enregistré en : août 2015
Localisation : Dans l'est de la France

#2 Message par sylvain54 » dim. 21 févr. 2016 18:40

Salut Jeremy,

Nickel tout ça.
Tu t'es bien amusé avec ta vidéo ;)
C'est une bonne base pour apprendre le bluetooth avec les pics. :bravo:

App inventor2 et les PICS
passionneElectr
Débutant
Débutant
Messages : 61
Enregistré en : février 2016

#3 Message par passionneElectr » dim. 21 févr. 2016 19:16

salut,

tuto clair et concis. Et le fait de pouvoir afficher (puis fermer) les images et autres éléments attachés(codes etc)
est pratique.

juste une question:

"APPinventor 2": est à la fois le circuit intégré + l’écran que nous voyons sur la vidéo?


A+

App inventor2 et les PICS
Jérémy
Administrateur du site
Administrateur du site
Messages : 2042
Âge : 39
Enregistré en : juillet 2015
Localisation : Dans le sud
Contact :

#4 Message par Jérémy » dim. 21 févr. 2016 19:28

Merci !

Oui c'est une petite basounette disons.

Un autre tutoriel devrait suivre dans la semaine sur le module RN-41 étant donné que je travaille dessus actuellement, autant en profiter tant que c'est chaud , dans 1 mois j'aurais tout oublié sinon :(

Pour la vidéo c’était vite fait , car la base de la vidéo est déjà faite . j'ai juste à rajouter deux trois trucs . Tant mieux si elle plait ! :mrgreen:
"APPinventor 2": est à la fois le circuit intégré + l’écran que nous voyons sur la vidéo?

Non Appinventor2 est un logiciel du MIT ( Massachusetts Institute of Technology), permettant de creer une application android avec des petites piéces facon puzzle.

Sur la vidéo , tu vois ma plaque Easypic7 qui me permet de m'entrainer, tester sur les pics trés facilement, c'est le MUST HAVE pour débuter, mais ca a un cout je le concede.
De quel écran fait tu allusion ? le petit LCD qui affiche les infos ? il y a un emplacement exprès pour cela sur la carte. ca évite de tout câblé en permanence. A coté sinon il s'agit de ma tablette galaxy tab4
C'est en faisant des erreurs, que l'on apprend le mieux !!!

App inventor2 et les PICS
Gérard
Avatar de l’utilisateur
Confirmé
Confirmé
Messages : 756
Âge : 59
Enregistré en : septembre 2015
Localisation : Alsace

#5 Message par Gérard » dim. 21 févr. 2016 19:48

:bravo: Jérémy.

Après mes 2 projets en cours, je ne manquerai pas de m'y intéresser de plus près. J'aime bien l'idée de communiquer par bluetooth.
Le 11 / 07 / 2017, j'ai commandé une Ford Mustang.
Le 31 / 08 / 2017, j'ai eu la Mustang, un régal.


Retourner vers « Langage C »

Qui est en ligne

Utilisateurs parcourant ce forum : Aucun utilisateur enregistré et 1 invité