J’apporte ma petite pierre à l’édifice.
Yoan 32 ans, utilisateur de Jeedom depuis 4 ans, je viens de commencer mon design depuis mon passage à la v4 :
Le fond est réalisé en SVG avec le plugin HTML Display.
Les widgets ouvertures sont en CSS.
J’utilise beaucoup de capteurs & actionneurs Xiaomi avec Deconz (d’où le nombre de petites batteries).
Rfxcom pour volets, portail, sondes de températures et prises connectées.
Remora pour les fils pilotes.
MQTT pour les modules persos.
La différence avec un widget classique est que je ne change pas l’image pas j’ajoute et supprime une classe CSS donc je peux avoir l’effet de transition.
Bienvenu Kaktusatomik!!
Super intéressant ton design !!
Une question, comment fais tu pour insérer ton code HTML et ton CSS pour les widgets des portes ?
Merci pour la réponse…
Je me débrouille un peu mais la j’avoue que dès qu’on touche aux codes j’ai un peu de mal.
Est ce qu’en les insérants tels quels ça fonctionnerai sur un design ?
Ça j’ai vu que c’était possible mais difficile à aligner et à faire fonctionner efficacement.
J’ai vu ton design que la transition d’ouverture à fermeture était juste parfaite et je voulais avoir à peu près la même chose.
Pour les modif en fonction des rotation ça ok, c’est vraiment pour faire apparaître le widget que j’ai du mal.
J’ai pourtant inséré ton code dans le plug widget de la V4, ajouté le CSS dans les préférences et affilié le widget à la commande ouverture fermeture porte mais rien n’apparais
Juste quelques mots comme ça qui me viennent instantanément…
ouahh génial les ouvrants qui changent de couleur passant du vert ou rouge et qui en plus s’animent !!! Ca va en faire des jaloux je pense dont moi j’avoue
Bravo pour l’idée @kaktusatomik ! Je viens de tester mon premier widget V4 avec ton exemple du coup, vraiment sympa !
Une bonne idée pour @Salvialf pour créer un widget template qui gèrerait en paramètre l’orientation (verticale, horizontale, diagonale…) , la taille, le type d’ouverture, etc…
Par contre, je ne retrouve pas la fluidité de l’animation CSS
Merci ,
Pour la fluidité, le gif n’a pas été modifié.
ça peut venir de la machine ou du navigateur. J’ai fait mes tests sur Chrome et PC. Sur mon Oneplus 5T c’est fluide également.
salut, franchement cela semble trés interessant… mais tu pourrais nous expliquer un peu plus en détail comment tu a fait peut être faire un post a part.
@kaktusatomik@noodom sans rentrer en profondeur dans l’explication de ton code, peux-tu nous expliquer quelles sont les variables qui pourraient nous aider à l’adapter à notre installation.
Par exemple, est ce qu’il faut que notre widget soit exactement nommé comme le tien? est ce que dans le CSS il faut adapter quelque chose etc…
Merci d’avance pour ta réponse.