Aide pour personnaliser un widget

Bonjour à tous, je viens de passer quelques temps pour faire quelque chose qui ressemble à peu près à ce que j’attends. J’ai des panneaux solaire et un onduleur pour lequel je veux afficher une sorte de tableau de contrôle et j’ai obtenu ça:

image

Je suis assez content du résultat mais il me reste encore des choses à améliorer et j’aurai besoin d’aide pour ça. J’ai bien réussi à trouver comment adapter la taille des caractères sous chaque icone grâce à la commande

#value# W
à la suite de <img class=‹ img-responsive › src=’ … > dans la cas résultat d’un test dans le widget. Malheureusement j’ai d’abord fait tous les widgets avant de trouver cette commande. Il y a 5 widgets avec chacun entre 3 et 7 lignes de test. Y a t’il un moyen d’appliquer cette taille de caractère à un seul endroit pour que cela s’applique partout dans ces widgets? Mettre cette option dans les paramètres d’affichage de la tuile ne fonctionne que pour les caractères qui ne sont pas issus d’un widget (en tout cas chez moi).

2 ème point, est il possible d’augmenter la taille des caractères des titres des cellules? (« Panneaux solaire » par exemple)

3 ème point, est il possible de rajouter un peu d’espace entre les icones affichés et le texte qui est dessous?

4ème et pour info au cas où je me décide à en faire d’autres, j’ai dû créer un icone pour chaque situation (fleche verte vers la droite avec un panneau à gauche, …) est il possible d’avoir 2 icones différents que l’on ferait s’afficher côte à côte? Par exemple j’ai l’icone panneau solaire et à côté j’aurai l’icone flèche verte vers la droite?

Je précise que j’ai fait ces widgets avec le menu widget puis ajouter et pas avec du code. A ce propos je ne trouve pas où est stocké le code de ces widget, je ne retrouve des infos dessus que dans la base de données de Jeedom dans eqlogic.

Merci d’avance.

Bonsoir,

Pour ceci, il faudra ajouter du css (custom.css) dans Réglages/Systeme/Personnalisation avancée :

[data-eqlogic_id="xxx"] .iconCmd {
  font-size: 18px;
}

il faudra bien sur changer xxx par l’ID de ton équipement, et ce code aura pour effet que le widget portant l’id xxx.

Il y a la possibilité de renseigner le style général des cases (css) :

toujours dans le custom.css il faudra rajouter ceci :

[data-eqlogic_id="559"] .iconCmd img{
  margin-bottom: 10px;
}

c’est possible aussi, mais directement dans ton « Résultat » du widget, il faudra supprimer la class responsive, voici un exemple :

<img src=".../panneau.png"><img src=".../flèche_verte.png"><br>#value# W

le <br> sert a afficher la valeur (#value# W) en dessous, sinon elle serai aussi alignée a coté des images

1 « J'aime »

Bonjour @Phpvarious , tout d’abord toutes mes excuses pour le délai de réponse. Merci beaucoup pour tes réponses précises et efficaces :+1:

Il y a juste ta réponse concernant mon 2ème point, la taille du titre des cellules, qui ne fonctionne pas mais s’il n’y a que ça je vais m’en accommoder :wink: . La réponse fait bien varier la taille des caractères dans la cellule lorsque ce n’est pas un widget mais pas le titre lui même.

Merci encore c’est vraiment super.

++

Ah j’avais oublié une question :grin:

J’ai des valeurs qui sont soit positives soit négatives. Je fais le traitement avec ces valeurs, je ne peux donc pas mettre abs(…) dans le virtuel, mais pour l’affichage je voudrais que ce ne soit que des valeurs positives, y a t’il un moyen?

Merci d’avance

Hello,

C’est ce que j’avait compris lorsque tu parlais de « titre des cellules », mais en effet si c’est pour le titre du widget 2 solutions

  1. celle-ci modifie la taille des titres pour tout l’équipement :
    (remplacer xxx par l’id de l’équipement.)
[data-eqlogic_id="xxx"] .title .cmdName {
  font-size: 20px;
}
  1. si c’est pour cibler un titre en particulier :
    (remplacer xxx par l’id de la commande.)
[data-cmd_id="xxx"] .title .cmdName {
  font-size: 20px;
}

dans les 2 cas ne pas excéder les 24px sous peine d’avoir des lettres tronquées par l’image du widget.

A ma connaissance, ce n’est pas possible, le seul moyen serai de passer par un widget code perso.

1 « J'aime »

Super, merci @Phpvarious. J’avais bien essayé title mais sans le cmdname… où est ce qu’on peut trouver toutes ces commandes?

En tout cas je te remercie bien pour ton aide précieuse.

++

Il faut se servir de la console de développeur intégré a ton navigateur et quelques connaissance sur le fonctionnement du css (merci google).

Je persévérerai, merci encore

Bonne soirée

Ce sujet a été automatiquement fermé après 24 heures suivant le dernier commentaire. Aucune réponse n’est permise dorénavant.