myDomus – une interface eedomus pour tablettes et smartphone

Voici une présentation d’une interface pour tablette et smartphone (ou PC…) pour superviser une installation domotique avec une box eedomus.Il y a quelques années, j’avais développé une interface web pour la box Vera Lite. J’ai changé de box et je peux maintenant vous présenter cette interface mise à jour pour l’Eedomus, MyDomus.

C’est un site web utilisant le framework Sencha Touch 2 a installer sur un serveur php localement (il est sur mon NAS Synology). Il permet de lancer une interface communiquant avec l’Eedomus (affichage de l’état des modules et possibilité d’actionner ces modules depuis l’interface).

Que l’interface soit lancée depuis l’intranet ou l’internet, la communication avec l’eedomus reste en local, ce qui permet de ne pas surcharger les appels web de l’eedomus.

Aperçu de l’interface

Commençons par une petite vidéo de démonstration : https://youtu.be/ORE7vlgU_d0

Et quelques captures d’écran :
Possibilité de gérer plusieurs profils pour par exemple avoir un affichage différent suivant la taille de l’appareil.

Sur tablette (ou PC),
Une vue « automatique » avec les pièces et les modules par pièceAvec un autre thème :

Des onglets de type « plan » avec un fond sur lequel vous déposez vos modules comme par exemple une vue 3D (avec la possibilité de basculer vers cette vue automatiquement lorsque la tablette ou le smartphone sont en position paysage) :

Ou pour faire une page de « supervision »:Zoom avant (dimensions réelles: 1024 x 746)
Sur Smartphone
Vue « automatique »:Zoom avant (dimensions réelles: 750 x 1292)
Pour les pièces

Pour les modules d’une pièce

Et une vue avec fond :
Zoom avant (dimensions réelles: 1334 x 711)

Le principe de fonctionnement est un peu différent de l’interface eedomus :
L’icône indique l’état du module, un clic sur l’icône actionne le module (allumer/éteindre, ouvrir/fermer).
Ici un clic sur l’icône « Niveau batteries » indique le module en alerte :
Zoom avant (dimensions réelles: 750 x 1292)
Un clic long ouvre un menu popup, par exemple un menu pour la gestion d’un volet (alors qu’un clic « simple » fermera le volet qui était ouvert…) :
Zoom avant (dimensions réelles: 1332 x 710)

Un autre onglet automatique permet de récapituler 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é :

Le dernier onglet « Config. » sert à s’identifier et à configurer l’interface.

Un peu de technique

Langage utilisé

Comme indiqué, j’ai utilisé le framework Sencha Touch 2 (gratuit en GPL). 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.
C’est donc un petit site web à installer localement sur un serveur web (pour moi, c’est sur mon syno). Vous lancez l’interface depuis un navigateur web, localement ou depuis internet, et votre serveur web communique avec l’eedomus.

Un système de cache est géré sur votre navigateur (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 d’où un lancement assez rapide.

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 l’eedomus :

  • Au lancement, le store se charge : l’interface 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 l’eedomus: L’interface demande au serveur (en ajax) de récupérer l’état des modules sur l’eedomus (une page en php sur le serveur fait une requête en appelant l’API de l’eedomus). Lorsqu’une commande est envoyée par l’interface, celle-ci passe aussi par le serveur qui la transmet à l’eedomus (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 l’eedomus, 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 l’Eedomus :

Pour la synchronisation avec l’eedomus, l’interface utilise l’API en mode local en faisant un appel toutes les 6 s à la fonction periph.caract à laquelle est envoyé la liste des modules à synchroniser.
Ceci n’a pas l’air de perturber l’eedomus (et ces appels toutes les 6 s ne se font que lorsque l’interface est ouverte donc peu souvent).
Ce faible délai de synchro permet une mise à jour de l’interface avec une réactivité acceptable.

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

Le mode de fonctionnement de l’interface de l’eedomus ne me plait pas. En effet, pour allumer une lumière éteinte, il faut cliquer sur l’icône du module puis, dans la liste qui apparait, cliquer sur l’icône « allumé » alors que je trouve plus simple qu’un clic sur le l’icône d’un module le fasse automatiquement changer d’état: un clic et la lumière s’allume si elle est éteinte ou s’éteint si elle est allumée… J’ai donc choisi de faire afficher les modules et de permettre des interactions avec eux en fonction d’instructions définies « en dur » dans l’application. L’inconvénient est qu’il faut passer par une phase de configuration de ses modules pour faire fonctionner l’interface (dans l’onglet « configuration » de l’interface).

Une interface en développement

J’ai développé cette interface pour répondre à mon besoin mais je pense qu’elle est maintenant dans une version suffisamment stable.

Sencha Touch a été remplacé par ExtJs, il faudrait convertir cette interface pour la passer en Sencha ExtJs… Si quelqu’un en a le courage…

N’hésitez pas à m’indiquer les bugs que vous pourriez trouver et si vous voulez participer au développement de cette interface, vous êtes bienvenus.

Mise à disposition de l’application

Si vous désirez utiliser cette interface aller voir dans la partie FAQ de MyDomus.

Une réflexion sur “myDomus – une interface eedomus pour tablettes et smartphone

  1. Pingback: Synthèse de la semaine: sapin de Noel connecté, une trottinette électrique qui dépote, un smartphone avec 3 jours d'autonomie, mise à jour eedomus, etc. - Maison et Domotique

Votre 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 )

Photo Google

Vous commentez à l’aide de votre compte Google. 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 )

Connexion à %s