Miroir intelligent
Cahier des charges
Contexte
Le nombre d'objet connecté ne cesse de croitre et leurs bénéfices nous apportent un confort supplémentaire dans notre vie quotidienne. Ce projet vise le développement d'un miroir intelligent pour un usage quotidien dans une salle de bain.
Objectif
L'objectif de ce projet est le développement d'un miroir capable d’interagir avec l'utilisateur. Le miroir devra être capable d'afficher des informations, de retoucher l'image affichée, d'adapter son contenu à l'utilisateur.
Description fonctionnelle
Le miroir doit :
- être léger
- suffisamment pour être accroché au mur.
- reconnaitre l'utilisateur
- pour proposer un affichage personnalisé.
- disposer d'une interface utilisateur
- pour donner le choix à l'utilisateur d'afficher un contenu spécifique (météo, actualité, etc).
- bénéficier d'une connexion internet
- pour actualiser ses informations à afficher
- être branché au secteur
- pour éviter la batterie faible, et ne pas nécessiter d'une interaction quotidienne de la part de l'utilisateur.
Matériel et solutions techniques
- Miroir sans tain
- Écran LED
- Raspberry Pi
- Webcam
- Cadre/Structure miroir
La structure du miroir devra être fine et en matériaux léger.
L'interface de choix du contenu de l'utilisateur sera une application android pour smartphone.
Une RaspberryPi, bénéficiant d'un accès wifi, permettra d'actualiser le contenu à afficher en se connectant à Internet mais aussi permettra à l'utilisateur de sélectionner les rubriques qui l’intéresse via son smartphone. Elle gérera l'affichage à l'écran.
Avancement du projet
| Tâches | Avancement |
|---|---|
| Configuration de la RaspberryPi | Fait |
| Mise en place d'un serveur Apache | Fait |
| Développement d'une page web | Fonctionnelle mais à améliorer |
| Test de l'écran tactile | Fait (uniquement pour i386) |
| Construction du miroir (assemblage cadre+écran+matrice tactile) | Fait |
semaine 1
L'idée de base du miroir est de coller un miroir sans tain à un écran de la taille du miroir et de n'allumer que certaine partie du miroir ainsi la lumière peut passer au travers du miroir et donne une impression d'affichage sur celui-ci. Une camera placée sur le miroir doit détecter une personne pour gérer un profil personalisé pour chaque utilisateur.
Lors de notre première semaine de projet, nous avons réflechie aux différents choix que nous avions fait avant le début de celui-ci, afin de savoir si ceci était réalisable. Nous avons ainsi commencé à travailler sur une raspberry afin de trouver la meilleur solution pour la réalisation d'une application pour le miroir. De plus nous avons travaillé sur un systeme de reconnaissance faciale en C à partir de la librairie "openCV.h".
Nous avons rapidement compris que la méthode la plus efficace pour réaliser notre application etait d'utillisé la raspberry comme un kiosk qui se connecterai à une application web en php.
semaine 2
Durant cette deuxième semaine, nous avons voulu avancer sur le programme de reconnaissance facial. Or M.Vantroys, nous a dit que la reconnaissance facial serait un plus pour notre projet, mais n'étant pas primordial et très chronophage, nous devions nous concentrer sur un autre moyen d’interaction avec le miroir. Il nous a ainsi donné la possibilité d’utiliser une matrice de LED tactile qu'il avait commandé pour un autre projet mais qui n'avait pas était utilisé.
Nous avons décidé de nous concentrer sur la raspberry pi au cours de cette semaine. Nous l'avons configuré en mode Kiosk, elle démarre en lançant Chromium en plein écran sur la page: "http://localhost" pour ce faire nous avons installé chromium:
sudo apt-get update sudo apt-get upgrade sudo apt-get install chromium
Puis de modifier le fichier de config: /etc/xdg/lxsession/LXDE-pi/autostart
@lxpanel --profile LXDE @pcmanfm --desktop --profile LXDE @xset s off @xset -dpms @xset s noblank @chromium --kiosk --incognito http://localhost
En mode Kiosk la souris apparait, nous avons donc installé un utilitaire pour la faire disparaitre au bout d'un temps d’inactivité.
sudo apt-get install unclutter
Puis nous avons installé un serveur apache sur la raspberry pour pouvoir afficher une page web sur cette page.
sudo apt-get install apache2 php5 mysql-server libapache2-mod-php5 php5-mysql
Le serveur se trouve dans le dossier /var/www/html, il ne nous reste donc plus qu'à mettre les fichiers de l'application dans ce dossier.
semaine 3
Au cours de cette semaine nous avons testé la matrice de LED.
Nous avons commencé par installer les drivers du constructeur de la matrice. Malheureusement ces drivers nécessitent Adobe AIR qui n'est pas disponible pour les architectures ARM. La RaspberryPi ne peut donc pas supporter la dalle sensitive. Nous avons tout de même installer ces drivers sur un Ubuntu pour tester la dalle. L'installation est rapide et la configuration facile. Nous avons donc choisi d'installer le serveur apache sur pc avec la même configuration que sur la RaspberryPi pour pouvoir développer notre page web. Nous devons donc encore trouver un autre moyen d'interagir avec la Raspberry pour conserver une solution portable telle que nous l'avons défini dans notre cahier des charges.
Le code d'installation des drivers pour la dalle nous a été fourni par Benjamin et Kévin qui avaient utilisé la dalle pour leur projet de meuble connecté :
su dpkg --add-architecture i386 apt-get update apt-get install libc6:i386 libstdc++6:i386 libgtk2.0-0:i386 libnss3:i386 libxml2:i386 libxt6:i386 libxslt1.1:i386 wget http://multitouch.com/download/mt_driver_kit_linux.tar.bz2 tar xjvf mt_driver_kit_linux.tar.bz2 ./driverkit/install.sh Adobe\ AIR\ Application\ Installer /opt/pqlabs/platform/MultiTouchPlatform.air
La dernière commande lance l'application de configuration. Lorsque la dalle est reconnue par le logiciel, nous procédons au calibrage et suivons les instructions à l'écran. A noter que le calibrage détermine la zone tactile. Nous pouvons donc n'utiliser qu'une partie du miroir pour être tactile dans l'hypothèse où l'écran qui affichera les informations ne remplira pas tout le miroir.
semaine 4
Le serveur apache et l’écran tactile fonctionnant, nous avons pu commencer à travailler sur notre application web. N'ayant jamais travaillé sur des applications Javascript, et très peu sur du HTML, CSS, PHP. Nous avons cherché des widgets en open source sur le net, ainsi que quelques informations sur ces langages afin de comprendre le fonctionnement des widgets trouvés.
Nous avons trouvé un modèle d'affichage sur le net, nous proposant d'afficher la date, la météo, les informations, un agenda et un compliment. Nous avons donc décidé d'utiliser cette application comme squelette de la notre.
source : [1]
semaine 5
Au cours de la fin de la semaine 4 et de la semaine 5, nous avons étudié les codes que nous avions trouvé afin de les comprendre et de les rendre fonctionnelle pour notre application.
Le projet open source embarque les widgets de base mais la configuration se fait uniquement par l'édition d'un fichier javascript, et ne prend en compte qu'une seule configuration. Notre objectif est donc de rendre cette interface multi-utilisateur et facilement configurable sans passer par l'édition d'une fichier texte. Pour profiter de l'interface tactile, nous décidons de rendre tous les paramètres accessibles depuis un menu sur la page web. A terme, chaque widget pourra être activé ou désactivé, configuré (date et heure, préférence météo,...) depuis la page web via un clavier tactile, repositionné.
Temporairement nous avons tout de même configuré correctement chaque widget afin de les placer aux endroits souhaités de la page web et de leur faire afficher les informations voulues. Pour afficher les infos, nous récupérons le flux RSS du journal Le Monde.
this.feed.forEach(function (_curr) {
var _yqUrlString = this.buildQueryString(_curr);
this.fetchFeed(_yqUrlString);
}
Cette fonction utilise l'API Yahoo Query tout comme les autres widgets pour aller récupérer les informations (ici un flux RSS, mais aussi des calendriers au format .ics et des données météo sur openweathermap.org) directement sur Internet.
Nous récupérons les informations météo selon la localisation souhaitée. Nous avons créé un compte avec une adresse mail commune pour récupérer une clé APPID cependant il est possible de synchroniser ses préférences en entrant sa propre clé APPID.
Ainsi que connecter l'agenda à notre agenda gmail.
semaine 6
Nous avons commencé le développement du menu. Pour créer un icône de menu nous utilisons la bibliothèque d’icône css 'font-awesome'. Par appuie sur cette icône un menu apparaît, dans lequel tous les widgets sont listés. Un appuie sur le nom du widget doit pouvoir le désactiver à l'écran. Pour réaliser cette action il nous a fallu repérer la fonction d'affichage de chacun des widgets et la compléter avec une condition d'affichage de type booléenne.
- Fonction d'activation/désactivation pour la météo:
function afficheWeather(obj1){
var obj1 = document.getElementById(obj1.id);
if(obj1.style.display == "none"){
obj1.style.display = "block";
weather.weatherActive = 1;
}
else{
obj1.style.display = "none";
weather.weatherActive = 0;
}
}
Le paramètre 'obj1' correspond à l'ID du widget appelé dans l'index.php. Cette fonction est la même pour tous les widgets.
- Avancement de l'interface
|
|
|
|
semaine 7
Optimisation de l'ergonomie de l'interface.
Nous avons arrangé la disposition du menu et aligné l'affichage.
L'activation des widgets devra se faire via un bouton slider on/off. La fonction du bouton marche correctement cependant son intégration dans le menu pose problème. L'affichage des images 'on' et 'off' du bouton est gênée par la taille du menu qui ne doit pas être trop imposant.
De plus, maintenant chaque widget est fragmenté en plusieurs sous-widgets, chacun activable séparément. Par exemple, il est possible pour la météo d'afficher la température actuelle, et/ou la prévision à 10 jours et/ou les informations (vitesse du vent, durée d’ensoleillement...)
Les autres points à travailler sont la saisie des préférences directement depuis l'interface web et la réorganisation spatiale des widgets.
semaine 8
Nous avons été acheter un film réfléchissant permettant d'obtenir un semblant de miroir avec une simple vitre. Nous avons posé ce film sur la vitre de l'écran tactile pour obtenir un miroir sans tain. Nous avons pu re-tester le fonctionnement du tactile avec l'effet miroir et l'activation des widgets.
semaine 9
Fabrication du cadre du miroir.
Bilan sur le fonctionnement de l'application :
semaine 10
Durant cette semaine, nous avons réalisé des plans de fabrication du cadre du miroir. Nous sommes allés acheter du matériel pour sa conception.
Nous avons commencés à programmer une page annexe dans notre application. Cette page doit permettre de modifier les différents paramètres du miroir, tel que la langue, la localisation, etc. Pour ce faire, nous avons cherchsé un widget permettant d'afficher un clavier numérique pour que l'utilisateur puis entrer les informations qu'il souhaite dans le miroir.
semaine 11
Lors de la semaine 11, nous avons fini la fabrication du miroir et avons pu effectuer des tests dessus.
De plus,Nous avons travaillé sur une application de recherche web à ajouter à l'interface.
semaine 12
Au cours de la dernière semaine de projet, nous avons réalisé la vidéo de présentation de notre projet ainsi que finalisé le programme de l'application afin qu'il soit le plus opérationnelle possible.
