Design Interactif dans Jeedom – Donner vie à vos camérasTemps de lecture : 5 minutes

Salut à tous !!! Bonne nouvelle, le jardin avance bien, j’ai semé et tout et tout. Du coup je vais pouvoir continuer mes articles en cours. Il devrait y avoir plein de choses qui devraient vous plaire. Comme le Google Home, le multiroom, un article Poubelles V2 et plein d’autres. Aujourd’hui on va parler design et plus particulièrement de design interactif dans Jeedom. Et autant vous dire qu’avec cet article et celui sur la fonction ask que vous pouvez trouver ICI on fait un bon dans le futur.

Oui oui vous avez bien lu, je parle de design interactif.

Design Interactif dans Jeedom

Alors tout d’abord qu’est ce que j’appelle un design interactif. Alors c’est simple un design habituellement c’est un assemblage de widget, et d’image. C’est très sympathique et surtout c’est relativement poussé dans Jeedom. Mais je vous garantis qu’on peut faire encore plus bluffant et impressionnant.

Si si je vous assure. Alors je vais volontairement ne pas vous montrer le résultat de suite. Mais je vais vous expliquer de quoi il s’agit, vous montrer comment ça se met en place et enfin vous verrez.

L’idée

Alors imaginez :

• Vous observez la caméra de votre pièce de vie
• Vous cliquez sur une ampoule
• Et ….. Et …..
• Oui celle-ci s’allume directement sur la vidéo

Ou encore :

• Vous observez la caméra de votre pièce de vie
• Vous survolez ou cliquez sur votre frigo
• Et … Et….
• S’affiche en surimpression de la vidéo, la température voir même sa consommation

Vous l’avez compris, l’idée est de tout contrôler directement sur une vidéo et avoir donc le retour en direct. Cela s’applique à ce que vous voulez :

• portail
• volets
• présence
• garage
• la cafetière
• etc…

TOUUUUUUTT je vous dis

Cette article n’est pas sponsorisé par TMC

Et en plus depuis que l’application mobile permet d’avoir les designs ceci est réalisable directement depuis l’application mobile Jeedom.

Comment créer un design interactif dans Jeedom

Alors pour réaliser ceci il vous faut :

• Un Jeedom
• Une caméra dans Jeedom
• Que cette caméra voit des choses que vous voulez contrôler

Etape 1 création d’un design :

Alors pour ce faire il vous suffit de vous rendre dans le menu Accueil / Design de Jeedom

Si vous n’avez jamais créé de design vous obtiendrez cette page. Il vous suffit de cliquer sur “ici” pour nommer votre premier design.

Ensuite vous arriverez sur une page qui est :

Alors oui la page est vide. Mais je vous assure c’est votre design. Pour une aisance d’utilisation l’ensemble des commandes de création et configuration d’un design s’obtiennent avec un clic droit. Allez y  !! Essayez !!

Bop bop je sais que vous avez l’article ouvert avec Jeedom à côté alors ESSAYEZ ?

Voilà vous obtenez ceci :

Voilà c’est déjà mieux avec le menu. Donc dans cet article je ne vais pas détailler toutes les options. Si vous êtes intéressés par un article plus général sur les Designs n’hésitez pas à le dire en commentaire. Mais pour aujourd’hui on va se focaliser sur la réalisation du design interactif.

Etape 2 rajout de la camera :

Alors pour éditer votre design il faut en premier lieu passer en mode édition. Je sais c’est trivial mais je préfère le préciser. Une fois en édition il vous suffit de refaire un clic droit pour voir un menu encore plus complet.

Ce qui va nous intéresser dans cette étape et l’option “Ajouter une image/caméra”.

Vous allez obtenir un carré image vide. Il vous suffit de faire un clic droit dessus et de cliquer sur paramètres d’affichage pour obtenir ceci :

Dans notre cas nous allons choisir Afficher caméra au lieu de Image. Une fois fait il vous suffit de choisir votre caméra.

Si tout se passe bien vous devriez voir votre caméra en fond de design. Vous pouvez la redimensionner. Si vous voulez une surface plus grande, pensez à aller dans le menu “configurer design” pour choisir la taille totale de votre design. Par défaut la taille est de 500×500. Un réglage à 1280×720 me semble pas mal. Dans mon cas ça sera la cuisine. Ne faites pas attention au bordel on est en train de tout réorganiser. Mais ça sera un bon exemple car j’ai pas mal de choses pilotable sur cette vue.

Etape 3 les zones KESACO :

Ensuite on va rajouter des zones. Pour ce faire il faut faire un clic droit en dehors de la caméra pour avoir le menu général du design. et vous y verrez ceci :

En cliquant dessus vous verrez que vous avez une petite zone carré qui s’est crée sur votre design :

Voilà c’est elle la zone. Elle a plusieurs caractéristiques :

• elle est transparente
• on peut la déplacer
• on peut la redimensionner
• elle possède des options spécifiques très intéressantes

Donc pour commencer faisons un clic droit dessus et voyons voir ses paramètres spécifiques :

En paramètre spécifique on voit une seule option qui est le type de zone. En effet il y a trois types de zones :

• Macro simple : permet d’associer une ou plusieurs actions sur la zone
• Macro binaire : permet d’associer  un Toggle (pour allumer une lumière par exemple ou une prise)
• Widget au survol : permet de faire en sorte qu’au survol de cette zone un widget apparaisse (ou au clic si on le souhaite sur une tablette ou mobile par exemple)

On va vite passer sur les différents modes :

• Macro simple : ne possède pas d’options permet juste d’ajouter une ou plusieurs actions
• Macro binaire : ici il faut un état, et des actions on et off (par exemple une lumière)
• Widget au survol : ici il faut choisir un équipement à afficher, choisir si on veut un affichage au survol, au clic ou les deux et enfin la position relative du widget par rapport à la zone.

Etape 4  Y’a plus qu’à  :

Alors je vais dans mon exemple de cuisine faire en sorte d’interagir  sur la cafetière, le volet et la lumière ainsi j’utiliserai les 3 types de zone et vous aurez un aperçu complet

Cafetière :

Dans le cas de la cafetière on va faire simple çà sera une action simple qui lui dira de faire couler le café par exemple.

On place la zone autour de la cafetière.

Je met le type de zone en macro simple et lui associe l’action faire couler le café.

Lumière :

Pour la lumière je veux une zone binaire. C’est mon choix j’aurai pu choisir autre chose.

On place la zone autour de l’ampoule.

Je choisis Macro Binaire, ensuite j’associe l’état de la lumière à l’information et le ON au on idem pour le Off.

Volet :

Pour le volet je choisis le widget au survol/clic.

On place la zone autour du volet. Oui oui toujours pareil 😉

Là je choisis widget au survole, j’associe l’équipement de mon volet, je laisse la position par défaut. Et je coche afficher au survol et au clic (plus pratique sur mobile).

Voilà rien de plus simple. Il faut bien penser ensuite à sauvegarder et ensuite sortir du mode édition. Vous pouvez dès à présent jouer avec votre nouveau design. Voici une vidéo de celui qu’on vient de faire ensemble et j’ai bien évidemment rajouté des choses. Dans la vidéo au début on verra bien en premier ceux que nous avons créé ensemble.

Voici pour vous donner une idée les zones :

Résultat du Design Interactif dans Jeedom

Bluffant NON ??

Conclusion sur le Design Interactif dans Jeedom

Voilà j’espère que vous avez compris le sens Interactif dans “design interactif dans Jeedom”. J’espère que je permets à certains d’entre vous de découvrir un nouveau terrain de jeu. Et j’espère aussi que vous allez bien vous amuser. Je vous dis à bientôt pour de nouvelles aventures.