Page 1 sur 1

Comment changer la couleur d'une donnée selon son statuts

Posté : 14 juin 2022, 17:49
par mykerinos1
Bonjour.
je possède des données live de ma station météo que je récupère via web socket. Comment puis je modifier la couleur d'affichage de la donnee selon sa valeur ? par exemple bleu si il fait froid ou rouge si il fati très chaud.
Merci

Code : Tout sélectionner

 	 let socket = new WebSocket("ws://192.168.86.84:1880/endpoint/test");
 	//socket.onopen = function(e) {
 	// alert("[open] Connection etablie");
	//alert("Sending to server");
	//};

	socket.onclose = function(event) {
	if (event.wasClean) {
	alert(`[close] Connection closed cleanly, code=${event.code} reason=${event.reason}`);
	} else {
	// par exemple : processus serveur arrêté ou réseau en panne
	// event.code est généralement 1006 dans ce cas
	alert('[close] Connection perdue. Rafraichissez la page');
	}
	};
	socket.onerror = function(error) {
	alert(`[error] ${error.message}`);
	};
	 socket.onmessage = function (event) {
	var data=JSON.parse(event.data) //pour transformer le retour texte en JSON

	var int=new Intl.NumberFormat("fr-FR", {maximumFractionDigits: 2, minimumFractionDigits: 2});

	var valtemp=(data["data"]["conditions"][0]["temp"]-32)*0.55;
	document.getElementById("temperature").innerHTML= int.format(valtemp);

	var valvent=data["data"]["conditions"][0]["wind_speed_last"]*1.609;
	document.getElementById("vent").innerHTML= int.format(valvent);

	document.getElementById("humidite").innerHTML=data["data"]["conditions"][0]["hum"];

	var valpress=data["data"]["conditions"][2]["bar_sea_level"]*33.8639;
	document.getElementById("pression").innerHTML= int.format(valpress);

	document.getElementById("pluie").innerHTML=data["data"]["conditions"][0]["rain_rate_last"];

	console.log (data);
	};

Re: Comment changer la couleur d'une donnée selon son statuts

Posté : 17 juin 2022, 11:37
par webmaster
Bonjour,

Il faut utiliser la propriété className pour ajouter une classe CSS avec une condition :

Code : Tout sélectionner

if (temp>25) {
  document.getElementById("temperature").className="chaud";
}
Bien sur, il faut configurer la classe .chaud avec une couleur rouge

Re: Comment changer la couleur d'une donnée selon son statuts

Posté : 24 juin 2022, 19:55
par mykerinos1
Bonsoir. Merci pour votre reponse. je n'ai pas obtenu de resultat. Voici mon code

Code : Tout sélectionner

	var valtemp=(data["data"]["conditions"][0]["temp"]-32)*0.55;
	document.getElementById("temperature").innerHTML= int.format(valtemp);
	if (temp>10) {
 	 document.getElementById("temperature").className="chaud";
} 
j'ai bien entendu créé mon css

Code : Tout sélectionner

	.chaud {
	color: red;
	}
Merci pour votre aide