Une application android pour afficher une page web d’un Raspberry Pi

J’ai un Raspberry Pi réglé en tant que serveur web et qui gère motion, un programme pour configurer et diffuser des flux vidéos. L’un de ces flux vidéos provient d’une vieille tablette android, dont la caméra avant a été transformée en caméra IP (article ici). Ce que je veux maintenant c’est que la tablette, qui sera fixée au mur dans un couloir, affiche en permanence le contenu d’une page web qui montre entre autres les flux vidéos capturés. J’ai donc créé une application android pour la tablette, avec App Inventor.

Je considère ici que le lecteur connaît le fonctionnement d’App Inventor. Si ce n’est pas le cas, cette page en anglais donne les bases.

Document et fichiers de l’application mis à jour le 19/7/2016 pour permettre à l’utilisateur de définir l’url à afficher. Voir paragraphe « la version 3 ».

L’application avec App Inventor

Pour afficher une page web avec une application App Inventor, on a deux solutions possibles :

  1. avec un « web viewer » ;
  2. avec « activity starter », qui démarre alors le navigateur web de l’appareil ;

Et il faut interdire l’écran d’économie d’énergie

Comme la tablette sera constamment branchée, je préfère qu’elle soit toujours visible plutôt que d’avoir à la « tapoter » à chaque fois.

J’ai donc adopté l’astuce issue de cette source, pour garder l’écran allumé en permanence. Une horloge déclenche toutes les x secondes (TimerInterval) une notification d’alerte. Comme l’alerte a été réglé pour que sa couleur de fond et son texte soient transparents, on ne voit pas qu’elle apparaît et elle empêche l’écran de s’éteindre. C’est la partie when Clock1.Timer  des blocs qui suivent.

Solution 1 avec webviewer

En mode « designer » :

  • screen1 est en sizing  « fixed », ScreenOrientation en « sensor » ;
  • Dans les « non visible components », on trouve trois composants :
    • webviewer, qui visualise une page web ;
    • notifier1 réglé avec BackgroundColor et TextColor sur « none » ;
    • clock1 avec TimerAlwaysFires et TimerEnabled cochés, TimerInterval sur 5000 (ce sont des millisecondes en principe, donc ici 5 secondes)

En mode « blocks » :

Application android App Inventor pour une page web d'un Raspberry Pi

Voici le fichier en .aia utilisable sur MIT App Inventor (à renommer en .aia au lieu de .zip) : raspberry_pi_dashboard_webviewer

Et voici l’affichage qui en résulte (malgré les règles de style responsive…), en mode portrait puis paysage :

Solution 2 avec « Activity Starter »

En mode « designer » :

  • screen1 est en sizing  « fixed », ScreenOrientation en « sensor » et contient un « label » et un bouton ;
  • Dans les « non visible components », on trouve trois composants :
    • activityStarter, dont la propriété action  est « android.intent.action.VIEW » et la propriété DataUri  est « http://192.168.1.30/ » ;
    • notifier1 réglé avec BackgroundColor et TextColor sur « none » ;
    • clock1 avec TimerAlwaysFires et TimerEnabled cochés, TimerInterval sur 5000 (ce sont des millisecondes en principe, donc ici 5 secondes)

En mode « blocks » :

Application android App Inventor avec ActivityStarter

Voici le fichier en .aia utilisable sur MIT App Inventor (à renommer en .aia au lieu de .zip) : raspberry_pi_dashboard_activity_starter

Et voici l’affichage qui en résulte. On voit que c’est nettement mieux adapté car les caractéristiques responsive de ma page sont correctement respectées :

La version 3

L'interface utilisateur Je me suis rendu compte que ce n’était pas très pratique : si l’adresse du tableau de bord change, je suis obligée d’aller changer un bloc dans appinventor puis de reconstruire l’application avant de l’installer sur la tablette destinataire. J’ai donc réalisé une version 3, dans laquelle l’utilisateur décide lui-même quelle sera l’adresse de la page à ouvrir.

J’ai mis l’adresse actuelle de mon tableau de bord par défaut (192.168.1.103) mais l’utilisateur peut maintenant en changer sans difficulté. On peut même taper ‘google.com’ et accéder ainsi à la page http://google.com.

L’interface utilisateur (photo à droite) est très simple : lorsqu’on ouvre l’application, on voit écrit une suggestion d’adresse, qui est aussi l’adresse par défaut. L’utilisateur tape ce qu’il veut et clique sur le bouton « voir le dashboard ». L’application vérifie que cette adresse est valide (dans la photo c’est en cours) puis ouvre l’adresse dans un navigateur. Tant que l’application est active, l’écran ne se met jamais en veille.

Par contre, si on se trompe d’adresse locale, il n’y a pas d’erreur de type 404 qui est renvoyée et l’application cherche éternellement. L’utilisateur peut cependant indiquer une nouvelle adresse dans le champs prévu et relancer avec le bouton « voir le dashboard ». C’est irritant mais pas bloquant…

Pour mettre au point le système de vérification, je me suis inspirée de Check Internet Connection In App Inventor.

L’interface de cette application avec appinventor2 (mode designer)

Vue "designer" App Inventor 2
Le composant « notifier » est réglé sur fond transparent et texte transparent pour être invisible.

Les blocs de programmation avec appinventor 2 (mode blocks)

Vue "blocks" App Inventor 2

Les fichiers résultat

la version .aia utilisable sur MIT App Inventorrenommer en .aia au lieu de .zip) : raspberry_pi_dashboard_V3 (zip / aia)

Fichier Version 3 : Application android (apk)

Et maintenant

J’ai appris que seule la solution 2, avec « activity starter » permet de visualiser correctement une page web dans une application android, en respectant les règles de style.

Voici un fichier zip qui contient la page index.php servie par le Raspberry Pi, la feuille de style associée : index-Pi (zip)

Et voici l’application (apk) téléchargeable sur une tablette (mais attention elle ne fonctionnera que pour lire une page index.html ou index.php située à l’adresse 192.168.1.30) : Application android (apk)

Ma vieille tablette samsung est maintenant transformée en caméra IP (cf cet autre article) et affiche en permanence une page web qui contient le flux vidéo de la tablette elle même (mais servie par un raspberry Pi) et d’une autre caméra. C’est chouette, non ?

5 commentaires


  1. Très sympa comme petite interface, dommage que ce soit un peu compliqué à reproduire en essayant de comprendre (je n’ai pas envie de faire un bête copier/coller).
    Merci pour l’appli, impossible pour moi de la réimporter en aia, je l’enregistre mais App Inventor ne veut pas…

    Répondre

    1. Bonjour Benjamin

      Merci pour ce commentaire.
      C’est vrai que je n’explique pas du tout comment fonctionne app inventor. J’ai appris comment utiliser app inventor en suivant un mooc excellent « Mobile computing with App Invetor » qui a deux inconvénients : il est en anglais, et il n’est plus accessible (il s’est terminé fin 2015). J’espère qu’il y a des tutoriels disponibles sur internet.
      Par contre, je viens d’aller vérifier pour les deux fichiers : j’ai téléchargé le fichier sur mon site, j’ai modifié l’extension (zip –> aia) puis j’ai importé le fichier dans http://ai2.appinventor.mit.edu/ en utilisant le menu « project » > « import project (.aia) from my computer ». Et pour les deux fichiers, ils deviennent des projets modifiables.
      Si vous avez des questions, j’y répondrai volontiers.
      Bonne réalisation !
      Anne-Laure

      Répondre

      1. A l’import du projet, j’ai l’erreur :
        Server error: could not upload project. Please try again later!

        Mon fichier est bien en aia pourtant, mais ce n’est pas un problème, j’ai recréé le projet en le modifiant un peu en fonction de mes besoins.
        Benjamin

        Répondre

        1. Si le fichier est modifié, le problème est à l’import dans l’appareil android alors, et pas pour y accéder via app inventor, c’est ça ?

          Répondre

          1. Non, App Inventor ne veut pas importer le projet AIA, dans l’appareil Android cela fonctionne.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *