Mon Interface Graphique

myvera

 

 

Je me suis finalement décidé à acheter un ordinateur tout en un ASUS de 21.5 pouces pour le dédier à l’interface Graphique de mon application domotique. J’ai fait un article au mois de mars de cette année à ce sujet.

Je recherchai un écran tactile assez grand pour visualiser l’application MyVera  développé par SbDomo
( voir son site : http://sbdomotique.wordpress.com/ ).

J’ai déjà testé cette application sur une tablette 10 pouces sous android. Le format 10 pouces me semblait être un peu petit, si on voulait faire une interface assez riche en éléments de visu et de commandes.
Mon choix à l’époque s’était porté sur la dernière tablette d’ARCHOS la FamilyPad 2 en 13.3 pouces.

Entre temps j’ai découvert l’interface vocale SARAH développé par Jean Philippe Encausse
(Voir ).
Cette interface ne tourne que sous Windows.

Donc j’ai recherché un appareil tout en un tactile sous Windows 8 qui pouvait répondre à tous ces critères, dans des coûts raisonnables. J’ai donc acheté à la FNAC un ASUS 2220 à un prix assez intéressant.

Je suis en train de mettre en place avec ce PC, une interface tactile du logiciel MyVera et une interface vocale avec SARAH.

Je rappelle que j’ai utilisé un RASPBERRY de faible coût comme serveur sur lequel j’ai implanté MyVera. Il est très facile à mettre en oeuvre : voir l’article sur le site Ma Maison domotique.
(http://ma-maison-domotique.blogspot.fr/2012/12/un-serveur-web-sur-raspberry-pi-pour.html).

L’avantage du produit est qu’il tourne sur un browser internet. Mon choix s’est porté sur Google Chrome. ( attention la dernière version 29 apporte quelques incompatibilités qui devraient être corrigées avec la prochaine version de MyVera ).

Autre avantage de MyVera, est de pouvoir déclarer plusieurs profils, ce qui permet d’avoir plusieurs interfaces. Pour ma part, j’ai gardé ma tablette Android (1024×768 px)qui n’a pas la même définition que mon écran de 21.5″ (1920×1080 px).

 Voici quelques vues de l’interface MyVera.

 

La page d’accueil :

 

vue_exterieur

qui regroupe un certain nombre d’infos

  • A gauche:
    •  la date et une horloge (widget),
    • un menu de Navigation,
    • un bouton pour cacher les onglets.
  • Au centre:
    • une vue 3D de la maison sur son terrain, avec quelques infos de Températures (Extérieure, Piscine et Séjour), Humidité (Extérieur et Séjour),
    • les luminaires extérieures commandés actuellement par la Vera.
      (un appui sur l’icôned668_0ou d668_1allume ou éteint la lumière)
  • A droite:
    • les prévisions météo de Sanary/Mer sur 5 jours (Widget),
    • des infos sécurité (Etat de l’ensemble des Fenêtres, condition pour activer l’Alarme, Etat de l’Alarme, et un clavier d’activation/désactivation de l’Alarme)
    • Affichage d’Evénement du calendrier.

Un appui sur l’icône calendrierd3602_0 oul3602_1, permet de faire apparaître le calendrier Google :

vue_calendrier

Un appui sur une icône Températurel603_0 ou Humidité l16_0, fait apparaître les graphiques de cette donnée au travers d’un Widget. En attendant de gérer mes données sur mon propre serveur, j’envoie les valeurs vers XIVILY. Je récupère les graphiques des dernières 6h00,  24h00, 7 jours, 1 mois et 3 mois. J’ai crée une page HTLM  pour obtenir les 5 graphiques sous forme d’onglet.
(Inspiration de l’article : http://www.ultra-fluide.com/ressources/css/menu-onglets.htm)

 vue_Courbes

Une vue Intérieure de la maison :

vue_interieur

qui permet de visualiser :

  • l’état des ouvrant (fenêtres et porte). Par convention, les icônes vertes d687_0 d686_0définissent un état normal, les icônes rouges l’inverse d687_1  d686_1.
  • toutes les températures de chaque pièce, plus la piscine et l’extérieur.
  • Les % Humidité Séjour, Salle de Bain et Extérieur.
  • L’état du détecteur de fumée.

Comme sur la vue d’Accueil, un appui sur une icone Températurel603_0 ou Humidité l16_0, fait apparaître les graphiques de cette donnée au travers d’un widget.

 

Une vue Sécurité :

vue_Securite

 

qui permet de piloter l’alarme en visualisant sur la vue intérieure de la maison :

  • l’état de tous les ouvrants (fenêtres et porte).
  • L’état du détecteur de fumée d688_0ou l688_1

 

Le bandeau de droite :

  •  informe de l’état de tous les ouvrants(d641_0Toutes Fenêtres Fermées oud641_1 Au moins une Fenêtre Ouverte),
  •  informe de l’état de la commande d’activation/désactivation alarme lecteur RFIDd653_0oud653_1,
  •  informe de l’état de l’Alarmed621_0oud621_1,
  •  informe de l’activation du Buzzerd651_0ou d651_1(le buzzer est activé pendant les tempos entrée et sortie).

 

  • affiche un clavier Numérique Virtuel (Widget) permettant de saisir un code pour activer/désactiver l’alarme. (Commande en parallèle sur le lecteur RFID).
  •  visualise le décompte des tempos de sortie (Après demande d’activation de l’alarme)et d’entrée d661_0 ou d661_1(Après ouverture de la porte d’entrée sous alarme).

 

Une camera Foscam visualise la Cuisine et le Séjour. Un appui sur l’icone d561_0ouvre la fenêtre  suivante :

vue_Camera

 

Vues Graphiques : 

Le menu de Navigation permet d’atteindre une première vue qui regroupe dans un tableau tous les graphiques Température de chaque pièces.
j’ai simplement créé une feuille HTML qui regroupe des les données individuelles de chaque pièces que l’on peut visualiser en appuyant sur les icônes température.

vue_Courbes_Temperature

 En dessous du menu de Gauche,  2 boutons permettent d’accéder soit au tableau des températures ou au tableau des Humidité.

vue_Courbes_Humidite

Une vue Chauffage

Elle sera installée cet automne. J’ai essayé le plugin de Antor  qui fonctionne parfaitement.
(voir : http://www.antor.fr/apps/smart-virtual-thermostat/)

Il ne me reste plus qu’à le généraliser dans chaque pièce.

 

J’aimerais aussi faire apparaître sur la vue d’Accueil, un ‘datalogging’ qui par exemple afficherait les 10 derniers événements.
Je pense aussi créer une vue pour piloter la télévision, l’audio au travers des plugins FreeBox, SqueezeBox ou XBMC.