Brosse à dents Oral B

arnog23 · Janvier 2, 2024, 11:29

Testé et approuvé

J’ai juste modifié le startAngle (0) et endAngle(360) pour que cela commence en haut. A voir si cela est interessant de les mettre aussi en paramètres.

En revanche, y aurait-il moyen de faire changer la couleur dynamiquement en fonction d’une autre commande info de l’équipement ?

Y aurait-il également moyen de changer l’affichage de la valeur qui se trouve au centre ? Dans mon cas, il s’agit d’une durée. Un affichage du genre 0:00 serait-il possible ?

Je l’ai dupliqué en Mobile mais les couleurs ne semblent pas s’appliquer. Y-a-t-il quelquechose de particulier à faire sur la version Mobile ?

Spine · Janvier 3, 2024, 5:03

Bonsoir,

J’ai fait ça mais en relisant votre demande je m’aperçois que j’ai mal compris :
Animation

github.com

Spine34/jeedom-widgets/blob/master/dashboard/cmd.info.numeric.solidGaugeArnog23.html

<div class="cmd cmd-widget #history#" data-type="info" data-subtype="numeric" 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 id="solidGauge#uid#"></div>
	</div>
	<div class="timeCmd label label-default #history#" data-type="info"></div>
	<div class="cmdStats #hide_history#">
		<span title="{{Minimum}}" class="tooltips">#minHistoryValue#</span>|<span title="{{Moyenne}}"
			class="tooltips">#averageHistoryValue#</span>|<span title="{{Maximum}}"
			class="tooltips">#maxHistoryValue#</span> <i class="#tendance#"></i>
	</div>
	<template>
		<div>startAngle : 180 ({{Angle de départ}})</div>
		<div>endAngle : 540 ({{Angle de fin}})</div>
		<div>backgroundColor : var(--el-defaultColor) ({{Couleur de fond}})</div>
		<div>color1 : rgb(0, 255, 0) ({{1ère couleur de remplissage}})</div>
		<div>color2 : rgb(0, 255, 255) ({{2ème couleur de remplissage}})</div>

This file has been truncated. show original

Oui mais la jauge attend du numeric pour calculer sa position pas du string.
Donc vous voulez qu’elle dépende de 3 commandes ?

1 cmd numeric pour la position de la jauge
1 cmd string pour la valeur affichée
1 cmd (type ?) pour la couleur de remplissage

arnog23 · Janvier 3, 2024, 7:59

Bonsoir,
Je vais tester cette nouvelle version dès que je peux.

Je dirais seulement deux commandes :

1 cmd numeric pour la position de la gauge et l’affichage au format M:SS. Il me semblait que c’était possible de faire un calcul dans le widget avant d’afficher la valeur mais peut être que je me trompe. Peut être une option « format » à ajouter. Par défaut affichage de la valeur brute, avec l’option, affichage au format M:SS
1 cmd numeric ou binaire (?) qui permet de changer la couleur des 4 quartiers. Il faut que je revérifie mais en situation normale la pression vaut 0, si on appuie trop fort ça passe à 192 (dans ce cas il faudrait pouvoir changer la couleur des 4 secteurs en rouge par exemple). Il y aussi un passage de la valeur à 32 mais je ne sais plus à quelle situation il correspond. Pas sur que la valeur 32 soit utile. Je vais revérifier.

Spine · Janvier 4, 2024, 12:34

J’ai mis à jour le code :

ajout des paramètres startAngle et endAngle
ajout d’un paramètre pour afficher des secondes au format M:SS
ajout d’un paramètre pour renseigner l’ID d’une 2ème commande
changement de la couleur de remplissage en fonction de la valeur d’une 2ème commande, orange si == 32, rouge si == 192 et couleur par défaut sinon

arnog23 · Janvier 4, 2024, 11:19

Ca fonctionne nickel. Merci beaucoup.

Après vérification, le passage par la valeur 32 se fait au moment ou l’on arrête le brossage. Je verrais à l’usage si je la conserve ou pas.

Quand je rafraichie la page, je vois que le chono fait un mouvement de la droite vers gauche pour se mettre à sa position définitive. C’est un effet souhaité ?

Spine · Janvier 4, 2024, 4:35

Oui c’est pour indiquer le sens de brossage optimal.
C’est un effet de bord car je fait un innerHTML sur un span pendant qu’Highcharts génère le code donc le span est affiché avant que sa position finale ne soit définie.
Je regarde pour fixer sa position.

arnog23 · Janvier 4, 2024, 4:37

Sinon, en version mobile, les couleurs des cadrans ne semblent pas fonctionner. Ils sont toujours en blanc.

Spine · Janvier 4, 2024, 4:45

Oui j’ai vu et j’ai déjà commencé à regarder (https://github.com/Spine34/jeedom-widgets/blob/master/mobile/cmd.info.numeric.solidGaugeArnog23.html), il n’y pas que la couleur qui ne va pas, il y avait une erreur qui faisait buguer tout le widget car jeeFrontEnd.jeedomVersion n’est pas défini en version mobile.
Pour la couleur c’est plus compliqué… On termine la version dashboard et on passe à la version mobile ensuite.

Spine · Janvier 6, 2024, 4:09

Bonjour,

J’ai mis à jour le code version dashboard :

position du span fixé

Dites moi si c’est OK.

arnog23 · Janvier 6, 2024, 4:57

Bonjour,

Pas mieux.

Testé sur Chrome et Firefox.

Spine · Janvier 6, 2024, 4:59

Mince je suis sur Chrome, Ctrl+F5 et :

SVP
Sinon click droit sur la valeur (inspecter) et vérifier qu’elle a bien la position absolute sinon problème de cache :

arnog23 · Janvier 7, 2024, 1:16

J’avais déjà tenté le Ctrl+F5.

C’est bon maintenant.

Spine · Janvier 9, 2024, 5:49

Bonsoir,

Désolé pour l’attente mais je manque de temps libre.
Voici donc une version mobile sans erreur mais toujours sans couleur :

github.com

Spine34/jeedom-widgets/blob/master/mobile/cmd.info.numeric.solidGaugeArnog23.html

<div class="cmd cmd-widget #history#" data-type="info" data-subtype="numeric" 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 id="solidGauge#uid#"></div>
	</div>
	<div class="timeCmd label label-default #history#" data-type="info"></div>
	<div class="cmdStats #hide_history#">
		<span title="{{Minimum}}" class="tooltips">#minHistoryValue#</span>|<span title="{{Moyenne}}"
			class="tooltips">#averageHistoryValue#</span>|<span title="{{Maximum}}"
			class="tooltips">#maxHistoryValue#</span> <i class="#tendance#"></i>
	</div>
	<template>
		<div>startAngle : 180 ({{Angle de départ}})</div>
		<div>endAngle : 540 ({{Angle de fin}})</div>
		<div>backgroundColor : var(--el-defaultColor) ({{Couleur de fond}})</div>
		<div>color1 : rgb(0, 255, 0) ({{1ère couleur de remplissage}})</div>
		<div>color2 : rgb(0, 255, 255) ({{2ème couleur de remplissage}})</div>

This file has been truncated. show original

Pour la couleur, le problème vient de la classe highcharts-color-0 qui appartient à Highcharts mais qui est quand même surchargée par le core, je me rappelle m’être bien pris la tête avec ce souci qui était aussi présent sur la version dashboard dans les premières versions de la V4. Je n’ai jamais trouvé de solution simple/propre mais je suis loin de tout connaître.
Je vous propose une solution de bourrin à savoir modifier le code du core.
Sachant que vous êtes développeur, que la classe a été supprimé en v4.4 (preuve qu’elle posait problème) donc ce sera OK quand vous passerez en v4.4 et qu’il n’y aura plus de nouvelle version de la v4.3 (sauf gros bug) donc vous n’aurez qu’à faire cette modification une ou deux fois, je pense que le plus simple est de commenter cette classe en attendant la v4.4 :

Si cela ne vous convient pas, il y a un workaround avec des variables CSS proposé par ajja17orange dans le sujet que vous avez cité en lien, ça fait un peu usine à gaz car si je l’intègre il faut revoir la logique que j’ai mis en place avec la 2ème commande mais je veux bien regarder si la méthode bourrin ne vous convient pas.

arnog23 · Janvier 10, 2024, 9:09

Pas de souci. Il n’y a pas d’urgence. C’est déjà très sympa d’avoir pris le temps.

Pour la version mobile, je peux attendre la sortie de la 4.4, pas de souci. Je ne suis pas trop fan d’aller modifier le core. Et puis comme annoncé sur le blog, la 4.4 devrait bientôt passer en stable …

jpty · Avril 9, 2024, 8:35

Bonjour,
Dans le changelog de la 4.4, il y a :

Donc, sans modif il n’y a plus ce widget en 4.4

J’ai ajouté le chargement de solidgauge dans le widget que j’utilise:

<script src="core/php/getJS.php?file=3rdparty/highstock/modules/solid-gauge.js"></script>

Au dessus de la ligne <div class="title #hide_name#">
Ca donne:
au lieu de
Les hauteurs et positions des textes passent différemment …

PS: le widget ne s’affiche pas dans un design …

Spine · Avril 9, 2024, 8:44

Bonjour,

C’était prévu pour la lib, il faut juste décommenter la ligne :

github.com

Spine34/jeedom-widgets/blob/master/dashboard/cmd.info.numeric.solidGaugeArnog23.html#L31


      
          		<div>color3 : rgb(0, 0, 255) ({{3ème couleur de remplissage}})</div>
          		<div>min : 0 ({{Valeur minimum}})</div>
          		<div>max : 100 ({{Valeur maximum}})</div>
          		<div>tickInterval : (max - min) / 4 ({{Pas des ticks}})</div>
          		<div>tickColor : rgb(38, 38, 38) ({{Couleur des ticks}})</div>
          		<div>time : duration|date|GaugeIMG ({{Affiche durée ou date de la valeur}})</div>
          		<div>format : 1 ({{Valeur au format M:SS}})</div>
          		<div>id2 : ({{ID de la 2ème commande}})</div>
          	</template>
          	<!-- >= 4.4 -->
          	<!-- <script type="text/javascript" src="3rdparty/highstock/modules/solid-gauge.js"></script> -->
          	<script>
          		var startAngle = is_numeric('#startAngle#') ? parseFloat('#startAngle#') : 180;
          		var endAngle = is_numeric('#endAngle#') ? parseFloat('#endAngle#') : 540;
          		var backgroundColor = ('#backgroundColor#' != '#' + 'backgroundColor#') ? '#backgroundColor#' : 'var(--el-defaultColor)';
          		var color1 = ('#color1#' != '#' + 'color1#') ? '#color1#' : 'rgb(0, 255, 0)';
          		var color2 = ('#color2#' != '#' + 'color2#') ? '#color2#' : 'rgb(0, 255, 255)';
          		var color3 = ('#color3#' != '#' + 'color3#') ? '#color3#' : 'rgb(0, 0, 255)';
          		var min = is_numeric('#min#') ? parseFloat('#min#') : 0;
          		var max = is_numeric('#max#') ? parseFloat('#max#') : 100;
          		var tickInterval = is_numeric('#tickInterval#') ? parseFloat('#tickInterval#') : (max - min) / 4;

Quel intérêt de passer par un fichier d’appel plutôt qu’en direct ?
Pour les designs, ça s’affiche au bout d’une minute, la solution est là :

Je n’ai pas encore creusé de mon côté…

jpty · Avril 9, 2024, 9:29

Ça sert à faire ce qui est dans core/php/getResource.php appelé par getJS.php
Je pensais que ca empêcherait les multi-chargements du JS mais apparemment ce n’est pas le cas.
Pour un fichier de 5ko, je ne vois pas trop l’intérêt de ce code.
Je modifie.

Par le nom des classes utilisées, je m’aperçois que c’est ton widget modifié à ma sauce que j’utilise pour ma production PV. Faudra que je rentre dans le rang.

Pour les designs, aller modifier le custom.js pour que le widget fonctionne, ça va pas le faire.
L’affichage au bout d’une minute non plus.

Spine · Avril 9, 2024, 10:31

Merci pour l’explication, j’avoue ne pas avoir regarder le fichier.
Il faudrait tester si la lib n’est pas chargée aussi car si tout le monde la charge de son côté…
J’ai lu ce sujet mais je suis resté bloqué au même niveau que Bison.

C’est un widget sur mesure pour Arnog qui affiche des secondes celui-là.

Je suis d’accord que ce n’est pas une bonne solution mais ça permet de cerner le problème, j’ai testé dans le JS du widget ça ne fonctionne pas.

Poumi · Avril 9, 2024, 10:37

petit hors-sujet:
@arnog23 tu peux partager aussi le json (ou une capture des commandes) pour que je l’ajoute dans BLEA?

jpty · Avril 9, 2024, 2:57

En mettant à la bourrin que je suis, le contenu du fichier solid-gauge.js entre balises script dans le code du widget, ca fonctionne sur le dashboard et le design.

Reste à comprendre pourquoi

<script type="text/javascript" src="3rdparty/highstock/modules/solid-gauge.js"></script>

ne fonctionne pas. Et produit l’erreur: