ALTUI : User Interface alternative pour VERA – Custom Pages

Mercredi, 22 Avril 2015 06:00 Alexis Mermet
Imprimer
Note des utilisateurs: / 6
MauvaisTrès bien 

ALTUI est un plugin pour offrir une nouvelle user interface à la VERA (qu’elle soit sous UI5 ou UI7 ).  ALTUI tourne sur n’importe quel périphérique client ( PC, MAC, Tablette, Phone ) et s’adapte automatiquement au format. Elle est accessible en local mais aussi en mode Remote à partir d’Internet. Cette application a déjà été présentée hier dans l'article de Domotique-Info.fr mais il est utile de revenir sur la partie Page "Utilisateur Custom" qui est un des grands différentiateurs par rapport à UI5 ou UI7.

 

L’un des challenges de UI5 UI7 est de ne présenter à l’utilisateur que des pages qui sont organisées par device ou par scène, mais l’utilisateur devrait pouvoir se construire son propre panneau d’interaction avec son installation et cela peut être un composé de fonctionnalités offertes par différents devices/périphériques/page et scènes, tout cela organisé selon son gout, visible sur n’importe quel appareil, tablette, phone, PC, MAC etc.

C’est exactement ce que les Custom Pages de ALTUI proposent :

 

Mode Edition

Commençons par le commencement, il n’y a pas de page et l’écran d’Edition se présente sous cette forme :


La première étape consiste à créer une nouvelle page.

 

Puis nous pouvons lui donner un nom par le menu « Page Properties ». On remarque la propriété CSS background qui permer ici de définit le background de la page. Toutes les chaines CSS3 valides sont possibles ce qui permet de définir la couleur de votre choix, des gradients, des images de fond.  Il y a des pages sur le WEB pour aider a construire un chaine CSS de background qui marche bien, prenez bien la version pour votre browser.

Par exemple :

 

 

Voyons ensuite les outils à notre disposition pour créer des pages :

Label : un label statique

 

Variable : la valeur d'une variable d'un device

 

Image : une image depuis le web

 

Device Icon : l'icône d'un device (dynamique si besoin)

 

Scène : exécute une scène à la pression sur ce bouton

 

Action : appelle une action UPNP avec ses paramètres à la pression sur ce bouton

 

Multi State : Un bouton on/off base sur la valeur d’une variable d’un device, avec des labels customisables et valeur inversable ( peut être montré comme ON lorsque la variable est 0 au lieu de 1 )

 

Caméra : l’affichage vidéo d’une camera configurée sur la Vera

 

Gauge : une gauge google chart base sur la valeur d’une variable d’un device avec arc vert, jaune, rouge paramétrable

 

Des outils d’alignement des contrôles sélectionnés (par drag and drop ou par CTRL+click ) sur la page

 

La poubelle pour enlever un control de la page

 

Pour amener un contrôle sur la page, il suffit de faire un drag and drop à partir de la zone des outils vers la page, et de positionner son control là où on veut. On peut aussi recliquer sur le control et le déplacer en maintenant appuyé et déplaçant sur la page pour repositionner, ou la poubelle pour enlever.

Chaque contrôle dispose des propriétés qu’il faut configurer. Un click sur le control ouvre la boite de dialogue des propriétés.

Les 2 plus compliqués étant le OnOff Bouton et la gauge Google. Voyons ces 2 en détails.

Le OnOff button permet d’afficher un bouton allumé vert ou rouge et son état de manière très synthétique :

 

Ses priorités sont les suivantes :

Device : le périphérique Vera concerné

Variable : la variable qui va déterminer l’état du bouton. 1 ou true pour l’état ON , 0 ou false pour l’état OFF

Inverted : si coché, cela inverse ( 0 pour ON,  1 pour OFF … )

OffLabel : le text a affiché lorsque le bouton est OFF

Action to switch OFF : le nom de l’action UPNP du device à exécuter pour passer l’état du bouton a OFF
Les éventuels paramètres de cette action, dépend de l’action sélectionnée

OnLabel : le text a affiché lorsque le bouton est ON

Action to switch OFF : le nom de l’action UPNP du device à exécuter pour passer l’état du bouton a ON

Les éventuels paramètres de cette action, dépend de l’action sélectionnée

 

 

Ici en exemple, le IPhone locator device est en mode Mute si sa variable « Muted » est a 1. Je veux afficher en VERT si le téléphone n’est pas en mode Mute, donc inverted est sélectionné. L’action pour passer a l’état OFF ( c’est-à-dire non muté ) est Setmute() avec le paramètre 0.  L’action inverse pour passer a l’état ON ( c’est-à-dire muté ) est SetMute() avec le paramètre a 1.

La gauge Google permet d’afficher une valeur numérique et des arcs vert jaune rouge comme ceci :


Les paramètres sont assez simples :

 

Pour se servir des outils d’alignements, il faut commencer par sélectionner plusieurs contrôles soit en dessinant une bande élastique autour d’eux (on clique dans un endroit vide, on garde appuyé et on étend), ou bien on fait CTRL + Click sur ceux que l’on veut sélectionner.   Une fois la sélection faite, on peut simplement déplacer tout le groupe d’un coup, ou bien allez cliquer sur un des outils d’alignement (haut bas centre droit gauche milieu)

Ensuite, ne pas oublier de sauvegarder la page par le Menu Action.

 

Mode Kiosk

 

Tout simplement par le menu Custom Pages / Use Custom pages. Chaque page apparait sous la forme d’une tab avec son nom.

Avec un peu de patience, on peut arriver au résultat suivant :

 

 

Sauvegarde des pages

Attention à ce point crucial ! Les pages sont sauvées dans des variables du périphérique ALTUI de VERA.  La taille étant limitée à la fois au niveau de stockage de la variable et au niveau du transport par la requête http entre ALTUI et le LUA handler du plugin qui n’accepte que les requêtes http GET, il est nécessaire d’utiliser plusieurs variables

Tout est au forme JSON mais potentiellement segmenté en morceaux qu’il faut concaténer si nécessaire. L’utilisateur n’a a priori pas à s’occuper de cela mais c’est bon à savoir. Les variables Data_CustomPages_nnn contiennent la liste des noms de pages crées et les variables Data_<nom>_nnn contiennent les fragments pour la page de nom <nom>

Voici les variables de ALTUI , vues par ALTUI lui-même …

 

La chose importante qui peut arriver : vous voulez désinstaller le plugin , et tout réinstaller plus tard. Vous allez perdre les valeurs des variables qui contiennent les pages.  ( Ca n’est pas un problème pour les updates ).

Dans ce cas, il est possible d’utiliser une fonctionnalité de ALTUI qui permet de sauvegarder la définition de ses « Custom pages » en respectant scrupuleusement la procédure suivante.

1/ A partir de ALTUI, allez dans le menu More / Optimisation

2/ Cliquer sur le bouton Save User Pages.

 

3/ Ceci va sauver vos user pages dans le local storage HTML5 de votre poste client. Visible par exemple sous chrome

 

4/ Faire votre desinstall du plugin , reset factory, tout ce que vous voulez

5/ Une fois que le plugin ALTUI sera réinstallé et fonctionnel sur la Vera,  ouvrir ALTUI, et allez dans le menu More / Optimisation

6/ Cliquer sur Restore From User Pages Cache et tout devrait être en place

7/ Cliquer sur Save User Pages pour resauver les pages dans la Vera. Ne pas oublier cette étape

 

Merci à Alexis pour cet article.

 

Vous n'avez pas compris un point ? Vous vous posez une question ? Vous pouvez nous contacter via le bouton Assistance sur votre gauche. N'hésitez pas à demander un rendez-vous téléphonique avec Domotics.

Vous avez aimé cet article ? Vous pouvez le partager sur vos réseaux sociaux pour soutenir son auteur et l'encourager à écrire de nouveaux articles ...

 

Cet article vous est proposé par Domotics: Domotics habite dans la région Toulousaine. Il est ingénieur en informatique et électronicien amateur. La domotique est pour lui une passion qu'il pratique depuis 1999. En 2003, il décide de partager ses expériences sur le magazine et le forum de touteladomotique.com.

En 2014, il crée sa société de conseils en Domotique ID2domotique.com et sa boutique en ligne laboutiquededomotique.com. Profitez de l'expérience et l'expertise de Domotics en faisant appel à ses services. Les conseils sont gratuits ...

Mise à jour le Mercredi, 22 Avril 2015 12:47