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