Bonjour,
J’ai depuis quelques temps un affichage anarchique du widget iopool sur mon design
Et mon dashboard
Avez-vous des suggestions à partager pour corriger ce magnifique widget?
A dispo pour plus de détail et merci par avance pour votre aide.
Informations Jeedom
Core : 4.4.14 (master)
DNS Jeedom : oui
Plugin : iopool - EcO
Version : 2023-06-27 15:28:27 (stable)
Bonjour,
Peut être fournir le code du widget ce qui permettrait de l’analyser et voir ce qui ne va pas dans le code.
En nous communiquant aussi la page santé Jeedom afin que l’on ne soit pas obligé de deviner l’environnement sur lequel votre jeedom est exécuté.
Bonjour,
C’est vraisemblablement le design qui écrase ou altère le css si ça fonctionne correctement dans le Dashboard.
Le problème n’est pas donc à regarder dans le widget mais sur l’impact du design sur le dashboard
Rebonjour,
Si l’on compare mes visuels dashboard/design a celui présenté dans la doc du plugin, il y a bien une différence de placement au niveau de l’icône « traitement conseillé ».
Je vous confirme que les problèmes d’affichages sont identiques (la seule différence est liée à la dimension plus grande accordée à la tuile du dashboard, qui n’a aucun impact sur la position de l’icône dans l’encart bleu, ni sur la position de la valeur et du texte « température de l’eau »).
Voici les seuls éléments dans mon fichier custom.css
La page santé qui semble importante :
Pour le code, vu que le plugin est développé par @mguyard je le laisse partager la partie concernée si il le souhaite.
Merci
Bonjour,
Alors si justement. Regardons au niveau du dashboard uniquement pour le moment, en regardant le comportement si tu ne touche pas à la hauteur du widget et que tu la laisse telle est est configuré (hardcodé) dans le widget en lui même. Ca donne quoi ?
Merci pour ton aide. Voici le widget tel quel sur mon dashboard, sans redimensionnement
On observe bien le décalage de l’icône dans l’encart bleu. Je précise que j’utilise Chrome si ça peut être utile.
Pour moi le problème vient de la position de l’icône qui devrait être à gauche du texte.
Voici le code associé au widget, tiré de Chrome :
<div class="row iopool-actions-background" style="">
<div class="row iopool-actions" style="">
<!-- Show Winter mode -->
<div style="display: none;" class="col-xs-12 cmd cmd-widget wintermode" id="winterMode">
<div class="col-xs-3 wintermode-img"> <!-- Logo -->
<img id="winterImage" class="img-fluid" src="../plugins/iopool_EcO/core/images/widget/poolwinter.png" alt="WinterMode">
</div>
<div class="col-xs-9 wintermode-text"> <!-- Text -->
<span class="state" style="color: #F4F8F7 !important;"><b>Mode hivernage</b></span><br>
<span class="stateDetail">Votre sonde EcO est actuellement en mode hivernage, les données ne sont plus actualisées..</span>
</div>
</div>
<!-- Return if action is required -->
<div class="col-xs-12 cmd cmd-widget #hasAnActionRequired_history# hasAnActionRequired tippied" id="#hasAnActionRequired_uid" data-type="info" data-subtype="binary" data-cmd_id="6276" data-cmd_uid="cmd6276__1326887678__" data-title="Date de valeur : 2024-08-30 12:05:00<br/>Date de collecte : 2024-08-30 12:05:00">
<div class="col-xs-3 hasAnActionRequired-img"> <!-- Logo -->
<img id="flagState495" class="img-fluid" src="../plugins/iopool_EcO/core/images/widget/actionRequired.png" alt="Etat inconnu">
</div>
<div class="col-xs-9 hasAnActionRequired-text"> <!-- Text -->
<span class="state" style="color: #F4F8F7 !important">Traitement conseillé</span><br>
<span class="stateDetail">Pour garder votre eau saine, ouvrez l'application iopool et réalisez les traitements proposés.</span>
</div>
</div>
<!-- Return filtration duration recommandation -->
<div class="col-xs-12 advice__filtrationDuration">
<div class="col-xs-3 advice__filtrationDuration-img"> <!-- Logo -->
<img id="pump495" class="img-fluid" src="../plugins/iopool_EcO/core/images/widget/pumpOn.png" alt="ImagePump">
</div>
<div class="col-xs-7 cmd cmd-widget advice__filtrationDuration-text advice__filtrationDuration495 tippied" id="#advice__filtrationDuration_uid" data-type="info" data-subtype="numeric" data-cmd_id="6277" data-cmd_uid="cmd6277__1516417265__" data-title="Date de valeur : 2024-08-07 20:57:00<br/>Date de collecte : 2024-08-30 12:05:00"> <!-- Text -->
<span class="state history cursor" style="color: #F4F8F7 !important"><strong>9H30</strong> de filtration par jour</span><br>
<span class="stateDetail" style="font-size: 9px;">Basé sur le débit de votre pompe, le volume d‘eau et la température de votre piscine.</span>
</div>
<div class="col-xs-2 filtrationActions-btn"> <!-- Buttons to control Pump -->
<button class="btn btn-sm btnActionFiltration cmd action tippied" data-cmd_id="7512" onclick="jeedom.cmd.execute({id: 7512});" data-title="Activer Pompe"><i class="icon_green fas fa-play"></i></button>
<button class="btn btn-sm btnActionFiltration cmd action tippied" data-cmd_id="7513" onclick="jeedom.cmd.execute({id: 7513});" data-title="Arréter Pompe"><i class="icon_red fas fa-stop"></i></button>
<!-- Style applied directly because Jeedom erase (most important) -->
<select class="btn btn-sm btnActionFiltrationSelectBoost" style="background-image:none !important;">
<option disabled="" selected="">Boost</option>
<option value="6283">Lancement d\'un Boost de 1H</option><option value="6286">Lancement d\'un Boost de 4H</option><option value="6289">Lancement d\'un Boost de 8H</option><option value="6292">Lancement d\'un Boost de 24H</option>
</select>
</div>
</div>
</div>
</div>
Bonjour,
Je viens de comprendre comment résoudre. Cependant, je me demande pourquoi, sans changement de code, ca pose problème maintenant.
Surement un changement coté Jeedom mais ca voudrait dire que si je change, ca pourrait impacter dans l’autre sens les précédentes versions de Jeedom.
Est-ce que certain utilisateurs du plugin plugin-iopool_eco ont aussi ce problème d’affichage en 4.3 ou en 4.4 (dans ce cas préciser la version exacte svp) ?
PS : j’ai testé dans un docker 4.3.23 et pas de souci. Donc surement un problème arrivé en 4.4.x
Tu peux tester la beta du plugin. Ca devrais résoudre le problème. Pense bien a forcer un refresh navigateur
J’avais préparé en mai une version compatible 4.4 mais comme je suis plus sur Jeedom en prod, personne ne semble l’avoir testé. Donc elle est jamais passé en stable.
Je te laisserais la tester et me dire si il y a des soucis. Si pas de problème, je passerais en stable
C’est noté je me lance, merci pour ton support réactif!
Le résultat est celui attendu, sur le dashboard et dans mon design (aperçu de mon design pour affichage sur un mobile avec ta correction):
Les seules contraintes que je relève (voir le visuel ci-dessous) :
Pour moi ces contraintes sont mineures et la correction apportée me permet de retrouver un affichage cohérent sur mon design (ce qui était mon attente principale).
Merci pour ton temps et ton aide!
C’est en effet une contrainte mais elle a toujours était. Si tu veux un design propre sur un widget complet (qui n’est donc pas un ensemble de widget natif) tu n’as pas le choix que de fixer les dimensions du widget.
Je te laisse me faire un retour de fonctionnement d’ici 1 semaine si tu veux bien pour que je passe en stable la beta. Car ce n’est pas seulement des changements visuels mais aussi au niveau du core
Bonjour, tout est ok depuis la correction apportée, merci!
Ce sujet a été automatiquement fermé après 24 heures suivant le dernier commentaire. Aucune réponse n’est permise dorénavant.
