Javascript "barre de progression" (2ème édition)

Bonjour,

C’est la 2ème édition car ce sujet a été traité récemment mais sans apporter de réponse
(qui me convienne).

J’ai pu trouver un anémomètre (qui fourni du 0,4 à 2v) que je souhaite brancher sur une entrée analogique.

J’aurai aimé un widget façon « barre de progression », ca prendrai moins de place que le widget « standard ». 1 seul bloc en hauteur serai bien.

Quelqu’un a t’il déjà fait ce script, ou bien quelque chose qui y ressemble ?
Le but principal pour moi étant de gagner de la place en hauteur
(pour le moment je me contente de réduire le zoom de la page mais ce n’est pas l’idéal)

Merci beaucoup

1 « J'aime »

Bonjour,

Problème résolu :slight_smile:

Cdt

Pourriez-vous partager le code de votre widget afin de faire profiter toute la communauté ?

Bonjour @ZogStriP,

Malheureusement je ne suis pas assez doué pour faire ce code.
Après une semaine de recherche, j’ai abandonné l’idée.

Maintenant je ne passe plus directement par l’interface de l’ipx, je l’inclu
dans une iframe hébergé par un NAS.
Mon prochain objectif: que le NAS interroge l’xml de l’ipx et me permette de générer
des bargraph en utilisant JQuery.

Par contre si quelqu’un arrive a faire le script, il m’intéresse.

Bonjour @GCE, visiblement l’ipx ne peut générer que des « Jauge ».
L’ipx utilise t’il un script « sur mesure » ou bien un script plus générique capable de créer plusieurs type de graph ? (qui rendrait possible l’ajout futur d’une option « bargraph »)

Bonjour,

est-ce qu’une barre de progression de ce style vous convient ? A adapter à votre anémomètre ( dans l’exemple c’est pour une sonde TC-100 sur entrée analogique )

Code du widget HTML :

var analog = datasources["Status.xml"]["response"]["analog0"];
var celsius = (((analog * 0.000050354) - 0.25) / 0.028).toFixed(1);

return `
<p>
  <progress min="0" max="40" value="${celsius}"></progress> ${celsius} °C
</p>
`;
7 « J'aime »

Bonjour @Cyrilz
Ce widget barre de progression me plairait beaucoup pouvez vous laissez le code source

Merci

Merci beaucoup @Cyrilz, ça correspond exactement à ce que je recherche.

Je vais essayer de l’adapter, je vous tiendrai au courant :wink:

Je n arrive pas a faire fonctionner le widget reste vide
Je ne vois pas d ou cela peut venir ?

Avez-vous une source de données qui s’appelle « Status.xml » ?

1 « J'aime »

Bonjour @ZogStriP
J ai bien statuts xml et même io xml
Mais rien ne s affiche

Avez-vous des erreurs dans la console JavaScript de votre navigateur ?

1 « J'aime »

Non pas d erreur et rien ne s affiche lors de l exécution

bonjour @fmmomo
la base nommée « Status.xml » et qui pointe sur le fichier status.xml est bien enregistrée sur le dashboard?
Peux-tu nous faire parvenir l’écran de définition de ta datasource « status.xml » ainsi que le code de ton widget ?
cdt

1 « J'aime »

Et oui je suis vraiment étourdi c était bien sa j avais mis « s » minuscule à Status alors il n était pas reconnu merci encore @ZogStriP et @fgtoul
Et @Cyrilz Sa fonctionne super

2 « J'aime »

pense à redéfinir les attributs Min et Max pour plus de précision de la progressBar.

2 « J'aime »

Ok merci beaucoup @fgtoul

pour information, l’élément Html <progress> est fait pour afficher des pourcentages. c’est une barre de progression. Il ne sait donc pas afficher des valeurs négatives.
Dans le cas d’une utilisation pour des températures, il vaut donc mieux utiliser l’élément <meter>
il a la même syntaxe, et le même type d’affichage. mais les valeurs admises sont différentes.
l’exemple ci-dessus pourrait donc devenir

return `
<p>
  <meter min="-30" max="40" value="${celsius}"></meter> ${celsius} °C
</p>
`;
5 « J'aime »

Bonjour,

widget très intéressant.
On en veux toujours plus !!
Serait il possible d’avoir 3 couleurs sur le barre graph, le 1° tiers en bleu, le 2° en orange, le 3° en rouge ?
De plus serait il d’afficher en plus de la température, la valeur min et la valeur max ?

Merci et cordialement.

1 « J'aime »

l’élément <meter> peut changer de couleur (vert, jaune, rouge) en fonction de seuils définis (low, high, optimum), mais tout ou rien, pas plusieurs couleurs à la fois. c’est très pratique pour afficher des plages de confort, des dépassements de seuils, qualité de l’air, température …

4 « J'aime »

deux super articles pour ceux qui veulent aller plus loin (beaucoup plus loin :smiley: ) avec les éléments Html5 <meter> et <progress>

5 « J'aime »