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.
34 commentaires
Yo,
Comme toujours super tuto et surtout super idée !!!
Thx
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
« 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.
Oui je suis vraiment très intéressé par un article plus général sur le design afin de mieux maîtriser. J ai lu plein de forum et trouvé des articles mais qui étaient traités sur l’ancienne version de jeedom.
De même je cherche un tutoriel sur le mode plan toujours sur la dernière version de jeedom.
Je ne demande qu’a me perfectionner. Jeedom n’a pas de limite mais un peu d’aide ne serait pas de refus. Merci pour votre aide.
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.
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)
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.
De bons rappels, merci Ludo.
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.
Franchement : Super !!! Un très grand merci pour ce tuto 😉 et n’hésitez pas à en faire d’autres sur les Design 😉
+1 😉
Excellentissime !!! super tuto, puissant le mode design !
Pingback: Notre Veille : Design Interactif dans Jeedom - Donner vie à vos caméras -
Tres Waf en effet, c’est nickel…. et même les enfants peuvent jouer avec tellement ça devient intuitif !!!
c’est une tuerie ton truc vraiment suis bluffé
Très bonne idée. Je suis bluffé 😉
Pour le WAF j’attend de voir. Je commence ce soir. Merci
magnifique comme dab !
je suis preneur pour le tuto Desig.
Qu’utilises tu comme caméra ?
Merci
C’est des foscam c1 en intérieur et des wanscam hw0045 en extérieur
merci
Merci, j’adore tes articles! Continue comme ça.
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
Pingback: Design Interactif dans Jeedom - Donner vie à vos caméras - La Domotique de Sarakha63 - Domotique de Lunarok
Je n’ai pas lu le commentaire des autres… Mais ton article est super bluffant!!! C’est un truc de malade….
Merci pour ces supers tutos
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
Oui il faut le plugin caméra afin de retrouver la caméra dans la liste
Pingback: Bilan de la Semaine 41 - La Domotique de Sarakha63
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 !
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 !
bonjour, il y a t il une solution de suivi d objet ? ma camera est motorisée et les zones ne sont pas toujours a la meme place :p
+1 ^^
Excelente articulo, ordenado y claro. Todo un descubrimiento. Gracias.
Hello,
Comme d’habitude super tuto et super idée, aujourd’hui si il y a bien deux site que je ne peu plus me passé c’est bien « http://sarakha63-domotique.fr » et « https://lunarok-domotique.com » et bien sur le forum Jeedom.
Longue vie à tous.
Super tuto, encore merci pour toute l’aide que tu nous apportes. Est ce qu’on peut faire de même avec une caméra motorisés ? Est ce que les zones reste sur les objets ? Ou Où il faut obligatoirement une caméra fixe?
Bonjour Sarakha63 et merci pour ces tutoriels très bien fait.
J’ai une petite question concernant les widgets au survol de zone.
J’ai créé un design (responsive de fsb33 et to erre : super top) avec changement de wallpaper en fonction de la météo.
J’ai un virtuel d’affichage de mes ampoules xiaomi qui reprend juste l’état. J’ai ajouté une zone juste au dessus, qui m’affiche quand je survole, le widget complet pour avoir toute les actions liées à l’ampoule.
Le problème c’est qu’après sauvegarde et refraichisselent, la zone de survol se déplace toute seule dans le cadre et ne correspond plus du tout à l’endroit désiré…..
Si tu as une idée je suis preneur !
Merci d’avance !
Pingback: Autour de Jeedom ce mois – Blog Jeedom