Guide utilisateur - Client WPF

HoMIDoM
Docs WPF
Fenêtre principale
Menu configurer
V1.0
HoMIDoM
Docs WPF
Onglet Serveur
Indiquer les mêmes paramètres que ceux renseignés dans le serveur
V1.0
HoMIDoM
V1.0
Docs WPF
Onglet Client
Général
File image background : image de fond affichée dans la fenêtre principale lorsqu'aucune zone n'est
sélectionnée.
Plein écran : si coché affiche la fenêtre principale en plein écran, sinon en mode fenêtré.
Demander Mot de passe pour fonctions critiques : permet de bloquer certains menus de
configuration avec un mot de passe.
Gérer Timeout des pages : si coché vous permet de basculer automatiquement vers une zone dans
après un laps de temps défini (l’exemple ci-dessus bascule sur la zone Sécurité après 1 minute
d’inactivité).
Ville du Client : permet de choisir une ville correspondant au composant météo existant sur le
serveur (à configurer dans le module HomiAdmin) pour afficher la température, humidité, vitesse
du vent, UV dans votre client.
Processus Keyboard Virtuel: permet de spécifier le clavier virtuel à utiliser
HoMIDoM
V1.0
Docs WPF
Mise à jour des widgets depuis le serveur sans prendre en compte les évents (Serveur Live): par
défaut (option cochée) les widgets sont mis à jour par envoi depuis le serveur (push). Si vous
rencontrez des problèmes de mise à jour des valeurs des composants, vous pouvez désactiver cette
option: dans ce cas, la mise à jour est effectuée par requête du client vers le serveur. Ceci peut
régler des problèmes mais augmente notablement le trafic réseau.
Menu du Haut
Possibilité d’afficher ou non différentes informations dans le menu en haut de la fenêtre: date et
heure, lever/coucher du soleil etc…. (Voir image fenêtre principale).
Transparence : permet de régler la transparence du menu en haut de la fenêtre.
HoMIDoM
V1.0
Docs WPF
Menu du bas
Masquer automatiquement la barre de menu : si coché, cache la barre de menu (menu de sélection
des zones) dans le style de la barre des tâches de Windows.
Transparence : permet de régler la transparence de la barre de menu du bas.
Cache:
Vider le cache: pour optimiser le chargement des zones, le client ne télécharge les images (widgets
et zones) depuis le serveur que si elles sont inexistantes sur le client. Ce bouton permet de vider le
cache et de forcer le téléchargement de toutes les images (utile si on a modifié des images sur le
serveur).
Sauvegarde:
Sauvegarder automatiquement en quittant: la configuration du client (réglages des widgets, zones,
paramètres, etc.) est sauvegardée chaque fois qu'on ferme le client.
Sauvegarder les backups et sauvegardes suivant différents fichiers: le client utilise plusieurs fichiers
de sauvegarde, ce qui permet de récupérer une configuration antérieure au cas où la dernière version
sauvegardée est corrompue.
HoMIDoM
V1.0
Docs WPF
Widget vide
Propriétés
Voyons en détail les propriétés d’un Widget vide
1. Mettre à jour Etiquette depuis le serveur automatiquement :
Si coché l’étiquette de votre widget se synchronisera avec l’admin, du moment que vous
aurais modifié l’étiquette de l’admin l’étiquette du widget se modifiera coter wpf
HoMIDoM
V1.0
Docs WPF
2. Afficher étiquette :
Vous permet d’afficher ou non le nom du widget
3. Etiquettes, size, color, alignement :
Vous permet de donner un nom au widget une taille une couleur et de l’aligné
4. Affichés le statut :
Le client affichera le statut du composant récupérer dans l’admin
5. Commun à toutes les pages :
Affiche le widget dans toutes les zones
6. Taille et position :
Vous permet de définir manuellement la position, taille et rotation d’un widget, c’est
paramètre sont modifiable par glisser déplacer dans la zones du widget, ce qui nous intéresse
principalement dans ce menu c’est le paramètre Zorder qui n’est modifiable que
manuellement, il sert à positionner des widget en avant ou arrière plans suivant sa valeur,
plus elle est négative plus le widget sera en arrière-plan
HoMIDoM
V1.0
Docs WPF
7. Picture :
Permet de définir une image pour le widget
8. Status :
Idem que pour l’étiquette, permet de définir la taille et la couleur de la police
9. Background :
Avec transparence
Sans transparence
HoMIDoM
V1.0
Docs WPF
Création d’une action
1. Action :
Vous permet d’effectuer une action sur un widget pour ça vous pouvez choisir une des 5
actions possible
Objet :
Vous devez choisir le device ou la macro que le widget va exécuter
Fonction :
Vous avez la possibilité de choir la fonction suivant l’objet sélectionné, si vous
choisissez un device les fonctions s’adapte à celui-ci
HoMIDoM
V1.0
Docs WPF
Exemple : je choisis un device lampe j’aurais le choix entre on, off, toggle, dim. si je
choisis une macro j’aurais juste exécute etc….
2. Visualisations :
Vous permets d’afficher une lampe par exemple allumée ou éteinte suivant son état ou
toute autre image suivant vos besoins
Créations d’un widget qui allumera et éteindra un device lampe créer
précédemment dans l’admin
Allez dans menu, ajouter, nouveau widget vide
Vous aurez ceci
Ensuite allez dans le menu éditer widget et cliquer sur le widget nouvellement créé, un
menu propriété du widget va s’ouvrir, on va commencer par créer une action pour cela
cliquer sur le + , on laisse action sur onclique comme ça on exécutera une action à
chaque clique sur le widget, ensuite on choisit le device que l’on veut exécuter, ici c’est
la lampe cuisine, on va sélectionner une action, vous avez plusieurs choix pour notre
HoMIDoM
V1.0
Docs WPF
exemple on utilisera toggle ce qui changera l’état du device a chaque clique sur le
widget , et maintenant valider en appuyant sur le bouton OK.
Vous venez de créer une action sur un widget qui vous permettra d’allumer et éteindre
une lampe
HoMIDoM
V1.0
Docs WPF
Maintenant on va animer ce widget qui n’est pas très joli, pour ce faire cliquer
maintenant sur visualisation
Objet : permet de choir son device ou macro à exécuter, dans notre exemple ce sera
lampe cuisine
Propriété : ici on n’a pas le choix c’est value
Opérateur : permet de choir un opérateur =,<>, <, >, <= et >= qui permettra de définir
une value pour le changement d’état, principal utilisation dans les composant météo, par
exemple afficher une image ou un massage si la température et inférieur à 0 ou modifier
la luminosité d’une lampe en fonction de la value
Valeur : c’est la valeur que le device devra avoir pour afficher l’image associée
Texte : texte a affiché à la place d’une image
Picture : image correspondant à la value choisie
HoMIDoM
V1.0
Docs WPF
Voilà comment créer un widget animer avec une lampe on / off, si votre device a une
value de 100 il affichera une lampe allumé s’il a une value de 0 elle sera éteinte, une fois
terminé allez dans le menu et cliquer sur éditer widget pour le désélectionner,
maintenant vous pouvez admirer le résultat
Il est possible de faire des animations pour des composant météo, image de zone etc …
La visualisation d’un widget ne doit pas nécessairement être associé à une action elle
peut fonctionner pour animer un device qui changerais d’état, exemple un détecteur
volumétrique qui ferais une détection, afficher un cadenas pour voir si l’alarme et
activée ou non
Afficher une value météo ou l’heure avec l’étiquète du widget vide
HoMIDoM
V1.0
Docs WPF
Le principe reste le même que pour crée une lampe mais on utilisera juste les propriétés
du widget, on clique sur la petite flèche à droite de l’étiquette et on choisit la valeur à
afficher, pour l’exemple ci-dessous j’ai créé 5 widgets vide un par ligne, en premier Date
Long, en deuxième Heure Long, température de ma ville, condition météo de ma ville et
image météo de ma ville
Pour afficher un cadenas pour l’activation de l’alarme par exemple on utilisera la
propriété visualisation comme ci-dessous, dans les propriétés j’ai désactivé l’affichage
de l’étiquette et j’ai mis le background a 0 comme ça le cadenas seul sera afficher, ce qui
donnera un cadenas ouvert à la désactivation de l’alarme et un fermer à l’activation
HoMIDoM
Docs WPF
Création d’un Widget Foobar
V1.0
HoMIDoM
V1.0
Docs WPF
Prérequis : avoir configuré foobar dans l’admin si ce n’est pas fait voici comment
procéder configurer foobar
Pour commencer on va créer un nouveau widget vide, ensuite on va dans menu éditer
widget et dans action on fait +, dans objets ont choisi le foobar voulus (il est possible de
configurer plusieurs foobar pour le multi room) et on choisit la fonction dans notre
exemple pause, on valide avec le bouton ok
Dans Picture on choisit une image qui représente le bouton pause et on valide, il ne reste
plus qu’à le faire pour chaque fonction désirée Play, stop, mute etc…
HoMIDoM
V1.0
Docs WPF
Autre possibilité d’afficher un lecteur foobar avec un widget web
Nous parton sur le principe que foobar et installer et fonctionnel par http, j’utilise le
Template vairulez disponible ici avec quelques autres, pour l’installation du Template
référer vous a la doc, dans propriété http on indique l’adresse IP, le port et le Template
de foobar que l’on veut utiliser dans mon exemple 192.168.1.3 :8889/vairulez/
Si vous faites du multi room il est possible de configurer plusieurs foobar avec un seul
widget web, pour cela il suffit d’ajouter un bouton en cliquant sur + indiquer le nom de
la zone dans label, la taille du bouton hauteur et largeur et l’adresse du lecteur pour la
zones voulue
Exemple :
Living : 192.168.1.3 :8888/vairulez/
Chambre : 192.168.1.3 :8889/vairulez/
S.D.B :
192.168.1.3 :8890/vairulez/
Etc..
Chaque lecteur créé doit avoir un port différent
HoMIDoM
V1.0
Docs WPF
Maintenant il ne reste plus qu’à redimensionner le widget en bas du lecteur vous voyez
les 4 boutons créer pour chaque zones
HoMIDoM
Docs WPF
Création d’un Widget Web
V1.0
HoMIDoM
Docs WPF
Création d’un Widget Rss
V1.0
HoMIDoM
Docs WPF
V1.0
HoMIDoM
Docs WPF
Création d’un Widget Météo
V1.0
HoMIDoM
Docs WPF
V1.0
HoMIDoM
V1.0
Docs WPF
Création d’un Widget Key Pad
Pour la création d’un widget Keypad il faut au préalable avoir créé un composant virtuel
generiquevalue dans l’admin lui donner un nom cocher toutes valeurs et au niveau value
default entrer votre code qui sera utiliser pas le keypad
Une fois que le composant et créer allez dans wpf et faite ajouter, nouveau widget
keypad, dans composant choisissez celui crée précédemment et il ne vous reste plus qu’a
créé une macro qui se lancera a l’activation du composant
HoMIDoM
V1.0
Docs WPF
Création d’un Widget Label
Pour le widget rien de bien compliquer il suffit de créer un widget label ensuite dans
étiquette indiquer le texte que vous voulez afficher, choisissez la taille et la couleur de
l’étiquette
Création d’un Widget Caméra
http://(IP caméra:port)/videostream.cgi?user=(login)&pwd=(mots de passe)
HoMIDoM
Docs WPF
Création d’un Widget Volet
Création d’un Widget Moteur
V1.0
HoMIDoM
Docs WPF
V1.0
HoMIDoM
Docs WPF
V1.0