5297 sujets

Sémantique web et HTML

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...