Page 2 sur 2
Re: (RESOLU)Couleur mode actif
Publié : 03 avr. 2019, 23:19
par Naboleo
Merci, j'ai pigé le truc
- pizza4saisons.PNG (6.66 Kio) Consulté 2876 fois
J'en suis donc arrivé là :
Code : Tout sélectionner
<div style="min-width:90px;min-height:60px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
<center>
<div style="font-weight: bold;font-size : 12px;#hideCmdName#">#name_display#</div>
<span style="font-size: 2em;font-weight: bold;margin-top: 5px;" class="state"></span><br/>
<span style="color: #666666;font-weight: bold;">#unite#</span>
</center>
<script>
jeedom.cmd.update['#id#'] = function(_options){
var val = _options.display_value;
var saisons = ['Printemps','Eté','Automne','Hiver'];
saisons.forEach(function(saison) {
$('.cmd[data-cmd_id=#id#]').closest('.eqLogic-widget').find('a.btn.btn-sm.btn-default.action.cmdName[title='+saison+']').empty().html('<span><img src="plugins/widget/core/images/'+saison+'-nb.png" width=30 height=30/></span>');
});
$('.cmd[data-cmd_id=#id#]').closest('.eqLogic-widget').find('a.btn.btn-sm.btn-default.action.cmdName[title="'+val+'"]').empty().html('<span><img src="plugins/widget/core/images/'+val+'-couleur.png" width=30 height=30/></span>');
$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
$('.cmd[data-cmd_id=#id#] .state').empty().append(_options.display_value);
$('.cmd[data-cmd_id=#id#]').hide();
};
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>
Afin de le rendre plus générique, je pense que je traiterai le tableau sous forme de paramètre optionnel dans les widgets. A moins qu'il y ai une meilleure façon de faire ?
Re: (RESOLU)Couleur mode actif
Publié : 04 avr. 2019, 02:31
par winhex
oui tu as tous compris
tu recherches le nom de toutes tes actions (je voulais le testé je savais la chose faisable)
et vu que je te sent prendre le relai
Code : Tout sélectionner
var test = $('.cmd[data-cmd_id=#id#]').closest('.eqLogic-widget').find('a.btn.btn-sm.btn-default.action.cmdName').text();
alert(test)
ça ne marche qu'a la lecture avant l'update (normal c'est le "name_display" qu'on efface via empty mais pour que tu comprenes
de là
puisque tu veux tous les noms d'actions on va cherché le popup "title" et là avant ou dans l'update (selon ton besoin)
Code : Tout sélectionner
var textInput = $('.cmd[data-cmd_id=#id#]').closest('.eqLogic-widget').find('a.btn.btn-sm.btn-default.action.cmdName').map(function(_,el){
return $(el).attr('title')}).get();
alert(textInput);
action1,action2,Retour mode précedent
et puisqu'on y est les #id#
Code : Tout sélectionner
var textInput = $('.cmd[data-cmd_id=#id#]').closest('.eqLogic-widget').find('span[data-cmd_uid]').map(function(_,el){
return $(el).data('cmd_id')}).get();
alert(textInput)
2939,2940,2933
j'arrête tu as tous pour une façon plus générique (tableau)
recherche d'image par nom et mise en place par id
tu mets 2939 à la place #id#
Code : Tout sélectionner
$('.cmd[data-cmd_id=#id# .btn]' ).empty().html('<span><img src="plugins/widget/core/images/'+val+'-couleur.png" width=30 height=30/></span>');
Re: (RESOLU)Couleur mode actif
Publié : 04 avr. 2019, 12:44
par Naboleo
ça marche du tonnerre (avec le nom) ! Merci beaucoup !
De ce fait j'ai cumulé couleur de fond et image pour m'amuser....
Code : Tout sélectionner
<div style="min-width:90px;min-height:60px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
<center>
<div style="font-weight: bold;font-size : 12px;#hideCmdName#">#name_display#</div>
<span style="font-size: 2em;font-weight: bold;margin-top: 0px;margin-bottom: 0px;" class="state"></span><br/>
<span style="color: #666666;font-weight: bold;">#unite#</span>
</center>
<script>
jeedom.cmd.update['#id#'] = function(_options){
var val = _options.display_value;
var modes = $('.cmd[data-cmd_id=#id#]').closest('.eqLogic-widget').find('a.btn.btn-sm.btn-default.action.cmdName').map(function(_,el){return $(el).attr('title')}).get();
modes.forEach(function(mode) {
var item=$('.cmd[data-cmd_id=#id#]').closest('.eqLogic-widget').find('a.btn.btn-sm.btn-default.action.cmdName[title='+mode+']');
item.empty().html('<span><img src="plugins/widget/core/images/'+mode+'-nb.png" width=30 height=30/></span>');
item.css('background-color', '#cmdColor#');
});
//var modes = $('.cmd[data-cmd_id=#id#]').closest('.eqLogic-widget').find('span[data-cmd_uid]').map(function(_,el){return $(el).data('cmd_id')}).get();
//alert(textInput);
//$('.cmd[data-cmd_id=#id# .btn]').empty().html('<span><img src="plugins/widget/core/images/'+val+'-couleur.png" width=30 height=30/></span>');
var item=$('.cmd[data-cmd_id=#id#]').closest('.eqLogic-widget').find('a.btn.btn-sm.btn-default.action.cmdName[title="'+val+'"]');
item.empty().html('<span><img src="plugins/widget/core/images/'+val+'-couleur.png" width=30 height=30/></span>');
item.css('background-color', '#activecolor#');
$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate);
$('.cmd[data-cmd_id=#id#] .state').empty().append(_options.display_value);
$('.cmd[data-cmd_id=#id#]').hide();
};
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>
Il faut que je regarde plus en détails pour le changement avec l'ID. Si j'ai bien compris, l'avantage c'est que j'ai pas besoin de repasser par un find() (donc meilleurs perfs) pour modifier l'image, d'un autre coté, ça veut dire qu'il faut nommer les images avec l'ID également (et là c'est moins parlant surtout dans 1 mois)...
En bidouillant "map(function(", il doit y a voir moyen de retourner un tableau du genre [id,nom] mais on "perds" à nouveau en perfs probablement
En tout cas, c'est top
Re: (RESOLU)Couleur mode actif
Publié : 04 avr. 2019, 16:19
par winhex
pour l'id je laisse place à l'imagination mais rapidement
peut on cacher l"id "bouton" ? oui
peut on executer avec l'id ? oui
donc reconstruire un mode avec un imput list, un widget personnalisé
sans imagination
si state = lumière
1357 lumière on
sinon 1357 lumière off
tu gardes variable name et id
si tu mets ta recherches de tittle et id dans l'update
chaque changement va recherché
si tu le met avant (vu que ça change pas)
tu n'auras pas à recherche tittle et id
la perte de perf c'est minim et ça ne touche pas jeedom (le navigateur qui travaille)
prend ton dashboard comme un page d'un livre F12
dans cette page cherche les caractères gras, souligné, nos navigateurs actuel en font bien plus.
Re: (RESOLU)Couleur mode actif
Publié : 04 avr. 2019, 16:40
par Naboleo
Ok, je vois bien le truc . Je garde l'idée et le code sous le coude
Dans le même genre d'idée, j'ai eu envie de faire un toggle avec un de mes modes (2 états + retour)...Si on n'affiche que le retour c'est un toggle
J'ai donc fait ça
Code : Tout sélectionner
<script>
jeedom.cmd.update['#id#'] = function(_options){
var val = _options.display_value;
var modepre='Retour mode précedent';
var modes = $('.cmd[data-cmd_id=#id#]').closest('.eqLogic-widget').find('a.btn.btn-sm.btn-default.action.cmdName').map(function(_,el){return $(el).attr('title')}).get();
alert('mode '+modes);
modes.forEach(function(mode) {
var item=$('.cmd[data-cmd_id=#id#]').closest('.eqLogic-widget').find(' <script>
jeedom.cmd.update['#id#'] = function(_options){
var val = _options.display_value;
var modepre='Retour mode précedent';
var modes = $('.cmd[data-cmd_id=#id#]').closest('.eqLogic-widget').find('a.btn.btn-sm.btn-default.action.cmdName').map(function(_,el){return $(el).attr('title')}).get();
alert('mode '+modes);
modes.forEach(function(mode) {
var item=$('.cmd[data-cmd_id=#id#]').closest('.eqLogic-widget').find('a.btn.btn-sm.btn-default.action.cmdName[title='+mode+']');
if(mode != modepre){
alert(mode+' != '+modepre);
item.hide();
}else{
alert(mode+' == '+modepre);
item.empty().html('<span><img src="plugins/widget/core/images/'+val+'.png" width=#width# height=#height#></span>');
item.css('background-color', '#activecolor#');
}
});
};
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>[title='+mode+']');
if(mode != modepre){
alert(mode+' != '+modepre);
item.hide();
}else{
alert(mode+' == '+modepre);
item.empty().html('<span><img src="plugins/widget/core/images/'+val+'.png" width=#width# height=#height#></span>');
item.css('background-color', '#activecolor#');
}
});
};
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
Dans la première popup j'ai bien mes 3 'tiltle' (ECSON,ECSOFF,Retour mode précedent)...
Dans la boucle fois, je vois passer ECSON et ECSOFF... Mais pas le retour, j'en conclue donc que le map()/find() ne s'applique pas de la même manière à celui-ci (d'ailleurs il est masqué dans le mode 4 saisons)....
Mais je ne vois pas trop la différence, il semble être du type "a.btn.btn-sm.btn-default.action.cmdName" contient bien un "title" avec le bon texte... Avec des espaces par contre
Une idée ?
Re: (RESOLU)Couleur mode actif
Publié : 06 avr. 2019, 13:12
par Naboleo
Bon ben c'était bien les espaces qui perturbaient le script...
Voilà le code d'un toggle fonctionnel (variables width, height et activecolor à définir)
Code : Tout sélectionner
<div style="min-width:90px;min-height:60px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
<center>
<div style="font-weight: bold;font-size : 12px;#hideCmdName#">#name_display#</div>
<span style="font-size: 2em;font-weight: bold;margin-top: 5px;" class="state"></span><br/>
<span style="color: #666666;font-weight: bold;">#unite#</span>
</center>
<script>
jeedom.cmd.update['#id#'] = function(_options){
var val = _options.display_value;
var modepre='Retour mode précedent';
var modes = $('.cmd[data-cmd_id=#id#]').closest('.eqLogic-widget').find('a.btn.btn-sm.btn-default.action.cmdName').map(function(_,el){return "'"+$(el).attr('title')+"'"}).get();
modes.forEach(function(mode) {
var item=$('.cmd[data-cmd_id=#id#]').closest('.eqLogic-widget').find('a.btn.btn-sm.btn-default.action.cmdName[title='+mode+']');
if(mode != "'"+modepre+"'"){
item.hide();
}else{
item.empty().html('<span><img src="plugins/widget/core/images/'+val+'.png" width=#width# height=#height#></span>');
item.css('background-color', '#activecolor#');
}
});
};
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>
Re: Couleur mode actif
Publié : 06 avr. 2019, 16:51
par guims78
winhex a écrit : ↑28 févr. 2019, 18:35
tu vas dans la configuration avancé
bouton du haut
paramètre de [mode]
icône de droite
onglet code
activé la personnalisation et
coller le code
Screenshot_20190228-183242_Chrome.jpg
Screenshot_20190228-183308_Chrome.jpg
Hello, j'ai testé sur mon jeedom 3.3 tout frais, mais lorsque j'applique le code sur les paramètres de [mode], celui-ci ne s'affiche pas du tout.
Re: Couleur mode actif
Publié : 06 avr. 2019, 18:01
par Naboleo
guims78 a écrit : ↑06 avr. 2019, 16:51
Hello, j'ai testé sur mon jeedom 3.3 tout frais, mais lorsque j'applique le code sur les paramètres de [mode], celui-ci ne s'affiche pas du tout.
C'est voulu =>
Tu peux changer en mettant cette ligne en commentaire
Re: (RESOLU)Couleur mode actif
Publié : 06 avr. 2019, 18:57
par winhex
@Naboleo
chapeau l'artiste
Re: (RESOLU)Couleur mode actif
Publié : 06 avr. 2019, 20:59
par Naboleo
@winhex, merci mais c'est toi qui a fait 99,9% du boulot
Re: Couleur mode actif
Publié : 06 avr. 2019, 22:13
par guims78
Naboleo a écrit : ↑06 avr. 2019, 18:01
guims78 a écrit : ↑06 avr. 2019, 16:51
Hello, j'ai testé sur mon jeedom 3.3 tout frais, mais lorsque j'applique le code sur les paramètres de [mode], celui-ci ne s'affiche pas du tout.
C'est voulu =>
Tu peux changer en mettant cette ligne en commentaire
Merci, mais en fait, je me suis mal exprimé.
En fait, la tuile qui est censée être active ne change pas de couleur.
Re: (RESOLU)Couleur mode actif
Publié : 27 mai 2019, 11:21
par Naboleo
Dommage ça ne marche plus avec la version jeedom 4.x ....