Comme annoncé, ce forum est passé en lecture seule au 1er janvier 2020. Désormais nous vous invitons à vous rendre sur notre nouvelle page communauté :
Image

A très bientôt !

[Design] Zone "interactive" et widget ampoule

Cette partie est réservée à l'utilisation de l'interface web de configuration de JEEDOM
Jedediah
Timide
Messages : 4
Inscription : 07 avr. 2019, 16:47

[Design] Zone "interactive" et widget ampoule

Message par Jedediah » 03 juin 2019, 15:04

Bonjour tout le monde :-)

Je suis actuellement en train de créer mon design principal pour l'interface web de mon Jeedom.
Celui-ci se base sur un plan 2D de mon logement et j'aimerais ajouter quelques fonctionnalités que je n'arrive pas à créer, dont deux en particulier.

- J'aimerais dans un premier temps créer des "zones" pour mes pièces dont la couleur de fond changerait en fonction de la détection de mouvement.
En gros, transparent ou vert si aucun mouvement n'a été détecté et rouge translucide (pour laisser les autres infos visibles), lorsqu'un mouvement est détecté ?

Est que cela est possible sachant que ma détection de mouvement passe par des virtuels eux-même basé sur des remontés d'état de modules Xiaomi/Aqara en Zigbee via Zigbee2MQTT ?

- Deuxièmement, toutes mes ampoules sont des ampoules Philips Hue qui fonctionnent parfaitement dans mon Jeedom.
Est-il possible de créer un widget qui serait utilisé uniquement dans le design (donc en gardant les tuiles par défaut accessibles via le Dashboard classique) ?

L'idée est de placer des "halos" lumineux sous forme d'image à l'emplacement des lumières si celles-ci sont allumées.
Dans la pratique, j'arrive bien à faire ce que je veux, c'est à dire avoir une image sur ma tuile en fonction de l'état de la lampe, mais cela modifie donc directement la tuile d'origine. Je souhaiterai avoir une "tuile" ou un widget séparé, uniquement pour mon design.

Merci d'avance, et si mes questions ne sont pas claires, n'hésitez pas à me le faire savoir.

winhex
Actif
Messages : 3799
Inscription : 23 janv. 2015, 01:41

Re: [Design] Zone "interactive" et widget ampoule

Message par winhex » 03 juin 2019, 20:18

Bonjour
Pour ta 2eme question : création de virtuel
Pour la 1er idem via un widget soit une image (plus simple)
soit un fond couleur retravaillé via CSS clip-path (pour pièces avec plusieurs coin)
https://bennettfeely.com/clippy/
Dans un div et le script change la couleur
(Complexe si tu n'y connais rien en HTML) commence par t'amuser avec le plug virtuel

Jeeviens
Timide
Messages : 154
Inscription : 15 août 2017, 01:04

Re: [Design] Zone "interactive" et widget ampoule

Message par Jeeviens » 04 juin 2019, 01:26

Bonsoir @Jedediah

Si par 'zone' tu entends une portion graphique de ton plan qui change de couleur en fonction d'une présence détectée, il te suffit de créer un virtuel binaire associé à un widget de la taille de la zone.

Le virtuel (binaire) reflète la présence ou non (associé à ton capteur par exemple)

Et le widget, binaire lui aussi donc, comportera deux images : une avec un fond coloré (présence) et l'autre rien (non-présence, merci Mr Orwell )

Sous Photoshop par exemple, pour créer les images, tu crée un calque avec le fond coloré, tu sauves EN PNG (pour beneficier de la transparence) en tant que 'fond-1' et ensuite en désactivant le calque, tu sauves en tant que 'fond-2'. Elles auront donc la même taille, mais seule l'une deux affichera quelque chose.

Celle qui affiche quelque chose sera utilisée par le widget en position ON et celle de même taille, mais vide et donc transparente sera utilisée par le widget en position OFF

Tu cale ton virtuel habillé du widget sur ton plan et zou ;)

SI par zone tu entendais une portion graphique de ton plan bien sur ;)

En espérant t'avoir aidé !

[EDIT] @Winhex je n'avais pas vu que tu avais répondu aussi à la première question, j'ai lu trop vite et j’étais trop pressé de répondre pour une fois que je pouvais aider... oops... et désolé de paraphraser ;) ... mais comme j'ai passé 5 minutes à écrire une description qui me convienne, je la laisse :D :D :D

Jedediah
Timide
Messages : 4
Inscription : 07 avr. 2019, 16:47

Re: [Design] Zone "interactive" et widget ampoule

Message par Jedediah » 04 juin 2019, 09:05

Bonjour à vous deux et merci pour vos réponses rapides !

Concernant la zone, je n'avais effectivement pas pensé à utiliser un virtuel, ça me semble être la bonne méthode.
Je maitrise Photoshop, je ne devrai pas avoir de mal à créer ce dont j'ai besoin. Idem pour les images que j'utiliserai pour les halos lumineux.

Pour en revenir à ces halos lumineux justement, via un virtuel, il y a une chose que je ne sais pas faire.

Comment faire en sorte d'avoir donc une image "off" et une image "on" qui soit cliquable pour allumer/éteindre les ampoules ?
J'ai réussi grosso modo à le faire en modifiant la tuile d'origine en appliquant un binaire d'action sur les commandes on/off.
Le problème est donc de le faire sur un virtuel pour ne pas toucher la tuile d'origine.

Autre problème avec les Hue, la commande "On" les allume au minimum, je ne comprends pas pourquoi...

Merci d'avance :-)

Avatar de l’utilisateur
noodom
Actif
Messages : 982
Inscription : 13 juil. 2014, 17:25
Contact :

Re: [Design] Zone "interactive" et widget ampoule

Message par noodom » 06 juin 2019, 07:57

Salut,

Pour la gestion du clic sur on/off, va faire un tour du côté du post du widget iconAction qui devrait faire ce que tu veux

Répondre

Revenir vers « Portail web classique (Desktop) »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 20 invités