my Vera – une interface Ipad pour la Vera – partie 1

Voici une présentation de mon interface Ipad pour superviser mon installation domotique (Zwave + Vera Lite)J’avais stoppé la mise à jour de ce site depuis quelques temps car j’étais pris par le développement de ma propre interface pour piloter mon installation domotique.
J’ai maintenant une première version opérationnelle. C’est un site web utilisant le framework Sencha Touch 2. Il est hébergé sur mon NAS (un Synology DS410j). Il me permet de lancer depuis mon Ipad (version 2) de lancer une interface communiquant avec ma Vera (le syno faisant le lien entre le deux depuis l’Intranet ou l’Internet).

Aperçu de l’interface

Mais commençons par quelques captures d’écran et une petite vidéo de démonstration.

Plusieurs onglets composent l’interface :
Il y a un onglet principal, tableau de bord, avec une vue 3D lorsque l’ipad est en position paysage

et un mode liste quand l’ipad est en portrait

Un autre onglet récapitule quels sont les modules allumés/ouverts et dans la partie basse ceux qui sont éteints ou désactivés et qui ne devraient pas l’être.
Un badge au niveau de l’icône de cet onglet indique le nombre de modules de ce récapitulatif pour que, depuis n’importe quel onglet, l’utilisateur puisse savoir qu’il y a quelque chose d’allumé :

L’onglet « Réveils » est réservé à la visualisation et le paramétrage de modules basés sur mon plugin Alarm Clock. J’ai fait évoluer celui-ci pour l’occasion mais je n’ai pas encore publié la nouvelle version. Ceci fera l’objet d’un autre article.

Le dernier onglet « Config. » permet de donner son login et mot de passe. Cet identifiant sert pour la communication avec la Vera (qui utilise un page PHP du syno à accès limité par htaccess).

Une petite vidéo pour voir le fonctionnement de l’interface en vrai : http://www.youtube.com/watch?v=vEtwF4m6tzA

Un peu de technique

Langage utilisé

Comme indiqué, j’ai utilisé le framework Sencha Touch 2 (gratuit), que j’ai appris à utiliser pour l’occasion (en respectant le principe MVC). C’est une librairie d’objets qui permet de faire des pages en HTML 5 avec de l’ajax. Elle utilise le Webkit. Elle permet donc de faire un site web optimisé pour téléphones et tablettes. Pour l’utiliser depuis un navigateur web, celui-ci doit être compatible webkit (pas Firefox par exemple).
J’ai fait et testé mon interface pour Ipad 2 mais elle est potentiellement compatible avec d’autres tablettes. Un inconvénient de Sencha Touch est qu’il demande une tablette suffisamment puissante et optimisée pour la web. Certaines tablettes sous android sont trop justes.
L’interface comme je l’ai faite ne me semble pas adaptée à un iphone. J’en ferais plutôt une sous forme plus classique de liste de modules, peut-être un jour…
L’interface est donc un petit site web installé sur mon syno. L’ipad appel mon syno qui appel la Vera. Un système de cache est géré sur l’Ipad (gestion automatique de Sencha Touch) et donc, à part la première fois, lors du démarrage, il n’y a que les infos sur les modules qui sont téléchargés par l’Ipad d’où un lancement assez rapide.
Il pourrait y avoir encore plus rapide car il est possible de faire une compilation d’une application Sencha Touch pour en faire une application native Ipad/Iphone. Mais il faut un mac pour cela et je n’en ai pas…
Pour ce passer du NAS, comme l’interface n’est finalement que du html, il serait possible de la faire évoluer pour l’héberger directement sur la Vera (sur une clé USB par exemple)…

Fonctionnement :

Détaillons un peu le fonctionnement (avec quelques références au framework Sencha touch pour ceux qui connaissent).

Le principe :

Le coeur du système se repose sur une base data Sencha touch (un « store ») qui contient les informations sur les modules. Ces informations sont mises à jour en dialoguant avec la Vera :

  • Au lancement, le store se charge : l’ipad va lire 2 fichiers statiques au format json pour se configurer. Ces fichiers contiennent respectivement la liste des pièces et des modules à afficher (en fait pour les pièces, il y a un deuxième store).
  • Ensuite, un contrôleur est chargé de synchroniser les informations de ce store avec celles renvoyées par la Vera: L’ipad demande au syno (en ajax) de récupérer l’état des modules sur la Vera (une page en php sur le syno fait une requête de type sdata). Lorsqu’une commande est envoyée par l’ipad, celle-ci passe aussi par le syno qui la transmet à la Vera (page en php toujours).

Les onglets contiennent des « dataview » ou « datalist » liées à ce store et mises à jour automatiquement quand ce dernier est modifié. L’intérêt est qu’une fois écrit la partie dialogue avec la Vera, il suffit ensuite de mettre en page une dataview (au moyen d’un template) pour qu’elle s’affiche et se mette à jour toute seule (pas de code supplémentaire à écrire). ça parait magique et c’est d’après moi ce qui fait la puissance de Sencha Touch par rapport par exemple à Jquery Mobile plus facile d’accès mais beaucoup plus limité. L’affichage dans les différents onglets est géré par deux « templates » (un pour le mode 3D et un pour le mode liste).

Le mode de synchronisation avec la Vera :

Celle-ci se fait se fait comme pour l’UI5 ; l’interface demande sans interruption le retour d’état à la Vera mais celle-ci gère 2 cas :

  • Il ne se passe rien, la Vera transmet toutes les 60 secondes un message pour indiquer qu’il n’y a rien de nouveau.
  • Un module change d’état, la Vera transmet aussitôt les infos sur le ou les modules qui ont changé (et pas les infos des autres modules).
  • S’il y a plusieurs changements successifs, il y a une temporisation pour ne pas déborder la petite box ( la Vera attend 2 secondes avant de retransmettre le changement).

Ceci permet une synchronisation rapide sans surcharge. Il y a deux différences avec l’UI5 :

  • Je fais une requête de type sdata et pas de type status (beaucoup plus bavard).
  • Depuis l’ipad, l’interface fait une requête en ajax et je me retrouve avec une interdiction de type « cross domain » si je veux communiquer directement avec la Vera. Je suis donc obligé de passer par mon NAS et c’est lui qui fait la requête sdata. Mais cet inconvénient peu devenir un intérêt : mon interface fonctionne un Intranet et en Internet et me permet d’atteindre la Vera sans passer par le serveur Mios et sans avoir à ouvrir un port de la Vera sur l’extérieur. Pour protéger l’accès, la connection se fait via une protection du type htaccess (ce qui n’est pas le top du top il est vrai). Si le site était hébergé directement par la Vera, la connection pourrait se faire directement sans passer par du PHP…

L’affichage des modules et la gestion des actions depuis l’interface :

Pour l’affichage des modules, j’ai choisi une solution qui a certains avantages mais aussi des inconvénients : C’est l’expérience que j’ai eue avec app Automator qui a orienté mon choix. En effet, cette application fait comme l’UI5, elle récupère les infos xml des modules et plugins pour dessiner l’interface d’un module et savoir qu’elles actions peuvent être lancées. L’intérêt c’est qu’elle est potentiellement compatible avec tout nouveau module ou plugin. L’inconvénient (et, c’est ce qui fait que finalement je l’utilise peu) c’est que cette mise en page automatique est souvent peu esthétique voir même très peu ergonomique. J’ai donc choisi de faire afficher les modules ou plugins et de permettre des interactions avec eux en fonction d’instructions définies « en dur » dans l’application. Par exemple le plugin Vswitch est géré et affiche ces deux variables uniquement parce que j’ai implémenté cette fonction.

Une interface en développement

J’ai développé cette interface pour répondre à mon besoin et il faut plutôt considérer cette version comme un béta.

Il lui manque essentiellement des pages de configuration : Pour avoir la liste des pièces et modules à afficher, il faut pour l’instant créer et gérer deux fichiers au format json.
Ceux-ci sont en fait des extraits du fichier json renvoyé par la Vera lors d’une requête sdata complétés par certains paramètres (par exemple les coordonnées haut et gauche d’un module pour l’affichage de la vue 3D ou l’icône à afficher si ce n’est pas celui par défaut).

Mise à disposition de l’application

Si je vois que des personnes sont intéressées, je publierais probablement mon code. Dans un premier temps, j’envisage décrire quelques tutos pour expliquer comment configurer cette interface à la main et voir si quelques béta testeurs sont près à jouer les cobayes et me faire un retour d’expérience.

Si quelqu’un est près à s’investir dans la programmation et/ou le design ceci pourrait aider…

7 réflexions sur “my Vera – une interface Ipad pour la Vera – partie 1

  1. Bonsoir

    Je vais suivre avec intérêt tes articles, ton application me semble très intéressante.

    J’utilise actuellement SQRemote pour gérer les modules de ma Vera sur Iphone mais ça manque un peu de souplesse et il n’y a pas possibilité, à ma connaissance, d’intégrer de plan en 3D.

    Si tu as besoin de testeurs, je suis à ta disposition. Je dois avoir tous les pré-requis matériels à proximité (iphone, ipad, vera3 et serveur NAS)

    @+

  2. Bonjour,
    Je trouve ton appli géniale et n’ai qu’une envie : faire la même chose. Je débute mon installation domotique et j’avoue que en ce qui concerne la vera3, entre lua luup … j’ai du mal à trouver des bons tutos.
    Pourtant je suis informaticien de formation …..mais que ça fait très longtemps que je n’ai pas écris une ligne de code alors y a de la rouille dans le moteur !!!! d’autant que j’en était resté à programmer en delphi ! donc il y a eu beaucoup d’eau sous les ponts depuis !
    Mes notions en prog objet ne sont pas toutes à jeter mais va y avoir du boulot.
    Peux tu m’indiquer par ou commencer progressivement car je me connais, je vais foncer tête baissée, tirer dans tous les coins et me planter dès la première difficulté.

    Pour le matériel, j’ai tout ce qu’il faut, ipad 3, vera 3, ipod touch(qui doit faire pareil qu’iphone) et de l’android,

    Merci pour tes conseils

    Jeff

    • Bonjour,
      Je ne suis pas informaticien et je ne me suis lancé dans la domotique en amateur que depuis quelques mois.
      J’ai fait ce blog car j’ai eu du mal à trouver des tutos et aides clairs sur la manière de faire. En traînant sur différents sites ou forum, les informations nécessaires sont malgré tout disponibles.
      Mon conseil, en suivant ce que j’ai fait de mon coté est de d’abord maîtriser la Vera et de la configurer aux petits oignons (scènes, plugins, scripts luup) avant de se lancer dans la partie interface… Et peut-être que d’ici là mon interface sera disponible…

  3. Bonjour,
    Je vien de me lancer dans la domotique et j ai vu ta video, ton systeme est genial je cherche a faire la meme chose mais moi je ne suis pas informaticien, ca a l air tres compliqué,

  4. Bonjour,
    Je trouve ton projet très abouti, et très fonctionnel.
    Si tu as besoin d’aide en développement je suis dispo. J’adore les défis sur en matière de nouvelle technologie.
    J’espere A. Bientôt pour une colaboration et bonne continuation.
    Cyril

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s