Foros del Web » Programando para Internet » Javascript »

Cambiar color a valores ajax

Estas en el tema de Cambiar color a valores ajax en el foro de Javascript en Foros del Web. Buenas. Estoy construyendo una página de una estación meteorológica basada en ajax para que puedan cambiar los valores en tiempo real y me gustaría a ...
  #1 (permalink)  
Antiguo 02/01/2012, 15:32
 
Fecha de Ingreso: septiembre-2010
Mensajes: 52
Antigüedad: 13 años, 6 meses
Puntos: 0
Cambiar color a valores ajax

Buenas.

Estoy construyendo una página de una estación meteorológica basada en ajax para que puedan cambiar los valores en tiempo real y me gustaría a ver si me pudiérais ayudar a cambiar el color a las tendencias de temperatura, etc.
Lo que quiero básicamente es que si la tendencia es positiva me la ponga en color rojo y si la tendencia es negativa ponerla en azul. Si es neutra que se quede en negro (por defecto).

Un ejemplo para la tendencia del barómetro:

Código:
//Pressure trend 24 hour
		press = parseFloat(wx30[50]);
		press24hour = parseFloat(wx30[26]);
		presstrend = press - press24hour;
				
		if (presstrend > 0) {
			presstrend = "+" + presstrend.toFixed(1);
		} else if (presstrend < 0) {
			presstrend = presstrend.toFixed(1);
		} else {
			presstrend = "+" + presstrend.toFixed(1);
		}
		set_ajax_obs("ajaxpress24trend", presstrend + uomBaro + "/24h");
El valor lo coge de un archivo de texto y lo establece en una variable ajax que luego debo poner en un span en el html.

Agradecería sugerencias ya que estoy muy verde en javascript.

Salu2
  #2 (permalink)  
Antiguo 02/01/2012, 15:49
Avatar de marlanga  
Fecha de Ingreso: enero-2011
Ubicación: Murcia
Mensajes: 1.024
Antigüedad: 13 años, 2 meses
Puntos: 206
Respuesta: Cambiar color a valores ajax

Das poca información y no tengo muy claro cómo recuperas la información, ni cómo actualizas los datos, pero a bote pronto...

Código javascript:
Ver original
  1. //Pressure trend 24 hour
  2.         press = parseFloat(wx30[50]);
  3.         press24hour = parseFloat(wx30[26]);
  4.         presstrend = press - press24hour;
  5.                
  6.         if (presstrend > 0) {
  7.             presstrend = "<span style='color:red;'>+" + presstrend.toFixed(1)+"</a>";
  8.         } else if (presstrend < 0) {
  9.             presstrend = "<span style='color:blue;'>-" + presstrend.toFixed(1)+"</a>";
  10.         } else {
  11.             presstrend = "<span style='color:black;'>+0</a>";
  12.         }
  13.         set_ajax_obs("ajaxpress24trend", presstrend + uomBaro + "/24h");
  #3 (permalink)  
Antiguo 02/01/2012, 16:41
 
Fecha de Ingreso: septiembre-2010
Mensajes: 52
Antigüedad: 13 años, 6 meses
Puntos: 0
Respuesta: Cambiar color a valores ajax

Gracias por responder marlanga.

Tienes razón, no he dado mucha información.
El archivo javascript es www.meteoarchena.es/ajaxWDwx.js

Hay una función que flashea de verde los datos cuando estos cambian y es incompatible con lo que me has propuesto ya que no flashean cuando cambian de valor y además debe flashear toda la cadena establecida por la función set_ajax_obs.

La página donde lo estoy probando es www.meteoarchena.es/index3.html

Gracias por la ayuda.

SAlu2
  #4 (permalink)  
Antiguo 02/01/2012, 17:53
Avatar de marlanga  
Fecha de Ingreso: enero-2011
Ubicación: Murcia
Mensajes: 1.024
Antigüedad: 13 años, 2 meses
Puntos: 206
Respuesta: Cambiar color a valores ajax

Vamos a ver si me aclaro.
¿Entonces quieres que despues de flashear a verde lo haga en rojo, azul o negro, en vez de siempre a negro, segun el caso?
Por lo que he visto, hay una función llamada function reset_ajax_color( usecolor ) que se dispara dentro de un timeout cuando se resuelve una petición AJAX. Es decir, a los X milisegundos de ponerse verde el valor, esa función hace que se ponga el color que se le pasa como argumento (y si se le pasa vacío, como es el caso, se utilizará el color por defecto, que en el caso de tu página es el negro).
La forma más fácil de hacer lo que creo que tú quieres, es modificar dos funciónes, la que he nombrado antes y la de set_ajax-_obs.
Por ejemplo, en la que actualiza los SPAN con los nuevos valores, creamos un nuevo atributo donde mantener el valor viejo:
Código javascript:
Ver original
  1. function set_ajax_obs( name, inValue ) {
  2. // store away the current value in both the doc and the span as lastobs="value"
  3. // change color if value != lastobs
  4.         var value = inValue;
  5.         if(decimalComma) {
  6.             value = inValue.replace(/(\d)\.(\d)/,"$1,$2");
  7.         }
  8.  
  9.         var element = document.getElementById(name);
  10.         if (! element ) { return; } // V1.04 -- don't set if missing the <span id=name> tag
  11.         var lastobs = element.getAttribute("lastobs");
  12.                 //CODIGO NUEVO
  13.                 element.setAttribute("oldLastobs",lastobs);
  14.                 //FIN CODIGO NUEVO
  15.         element.setAttribute("lastobs",value);
  16.         if (value != unescape(lastobs)) {
  17.           element.style.color=flashcolor;
  18.           if ( doTooltip ) { element.setAttribute("title",'AJAX tag '+name); }
  19.           element.innerHTML =  value; // moved inside to fix flashing issue (Jim at jcweather.us)
  20.         }
  21. }

Y en la otra, en vez de simplemente quitar el color verde, lo que hacemos es poner un rojo, un negro o un azul (siempre que el argumento usecolor nos llegue sin valor):
Código javascript:
Ver original
  1. function reset_ajax_color( usecolor ) {
  2. // reset all the <span class="ajax"...> styles to have no color override
  3.       var elements = get_ajax_tags();
  4.       var numelements = elements.length;
  5.       for (var index=0;index!=numelements;index++) {
  6.          var element = elements[index];
  7.  
  8.         //NUEVO CODIGO
  9.         if (usecolor =="")
  10.         {
  11.             if (element.getAttribute("lastobs")>element.getAttribute("oldLastobs"))
  12.             {
  13.                 element.style.color="red";
  14.             }
  15.             else if(element.getAttribute("lastobs")<element.getAttribute("oldLastobs"))
  16.             {
  17.                 element.style.color="blue";
  18.             }
  19.         }
  20.         else
  21.         }
  22.             element.style.color=usecolor;
  23.         }
  24.         //FIN NUEVO CODIGO
  25.       }
  26. }
Lo malo es que la hora, por ejemplo, creo que la pintará roja; y que las comparaciones quizás no funcionen bien, si los valores inscritos en el atributo "lastobs" no son alfabéticamente u numéricamente ordenables. Aunque en el caso de la hora (u otros SPAN que no te interese pintar de azul o rojo) bastaría con mirarles tambíen su ID y comparalos con una lista de ID's "intocables". Para lo segundo, la solución es mucho más difícil, creo.
Con que murciano, eh? Un saludo paisano.
  #5 (permalink)  
Antiguo 03/01/2012, 08:44
 
Fecha de Ingreso: septiembre-2010
Mensajes: 52
Antigüedad: 13 años, 6 meses
Puntos: 0
Respuesta: Cambiar color a valores ajax

He podido responder ahora después del trabajo.

Verás marlanga, lo que quiero es que donde está la tendencia si es positiva la pinte de roja, si negativa de azul y si neutra de color negro, pero siguiendo flasheando de verde en los cambios.
Se puede poner alguna función solamente para esos ajax (tendencia de temperatura, humedad y barómetro) que hagan lo que quiero??

Me falta mucho trabajo en esto y estoy empezando a familiarizarme con el javascript (algunos arreglos del script los he hecho yo), pero lo que más me importa es dejar la tabla de valores actuales terminada y luego trabajar en la estructura general del html y el css.

Me alegro que seas paisan@, ya sabes donde consultar el tiempo por mi zona .

Salu2
  #6 (permalink)  
Antiguo 04/01/2012, 08:34
 
Fecha de Ingreso: septiembre-2010
Mensajes: 52
Antigüedad: 13 años, 6 meses
Puntos: 0
Respuesta: Cambiar color a valores ajax

Nadie tiene ninguna idea de cómo hacerlo...

Seguro que la habrá y será fácil (eso creo )

SAlu2
  #7 (permalink)  
Antiguo 06/01/2012, 11:29
Avatar de marlanga  
Fecha de Ingreso: enero-2011
Ubicación: Murcia
Mensajes: 1.024
Antigüedad: 13 años, 2 meses
Puntos: 206
Respuesta: Cambiar color a valores ajax

¿Pero has probado lo que te puse arriba?
  #8 (permalink)  
Antiguo 06/01/2012, 12:39
 
Fecha de Ingreso: septiembre-2010
Mensajes: 52
Antigüedad: 13 años, 6 meses
Puntos: 0
Respuesta: Cambiar color a valores ajax

Cita:
Iniciado por marlanga Ver Mensaje
¿Pero has probado lo que te puse arriba?
Sí marlanga, pero debe de haber algún error de sintaxis ya que no aparece nada en la página web, como si el script no fuese bien.
He visto el principio y fin de llaves en la nueva función que has modificado de reset_ajax_color y parece que no va bien.
Modificando creo que la llave sospechosa no he visto el efecto deseado.

Ya dije que solo quiero modificar donde pone la tendencia si es positiva a rojo, si es negativa a azul y si es neutra se quede en negro pero no que influya en todos los demás set_ajax_obs, solo en los de la tendencia.

Salu2

Última edición por Skyliner; 06/01/2012 a las 13:23
  #9 (permalink)  
Antiguo 08/01/2012, 05:04
 
Fecha de Ingreso: septiembre-2010
Mensajes: 52
Antigüedad: 13 años, 6 meses
Puntos: 0
Respuesta: Cambiar color a valores ajax

Bueno, de momento he puesto los colores como quería pero todavía no se flashean al cambiar de valor a pesar de que en set_ajax_obs ya están definidos con su nuevo color.

El código de momento para asignar el valor a set_ajax_obs es:

Código Javascript:
Ver original
  1. //Pressure trend 24 hour
  2.        
  3.         press = parseFloat(wx30[50]);
  4.        
  5.         press24hour = parseFloat(wx30[26]);
  6.        
  7.         presstrend = press - press24hour;
  8.                        
  9.         if (presstrend > 0) {
  10.              presstrend = "<span style='color: red;'>" + "+" + presstrend.toFixed(1) + uomBaro + "/24h" + "</span>";
  11.  
  12.    
  13.         } else if (presstrend < 0) {
  14.             presstrend = "<span style='color: blue;'>" + presstrend.toFixed(1) + uomBaro + "/24h" + "</span>";
  15.         } else {
  16.             presstrend = presstrend.toFixed(1);
  17.         }
  18.        
  19.         set_ajax_obs("ajaxpress24trend", presstrend);

Me falta poco, me podeis ayudar?? Gracias

Salu2
  #10 (permalink)  
Antiguo 27/01/2012, 05:59
 
Fecha de Ingreso: septiembre-2010
Mensajes: 52
Antigüedad: 13 años, 6 meses
Puntos: 0
Respuesta: Cambiar color a valores ajax

No consigo dar con la tela.

A ver:

Código Javascript:
Ver original
  1. function set_ajax_obs( name, inValue ) {
  2. // store away the current value in both the doc and the span as lastobs="value"
  3. // change color if value != lastobs
  4.         var value = inValue;
  5.         if(decimalComma) {
  6.             value = inValue.replace(/(\d)\.(\d)/,"$1,$2");
  7.         }
  8.  
  9.         var element = document.getElementById(name);
  10.         if (! element ) { return; } // V1.04 -- don't set if missing the <span id=name> tag
  11.         var lastobs = element.getAttribute("lastobs");
  12.         element.setAttribute("lastobs",value);
  13.         if (value != unescape(lastobs)) {
  14.             element.style.color=flashcolor;}  
  15.         if ( doTooltip ) { element.setAttribute("title",'AJAX tag '+name); }
  16.           element.innerHTML =  value; // moved inside to fix flashing issue (Jim at jcweather.us)
  17.         }

La función set_ajax_obs por lo que entiendo atribuye un valor null a value (lastobs, aunque se podría llamar como quisiera porque es un atributo que no existe) y después compara que si value != lastobs flashea los elementos ajax (que me corrijan los que más saben ).

El atribuir un color a value en los valores de tendencia parece que es lo que no deja flashear esos valores pero no sé como hacer que flasheen.

Gracias y salu2

Etiquetas: ajax, color, html
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 13:47.