Chemin image dans widget Code

Tags: #<Tag:0x00007fbda26600f0>

Bonjour

Je cherche à importer un widget de la v3. J’ai donc crée un widget code dans lequel j’ai copié le contenu du widget v3. ça fonctionne.
Mais, dans ce widget, je veux afficher une image. Je l’ai copié, elle est donc dans /var/www/html/data/img. Je veux donc y faire appel depuis mon widget (qui est dans /var/www/html/data/customTemplates/dashboard), mais rien à faire. L’image ne s’affiche pas.

Dans mon code, j’ai mis ceci:

<img src="../../img/we-on_40x40.png"/>

Le 1er double point doit me faire remonter à /var/www/html/data/customTemplates, puis le second un étage plus haut, donc /var/www/html/data. Une fois ici, c’est dans le dossier img. Je m’y prends mal?
(j’ai testé aussi avec le chemin complet, mais ça ne fonctionne pas).

Merci

Ancien répertoire plugins/widget/core/template/dashboard
Nouveau data/customTemplates/dashboard

Et il faut ajouter le nom du widget

Désolé, mais j’ai pas compris :grimacing:

Les images d’un widget sont normalement stockées dans le répertoire du widget

Mais le répertoire de stockage des widgets en V4 entre ceux du plugin widget et ceux de l’outil intégré widget a changé

Oui je suis d’accord là-dessus. Mais cette image existe dans le nouveau répertoire, mais mon widget custon ne l’affiche pas (alors qu’elle s’affiche bien en créant un widget core). Je dois faire une erreur dans le chemin (que j’ai modifié par rapport à la v3 pour pointer sur le nouveau répertoire bien sur)

Salut,

Le chemin que tu dois écrire c’est: data/img/image.png

La racine étant le dossier html pour jeedom

Merci, c’est bien ça. Sauf que ça fonctionne un coup sur cinq (des fois il n’affiche plus rien), mais je pense que c’est dû à autre chose.

Hésites pas à poster le code complet du widget si tu veux que j’y jette un œil…

Oh tu es bien urbain mon ami :slight_smile:
Voici donc:

<div  style="min-width:90px;min-height:25px;margin-right: 5px;margin-left: 5px;padding:0px !important;" class="cmd  #history#   container-fluid tooltips cmd  cmd-widget" data-type="info" data-subtype="numeric"  data-cmd_id="#id#" title="Valeur du #valueDate#, collectée le #collectDate#">
    <center>
      <span ><img src="data/img/aller.png"/><span class="label label-success latency" >#state#</span> #unite#</span> 
       <div style="#displayHistory# font-size: 0.8em;" 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>
    </center>   
    <script>
  // $('sgjee_tile').removeClass('label-success').addClass('label-danger');
     if(parseFloat('#state#') > parseFloat('#sgjee_danger#') ) {
      $('.cmd[data-cmd_id=#id#] .latency').removeClass('label-success').addClass('label-danger');
     } else if (parseFloat('#state#') > parseFloat('#sgjee_warning#') ) {
          $('.cmd[data-cmd_id=#id#] .latency').removeClass('label-success').addClass('label-warning');
   
     } 
  </script>   
</div>

Tu peux tester ce code mais sans conviction:

<div  style="min-width:90px;min-height:25px;margin-right: 5px;margin-left: 5px;padding:0px !important;" class="cmd #history# container-fluid tooltips cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
    <div ><img src="data/img/aller.png"/><span class="state label label-success latency"></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)
  // $('sgjee_tile').removeClass('label-success').addClass('label-danger');
     if(parseFloat(_options.display_value) > parseFloat('#sgjee_danger#') ) {
      $('.cmd[data-cmd_id=#id#] .latency').removeClass('label-success').addClass('label-danger');
     } else if (parseFloat(_options.display_value) > parseFloat('#sgjee_warning#') ) {
          $('.cmd[data-cmd_id=#id#] .latency').removeClass('label-success').addClass('label-warning');
     }
	 $('.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>   
</div>

Je l’ai juste réécris mais pas du tout testé donc peu de chances que ça fonctionne direct comme tu le veux mais pour aller plus loin il faut m’en dire un peu plus… Il te sert à quoi ce widget ? Tu attends quoi comme valeur ? A quoi correspondent #sgjee_danger# et #sgjee_warning# ?

Sans conviction, disais-tu, mais ça marche apparemment :slight_smile:

Ce widget me sert pour Waze. L’image en question, c’est une voiture (soit vers la droite, soit vers la gauche, selon l’aller ou le retour).
Les sgjee_danger et sgjee_warning sont des seuils qui permettent le changement de couleur de la durée selon le temps, tout simplement.

Maintenant, si tu as la solution avec un widget core, je suis preneur :slight_smile:

waze

Wouah je m’épate moi-même !!! :sunglasses::partying_face:

Bah ça a l’air de bien fonctionner comme ça pourquoi se prendre la tête ?! Allez au pire je vois dans la semaine pour te préparer un petit template perso ça me permettra de me faire la main.

Par contre tu n’utilises pas du tout les historiques avec ce widget ? Parce que j’ai ajouté le code correspondant qui était à moitié présent à la base.
Donc si pas besoin des historiques, tu peux supprimer toute cette partie du code de ton widget:

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

Oui effectivement, si ça fonctionne comme ça, je vais le laisser :slight_smile:

Pour l’historique, je vais effectivement supprimer car je n’historise pas du tout ces données.

En tout cas, merci à toi grand gourou du code :slight_smile:
Je pense que je vais encore faire appel à toi bientot (si tu permets)

Du coup, j’abuse un peu :slight_smile:

Voici ce que ça donne:

w2

Je voudrais modifier la taille des carrés de couleur pour qu’ils soient un peu moins larges et moins hauts, mais je ne trouve pas le paramètre à modifier.
J’ai essayé de jouer avec les paramètres min-width et min-height, mais ça ne change rien…
Tu as une idée?

style="min-width:50px;min-height:20px;margin-right: 1px;margin-left: 1px;padding:5px !important;"

Bonjour

Une idée pour mes carrés de couleurs?
Car là, je séche :slight_smile:

Salut,

Essayes en enlevant label sur la 2ème ligne:

<div ><img src="data/img/aller.png"/><span class="state label label-success latency"></span></div>

ce qui donne:

    <div ><img src="data/img/aller.png"/><span class="state label-success latency"></span></div>

Salut

Encore une fois, ça marche :slight_smile:
Mais… Le carré de couleur est donc maintenant autour du texte, comment faire pour y mettre une petite marge, pour qu’il soit un peu plus grand que le texte? C’est possible?
(encore une fois, j’ai essayé, mais je ne trouve pas le paramètre à modifier)

Bonjour

J’ai un autre widget où j’ai le même problème. La taille du carré de couleur semble lié à la taille de la police. Comment faire pour que ces carrés soient un peu plus grands?

Alors, en image. Pour le moment, j’ai ça (je donne l’exemple sur les deux widgets):

wazev3

camv3

Et en V4, j’ai ceci:

wavev4

camv4

Je pense que c’est plus parlant. Question subsidaire: sur le widget ETAT-CAM, comment faire pour que le texte soit aligné avec les carré C M A? A toute fin utile, voici le code de ce widget:

<div style="width:130px;min-height:20px;vertical-align:middle;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="string" data-cmd_id="#id#" title="#collectDate#">    
   <div style="display:inline-block;vertical-align:middle;float:left;">
 <span class='cmdName' style="font-weight: bold;font-size : 10px;line-height: 24px;float : left;position:absolute;left: 2px;">#name_display#: </span>
  </div>
   <div style="display:inline-block;vertical-align:middle;float: left;position:absolute;left: 60px;">                                                                                 
   		<span class="label-default" style="font-size: 0.8em;color: white;" id="cam1#id#">C</span>
   		<span class="label-default" style="font-size: 0.8em;color: white;" id="cam2#id#">M</span>
     	<span class="label-default" style="font-size: 0.8em;color: white;" id="cam3#id#">A</span></div>
   <script>
      jeedom.cmd.update['#id#']=function(_options) {
/* Regexp originale: 
      const exp = /^C:(\w+)\n?\r?.?M:(\w+)\n?\r?.?A:(\w+)\n?\r?.?$/;
A utiliser si remplacement \n par caractère _:
      const exp = /^C:(\w+)_?.?M:(\w+)_?.?A:(\w+)_?.?$/;
A utiliser si remplacement caractère par espace:
      const exp = /^C:(\w+)\r?\n?\s{1,}M:(\w+)\r?\n?\s{1,}A:(\w+)\r?\n?\s*$/;
*/
        /* Regexp pour utilisation de l'espace */
      const exp = /^C:(\w+)\r?\n?\s{1,}M:(\w+)\r?\n?\s{1,}A:(\w+)\r?\n?\s*$/;
      var str = _options.display_value;
      const camId=['cam1#id#','cam2#id#','cam3#id#'];
      let m;
       
      if ((m = exp.exec(str)) !== null) {
          m.forEach((match, groupIndex) => {

         $('#'+camId[groupIndex-1]+'span.label').removeClass('label-success').addClass('label-default'); 
         $('#'+camId[groupIndex-1]).css('background-color', '#3a3f44'); 
         if (/^ARMED/.test(match) == true) {
                $('#'+camId[groupIndex-1]+'span.label').removeClass('label-default').addClass('label-success');
                $('#'+camId[groupIndex-1]).css('background-color', 'rgba(255,0,0,1)!important'); 
            }
          });
      }
     }
      jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'none'});
  </script>
</div>


Merci d'avance

Salut @drs,

J’essaye de regarder à tout ça ce soir :vulcan_salute:

Un ptit up du week end pour pas que tu m’oublies :wink: