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.

design interactif dans Jeedom

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.

Design Interactif dans Jeedom

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

Design Interactif dans Jeedom

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

Design Interactif dans Jeedom Design Interactif dans 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 :

Design Interactif dans Jeedom

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 :

Design Interactif dans Jeedom

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.

Design Interactif dans Jeedom

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 :

Design Interactif dans Jeedom

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

Design Interactif dans Jeedom

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 :

Design Interactif dans Jeedom

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

Design Interactif dans Jeedom

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 :

Design Interactif dans Jeedom

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.

Design Interactif dans Jeedom

On place la zone autour de la cafetière.

Design Interactif dans Jeedom

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.

Design Interactif dans Jeedom

On place la zone autour de l’ampoule.

Design Interactif dans Jeedom

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.

Design Interactif dans Jeedom

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

Design Interactif dans Jeedom

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 :

Design Interactif dans Jeedom

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.



Partager sur :

Infos de l'auteur

Je m’appelle Ludovic Sarakha j’ai 32 ans et je suis habitant de Clermont-Ferrand. Concernant les études il faut savoir que bien que j’ai travaillé dans l’informatique (SSII internationale) et maintenant dans la domotique, j’ai un doctorat de Chimie des matériaux. Je suis un autodidacte passioné d'informatique, de domotique et de tout ce qui tourne autour des objets connectés

26 commentaires

  1. Comme d’habitude , un article très efficace.
    Simple compréhensible avec une petite touche d’humour . Génial et l’effet WAF garanti 😉
    Testé est approuvé par la WAFcompagnie

  2. “Si vous êtes intéressés par un article plus général sur les Designs n’hésitez pas à le dire en commentaire.”
    ouuuuuuui ! merci pour ce bon tuto et les prochains à venir.

  3. Bluffant comme d’habitude!!! C’est vraiment la classe.
    En plus quand on a des actionneurs sans retour d’état, au moins on voit se qu’il se passe.

    Je vais essayer ça dés ce soir!!!
    Merci à toi Dr Sarakha.

  4. Géant … justement, j’avais du mal avec le design sous jeedom.
    ça va bien m’aider … merci
    j’suis preneur à 200% d’autres tutos sur le design et de bonnes idées en terme d’automatismes (règles)

  5. Pierre BERGEROT le

    Super tuto, instructif et efficace. Je n’ai pas de caméra mais je comprend l’intérêt l’intérêt d’en mettre, et pas uniquement pour de la surveillance.

  6. Encore un super exemple bien expliqué, bravo et merci.
    C’est super le retour des articles-tuto, vivement les prochains.
    +1 pour d’autres sur le mode Design et ces subtilités pour améliorer le côté pratique et WAF.

  7. Pingback: Notre Veille : Design Interactif dans Jeedom - Donner vie à vos caméras -

  8. hello content de retrouver les articles du Doc ^^ les autres sont top aussi, mais les élèves ne dépasserons pas le maitre
    “Si vous êtes intéressés par un article plus général sur les Designs n’hésitez pas à le dire en commentaire.”
    OUI Moi aussi stp

  9. Pingback: Design Interactif dans Jeedom - Donner vie à vos caméras - La Domotique de Sarakha63 - Domotique de Lunarok

  10. Bonjour,

    j’ai essayé d’intégrer ma caméra, mais elle est accessible à travers le plugin surveillance station. Faut-il le plugin caméra pour que cela fonctionnne?

    Merci d’avance

  11. Pingback: Bilan de la Semaine 41 - La Domotique de Sarakha63

  12. Hello,

    Merci c’est amazing, et on peut faire ça avec des photos également si je me fie au choix images ou photos !!!!

    C’est vraiment superbe comme fonctionnalités !!!!

    J’applaudis des 2 mains !

  13. Génial ! Heureusement qu’il y a des articles comme le tiens qui permettent de découvrir des fonctionnalités qui sont sous nos yeux mais pas toujours mises en évidence dans les comm et les release note !

    Merci à toi !

Laisser un commentaire