Widget V3 vers V4 : Aide pour comprendre (3 widgets)

Bonjour,
Sur Jeedom depuis v2, je prenais des widgets qui ressemblaient à ce que je voulais, puis je les transformais “gentillement” à mon goût.
Je tests la v4 pour voir tout ce qui va bouger et commencer à retransformer en v4.
Je bloque sur les widgets. Je suis sur qu’après avoir vu la structure v4 des widgets que j’avais en v3, je comprendrai ce qui doit être repris.

Y a t’il un “utilisateur/connaisseur super sympa” qui pourrait me transformer un widget v3 comme ci-dessous en widget v4 (j’ai vu la notion d’import, fonctionne t’elle ? et si oui, est ce en json de l’export dans la création du widget ?)

3 type de Widgets à transformer :

Le premier :
1/ vue du widget v3 :2019-11-04_12h17_07
Code du widget v3 : en info/numeric

<div style="min-width:115px;min-height:100px;position: relative; top : -7px;padding:0px !important;" class="cmd tooltips cmd-widget cursor container-fluid history" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" title="Valeur du #valueDate#, collectée le #collectDate#">
		<div class="cmdName" style="margin-top:7px;font-size : 13px;">#name#</div>
  		<div class="iconCmd#uid#" style="margin-bottom:-10px;font-size: 3.3em;"><i class="icon jeedom-thermo-moyen"></i></div>
  		<div>
        <span style="font-size: 15px;font-weight: bold;color: white">#state# #unite#</span>
  		</div>
		<div class="" style=" font-size: 0.7em;#displayHistory#">
				<span title='Min' class='tooltips'>#minHistoryValue#</span>|
            	<span title='Moyenne' class='tooltips'>#averageHistoryValue#</span>|
            	<span title='Max' class='tooltips'>#maxHistoryValue#</span> <i class="#tendance#"></i>
		</div>
	<script>
		$(".iconCmd#uid#").empty();
		if (parseInt('#state#') < "#tempmini#") {
			$('.iconCmd#uid#').html('<i class="icon jeedom-thermo-froid"></i>');
		} else if (parseInt('#state#') >= "#tempmini#" && parseInt('#state#') <= "#tempmaxi#") {
			$('.iconCmd#uid#').html('<i class="icon jeedom-thermo-moyen"></i>');
		} else if (parseInt('#state#') > "#tempmaxi#") {
			$('.iconCmd#uid#').html('<i class="icon jeedom-thermo-chaud"></i>');
		}
	</script>
</div>

J’ai vu que cela ne bouger pas pour “Paramètres optionnels widget” dans la commande dans Affichage, donc possibilité d’ajouter “tempmini” et “tempmaxi”

Le suivant :
2/ Vue du widget v3 : 2019-11-04_15h48_11
Code du widget v3 : info/numeric

<div class="#history# tooltips cmd cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" title="#collectDate#" style="display: block;">
    <center class="blocFing">       
      <span class="label stateFing#id#">#state#</span>
            <span class="label uniteFing#id#">#unite#</span>
      <span class="label nameFing#id#">#name#<br/><span class="timeCmd#uid#" style="padding : 3px;border-radius: 4px;"></span></span>
                <span class="label nameFing#id#" style="#displayHistory# font-size: 13px;">
<span title='Min' style="color: #6699ff;" class='tooltips'>#minHistoryValue#</span> | <span title='Max' style="color: #FF5B2B;" class='tooltips'>#maxHistoryValue#</span> <br/> 
              "Min | Max"   </span>
               <span class="#tendance#"></span> 

  </center>

  <style>
 .stateFing#id# {
display: inline-block;
text-align: right;
  font-size: 22px; 
  margin-right : 27px;
min-width: 5px;
width: 10%;
}   
    .uniteFing#id#{
display: inline-block;
vertical-align: top;
white-space: normal;
  overflow:hidden;
  word-break:break-word;
}
.nameFing#id# {

display: inline-block;
  border-radius: 0.4em;
    padding:0 4px;
  vertical-align: top;
font-weight: bold;
font-size: 13px;
text-align: center;
width: 30%;
  color: white;
}
.nameFing#id# .timeCmd#uid#{
  color: #A7A7A7;
}

.blocFing {
white-space: nowrap;
text-align: left;
min-width: 200px;
  padding:0 4px;
}
.label{
    white-space: normal;
          color: white;
    }
  </style>
  <script>
      jeedom.cmd.displayDuration('#valueDate#', $('.timeCmd#uid#'));
    </script>
</div>

et le dernier :
3/ Vue du widget v3 :2019-11-04_15h53_00

Code du widget (volet ouvert avec soleil suivant son passage, avant dedans, après) : info/numeric

<div style="width:90px;min-height:80px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" title="Valeur du #valueDate#, collectée le #collectDate#">
    <center>
        <span class='cmdName' style="font-weight: bold;font-size : 12px;"></span>
        <span style="font-size: 3em;" class="iconCmd#id#"></span>
    </center>
    <script>
		$(".iconCmd#uid#").empty();
		  if ('#state#' == '0') {
			$('.iconCmd#id#').append('<img style="width:70px;min-height:70px;" src="plugins/widget/core/template/dashboard/cmd.info.numeric.Soleil In-Out Volet_B65/SunBeforeWindows.png" />');
		} else if ('#state#' == '1') {
			$('.iconCmd#id#').append('<img style="width:50px;min-height:50px;" src="plugins/widget/core/template/dashboard/cmd.info.numeric.Soleil In-Out Volet_B65/SunInWindows.png" />');
		} else if ('#state#' == '2') {
			$('.iconCmd#id#').append('<img style="width:70px;min-height:70px;" src="plugins/widget/core/template/dashboard/cmd.info.numeric.Soleil In-Out Volet_B65/SunAfterWindows.png" />');
		}
    </script>
</div>

Je vous remercie d’avance.
Avec ces 3 exemples, je vais me débrouiller pour le reste. Et au pire, je ferai appel à la communauté :innocent:

Salut @Bello65?

Le truc c’est que le code de tes widgets n’est déjà pas compatible V3 :confused:

J’essaye de te partager les code V3/V4 dans la semaine.

Ca pourrait répondre à certaines de tes questions

Ah bon ? Mais ils fonctionnent super bien. Et je n’ai pas de soucis d’affichage global (je sais que des fois, si un widget est hors clous, il peut pourrir tout jeedom)
Merci beaucoup

Merci @Nemeraud je vais y jeter un coup d’oeil. Mais si c’est trop technique et que le discours est celui des pures dev (qui se comprennent avec des onomatopées de dev, je ne vais rien comprendre…:wink:

J’ai essayé de vulgariser au mieux :slight_smile:

1 J'aime

En l’état actuel ces widgets ne se mettent pas à jour seuls sans rafraîchissement de la page.

Ah ben merci, je vais regarder de plus près… Je ne m’en étais même pas aperçu.
Bon, cela va donc leurs faire du bien d’être remis au goût du jour en v4.

Bon, @Nemeraud , j’ai lu et relu, ce qui va me manquer c’est de lier tout ça, j’ai donc extrait les widget du core pour les analyser, mais sans voir le résultat concret, c’est pas facile. D’ou le fait d’avoir ces 3 widgets que je connais :wink:

On y va, j’ai plein de question : (en commentaire dans le code)
cmd.info.numeric.badge.html :

<div class="cmd cmd-widget #history#" data-type="info" data-subtype="numeric" data-template="badge" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
  <div class="title #hide_name#"> <!--j'ai compris que c'était si on cochait afficher nom ou pas-->
    <div  class="cmdName">#name_display#</div>
  </div>
  <div class="content-sm "> <!--sert à quoi ?-->
    <span class='label label-info state'></span>
  </div>
  <div class="cmdStats #hide_history#"> <!--Ca donne quoi hide_history ?-->
    <div class="col-xs-12 center-block">
      <span title='Min' class='tooltips'>#minHistoryValue#</span>|<span title='Moyenne' class='tooltips'>#averageHistoryValue#</span>|<span title='Max' class='tooltips'>#maxHistoryValue#</span> <i class="#tendance#"></i> <!--pour avoir le mini, valeur, maxi et tendance ↑-->
    </div>
  </div>
  <script>
    jeedom.cmd.update['#id#'] = function(_options){
      $('.cmd[data-cmd_id=#id#]').attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)
      $('.cmd[data-cmd_id=#id#] .state').empty().append(_options.display_value +' #unite#');
    }
    jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
  </script> <!--c'est ce que Nemeraud appel "CORPS DU WIDGET", c'est la partie SCRIPT-->
</div>

Est ce que :

<div class="col-xs-12 center-block">

c’est la version v4 de ça :

<div class="" style=" font-size: 0.7em;#displayHistory#">

il n’y a plus de displayHistory dans le widget v4, c’était quoi ?

Ce que je comprends, c’est qu’il n’y a plus de mise en forme style= en v4, parce que le widget va s’inclure dans la tuile préformée ?

Bon c’est un début.

Super !

ça permet de n’afficher les statistiques d’historique uniquement en ayant coché la case prévue.


C’est du positionnement bootstrap


J’ai pas regardé mais à priori tout a été intégré dans la classe cmdStats


Oui dans la page même… La V4 utilise beaucoup plus le positionnement par grille bootstrap

@Salvialf merci pour ce retour, je continues mon ‘apprentissage’ car en fait, je n’y connaîs rien.
bootstrap, c’est quoi ? une sorte de mise en forme intégrer dans html ? mise en forme par répartition ?
grille de bootstrap : d’ou le fait d’utiliser <div class="col-xs-12 center-block"> qui donne une position relative ?
xs pour small, cela veut dire qu’il y a du x et du L ?
12 en 12 parties ?
col = colonne donc structure verticale ?

Bootstrap c’est le découpage de la page en une grille de 12 colonnes permettant de positionner les éléments sur des rangées/lignes dessus. C’est pas le truc primordial à connaitre pour Jeedom je te rassure…

ok, je met de cote (dans ma tête), je regarderai plus tard :wink:

Ou trouves tu cette case à cocher ?
Car je vois dans le widget que j’ai mis en test (horizontal) la ligne span des tendances, mais elles ne s’affichent pas, est à cause de cela (j’ai bien coché Historiser dans la commande)
Laisses tomber, j’ai trouvé, dans configuration…

De mémoire onglet affichage dans la configuration d’une commande info/numérique cocher la case “afficher les statistiques”. Je crois me souvenir qu’il y a une option à valider dans la configuration jeedom.

Ok, je vais reprendre mon premier widget en v4, je le soumettrais ici, pour validation.
Mais pas maintenant, je vais me reposer…:smiley:

Bon ca marche pas…

<div class="cmd cmd-widget #history#" data-type="info" data-subtype="numeric" data-template="ThermoVar_B65" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">

	<div class="title #hide_name#">
		<div class="cmdName">#name_display#</div>
	</div>

	<div class="content-sm">
		<span class="iconCmd" style= "font-size: 3.3em;"></span>
	</div>


	<div class="cmdStats #hide_history#">
    	<div class="col-xs-12 center-block">
      		<span title='Min' class='tooltips'>#minHistoryValue#</span>|<span title='Moyenne' class='tooltips'>#averageHistoryValue#</span>|<span title='Max' class='tooltips'>#maxHistoryValue#</span> <i class="#tendance#"></i>
    	</div>
	</div>

	<script>
    	jeedom.cmd.update['#id#'] = function(_options){
     	 $('.cmd[data-cmd_id=#id#]').attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)
		if (parseInt('#state#') < "#tempmini#") {
			$('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<i class="icon jeedom-thermo-froid"></i>');
		} else if (parseInt('#state#') >= "#tempmini#" && parseInt('#state#') <= "#tempmaxi#") {
			$('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<i class="icon jeedom-thermo-moyen"></i>');
		} else if (parseInt('#state#') > "#tempmaxi#") {
			$('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<i class="icon jeedom-thermo-chaud"></i>');
		}
    	jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>
</div>

J’ai aussi remplacer parseInt('#state#') par parseFloat(_options.display_value) idem.

j’ai ça : image
Super je suis content :cry:
Je comprends que les div de la 2eme partie servent à mettre en place le nom, l’icon, la valeur (et son unité), mais savoir quoi mettre, c’est la galère. Je ne suis pas encore assez doué, d’ou le fait d’avoir la solution de ces 3, ce qui me permettra de comprendre qui fait quoi.
Voilà ce que je souhaite obtenir (je change juste l’icon qu’il faut un petit grossir, et pour la température, je joue avec les 3 état icon froid moyen chaud pour la gauge avec les paramètres optionnels widgets des commandes (“tempmini”, “tempmaxi”)
image

Une base ça devrait fonctionner .
A voir le rendu


<div class="cmd cmd-widget #history#" data-type="info" data-subtype="numeric" data-template="my_template" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
	<div class="title #hide_name#">
		<div  class="cmdName">#name_display#</div>
	</div>
	<center>
		<span class="iconCmd" style= "font-size: 3.3em;"></span>
	</center>	
	
	<center>
		<span class="state"></span>#unite#
	</center>
	<div class="value #hide_history#">
		<div class="col-xs-12 center-block">
			<span title='Min' class='tooltips'>#minHistoryValue#</span>|<span title='Moyenne' class='tooltips'>#averageHistoryValue#</span>|<span title='Max' class='tooltips'>#maxHistoryValue#</span> <i class="#tendance#"></i>
		</div>
	</div>
	<script>
		jeedom.cmd.update['#id#'] = function(_options){
			$('.cmd[data-cmd_id=#id#]').attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)
			$('.cmd[data-cmd_id=#id#] .state').empty().append(_options.display_value);
            if (_options.display_value < '#minValue#') {
                $('.cmd[data-cmd_id=#id#] .iconcmd').empty().append('<i class="icon jeedom-thermo-froid"></i>');
            } else if (_options.display_value >= '#minValue#' && _options.display_value <= '#maxValue#') {
                $('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<i class="icon jeedom-thermo-moyen"></i>');
            } else if (_options.display_value > '#maxValue#') {
                $('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<i class="icon jeedom-thermo-chaud"></i>');
			}                 		
		}
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>
</div>

@ZygOm4t1k merci, cela fonctionne partiellement, lorsque je l’attribue sur la commande température, je perds l’humidité et la batterie.
Il n’y a plus history avec tendance (j’ai bien coché dans configue, et cela fonctionne avec d’autres)
je mettrai un imprim/ecran jeudi du avant, après.
Mais c’est bien car je comprends qu’il vaut mieux utiliser _options.display_value au lieu du [parseInt(’#state#’)

Bonjour Bello,
Ton message m’intéresse beaucoup car je serai dans le même cas que toi si je veux un jour passer sur la V4. Je pourrais rester à vie sur la V3 mais si un jour je veux faire évoluer ma domotique avec un module reconnu qu’en V4 il faudra que j’y passe.
Ça doit faire 3 ans que j’ai commencé à domotiser ma maison, à l’époque en V2. Là tout fonctionne à merveille et pourtant mon PI3B+ en gère des modules et des scénarios.
Bref, quand on commence à mettre le doigt dans la domotique on peut dire qu’on en a pour le restant de nos jours, j’espère que mon cerveau continuera à suivre les évolutions, qu’en sera-t-il quand on passera à la V10!
Moi je ne trouve pas ça cool de devoir tout refaire, un travail de dingue pour moi qui ne sais pas programmer comme eux. Et je pensais qu’avec la V4 il suffirait de garder les images de nos anciens widgets et qu’on avait un genre d’assistant pour refaire presque à l’identique voir mieux.
Mais quand je vois tes messages je comprends qu’il n’en ai rien.
Je me demande comment ont fait ceux qui sont passés en V4. Des programmeurs surement ou des gens qui n’ont rien personnalisé et se contentent des tuiles basiques?
Je vais continuer à suivre tes messages et surtout si un jour tu réussis, indique tes solutions :slight_smile:
Bon courage