MyVera – Mise en place d’un effet jour/nuit

Un tutoriel pour expliquer comment mettre en place, dans MyVera, des images de fond pour les vues qui ne sont pas les mêmes le jour et la nuit avec un effet de pièce éclairée la nuit.

Cette fonctionnalité a été proposée et mise en place par blooby78 et slyos31 sur le forum Toute la domotique. J’ai essayé de l’optimiser un peu, voici donc ma méthode.

L’objectif est d’avoir un aspect différent pour les vues entre le jour:ipadjour

et  la nuit (avec effet d’éclairage des pièces qui sont allumées):ipadnuit

Ceci pourrait s’appliquer à d’autres choses comme, par exemple, un affichage différent des pièces lorsque l’alarme est armée ou pas. Cette fonctionnalité a été adoptée chez moi malgré quelques inconvénients qu’il faut d’abord connaitre avant de se lancer.
L’avantage est que c’est joli ce qui augmente le WAF de l’interface. Les inconvénients sont:

  • C’est beau mais pas vraiment utile.
  • C’est long à mettre en place.
  • L’interface est ralentie : En mode Retina sur un iPad, il faut de 2 à 3 secondes supplémentaires pour lancer MyVera, l’interface est un peu moins réactive (lors d’un changement, il faut afficher à la fois la nouvelle icône et l’image de la pièce).

Ceci étant dit, si vous voulez essayer cet effet, voici une méthode. (Dans cet exemple, la taille des images correspond à celle nécessaire pour un iPad en mode Retina.)

1. La réalisation des images à afficher

L’objectif est d’avoir des vues 3D de la maison avec des effets de lumière. J’ai utiliser le logiciel gratuit Sweet Home 3D.
Il faut d’abord dessiner le plan de sa maison, ce que je n’expliquerai pas ici.
Il faut ensuite faire calculer les images en 3D. Dans cet exemple, ce sera des fonds pour un iPad Retina. Les images doivent donc avoir une taille de 2048×1536 pixels.
Pour faire l’image de jour et de nuit, j’ai fait un calcul photographique :

  • en mettant, dans Modifier vue 3D, un fond clair dans couleur et une Intensité lumineuse forte pour le jour, une couleur sombre et une intensité lumineuse à 50% pour la nuit.
  • dans Créer une photo, un calcul avec Heure à 9:00 pour le jour et 22:00 pour la nuit.

J’ai ensuite assombri le résultat pour la nuit sous un logiciel de dessin.

3Dmodifvue3dphoto

Le mode jour:

d230_1@2x

Le mode nuit (ajustez le contraste et la luminosité en fonction de l’appareil sur lequel l’image doit être affichée, sur mon iPad, il faut une image plutôt sombre…):

rdcnuit

Il faut ensuite ajouter des lumières dans le mode nuit pour obtenir des images avec un effet d’éclairage des pièces.3dlum

Le but sera de ne conserver que la partie de la pièce éclairée désirée celle-ci viendra se superposer sur le fond du mode nuit. Vous aurez donc peut être besoin de faire plusieurs images qui pourront ensuite se superposer.

Exemple d’image avec des zones éclairées.eclairage

Cette image pourra servir pour 4 zones différentes.

En effet le but est ensuite de travailler sur un logiciel de type Photoshop ou Gimp avec plusieurs couches:
La couche de fond est votre image en mode nuit sans lumière. Vous créez ensuite un couche par zone éclairée dans laquelle vous mettez votre image calculée avec lumière. Vous enlevez dans cette couche tout ce qui n’est pas nécessaire et vous ajuster l’effet en réglant la transparence de cette couche afin que les différentes superpositions d’image donnent un bon effet.

Pour être plus parlant vous aurez donc:
Une couche de fond qui est l’image en mode nuit:
rdcnuit
Des couches avec lumière:
Dans une couche, u
ne image complète, comme celle-ci, est insérée  :eclairage

Puis elle est découpée pour obtenir ceci:
d238_1@2xou, à partir d’une autre, image ceci:
d252_1@2xVous pourrez, dans MyVera, obtenir ce type d’effet:

Un éclairage:lum2
L’autre:lum3
Les deux en même temps:lum1

Je vous conseille de conserver l’image avec les différentes couches pour des modifications ultérieures.

Pour MyVera, il faut ensuite créer une image par couche. Les deux images de fond jour et nuit (de taille 2048×1536 pixels pour du Retina) seront enregistrées en jpg (pour optimiser la taille des fichiers), chaque couche (une par zone éclairée) sera enregistrée dans une image au format png (pour conserver les effets de transparence et également à la taille 2048×1536 pixels).

2. Configuration de MyVera

Il faut maintenant mettre tout cela en place dans MyVera.

L’effet jour/nuit:

Pour que le fond change d’apparence entre le jour et la nuit, plusieurs méthode sont possibles. J’ai décidé d’utiliser le plugin Day or Night (qui change d’état automatiquement de 0, la nuit, à 1, le jour). Celui-ci peut être utilisé dans la Vera pour lancer des scènes. Il est possible de forcer son état ce qui facilite les tests.

Le plugin dans le tableau de bord de MyVera:dayornightLe passage en mode nuit ou jour est géré automatiquement par la Vera. Un clic sur l’icône force le changement d’état.

La mise en place:

  • Mettre l’image de type nuit comme image de fond de la vue.
  • Mettre l’image de fond de type jour dans le répertoire resources/images de MyVera. Nous l’utiliserons comme une icône de vue avec le numéro 230 au format Retina et elle s’affichera pour l’état jour (status=1). Elle doit donc avoir pour nom d230_1@2x.jpg.
  • Si nécessaire, installer le plugin Day Or Night dans la Vera. Un module doit être ajouté.
  • Configurer MyVera pour ajouter ce module en choisissant la catégorie Day Or Night (plugin) (vous n’avez pas besoin de le faire apparaître dans une vue).
  • Créez un clone de ce module dans MyVera avec: catégorie Custom Device, sub-catégorie One state 1, Variable Etat status, Num. Icône 230, Largeur Icône 1024, Format d’icône jpg, index 300, ajoutez le à la vue désirée dans Vue 0 avec Position gauche et Position haut égales à 0.

Quelques explications:
Le custom device de type One state 1 n’affiche une icône que lorsque sa Variable Etat passe à 1. Ainsi, lorsque le plugin Night Or Day est en mode nuit, il n’y a rien d’affiché, la vue montre l’image de fond qui est le mode nuit. Lorsque le plugin passe à l’état 1 (jour), l’image du jour vient se superposer à celle de nuit.
Les effets d’éclairage que nous ajouterons ensuite ne concernent que le mode nuit, ils seront cachés par l’image du fond de type jour pendant la journée. C’est pour cela que l’index est mis à 300 (les autres images auront un index inférieur).
La largeur est de 1024 pour indiquer la taille apparente de l’image en mode Retina (cette image étant en vérité deux fois plus grande).

Quelques précisions sur le One state (0 ou 1): En dehors du fait qu’il affiche une icône seulement pour un état (0 ou 1 suivant le cas), l’intérêt de ce type de module pour notre effet jour/nuit est que les images/icônes affichées par ceux-ci sont positionnées en dessous des autres types de modules quelque soit leur index (ils sont dans une autre couche z-index)  et ils n’apparaissent pas dans la partie Position sur les vues afin de ne pas gêner le drag and drop des modules. Un clic sur ce type de module n’a aucun effet.

La bascule jour/nuit est en principe opérationnelle et vous pouvez tester le résultat en changeant l’état du plugin Day Or Night.

La mise en place de l’effet d’éclairage d’une pièces:

Le principe est de créer un clone de chacun des modules qui, suivant leur état, doivent entraîner un effet d’éclairage d’une zone de la vue.
Un petit conseil qui vous permettra de vous y retrouver plus facilement:
Vous allez devoir affecter, à chaque clone, une image avec un numéro d’icône et un index. Cet index devra être inférieur à 300 pour être sous l’image du jour et permettre d’afficher les zones d’images dans le bon ordre si vous avez des superpositions à gérer.
Pour m’y retrouver, si par exemple j’ai une image 1 qui doit se retrouver sous une autre image 2, je leur affecte le n° 231 et 232 et l’index est également 231 et 232 (si ces numéros ne sont pas déjà utilisés pour d’autres icônes bien sûr…). Dans la liste des clones, comme l’index apparaît, ceci permettra facilement de savoir quel est le numéro d’image utilisé.

J’obtiens une liste de ce type:listeclones

Exemple pour une première zone:

  • Mettre dans resources/images la zone avec transparence au format png avec le nom d231_1@2x.png.
  • Créer un clone du module qui doit avoir un effet d’éclairage pour cette zone (par exemple la lumière du plafond de mon salon qui est un Switch) avec les paramètres: catégorie Custom Devicesub-catégorie One state 1, Variable Etat statusNum. Icône 231Largeur Icône 1024Format d’icône pngindex 231, ajoutez le à la vue désirée dans Vue 0 avec Position gauche et Position haut égales à 0.

Vous devez adapter Variable Etat à la variable de votre module. Ce sera status le plus souvent.

Vous pouvez tester le résultat en mode nuit et en allumant/éteignant la lumière.

Il faut ensuite faire de même avec toutes les zones.

Et après pas mal de travail, vous pourrez profiter de cet effet…

6 réflexions sur “MyVera – Mise en place d’un effet jour/nuit

  1. Pingback: MyVera - Mise en place d'un effet jour/nuit | D...
  2. Bonjour,
    Merci pour votre superbe travail, très réussi comme effet!
    Ca m’a donné l’envie de tester, j’ai installé MyVera sur un Udoo, genre de gros raspberry avec arduino intégré.
    J’arrive à me connecter sur MyVera depuis mon mac et mon smartphone android, il met à jour mes pièces et mes modules.
    Par contre je n’arrive pas à placer une image de fond (jpg png) il me donne un message « Erreur: image non ajoutée ».
    Quand je démarre MyVera j’ai aussi un autre message: « Erreur: liste des onglets vide. La créer? » Si je clique Oui il remet le message, je dois cliquer Non pour acquitter le message.
    Je suppose que je dois avoir fait une erreur ou oublier un truc, mais je ne sais pas quoi!
    Auriez-vous une idée?
    Bien à vous,
    Nicolas

    • Bonjour,
      Le serveur php a besoin d’avoir un accès en lecture écriture au répertoire et sous-répertoire de MyVera car il y sauve sa configuration:
      Pour la liste des onglets, en fait, la première fois une liste vide est crée dans le répertoire protect/config. Il faut donc que le serveur php puisse y avoir accès.
      S’il y a une protection htaccess sur le répertoire protect et que MyVera n’est pas identifié avec les bons droits, l’erreur peut également venir de là (c’est un des but de cette protection…).

      Pour une image de fond d’onglet, il faut déjà que la liste des onglets soit correctement créée. Ensuite il faut donner l’url d’une image. Cette image sera téléchargée (et renommée) dans resources/config/img (il faut ici aussi le droit en écriture).

      • Merci pour l’info on ne peut plus rapide, tu le dis bien sur ton blog pourtant!
        J’ai tripoté un bout de temps et j’y suis arrivé, c’est plus facile quand on est certain de chercher au bon endroit.
        Merci beaucoup pour ton suivi😉

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s