Logo - icone dans un tableau

mich0111 · Janvier 1, 2020, 11:45

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

Salvialf · Janvier 1, 2020, 12:25

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.

bartounet · Janvier 1, 2020, 12:54

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

Salvialf · Janvier 1, 2020, 12:58

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

bartounet · Janvier 1, 2020, 1:00

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

je te dirais si je galère

ajja17orange · Janvier 1, 2020, 1:04

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

bartounet · Janvier 1, 2020, 1:41

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

lafouine350 · Janvier 1, 2020, 1:45

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

bartounet · Janvier 1, 2020, 1:46

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

mich0111 · Janvier 1, 2020, 1:46

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

bartounet · Janvier 1, 2020, 1:48

J’ai vu merci
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

lafouine350 · Janvier 1, 2020, 1:53

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

Salvialf · Janvier 1, 2020, 2:46

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

bartounet · Janvier 1, 2020, 2:58

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

Salvialf · Janvier 1, 2020, 2:59

Sinon partages le code généré par l’outil et je vois pour le modifier direct

bartounet · Janvier 1, 2020, 3:20

<div style="min-width:120px; min-height:80px;" 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-weight: bold;font-size : 12px;#hideCmdName#">#name_display#</div>
		<span style="font-size: 2.5em;" class="iconCmd"></span>
		<div style="display:inline-block;">
			<span style="font-weight: bold;" class="pull-right">#unite#</span>
			<span style="font-size: 2em;font-weight: bold;" class="pull-right state"></span>
		</div>
		<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>
<!-- Ne Pas Supprimer -->
	<script class="createWidgetInfo" type="text/javascript">//<![CDATA[{"type":"0","version":"1","min":["0","101","103"],"max":["100","102","104"],"icons":["<i class=\"icon jeedomapp-dirB\"></i>","<i class=\"icon jeedomapp-dirD\"></i>","<i class=\"icon jeedomapp-dirH\"></i>"]}]]></script>
<!-- Ne Pas Supprimer -->
	<script>
	var iconUpdate#uid# = function (state){
		$('.cmd[data-cmd_uid=#uid#] .iconCmd').empty();
		if (state < 0 ) {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').append('<i class="icon jeedomapp-dirB"></i>');
		}
		if (state = 0) {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').append('<i class="icon jeedomapp-dirD"></i>');
		}
		if (state > 0) {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').append('<i class="icon jeedomapp-dirH"></i>');
		}
		$('.cmd[data-cmd_uid=#uid#] .state').text(state);
	};
	jeedom.cmd.update['#id#'] = function(_options){
		$('.cmd[data-cmd_uid=#uid#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
		iconUpdate#uid#(_options.display_value);
	}
	jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>
</div>

J’ai essayer de le modifier moi meme car il accepte pas les Valeur que je lui met dans l’assistant…
Mais avec mes modifs ca affiche un 0
au lieu du logo fleche

bartounet · Janvier 1, 2020, 8:51

ha zut Salviaf n’est plus là

Salvialf · Janvier 1, 2020, 9:23

J’ai pas accès à un pc mais tout est dit au dessus:

Je Veux bien regarder demain mais j’avais déjà prévu de partir sur ce modèle avec icône fa. Si le code est partagé sur le site de @benj29 autant le prendre directement non?

bartounet · Janvier 2, 2020, 8:36

Bah en générant via l’outil cela devrait marcher… et pourtant non.
Si tu as 2 minutes, pour ma culture personnelle j’aimerai comprendre ce qui ne va pas dans mon code.

Salvialf · Janvier 2, 2020, 10:15

Peut-être juste dû au manque du double ==:

<div style="min-width:120px; min-height:80px;" 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-weight: bold;font-size : 12px;#hideCmdName#">#name_display#</div>
		<span style="font-size: 2.5em;" class="iconCmd"></span>
		<div style="display:inline-block;">
			<span style="font-weight: bold;" class="pull-right">#unite#</span>
			<span style="font-size: 2em;font-weight: bold;" class="pull-right state"></span>
		</div>
		<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>
<!-- Ne Pas Supprimer -->
	<script class="createWidgetInfo" type="text/javascript">//<![CDATA[{"type":"0","version":"1","min":["0","1001"],"max":["1000","1002"],"icons":["<i class=\"fas fa-chevron-up\"></i>","<i class=\"fas fa-chevron-down\"></i>"]}]]></script>
<!-- Ne Pas Supprimer -->
	<script>
	var iconUpdate#uid# = function (state){
		$('.cmd[data-cmd_uid=#uid#] .iconCmd').empty();
		if (state > 0 ) {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').append('<i class="fas fa-chevron-up" style="color:red;"></i>');
		}
		if (state < 0 ) {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').append('<i class="fas fa-chevron-down" style="color:green;"></i>');
		}
      if (state == 0 ) {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').append('<i class="fas fa-minus"></i>');
		}
		$('.cmd[data-cmd_uid=#uid#] .state').text(state);
	};
	jeedom.cmd.update['#id#'] = function(_options){
		$('.cmd[data-cmd_uid=#uid#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
		iconUpdate#uid#(_options.display_value);
	}
	jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>
</div>