my Vera – partie 2 – Synthèse de l’installation « manuelle »

Un premier tuto rapide sur l’installation de l’interface.

Mise à jour : Je laisse ce tutoriel car il explique certains principes de l’interface mais l’installation manuelle n’est plus utile dans la dernière version…

L’organisation des répertoires, la protection htaccess :

Voici le contenu du répertoire du site web de l’interface :

Ceci est la version production (voir plus bas).

  • Il faut la mettre dans un sous répertoire du répertoire contenant les sites web d’un serveur web PHP (pour moi, le répertoire « web » de mon NAS Synology).
  • Le répertoire ressources\images contient les différentes icônes utilisées pour les modules et les deux vues 3D (plan0.jpg et plan1.jpg). Il faut donc modifier ces vues car je suppose que le but n’est pas de mettre vos modules sur mon plan de maison…
  • Dans le répertoire protect se trouve la page php qui sert à la synchronisation avec la Vera (syncvera.php), il faut l’éditer pour, à la ligne « $vera=’http://ipvera/port_3480′; », mettre l’adresse IP (Intranet) de votre Vera à la place de ipvera.
  • Il faut protéger le répertoire protect avec un fichier .htaccess (AuthType « Basic »), le login et mot de passe seront ensuite à indiquer dans l’onglet Config de l’interface.
  • Enfin, il faut éditer les deux fichiers json qui sont à la racine (voir détail ci-dessous)

La syntaxe des fichiers json :

Le mieux est de partir du fichier json renvoyé par la Vera lors d’une requête sdata.

Voici ma manière de faire avec Firefox :

  • Lancer une requête sdata : En Intranet, sous Firefox, tapez http://ipvera/port_3480/data_request?id=sdata (en adaptant la partie ipvera bien sûr…).
  • Dans le menu de Firefox, « Affichage/Encodage des caractères » choisir Unicode (UTF-8) (vous allez perdre les accents sinon).
  • Dans affichage, cliquez sur Code source de la page, vous pouvez sélectionner et copier le contenu en json.
  • La mise en page rend la lecture difficile, je vous conseille de faire un formatage de ce texte (je passe par le site http://jsonformatter.curiousconcept.com pour cela).
  • Vous pouvez maintenant tout coller dans un éditeur de texte pour vous en servir. Choisissez un éditeur qui ne rajoute pas de formatage ou de retour chariot caché et respecte l’UTF8. Pour ma part j’utilise jEdit (gratuit). Notepad fait souvent sauter les tabulations, ce n’est pas bloquant pour le résultat mais cela complique la lecture.

Fichier rooms.json

Voyons d’abord le fichier rooms.json. Vous devez avoir, dans le texte récupéré, une partie qui commence par « rooms »:[ puis contient la description des pièces jusqu’à un ].
Il faut tout mettre dans un fichier rooms.json (en UTF8) entre des crochets {}.

Vous devez donc obtenir un fichier du type :

{
« rooms »:[
{
« name »: »Cuisine »,
« id »:5,
« section »:0
},


{
« name »: »Salon »,
« id »:2,
« section »:0
}
]
}

Comme il peut y avoir des modules non affectés à une pièce, il faut ajouter une pièce dans laquelle ils seront mis.

Ajoutez :

 {
« name »: »Sans salle »,
« id »:0,
« section »:0
},

Vous obtenez un fichier avec :

{
« rooms »:[
{
« name »: »Sans salle »,
« id »:0,
« section »:0
},
{
« name »: »Ciné »,
« id »:1,
« section »:1
},

{
« name »: »Salon »,
« id »:2,
« section »:0
}
]
}

Sauvez le, c’est fini.

A noter :  Comme il y a deux vues 3D,  j’ai trouvé logique de pouvoir affecter les pièces à deux sections. Dans la liste, les modules sont rangés par pièce et ces dernières sont alors affichées par sections puis par ordre alphabétique (la couleur du titre de la pièce dépend de la section). Comme l’UI5 ne gère pas les sections, si vous voulez utiliser cette possibilité, mettez un 0 ou un 1 dans le paramètre section de chaque pièce de ce fichier json.

Fichier devices.json

Ce fichier contient la liste des modules et leur paramétrage. Il faut récupérer les informations depuis la requête sdata comme pour le fichier précédant mais cette fois pour la partie devices. Vous devez obtenir un fichier du type :

{
« devices »:[
{
« name »: »Ecran »,
« altid »: »4″,
« id »:5,
« category »:3,
« subcategory »:0,
« room »:1,
« parent »:1,
« status »: »0″,
« comment »: » »,
« state »:-3,
« etage »:0,
« left »: »212″,
« top »: »434″,
« verif »: »off »
},

{
« name »: »PC Ciné »,
« altid »: » »,
« id »:60,
« category »:4,
« subcategory »:3,
« room »:1,
« parent »:0,
« tripped »: »0″,
« lasttrip »: »1346264423″,
« armed »: »1″,
« status »: »1″,
« state »:-3,
« etage »:1,
« left »: »256″,
« top »: »213″,
« icon »:201,
« sceneon »:16,
« sceneoff »:17
}
]
}

Commencez par enlever les modules que vous ne voulez pas voir dans l’interface (par exemple les modules retour des Fibaros…).

Il y a pleins de paramètres qui ne servent pas mais je n’ai pas pris le temps d’en faire la liste, vous pouvez les laisser. Il faut surtout en modifier certains et en ajouter d’autres :

state : Mettre à -3 ( ajouter ce paramètre s’il n’y est pas, certains modules ne l’ont pas). Ceci fait afficher une petite sphère orange sur l’icône du module qui disparaît quand son état a été récupéré depuis la Vera.

etage : Si vous voulez que le module soit affiché sur la vue 3D, ajouter etage et le mettre à O ou 1 pour qu’il soit sur la première ou la deuxième vue 3D. Mettre -1 pour qu’il n’apparaisse pas.

verif :  Les modules apparaissent dans l’onglet « Allumés ? » par défaut s’ils sont sur on ou tripped, les sensors apparaissent par défaut dans la partie éteint s’ils ne sont pas armés. Si vous voulez modifier cette règle pour certains modules, il faut renseigner ce paramètre en indiquant :

  • off (apparaît dans l’onglet « allumé » si off)
  • no (n’apparaît jamais).

icon : Des icônes par défaut sont prévues suivant le type de module. Si vous voulez choisir une autre icône pour un module, il faut renseigner ce paramètre en donnant un numéro d’icône. Par exemple, avec le « 201 » vous faites afficher l’icône d’un PC (les fichiers d201_0.png, d201_1.png, l201_0.png, l201_1.png sont utilisés).  (Pour m’y retrouver, j’ai pris le parti de mettre un numéro supérieur à 200 pour les icônes qui sont de la personnalisation et pas une icône par défaut.)

Il est possible de lancer une scène lors d’un clic sur l’icône d’un module (à la place de l’action éventuellement lancée par défaut suivant le type du module). Deux paramètres sont utilisés (ils sont donc optionnels) :

sceneon : mettre le numéro de la scène à lancer lors d’un tap sur l’icône si le module est à l’état off.

sceneoff : numéro de scène à lancer lors d’un tap sur l’icône pour un état on.

Les deux derniers paramètres left et top sont à renseigner pour positionner les modules sur la vue 3D. C’est le plus fastidieux. En attendant de faire mieux, j’utilise Openremote. Il n’y a rien à installer :

  • Il faut aller sur http://composer.openremote.org/demo/login.jsp et se connecter après avoir créé un compte.
  • Allez dans la partie UI designer et créez un panel landscape pour Ipad.
  • Mettez en image de fond votre vue 3D,
  • Positionnez des « Switch » de taille 50×50 à l’endroit où vous voulez vos modules et recopiez les coordonnées left et top dans votre fichier json.

C’est une manière longue et peu élégante de faire mais ça marche…

Enfin, pour qu’un module issu d’un plugin bénéficie d’un affichage et d’un comportement adapté, il faut modifier le paramètre category de ce module pour indiquer de quel plugin il s’agit. Pour l’instant 3 sont gérés, vous devez mettre :

  • 101 pour le plugin vswitch
  • 102 pour vcontainer
  • 120 pour virtual Clock (la nouvelle version de mon plugin alarm Clock qu’il faut que je publie…).

Les versions produites par Sencha Touch :

Pour terminer, une petite information pour ceux qui ne connaissent pas Sencha Touch. Un sdk tools permet de gérer plusieurs versions lors du développement.
J’utilise deux versions de l’interface :

  • une version  pour le développement qui est celle qui est éditable et utilisée pour les tests (elle contient pleins de petits fichiers javascript conformément au principe MVC, contient du code sous une forme plus lisible, ne crée pas de cache pour permettre la prise en compte immédiate d’une modification, contient des routines de vérification des dépendances mais en contrepartie est lente à se lancer).
  • une version de production qui est celle à utiliser lorsque ce n’est pas pour du développement (elle est créer grâce au sdk à partir de la version dev., beaucoup plus compact et rapide, elle utilise un cache, la mise à jour des modifications qui devraient être automatique nécessite quelques fois la suppression du cache).

Voilà, une première synthèse pour ceux qui voudraient se lancer si toutes ces explications ne les ont pas découragées…

6 réflexions sur “my Vera – partie 2 – Synthèse de l’installation « manuelle »

  1. Bonjour
    Votre réalisation est purement exceptionnelle.
    Je suis en cours de réflexion pour la réalisation d’un interface liée à mon NAS Syno et mon serveur Domotique Homidom avec du matériel RFXCom et analyse Teleinfo.
    Afin de piloter mon domicile aussi bien a distance avec mon iPhone que à la maison avec mon iPad.
    Est il possible d’avoir vos sources afin de voir comment adapter cela au serveur Homidom ?
    Merci d’avance.
    Stéphane

  2. Bonjour,
    Merci pour le compliment.
    Je pense effectivement rendre publiques les sources de cette application dans quelques temps. Je voudrais qu’elle soit d’abord plus utilisable directement (en y ajoutant une interface d’administration).
    Je suis en contact avec quelques personnes qui seront peut-être volontaires pour participer à son développement. J’attends aussi leur premiers avis et retour en temps qu’utilisateurs. A voir donc.
    Cependant, je n’envisage pas pour l’instant un développement pour une autre interface que la Vera + Zwave. Mais peut-être vous ou d’autres pourront étendre son champ d’application lorsque celle-ci sera publique…

    • Bonjour et félicitation pour cette magnifique interface, enfin quelque chose de graphiquement beau,convivial et pratique !

      « Je pense effectivement rendre publiques les sources de cette application dans quelques temps » => auriez vous une date plus précise a nous annoncer..j’ai hâte de pouvoir essayer ?!

      • Salut,
        Avec l’aide de trois autres personnes, une interface d’administration est en cours de réalisation. Mais il faut trouver le temps, je n’ai pas encore de date…

  3. Bonsoir,

    Félicitation pour votre travail et le partage de connaissance.

    La réactivité est impressionnante.

    J’ai hate de pouvoir la tester avec ma VeraLite.
    Si vous le permettez, lorsque vous aurez rendu public les sources, j’essaierai de l’adapter pour une Fibaro que je possède également.
    La gestion par plan de la maison en 3D est vraiment très chouette

    Très bonne continuation et si vous cherchez des développeurs c’est avec joie que je participerai au projet (je suis développeur JAVA et PHP (mais pas webdesigner 😉 )et je fais également du paramtrage sur des ETL infomatica et Talend)

    Cdlt,
    Martial

  4. Bonjour,

    Beau travail, serait il possible que tu me donne ton code pour que je l’implémente chez moi.Merci.

    Cdt

    Jerome

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