Changer une icone en fonction d'une variable ?

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Changer une icone en fonction d'une variable ?

davidmarli

Bonjour,

je suis entrain d'écrire une page HTML bootstrap.
Pour l'instant j'affiche ma conso/production d'énergie grâce à une variable que je récupère via un script java.
Ce que je voudrais, c'est pouvoir afficher une icone quand la variable est positive, et une autre quand la variable est négative.

Est-ce que cela est possible ? et si oui comment faire ?

Voici la partie qui affiche l'info avec une des icones : Ne tapez pas, je me mets juste au html et à bootstrap.

Merci pour votre aide.

Citation :

<div class="col-sm-12 col-md-6 col-xl-4 mb-4">
<div class="card border-left-info shadow h-100 py-2 rounded">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-success text-uppercase mb-1">Sigma</div>
<div class="h5 mb-0 font-weight-bold text-gray-800"><span id="sigma">%SIGMA%</span></div>
</div>
<div class="col-auto">
<i class="fa-solar-panel fa-2x text-gray-300"></i>
</div>
</div>
</div>
</div>
</div>

Publicité

mechkurt

Comment se fait l'actualisation de ta donnée ?
%SIGMA% vient de ou ?
Tu écrit une page statique sans aucun dynamisme ?
Difficile de t'aider sans plus d'information, ce n'est (a ma connaissance) pas possible en css pur.
Faudrait attribuer une class (pos / neg) et le styler en conséquence.
Mais JS, PHP ou autre, difficile d'en dire plus à ce stade...

---------------
D3

davidmarli

je récupère un certain nombres de valeurs avec cette fonction :

Citation :

setInterval(function ( ) {

var xhttpstate = $.get ({
url : '/state',
type : 'GET',
dataType: "text",
success: function ( result ) {
var config = result.split(";" );

dataGaugePA.setValue(0, 0, config[0]);
dataGaugePA.setValue(0, 1, config[1]);

dataGaugePApower.setValue(0, 0, "Power" );
dataGaugePApower.setValue(0, 1, config[2]);

dataGaugePAtemp.setValue(0, 0, "Temp °C" );
dataGaugePAtemp.setValue(0, 1, config[3]);

dataGaugePowerCE.setValue(0, 0, "Puis. CE" );
dataGaugePowerCE.setValue(0, 1, config[4]);

gaugePA.draw(dataGaugePA,optionsGauge);
gaugePApower.draw(dataGaugePApower,optionsGaugepower);
gaugePAtemp.draw(dataGaugePAtemp,optionsGaugetemp);
gaugePowerCE.draw(dataGaugePowerCE,optionsGaugePowerCE);

document.getElementById("state" ).innerHTML = config[0];
document.getElementById("sigma" ).innerHTML = config[1];
document.getElementById("vers" ).innerHTML = config[5];
document.getElementById("vers2" ).innerHTML = config[5];
document.getElementById("indexEauVille" ).innerHTML = config[6];
document.getElementById("indexEauBuanderie" ).innerHTML = config[7];
},
async: true });

}, 2000 ) ;

Sachant que le ip/state renvoie une string comme ceci, par exemple

Citation :

Linky;650;0;-5.00;0;v0.1.159

Merci.

Message édité par davidmarli le 12-01-2023 à 19:22:36

mechkurt

Code :

var sigma = Number(config[1]);
var icon = '<i class="bi-alarm"></i>';
if (sigma > 0) {
icon = '<i class="bi bi-check-circle"></i>';
}
document.getElementById("sigma" ).innerHTML = icon + config[1];

Un truc du genre ?

https://getbootstrap.com/docs/5.3/extend/icons/

---------------
D3

davidmarli

Merci, je testerai cela ce week end.

Je ferai un retour après essai.

davidmarli

Ca fonctionne impeccable.

Encore Merci.

rufo

Pas me confondre avec Lycos!

On est bien d'accord que lorsque tu parles de script java, c'est du javascript en fait ? Si c'est bien ça, Java et Javascript n'ont rien à voir.

---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta

davidmarli

oh, oui, pardon, c'était bien javascript.

FORUM HardWare.fr

Programmation

HTML/CSS

Changer une icone en fonction d'une variable ?

Sujets relatifs
Créer et ajouter fonction au menu contextuel	[React] Comment changer le state de manière unique dans une map
Fonction exec()	problème de récupération de texte avec une fonction
Changer la couleur des liens déjà vus des résultats google search	[Powershell] Variable objet en paramètre de fonction & ValidateSet
PHP - Fonction Readline non détectée	[VBA] Fonction .Min
Resultat en fonction d'une date
Plus de sujets relatifs à : Changer une icone en fonction d'une variable ?

Page générée en 0.038 secondes