Bonjour à tous
je suis en 4.2.14
j’aimerais pouvoir afficher des info texte avec le widget TILE mais pouvoir faire varier la couleur en fonction de paramètre ou suivant la valeur
idem pour type et hauteur de la police
exemple ci dessous le texte en bas de la tuile doit etre de couleur variable en fonction du choix dAUTO MANU
otenu par 2 widget
quelqu’un pour m’aider pour écrire le code qui rende color et FontSize paramétrable?
merci
Bonjour,
Si j’ai bien saisi, ‹ color › doit être paramétrable mais aussi variable en fonction de la valeur ?
et pour le ‹ font-size › ? juste paramétrable ou doit-il aussi évoluer en fonction de la valeur ?
Oui color paramétrable et variable, fontsize juste paramétrable. Merci
Je propose donc ceci :
<div class="cmd cmd-widget #history#" data-type="info" data-subtype="string" data-template="tile" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
<div class="title #hide_name#">
<div class="cmdName">#name_display#</div>
</div>
<div class="content-sm">
</div>
<template>
<div>couleurAuto : Couleur du texte, lorsque #value# vaut "Auto".</div>
<div>couleurManu : Couleur du texte, lorsque #value# vaut "Manu".</div>
<div>fontSize : Taille du texte. [défaut : 24px]</div>
</template>
<script>
jeedom.cmd.update['#id#'] = function(_options){
var colorText#id# = 'var(--link-color)'; // Défaut
var fontSize#id# = '24px'; // Défaut
if ($.issetWidgetOptParam('#couleurAuto#', 'couleurAuto') && _options.display_value == 'Auto') colorText#id# = '#couleurAuto#';
if ($.issetWidgetOptParam('#couleurManu#', 'couleurManu') && _options.display_value == 'Manu') colorText#id# = '#couleurManu#';
if ($.issetWidgetOptParam('#fontSize#', 'fontSize') && _options.display_value == 'Auto') fontSize#id# = '#fontSize#';
$('.cmd[data-cmd_id=#id#] .content-sm').empty().append('<span style="color:'+colorText#id#+';font-size:'+fontSize#id#+';text-align:right;margin:0;padding:0">'+_options.display_value+'</span>')
$('.cmd[data-cmd_id=#id#]').attr('title', '{{Date de valeur}} : '+_options.valueDate+'<br/>{{Date de collecte}} : '+_options.collectDate)
}
jeedom.cmd.update['#id#']({display_value: '#state#', valueDate: '#valueDate#', collectDate: '#collectDate#', alertLevel: '#alertLevel#'})
</script>
</div>
Oui c est cela, mais je ne connais pas suffisement html/css pour écrire le code du widget 
Bonjour Salviaff,
oops, merci !
j’ai été trop vite à répondre avant mon café, pas bien reveillé (en Nlle-Caledonie il est 5h30) 
bonjour Phpvarious
merci pour le code !
et sorry pour le post précédent (merci à Salviaff), comme écrit trop content d’avoir une réponse ce matin et répondu trop vite
j’ai donc crée un widget avec le très bon plugin Pimp de salviaff
cela répond tres bien
j’ai juste fait une petite modif pour que le fontsize s’applique aussi à Manu
Est t’il possible de supprimer la marge au dessus du texte ? et qu’il toujours aligné sur le haut de la cellule du tableau (quitte à rajouter un padding-high de 1 ou 2 pix ds le tableau) ?
Est t’il possible d’utiliser les tests de widget afin de ne pas harcoder les valeur
cf ci dessous
merci !
Ah oui je l’avais pourtant fait, mais j’ai du poster le mauvais code.
Je pense que c’est possible en modifiant le style du content-sm :
<div class="content-sm" style="vertical-align: top !important;">
C’est tout a fait possible, j’y est pensé, mais c’est soit le widget code ou le widget multistate, dans ce dernier tu sera un peu plus limité dans la personnalisation du css. Mais il est tout a fait possible d’utiliser/creer des paramètres optionnels avec le multistate en utilisant les balises #nom# :
Exemple :
Test1 : #value# == 'Manu' → <span style=font-size:#fontSize# ....>
Bonjour Phpvarious
merci pour ton retour
j’ai rajouté le div-classe, ca marche !
et est t’il possible d’enlever la marge du bas, de telle manière que la marge soit à raz du texte en hauteur qu’elle que soit la valeur de fontsize ?
d’autre part je suis preneur pour le code alternatif avec le multistate
merci ! 
Hello,
La on va repartir a 0 sur le <div class="content-sm" ....>
vu que tu veut tout modifier 
, il faut mieux créer ta propre class. Je t’ai laissé les anciennes lignes en commentaire pour mieux comprendre.
<div class="cmd cmd-widget #history#" data-type="info" data-subtype="string" data-template="tile" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
<div class="title #hide_name#">
<div class="cmdName">#name_display#</div>
</div>
<!-- <div class="content-sm" style="vertical-align: top !important;"></div> -->
<div class="state#id#"></div>
<template>
<div>couleurAuto : Couleur du texte, lorsque #value# vaut "Auto".</div>
<div>couleurManu : Couleur du texte, lorsque #value# vaut "Manu".</div>
<div>fontSize : Taille du texte. [défaut : 24px]</div>
</template>
<script>
jeedom.cmd.update['#id#'] = function(_options){
var colorText#id# = 'var(--link-color)' // Défaut
var fontSize#id# = '24px' // Défaut
if ($.issetWidgetOptParam('#couleurAuto#', 'couleurAuto') && _options.display_value == 'Auto') colorText#id# = '#couleurAuto#'
if ($.issetWidgetOptParam('#couleurManu#', 'couleurManu') && _options.display_value == 'Manu') colorText#id# = '#couleurManu#'
if ($.issetWidgetOptParam('#fontSize#', 'fontSize')) fontSize#id# = '#fontSize#'
//$('.cmd[data-cmd_id=#id#] .content-sm').empty().append('<span style="color:'+colorText#id#+';font-size:'+fontSize#id#+';text-align:right;margin:0;padding:0;line-height:'+fontSize#id#+'">'+_options.display_value+'</span>')
$('.cmd[data-cmd_id=#id#] .state#id#').empty().append('<span style="color:'+colorText#id#+';font-size:'+fontSize#id#+';line-height:'+fontSize#id#+'">'+_options.display_value+'</span>')
$('.cmd[data-cmd_id=#id#]').attr('title', '{{Date de valeur}} : '+_options.valueDate+'<br/>{{Date de collecte}} : '+_options.collectDate)
}
jeedom.cmd.update['#id#']({display_value: '#state#', valueDate: '#valueDate#', collectDate: '#collectDate#', alertLevel: '#alertLevel#'})
</script>
</div>
Alors avec le multistate (j’ai gardé les même noms de paramètres optionnels):
#value# == "Auto" →
<span style="color:#couleurAuto#;font-size:#fontSize#;line-height:#fontSize#">#value#</span>
#value# == "Manu" →
<span style="color:#couleurManu#;font-size:#fontSize#;line-height:#fontSize#">#value#</span>
#value# != "Manu" && #value# != "Auto" →
<span style="font-size:#fontSize#;line-height:#fontSize#">#value#</span>
Info : si tu oublie de renseigner un des paramètres optionnels, c’est le style du Core qui sera appliqué.
pour le 3) il ne sert que au cas ou, tu utilise ce widget multistate avec une autre valeur que Auto/Manu
super, merci, ca marche nickel !
pour le multistate je ne vois pas dans Pimpjeedom la possibilité d’indiquer la template multistate ?
en totu cas merci pour le temps passé 
Ce sujet a été automatiquement fermé après 24 heures suivant le dernier commentaire. Aucune réponse n’est permise dorénavant.
