Widget (taille, police, bold...)

Utilisation du core de Jeedom Widgets
1

Bonjour à tous,
J’ai sauté le pas, et j’ai donc migré vers la V4.
J’avais un widget en V3 où j’avais modifié la taille de la police et la police.

<div style="min-height : 60px;min-width : 20px;" 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#">
	<center>
		<div style="font-weight: bold;font-size : 12px;#hideCmdName#">#name_display#</div>
<!-- retrait label-info dans le class pour supprimer le fond bleu -->
		<span class='label state' style="font-size: 50px;position:relative;top:2px;opacity: 1;"></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>
		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 +' #unite#');
		}
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>
</div>

En passant en V4, il ne fonctionne plus du tout.
J’ai donc voulu utiliser les paramètres optionnels du widget, mais d’après ce que j’ai lu, ce n’est pas possible.

image
image900×530 18.5 KB

Dois-je refaire mon widget ou alors puis-je utiliser les paramètres optionnels à partir du moment où j’utilise les bons noms ?
Avez-vous une liste des paramètres modifiables ?

Merci pour vos conseils.
Mathieu

2

Hello,
J’ai trouvé une solution, je crée un widget
image

puis je mets ce code dans le « test »

<div style="font-weight: bold; font-size: 40px; color: #FFFFFF">#value##unite#</div>

Mathieu

1 « J'aime »
3

Bonjour
Merci pour cette astuce. elle marche parfaitement sur mon widget.
Cependant, j’ai 200 tests de valeurs à faire pour afficher un texte particulier : je récupère une tendance météo donnée par ma station, cette tendance étant un chiffre allant de 0 à 200, et chaque chiffre correspond à une phrase particulière. Par exemple #value#==4, je fais écrire « Plutôt clair avec peu de changement de température »
Là ou cela se complique c’est que je vais devoir mettre les attributs de style sur chacun des 200 tests, et si je souhaite modifier un paramètre, il faudra que je modifie 400 fois (200 pour le light et 200 pour le dark).
N’y aurait-il pas une méthode globale?
Merci
Stéphane

4

Je me réponds à moi-même :wink:
Il y a un solution, peut-être pas parfaite, mais qui fonctionne bien chez moi.
1- Ecrire un code CSS (aller dans Réglage/Système/Personnalisation avancée/CSS)

.nom_du_style{
font-size: 0.5em;
font-weight: lighter;
}

2- Dans le widget
faire le test #value#==4 (par exemple)
sur résultat du test <span class="nom_du_style">Plutôt clair avec peu de changement de température</span>

Si on veut changer un attribut : modifier dans le CSS et tout se modifie

5

Pas bête !
J’y avais pas du tout pensé.
Merci, je vais essayer.
Mathieu

6

Hello @Stephane_Bec,
Sais-tu comment appliquer le CSS sur un Design ?

image
image794×446 16.3 KB

Mathieu

7

Bonjour @OUARZA
Es-tu sur un jeedom V4?

8

Hello,
Oui, je suis en V4.
Mathieu

9

Je ne vois pas où tu trouve cette page dans jeedom.
Moi je vais sur « réglage »-> « système » → « personnalisation avancée » et je mets mon CSS comme ci-dessous :

Capture
Capture1902×249 10 KB

Puis ensuite, dans « outils » → « widgets », je mets mon Le texte que tu souhaites afficher comme ci-dessous :

Capture
Capture1914×759 54 KB

Voilà !

10

Oui, je suis d’accord avec toi, mais en fait si je veux appliquer un CSS uniquement sur un élément dans mon Design sans toucher aux éléments de mon Dashboard.
Comment appliquer un CSS uniquement sur un élément du Design ?
Mathieu

11

A mon avis, il te faut créer 2 codes CSS ou 2 widgets, un pour le design et l’autre pour le design

12

Quelle syntaxe mettre ici ?

image
image1256×804 189 KB

13

A cet endroit, il faut mettre ton code CSS :

.previsions_vantage{
font-size: 0.5em;
font-style: normal;
font-weight: lighter;
}

14

C’est dommage.
J’ai 20 affichages, je dois faire 20 fois la modification alors que si on avait la possibilité de mettre <class=« previsions_vantage »> on aurait juste à modifier dans le paramétrage avancée de Jeedom pour que la modification s’applique sur les 20 éléments.