[Présentation] Kaktusatomik

Présentation et Vitrine d'installations
1

Bonjour,

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 :

design

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.

Le design est truffé de zones cliquables:

  • Radiateurs pour les thermostats
  • Caméras
  • Télécommande de la télévision

Au plaisir d’échanger. :slightly_smiling_face:

12 « J'aime »
2

Salut.

Super chouette ce design ! Sobre et fonctionnel !
Si tu en viens à partager tout ça, je suis preneur !

3

@naboleo
Avec plaisir je peux partager.
Voici un exemple de widget pour une porte.

<div class="cmd cmd-widget cursor #history#" data-type="info" data-subtype="binary" data-template="tmplicon" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
  <div class="content-sm">
    <span class="iconCmd"><div class="widget_design_porte design_porte" style="transform-origin: top left;"></div></span>
  </div>
  <script>
    jeedom.cmd.update['#id#'] = function(_options){
      var cmd = $('.cmd[data-cmd_id=#id#]');
      cmd.attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)
      if (_options.display_value == '1') {
        cmd.find('.iconCmd .widget_design_porte').removeClass('design_porte_fermee').addClass('design_porte_ouverte').css('transform','rotate(-45deg)');
      }else {
        cmd.find('.iconCmd .widget_design_porte').removeClass('design_porte_ouverte').addClass('design_porte_fermee').css('transform','rotate(0deg)');
      }
    }
    jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
  </script>
</div>

Et voici le CSS associé

[data-page="plan"] .design_porte{
    width:100%;
    height:10px; 
    transition: all 1s ease-out;
}

[data-page="plan"] .design_porte_fermee{
    background-color:var(--al-success-color);
}

[data-page="plan"] .design_porte_ouverte{
    background-color:var(--al-danger-color);
}

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.

2 « J'aime »
4

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 ?

5

Salut,

Dans la v4 il y a le menu Outils/Widgets → Code
qui te permet de créer des widgets personnalisés.

Ensuite dans le menu Réglages/Système/Personnalisation avancée
tu peux insérer du CSS

6

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 ?

7

Il faut associé le widget à la commande correspondante.
Après il faut créer différents widgets en fonction de la rotation à appliquer au widget.

Mais il est possible de faire la même chose sans animation avec des images (et donc sans code) avec les widgets du core. Par exemple :
porte_f porte_o

8

Ç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

9

Bonjour @kaktusatomik

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 :wink:

Bravo en tous cas, et merci pour ce partage

10

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… :innocent:

Par contre, je ne retrouve pas la fluidité de l’animation CSS :thinking:

11

Merci :blush:,
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.

12

Je regarde ça ce soir, c’était un test rapide ce midi (en plus de la découverte des widgets custom de la V4! :wink:)

(Testé sur brave et chrome sous Windows)

13

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.

14

Moi aussi je suis vraiment preneur d’un tuto pour essayer de comprendre réellement comment tu arrives à faire ça.

15

@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.

16

@kaktusatomik désolé de persister mais je n’arrive pas à rendre visible ton widget sur mes ouvrants.
Tu pourrais nous expliquer un peu mieux ?

17

Je fais un tuto dès que j’ai un peu de temps. Tu es bien en v4 ?

18

oui oui je suis en V4

19

Voici le tuto https://community.jeedom.com/t/widget-dynamique-en-v4/12243

1 « J'aime »
20

Très classe, merci pour ce tuto !

P’tite question : avec quoi as-tu fait ton « plan », photoshop ?