Widget dynamique en V4

kaktusatomik · Juin 9, 2020, 10:02

Salut,

Voici le widget pour les baies :

<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" style="width:100px;"><div class="design_porte"  style="position: absolute"></div></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 .design_porte').removeClass('design_porte_fermee').addClass('design_porte_ouverte').css('width','50%');
      }else {
        cmd.find('.iconCmd .design_porte').removeClass('design_porte_ouverte').addClass('design_porte_fermee').css('width','100%');
      }
    }
    jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
  </script>
</div>

Pour l’autre point, mauvaise nouvelle pour toi, il va falloir tout décaler

sanji · Juin 9, 2020, 11:58

Merci pour les baies.
Par contre, je n’ai pas compris ce que tu veux dire par « tout décaler » ?

kaktusatomik · Juin 9, 2020, 12:40

Il faut que tu décales ton image du bord.

sanji · Juin 9, 2020, 1:47

Désolé, je suis en peu perdu… on fait cela sur le css?

kaktusatomik · Juin 10, 2020, 8:26

Ton widget n’est pas trop près du bord de ton design ?

sanji · Juin 11, 2020, 2:08

non, ce problème se pose même lorsque le widget est au milieu de l’écran…

Plagrod · Novembre 26, 2020, 1:34

Bonjour,

Ce tuto est-il toujours opérationnel ?

Car dès que j’applique le widget rien ne s’affiche.

anon53349806 · Novembre 26, 2020, 1:35

Si tu es en v4 oui

Plagrod · Novembre 26, 2020, 1:36

Merci. Oui en V4. Je creuse alors.

Theric · Janvier 19, 2021, 6:15

Bonjour,
Très bon tuto Kaktusatomik, un super boulot, félicitation.
Peux tu donner le code pour les radiateurs STP,
Il y a que des codes pour binaire et je galère a faire apparaitre les radiateurs.
Sachant que j’ai des modules fils pilotes 6 ordres

Des Nodon enocean qui renvoie des valeurs « text » comme ‹ Anti-freeze › ou ‹ Comfort › et
Des Fibaro Zwave qui renvoie des valeurs numérique comme 0 ou 20 ou 99
J’ai essayé en créent le widget en sous-type autre ou numérique mais je n’ai toujours pas d’affichage.

Johan_Barret · Janvier 20, 2021, 2:48

Vraiment très sympa comme widget, merci beaucoup pour le partage !

J’aimerais l’adapter à un autre besoin que j’ai :

Je pilote mes volets roulants via mon design 2D. Je voudrais remplacer le widget de base, peu adapté au design 2D, par une barre de taille proportionnel à l’ouverture de mon volet.

Voici mon design actuel :

En gros, je voudrais avoir le même rendu que tes 2 baies vitrées du haut de ton design mais pour représenter mes volets, avec une taille pouvant prendre 100 valeurs (de 0 à 100% d’ouverture) et non pas 2 (ouvert ou fermé).
Penses-tu que cela est réalisable si je pars de ton widget ?

Johan_Barret · Janvier 22, 2021, 1:39

Avec l’aide de @Nemeraud j’ai réussi à répondre à mon besoin.

1. Création du widget
Dans le menu Outils/widget
Dans le panneau Gestion/Code
Créer un nouveau widget de type info et sous-type numérique pour une version Dashboard
Nommer ce widget et dans le bloc de code y insérer ceci :

<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_volet_roulant" style="width:100px;">
        <div class="design_volet_roulant"  style="position: absolute">
          
        </div>
      </div>
    </span>
  </div>

  <style> 
    :root 
    {
  	  --volet-roulant-ferme-color: rgb(90, 90, 90);
      --volet-roulant-ouvert-color: rgb(190, 0, 0);
    }
	div.design_volet_roulant
    {   
	  height:10px; 
  	  transition: all 1s ease-out;    
      transform: rotate(0deg);
	}
	div.design_volet_roulant_ferme
    {
	  background-color:var(--volet-roulant-ferme-color);
	}
	div.design_volet_roulant_ouvert
    {
	  background-color:var(--volet-roulant-ouvert-color);
	}
  </style>

  <script>
    jeedom.cmd.update['#id#'] =function(_options)
    {
      var cmd = $('.cmd[data-cmd_id=#id#]');
      var value = parseInt(_options.display_value);
      var percent = _options.display_value;
      
      cmd.attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)
      
      if ((value >= '0') && (value < '100'))
      {
        cmd.find('.iconCmd .design_volet_roulant').removeClass('design_volet_roulant_ferme').addClass('design_volet_roulant_ouvert').css('width',''+percent+'%');
      }
      else
      {
        cmd.find('.iconCmd .design_volet_roulant').removeClass('design_volet_roulant_ouvert').addClass('design_volet_roulant_ferme').css('width','100%');
      }
    }
    jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
  </script>
</div>

La couleur peut être choisie en remplaçant les valeurs dans le css :

:root 
    {
  	  --volet-roulant-ferme-color: rgb(90, 90, 90);
      --volet-roulant-ouvert-color: rgb(190, 0, 0);
    }

2. Application sur une commande
Dans votre design insérer la commande seule
Puis en faisant un clic droit / Configuration avancée dans l’onglet affichage, sélectionner le widget précédemment créé Customtemp/xxxx
Enregistrer puis refaire un clic droit / Paramètres d’affichage
Dans CSS personnalisé insérer ici la taille souhaitée du volet ainsi que sa rotation (0deg : horizontal, 90deg : vertical)

width:50px !important;  transform: rotate(0deg);

Dans Appliqué le css personnalisé sur la classe correspondant

.widget_design_volet_roulant

Enregistrer

3. Résultat
Vous devriez obtenir un volet vert lorsque celui-ci est fermé et qui passe au rouge lorsqu’il s’ouvre :

Nemeraud · Janvier 22, 2021, 1:43

ok mais c’était, a mon avis, plus simple de tout laisser dans le widget

bonne continuation

Johan_Barret · Janvier 22, 2021, 1:53

Ah, oui je vois ce que tu veux dire ! Je viens de modifier ma publication. En effet, c’est encore plus simple à intégrer
Merci

Johan_Barret · Janvier 23, 2021, 10:33

Petite update : j’ai rajouté dans le post ci-dessus la gestion des couleurs directement dans le plug-in, si vous souhaitez avoir des couleurs personnalisées pour les volets.

:root 
    {
  	  --volet-roulant-ferme-color: rgb(90, 90, 90);
      --volet-roulant-ouvert-color: rgb(190, 0, 0);
    }

Seby76 · Juillet 21, 2022, 6:52

Bonjour,

Merci pour le partage mais désolé j’ai beau suivre à la lettre je n’arrive pas à faire afficher le widget
Création du widget

Le CSS

Les paramètres d’affichage

Qu’est ce qui cloche svp ? Merci

Ollivier · Octobre 18, 2023, 11:23

Es ce que le sujet est encore suivi var je rencontre le même soucis que SEBY76
Peux t’on nous aider?

anon53349806 · Octobre 18, 2023, 11:43

Sans montrer ce que vous avez fait comment pourrait on voir qu’il y a une erreur quelque part ??

Ollivier · Octobre 20, 2023, 5:29

Voila ce que je peux vous montrer, J’ai suivi la procedure à la lettre et pourtant rien ne s’affiche dès que je choisi le widget en question. Je ne sais plus ou chercher

Aurelien1 · Avril 19, 2024, 9:12

Bonjour,
Suite à plusieurs essais pour faire une rotation de mon widget(notamment rotate), je n’arrive pas à le mettre dans le bon sens.
Capture4
J’aimerais que le widget soit parallèle au mur et non perpendiculaire.
Merci d’avance