5568 sujets

Sémantique web et HTML

[PRTG] ProgressBar HTML+CSS

Bonjour TLM,

J'utilise le logiciel de supervision PRTG et je voudrais créer une sorte de progress bar pour indiquer le niveau de batterie disponible.
L'éditeur fournit une KB pour afficher la valeur d'une sonde :
<#objectstatus name="lastvalue" id="<@objectid>">


J'ai donc packagé un truc comme ça :
<style> 
@keyframes auto-progress 
{  
    0% { width: 0%; }  
    100% { width: 100%; } 
} 

.progress-bar
{
	background-color:rgb(128,128,128);
	color:rgb(255,255,255);
	font-size:14px;
	text-align:center;
	padding:10px 5px 8px 5px;
}

.progress-bar-inner 
{  
    display: block;  
    height: 45px;  
    width: 0%;  
    background-color: #00d736;  
    border-radius: 3px;  
    position: relative;  
    animation: auto-progress 1.5s infinite linear; 
} 
</style>     
  
<div class='progress-bar'><#objectstatus name="lastvalue" id="<@objectid>">
      <span class='progress-bar-inner'></span> 
</div>


Ce qui affiche un fond gris avec la valeur récupérée du logiciel en blanc.
En dessous, j'ai une progress bar vert qui boucle de 0 à 100% mais qui du coup, ne reflète pas la valeur affichée.
Mais je ne sais même pas si c'est faisable ?
Y'a quelqu'un qui pourrait me renseigner sur le sujet ?

Merci TLM Smiley smile
Sortez couverts (autant en bas qu'en haut maintenant il faut dire ^^)
Vincent
Modifié par _laurent (09 Apr 2021 - 18:46)
Modérateur
Salut,

Je ne sais pas trop ce que c'est comme langage ni comment ca s'interprète dans le HTML mais si tu arrives a récupérer le nombre tu peux le donner à ta barre verte pour lui donner une taille fixe (et virer l'animation CSS du coup) :
<span class='progress-bar-inner' style="width:XX%;"></span>

(je ne sais pas non plus si tu peux intégrer ca comme ca mais c'est l'idée)
en effet, c'est pas con ça.

J'ai modifié le code du CSS :
.progress-bar-inner
{
display: block;
height: 45px;
width: <#objectstatus name="lastvalue" id="<@objectid>">;
[...]

retiré le code d'animation. ça fonctionne presque. le lastvalue me retourne "10 %" et forcément l'espace fait chi... car du coup, le CSS n'est pas valide.

2 idées me viennent en tête:
- supprimer l'unité de mesure dans PRTG (si possible) et ajouter moi-même le "%" dans le CSS.
- trouver un moyen dans le CSS (ou dans le HTML) de supprimer cet espace.
Modérateur
Ah ouais tu peux faire ça ? C'est un langage qui est compilé du coup c'est ca ?
Alors effectivement soit tu rajoute le % toi meme (tu peux pas supprimer direct l'espace direct dans le "PRTG" ?)

Sinon tu le print dans une variable Js et ensuite du l'enlève a la volée avec un .replace(' ', '')); mais bon c'est pas ouf comme solution...
Yop,

je viens d'avoir le retour de l'éditeur, je ne peux pas fournir la valeur sans l'unité.
Je ne sais pas trop comment il génère sa page web. C'est possible qu'il y ait un traitement spécifique pour interprêter les données qu'il utilise.

Du coup, c'est pas ouf, mais y'a pas d'autre choix que de faire ça en javascript.
En gros, faut que je vire tout ce qui est à droite du premier espace trouvé (et l'espace aussi à virer) pour récupérer une valeur brute.

La question sera de voir si on peut lui coller du javascript. Qu'est ce que je peux tenter déjà pour voir si javascript va fonctionner ?
Modérateur
nolme a écrit :
La question sera de voir si on peut lui coller du javascript. Qu'est ce que je peux tenter déjà pour voir si javascript va fonctionner ?

Bah pour voir tu peux tenter de coller la valeur dans une variable et l'afficher dans la console :

<script>
let test = '42 %';
console.log(test);
</script>
ah ça fonctionne en effet.

Après quelques essais, ce bout de code fonctionne dans la console : 
<script>
function SplitPrtgSensorValue() {
  var str = "<#objectstatus name="lastvalue" id="<@objectid>">";
  var res = str.split(" ", 1);
  console.log("Test2 : " + res[0]);
}
SplitPrtgSensorValue()
</script>


Je vais voir pour l'intégrer dans mon objet maintenant. La suite très bientôt
voilà ce que ça donne :
C'est fonctionnel. je n'arrive pas à centrer le texte verticalement pour VALUE par contre, il semble ignorer le vertical-align.

<style> 
.progress-bar
{
	background-color:rgb(176,176,176);
	color:rgb(255,255,255);
	font-size:14px;
	text-align:center;
	padding:10px 5px 8px 5px;
	border-radius: 3px;
	width: 150px;
}

.progress-bar-inner 
{  
    display: block;  
    height: 60px;  
    background-color: rgb(184,196,25);
	font-weight: bold;
	margin : 2px;
	padding : 2px;
    border-radius: 3px;
    position: relative;
	vertical-align: 20%;
} 
</style>     
  
<span class="label" style="font-size:14px;"><#objectstatus name="lastvalue" id="<@objectid>"></span>

<!-- list des name :  https://www.paessler.com/manuals/prtg/live_single_object_status  -->
<div class='progress-bar'>
      <span id="myspan<@objectid>" class='progress-bar-inner'">VALUE</span>
</div> 

<script>
var str = "<#objectstatus name="lastvalue" id="<@objectid>">";
var res = str.split(" ", 1);
document.getElementById("myspan<@objectid>").textContent=res[0];
document.getElementById("myspan<@objectid>").style.width=res[0]+"%";
</script>

Modifié par _laurent (13 Apr 2021 - 15:16)
Modérateur
Salut,

vu que ta hauteur est fixe (60px) tu peux center le texte avec une line-height à 60px

Tu feras gaffe ici il y a un soucis de quote :
<span id="myspan<@objectid>" class='progress-bar-inner'">VALUE</span>

Modifié par _laurent (13 Apr 2021 - 15:21)
ah oui, bien vu pour la double quote en trop.
La hauteur est codée en dur pour le moment mais à terme ça ne sera pas le cas. j'essaie de voir pour récupérer les valeurs de l'objet généré par PRTG afin de s'adapter à la bonne taille.
Sujet clos
Aller à