Logo - icone dans un tableau

bonjour.

J’ai crée un tableau avec un virtuel grâce à la disposition tableau.

J’aimerai comparer 2 valeurs , et montrer une flèche descendante ou montante si la valeur est plus petite ou plus grande que la dernière.

Je sais comparer des valeurs, mais je n’ai aucune idée de comment insérer une image dans le tableau

Bonsoir,
Tu dois mettre une balise IMG, du style
img src=« image.png »

Par exemple, avec les balises signes < et /> autour que je n’arrive pas à écrire dans le post

Bonjour,

Plutôt qu’une image je mettrais une icône (déjà dispo dans jeedom):

  • <i class="fas fa-arrow-up"></i>
  • <i class="fas fa-arrow-down"></i>

Donc en JS, tu compares tes valeurs (un if) et tu insères l’icône correspondante (en ayant retiré l’autre avant)
Pour cela je ne sais pas comment est construit ton tableau mais si tu as un span avec un id:
<span id="myspan"></span>

tu peux écrire un truc du genre:
$('#myspan').empty().append('<i class="fas fa-arrow-up"></i>');

qui donnera:
<span id="myspan"><i class="fas fa-arrow-up"></i></span>

Je n’ai aucune notion en développement
Les tableau dont juste ceux inclus dans L’option disposition de jeedom

Dans les propriétés dont tu parles on ne peut mettre que des propriétés CSS.
Je ne pense pas qu’on puisse y mettre du code HTML.
Enfin, c’est ce qu’il me semble.

J’aimerai un peu faire comme ici

https://jeedom-facile.fr/index.php/2019/01/18/astuces-pour-un-design-reussi-dans-jeedom/

Il utilise les tableau x pourtant

Je ne vois pas comment ça pourrait se faire sans coder.
Il est bien spécifié dans le libellé de la disposition de la configuration avancée que les propriétés doivent être du CSS.
Maintenant, ça peut peut-être se faire quand même ici mais je ne vois pas comment.
Bonne chance

Salut @bartounet,

As-tu essayé de créer une commande tendance() dans un premier temps ? (Voir doc des scénarios)
Cette commande devrait te donner la tendance à la hausse ou à la baisse ensuite il suffit de lui faire un petit widget qui va bien et de l’inclure dans une colonne du tableau…

Et si ce n’est pas la tendance que tu veux mais bien la ratio entre les valeurs de 2 commandes, tu peux créer une commande qui fait le calcul + un widget pour visualiser.

Salut.
J’ai regardé tendance, mais ca correspond pas forcément.
au final je vais essayer de faire un widget qui met une flèche vers le haut si la valeur est positive et et vers le bas si la valeur est négative…
Mais même ca je sais pas faire… je vais essayer avec un scénario sur ma valeur évolution.
si valeur >0 alors binaire =1

Nickel la commande « évolution » ! T’es en V3 ou V4 au fait? Parce que tu peux t’aider des assistants pour le widget… tu veux le même visuel que @benj29 ?

Si besoin je te prépares un widget qui va bien selon ta version de jeedom en fonction de ce que tu souhaites comme visuel

Je suis encore en V3
Je vais essayer avec des icônes et l’assistant widget.

je te dirais si je galère

bonjour
c’est effectivement dans le widget (de memoire on avait vu ça ensemble)

si valeur > alors icon (ou autres : affiche/caché, couleurs dif ,…)

exemple couleur en v3
fond vert si > 0
fond ocre

<div style="display: block;min-width:90px;min-height:60px;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#" data-cmd_uid="#uid#" data-version="#version#">
<center>
  <div class="title #hide_name#">
    <div style="line-height:25px!important;" class="cmdName">#name_display#</div>
  </div>

                <div class="circle#id#">           
      <span class="state"></span>
<span class="">#unite#</span>
     </div>
    </center>
  <style>
  .circle#id# {
  font-family: 'Roboto-regular';
  width:75px;
  height:75px;
  border-radius:60px;
      font-size:25px!important;
        text-align:center!important;
    --link-color : white;
}
.circle#id# .state {
  font-size:30px!important;
  font-weight: bold!important;
  line-height:75px!important;
    text-align:center!important;
    }
</style>

  <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').empty().append(_options.display_value);   
  
    $(".circle#id#").css('background', '#989A8F'); // 152716
    $(".circle#id#").css('color', '#fff'); // 57A840
  
  if (_options.display_value > 0 ) {
$(".circle#id#").css('background', '#BC9B94');   // pink
    $(".circle#id#").css('color', '#fff');
  }
  
        }
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
    
    </script>
</div>

la source de ton tableau proviens de @benj29 regarde son site il y a le code

@Mips te donne l’icône « fas … » pour adapter en v4

J’ai réussi a faire ca avec les simple création facile.

Par contre ca m’agrandi toutes mes cases…

Par contre je voulais utiliser le widget numeric.pour pouvoir faire une fleche horizontale quand la valuer est 0
Mais impossible de mettre une borne de 0 à 0 !!

Bonjour ,
c’est petits morceau de programme qui donne des super tableaux , vous les mettez ou dans la version V4 de jeedom ?

J’espere que ce que je fais sera compatible V4.
il n’y aucune code dans mon tableau, que les outils du core et le plugin widget en création facile

1 « J'aime »

Pour la taille des lignes, tu peux mettre la propriété height: nnpx à chacune des lignes (nn égal nbre de pixels)

J’ai vu merci :slight_smile:
Ca me plait mieux

il me reste qu’a reussi le widget à 3 valeur pour faire une fleche horizontale.
Mais pour l’instant je n’y arrive pas avec le mode de création facile

Ok je vais commencer comme toi alors par la façon facile :wink:

Tu dois pouvoir faire un visuel si < 0, si > 0 et si == 0 pour les 3 icônes.

Je ne vois pas comment avec le mode de création facile et les widgets numériques
Il demande des bornes et on ne peut pas faire de borne égale