Avant toute chose merci de (re)prendre connaissance de la charte et de la respecter.
Pour résumer :
- Avant de poser une question, je cherche si la réponse existe
- Je suis poli, courtois et je respecte tout un chacun sur le forum
- Si un post m'agace : je m'en éloigne plutôt que de répondre d'une façon qui pourrait être mal interprétée


Il n'est jamais du luxe que de rappeler des choses simples :
Courtoisie, amabilité, politesse et bonne humeur sont les maîtres mots pour un forum sympathique, bienveillant et accueillant :)

Toute la communauté vous remercie

2 icones pour 1 widget

Réservé à l'utilisation et la création de widgets dans JEEDOM
Répondre
frankie666
Timide
Messages : 198
Inscription : 12 janv. 2016, 12:15
Localisation : Suisse

2 icones pour 1 widget

Message par frankie666 » 19 févr. 2018, 07:48

Bonjour, j'aimerais avoir un widget qui m'affiche 2 icones en fonction de l'état de la commande associée.
Voici mon widget bricolé

Code : Tout sélectionner

<div class="cmd #history# tooltips cmd-widget cursor" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#">
    <span style="margin: 5px;" id="iconCmd#id#"></span>
    <script>
        var iconName = "#type#";
	    var iconPath = "montheme/icons/" + iconName;
	    $('.iconCmd#uid#').empty();
        if ('#state#' == '0' || '#state#' == 0) {
          	iconPath = iconPath + "_on.png";
        } else {
          	iconPath = iconPath + "_off.png";
        }
        $('#iconCmd#id#').append('<img src="' + iconPath + '"/>');
    </script>
</div>
Pour l'instant il m'affiche bien mon icone xxxx_on si #state# = 0 et xxxx_off si #state# > 0. Mais j'aimerais afficher un 2eme icone en fonction de mon #state# ? Comment faire pour l'afficher ? Je suppose que ce soit lié avec id="iconCmd#id#"mais mes connaissance en prog sont limitées...
Merci d'avance.
Jeedom 3.2.7 / PHP 7.0.27-0+deb9u1 sous Raspbian / Linux Jeedom 4.14.39-v7+ #1112 SMP Sat May 5 12:01:33 BST 2018 armv7l GNU/Linux [9.4]

winhex
Actif
Messages : 2879
Inscription : 23 janv. 2015, 01:41

Re: 2 icones pour 1 widget

Message par winhex » 20 févr. 2018, 01:00

revoit ton code script
là tu utilises la vieille methode :

mais avant comparons l'ancienne et la nouvelle methode sur un default binaire
en 2.4.6 que j'ai encore

Code : Tout sélectionner

<div style="width:90px;min-height:62px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="binary" data-cmd_id="#id#" data-cmd_uid="#uid#" title="Valeur du #valueDate#, collectée le #collectDate#">
    <center>
        <div style="font-weight: bold;font-size : 12px;#hideCmdName#">#name_display#</div>
        <span style="font-size: 3.5em;font-weight: bold;margin-top: 5px;" class="iconCmd#uid#"></span>
    </center>
    <script>
        if ('#state#' == '1' || '#state#' == 1) {
            $('.iconCmd#uid#').addClass('fa fa-check');
        }
        if ('#state#' == '0' || '#state#' == 0) {
            $('.iconCmd#uid#').addClass('fa fa-times');
        }
    </script>
</div>
en 3.1.7 "maintenant"

Code : Tout sélectionner

<div style="width:90px;min-height:62px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="binary" 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: 2.5em;font-weight: bold;position:relative;top:-6px" class="iconCmd"></span>
  </center>
  <script>
    jeedom.cmd.update['#id#'] =function(_options){
      $('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
      if (_options.display_value == '1') {
       $('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<i class="fa fa-check"></i>');
     }else {
      $('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<i class="fa fa-times"></i>');
    }
  }
  jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>
si il y a eu complication, évolution c'est pas pour rien
voila se que j'en ai compris

le script comporte 2 parties (tous se qui précéde la derniére ligne) :
- pour l'affichage lorsque tu te rendras sur la page

est la derniére ligne via update
si tu laisses ton écran s'éteindre et si tu changes de state
lorsque tu ralumeras l'écran ça va se mettre à jour progressivement
ou 2 pages identiques ouverte si tu changes le state sur une page l'autre page s'actualisera

donc beaucoup de code sur le market ne sont pas à jour !
une fois que ton code marche avec l'ancienne methode essai de pousser jusqu'à la nouvelle methode
afin de partir sur de bonne base.

maitenant ta question tu as 2 possibilités que je connais il en existe peut être d'autres
la 1er
tu ajjoutes une ligne span avec la class "pipo" avec ton image exemple simple
https://forum.alsacreations.com/topic-2 ... -span.html
et via css/style tu positionnes à l'endroit souhaites et ensuite dans le script jquery
un hide/show
https://www.w3schools.com/jquery/eff_hide.asp

Code : Tout sélectionner

      if (_options.display_value == '1') {
       $('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<i class="fa fa-check"></i>');
       $('.cmd[data-cmd_id=#id#] .pipo').hide();
     }else {
      $('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<i class="fa fa-times"></i>');
      $('.cmd[data-cmd_id=#id#] .pipo').show();
    }
la 2éme via css display/visibility
https://www.w3schools.com/css/css_displ ... bility.asp

frankie666
Timide
Messages : 198
Inscription : 12 janv. 2016, 12:15
Localisation : Suisse

Re: 2 icones pour 1 widget

Message par frankie666 » 20 févr. 2018, 08:06

Ok, merci winhex, je vais tester cela demain. Par contre je ne comprends pas très bien ton point pour ajouter un 2eme icon sur le widget, tu crees une nouvelle classe "pipo" que tu "show" ou "hide", ok, mais ou est-ce qu'on assigne un icon à cette classe?
Merci encore de ton aide.
Jeedom 3.2.7 / PHP 7.0.27-0+deb9u1 sous Raspbian / Linux Jeedom 4.14.39-v7+ #1112 SMP Sat May 5 12:01:33 BST 2018 armv7l GNU/Linux [9.4]

winhex
Actif
Messages : 2879
Inscription : 23 janv. 2015, 01:41

Re: 2 icones pour 1 widget

Message par winhex » 20 févr. 2018, 09:24

dans l exemple tu l'assignes dans dans html img ou span et css

sinon une autre méthode via script et span identique à iconCmd

que fait ton code
$('.iconCmd#uid#').empty();

il efface avant ajout image
$('#iconCmd#id#').append ....

donc idem avec pipo sans append pour state 0

frankie666
Timide
Messages : 198
Inscription : 12 janv. 2016, 12:15
Localisation : Suisse

Re: 2 icones pour 1 widget

Message par frankie666 » 21 févr. 2018, 20:00

OK, j'ai passé qqs heures hier soir pour améliorer mon widget avec tes conseils. Je suis parti du widget proposé par création facile.
Le résultat est pas mal par contre j'ai 1 problème et 2 questions, voici le visuel de mon widget. Le but est de montrer si des ouvrants et combien sont ouverts par categorie (porte/garage et fenetres/porte-fenetres) :
Capture d’écran 2018-02-21 à 19.38.08.png
Capture d’écran 2018-02-21 à 19.38.08.png (28.99 Kio) Consulté 790 fois
et le code

Code : Tout sélectionner

<div class="cmd tooltips cmd-widget cursor container-fluid" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#">
<center>
  	<div style="font-size: 14px; #hideCmdName#">#name_display#</div><div style="float: right;" class="led-red"></div>
	<span style="padding: 0px 0px 0px 0px;" class="iconCmd#uid#"></span>
    <span style="padding: -20px;" class="iconNb#uid#"></span>
</center>
  
<!-- Ne Pas Supprimer -->
	<script class="createWidgetInfo" type="text/javascript">//<![CDATA[{"type":"0","version":"1","min":["0","2","101"],"max":["1","100","102"],"icons":["<i class=\"icon jeedom-fenetre-ferme\"></i>","<i class=\"icon jeedom-fenetre-ouverte\"></i>","<i class=\"icon divers-slightly\"></i>"]}]]></script>
<!-- Ne Pas Supprimer -->
  
<script>
	var iconUpdate = function (state){
        var iconName = "#type#";
	var iconPath = "montheme/icons/" + iconName;
      	var icon2Path = "montheme/icons/ouverte_" + state + ".png";
		if (state == 0) {
			//$('.cmd[data-cmd_uid=#uid#] .iconCmd').append('<i class="icon jeedom-fenetre-ferme"></i>');
          	iconPath = iconPath + "_0.png"
		}
		if (state > 0) {
			//$('.cmd[data-cmd_uid=#uid#] .iconCmd').append('<i class="icon jeedom-fenetre-ouverte"></i>');
          	iconPath = iconPath + "_1.png"
		}
      	$('.cmd[data-cmd_uid=#uid#] .iconCmd#uid#').empty().append('<img src="'+iconPath+'"/>');
        $('.cmd[data-cmd_uid=#uid#] .iconNb#uid#').empty().append('<img src="'+icon2Path+'"/>');
        // $('.cmd[data-cmd_uid=#uid#] .iconNb').hide();
	};
	jeedom.cmd.update['#id#'] = function(_options){
		$('.cmd[data-cmd_uid=#uid#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
		iconUpdate(_options.display_value);
	}
	jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>
1. J'aimerais supprimer l'espace vertical entre les 2 images (entre l'image de la porte/fenêtre et le texte fermees/ouverture : 1) mais impossible... Comment faire en css dans le code.
2. A quoi sert le code entre les 2 balises <!-- Ne Pas Supprimer --> ?
3. Le problème c'est que le widget est appliqué sur sur commandes (portes et fenetres) mais que les 2 se mélangent... c'est-à-dire que dans l'exemple ci-dessus, en fait c'est une porte qui est ouverte...
Merci d'avance.
Jeedom 3.2.7 / PHP 7.0.27-0+deb9u1 sous Raspbian / Linux Jeedom 4.14.39-v7+ #1112 SMP Sat May 5 12:01:33 BST 2018 armv7l GNU/Linux [9.4]

frankie666
Timide
Messages : 198
Inscription : 12 janv. 2016, 12:15
Localisation : Suisse

Re: 2 icones pour 1 widget

Message par frankie666 » 23 févr. 2018, 23:36

Je viens de passer ma soirée a essayer de résoudre le problème 3) de mon post précédent, mais impossible toutes les commandes se reportent sur la dernière du virtuel... Que fais-je de faux?
Un grand merci pour votre aide.
Jeedom 3.2.7 / PHP 7.0.27-0+deb9u1 sous Raspbian / Linux Jeedom 4.14.39-v7+ #1112 SMP Sat May 5 12:01:33 BST 2018 armv7l GNU/Linux [9.4]

winhex
Actif
Messages : 2879
Inscription : 23 janv. 2015, 01:41

Re: 2 icones pour 1 widget

Message par winhex » 24 févr. 2018, 19:21

je regardes se soir

winhex
Actif
Messages : 2879
Inscription : 23 janv. 2015, 01:41

Re: 2 icones pour 1 widget

Message par winhex » 25 févr. 2018, 00:37

frankie666.png
frankie666.png (4.94 Kio) Consulté 750 fois
tu copies tu test et tu adaptes

Code : Tout sélectionner

<div style="width:50px;min-height:90px;" class="tooltips cmd cmd-widget #history#" 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  class="iconCmd#id#" style="font-weight: bold;font-size: 30px;margin-top: 5px;"></span>
  <br/>
        <span class="state#id#" style="font-size: 12px;"></span> #unite#</center>

  <script>
jeedom.cmd.update['#id#'] = function(_options){
$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
//
 $('.cmd[data-cmd_id=#id#] .state#id#').empty().append(_options.display_value);

//  $(".state#id#").css('color', '');  
  if (_options.display_value == 0 ) {
$(".state#id#").css('color', '#6699ff'); 
  $(".iconCmd#id#") .empty().append('<i class="fa fa-times"></i>').css('color', '#6699ff');
    
}else if (_options.display_value >= 1 ) { 
  $(".state#id#").css('color', 'red');
   $(".iconCmd#id#") .empty().append('<i class="fa fa-check"></i>').css('color', 'red');
}

}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>
pour ne pas voir 0 tu remplaces la ligne
$(".state#id#").css('color', '#6699ff');
par
$(".state#id#").hide();

et
$(".state#id#").css('color', 'red');
par
$(".state#id#").show().css('color', 'red');

....

frankie666
Timide
Messages : 198
Inscription : 12 janv. 2016, 12:15
Localisation : Suisse

Re: 2 icones pour 1 widget

Message par frankie666 » 26 févr. 2018, 11:27

Un grand merci winhex pour ton aide precieuse, ca marche nickel.
thanks!
Jeedom 3.2.7 / PHP 7.0.27-0+deb9u1 sous Raspbian / Linux Jeedom 4.14.39-v7+ #1112 SMP Sat May 5 12:01:33 BST 2018 armv7l GNU/Linux [9.4]

winhex
Actif
Messages : 2879
Inscription : 23 janv. 2015, 01:41

Re: 2 icones pour 1 widget

Message par winhex » 19 mars 2018, 16:50

je m'en suis servi hier pour faire ça
résumé global en tableau
Pièces jointes
Screenshot_20180319-174702.png
Screenshot_20180319-174702.png (73.36 Kio) Consulté 629 fois

frankie666
Timide
Messages : 198
Inscription : 12 janv. 2016, 12:15
Localisation : Suisse

Re: 2 icones pour 1 widget

Message par frankie666 » 19 mars 2018, 21:43

C'est un virtuel en tableau sur lequel tu as mis 5x ton widget, c'est bien cela ?
Jeedom 3.2.7 / PHP 7.0.27-0+deb9u1 sous Raspbian / Linux Jeedom 4.14.39-v7+ #1112 SMP Sat May 5 12:01:33 BST 2018 armv7l GNU/Linux [9.4]

winhex
Actif
Messages : 2879
Inscription : 23 janv. 2015, 01:41

Re: 2 icones pour 1 widget

Message par winhex » 19 mars 2018, 22:54

oui et non
d'abord le résumé
http://sarakha63-domotique.fr/resume-domotique-jeedom/
ensuite dans configuration / résumé
tu clic sur création de widget pour chaque truc que tu veux
tous va se mettre dans un virtuel #[aucun][résumé global]

ensuite j'ai tous mis dans un tableau
et dans les equipements j'ai modifié chaque personnalisation avancé (design)
j'ai desactivé le nom "ajjouté dans tableau et joué de la taille police"
ex pour lampes j'ai mis ça (margin left pour s'écarter de l'icone)

Code : Tout sélectionner

<div class="cmd #history# container-fluid tooltips cmd cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">

   <span class="iconCmd#id#" style="font-size: 30px;"></span>
     <span class="state#id#" style="font-size: 15px;vertical-align: top;margin-left: 5px"></span> #unite#
<span style="text-align: left;font-weight: bold;font-size : 10px;#hideCmdName#">#name_display#</span>
  <script>
jeedom.cmd.update['#id#'] = function(_options){
$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
//
// $('.cmd[data-cmd_id=#id#] .state#id#').empty().append(_options.display_value);
 $('.cmd[data-cmd_id=#id#] .state#id#').empty().append(_options.display_value);

//  $(".state#id#").css('color', ''); 
  if (_options.display_value == 0 ) {
$(".state#id#").css('color', '#e6e6e6'); 
  $(".iconCmd#id#") .empty().append('<i class="fa jeedom2-bulb14" style="color:#e6e6e6;"</i>');  

}else if (_options.display_value >= 1 ) { 
  $(".state#id#").css('color', '#FFC107');
   $(".iconCmd#id#") .empty().append('<i class="fa jeedom2-lightbulb58" style="color:#FFC107;"</i>');  
;
}
  //

}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>

frankie666
Timide
Messages : 198
Inscription : 12 janv. 2016, 12:15
Localisation : Suisse

Re: 2 icones pour 1 widget

Message par frankie666 » 20 mars 2018, 06:36

ok c'est je que je pensais... j'ai fait a peu un resume domo qui resemble a ta solution mais base sur le plugin "groupe" qui repond mieux a mes besoins. je posterai une image ce soir...

comme tu sembles un king des widget, j'ai tjrs une question son reponse a ce sujet viewtopic.php?f=29&t=34742
aurais-ru une idee? merci d'avance.
Jeedom 3.2.7 / PHP 7.0.27-0+deb9u1 sous Raspbian / Linux Jeedom 4.14.39-v7+ #1112 SMP Sat May 5 12:01:33 BST 2018 armv7l GNU/Linux [9.4]

frankie666
Timide
Messages : 198
Inscription : 12 janv. 2016, 12:15
Localisation : Suisse

Re: 2 icones pour 1 widget

Message par frankie666 » 20 mars 2018, 19:29

Voila, le controle des ouvrants est basé sur le plugin "groupe".

Home.png
Home.png (543.63 Kio) Consulté 591 fois
Jeedom 3.2.7 / PHP 7.0.27-0+deb9u1 sous Raspbian / Linux Jeedom 4.14.39-v7+ #1112 SMP Sat May 5 12:01:33 BST 2018 armv7l GNU/Linux [9.4]

beber49
Timide
Messages : 149
Inscription : 26 janv. 2017, 20:11

Re: 2 icones pour 1 widget

Message par beber49 » 10 avr. 2018, 12:45

Salut @frankie666,

Je trouve ton dashboard très réussi, je galère pour en créer un de sympa.

Ou as-tu eu ces encadrement, icônes, etc, etc stp ?

Merci par avance pour ta réponse ;-)

romainh41
Timide
Messages : 370
Inscription : 22 mars 2016, 10:21

Re: 2 icones pour 1 widget

Message par romainh41 » 15 mai 2018, 16:51

Slt à tous,

idem, super design @frankie666.

Envisages-tu de partager tes sources ?
Jeedom sur RPI 2 RAM 1Go - Clé GEN 5

Répondre

Revenir vers « [Plugin officiel] Widgets »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 1 invité