Changer une icone en fonction d'une variable ?

Marsh Posté le 12-01-2023 à 16:58:37

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>

Reply

Marsh Posté le 12-01-2023 à 16:58:37

Reply

Marsh Posté le 12-01-2023 à 18:22:00

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

Reply

Marsh Posté le 12-01-2023 à 19:21:30

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

Reply

Marsh Posté le 13-01-2023 à 08:18:58

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

Reply

Marsh Posté le 13-01-2023 à 14:26:08

Merci, je testerai cela ce week end.

Je ferai un retour après essai.

Reply

Marsh Posté le 14-01-2023 à 15:39:01

Ca fonctionne impeccable.

Encore Merci.

Reply

Marsh Posté le 17-01-2023 à 14:17:40

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

Reply

Marsh Posté le 22-01-2023 à 14:47:44

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

Reply

Changer une icone en fonction d'une variable ?

Sujets relatifs:

Leave a Replay