Animación (secuencia de imagenes)

Rolomo · #1 (**permalink**) 27/11/2012, 13:39

Hola amigos,

Quiero hacer una animación sencilla con una imagenes de radar, en principio no tiene que suponer un problema...aunque no sé hacerlo jeje

Independientemente de esto hay un problema que es aun más complicado y que me preocupa realmente, la imagenes de radar por lo general van asociadas a una fecha y hora. Ejemplo:

http://www.aemet.es/imagenes_d/eltiempo/observacion/radar/201211271830_r8pb.gif

Estas imagenes en principio no se sabe cuando salen exactamente pq hay veces q no salen o simplemente salen tarde.
Claro, si yo estoy en mi html con el loop hecho con javascript, como sé yo hasta que imagen tengo que hacer el loop? o dicho de otra manera, Cómo hago un condicional para decirle si la imagen de las 8 no la encuentras quedate con la de las 7 que si que existe?
En cuanto a numeros si que me parece facil, pero como sabe el programa que esa imagen aun no se ha cargado o no existe?

Realmente, tengo dos preguntas: Cómo hacer un loop? Cómo solucionar el problema de la imagen que aun no existe ?

emprear · #2 (**permalink**) 27/11/2012, 17:03

Por lo que veo el nombre de la imagen lleva la fecha y hora, si esto es así y la imagen puede ser tomada en un tiempo indeterminado, creo que tu problema es insoluble.
Supongamos la siguiente situación
las fotos son tomadas a intervalos regulares de tiempo, digamos, 10 minutos (pongo solo la hora para simplificar)

1900.gif
1910.gif
1920.gif
1930.gif

vos podrías hacer que si determinada imagen no existe aparezca un texto alternativo, pero los nombres los conocés, ahora si decís tambien

Cita:

no se sabe cuando salen exactamente pq hay veces q no salen o simplemente salen tarde

podría ser

1903.gif
1916.gif
1920.gif
1935.gif

Ahi está el problema mayor, los nombres es imposible saberlos, por lo tanto ni siquiera podés saber si existe o no un archivo determinado.

Saludos

furoya · #3 (**permalink**) 27/11/2012, 18:21

emprear: ¡Esta vez miré de nuevo antes de postear!

Pero aunque vi tu mensaje, posteo igual lo que tengo, que no es mucho.

Rolomo: ¿Tiene que ser JS?. Porque en tu servidor deben saber si creaste la imagen o no. Quizá hasta se pueda actualizar con AJAX.

No adivinamos cómo es tu animación, pero si no queda otra que revisar con javascript, probá algo con onload o quizá onerror dentro de la etiqueta de imagen donde cambiás los src='' secuenciados.

Porque es cierto que si no sabés los nombres, ya se vuelve imposible llamarlas desde un JS.

Rolomo · #4 (**permalink**) 27/11/2012, 19:00

Vale, me vuelvo a explicar. Yo conzco de antemano como será el url y la hora que sale, pero no se a la hora que sale realmente. Sé que las horas del url serán fijas 0,1,2,3,....

case "radar":
if(j<0) {j=0}
if(j>24) {j=24}
arxiu="http://www.pepito.com/hora_"+j+".png";
break;

Aún no sé hacer la animación...acepto ideas. Mi idea de lo que quiero conseguir es....
Ejemplo:
Hacer un loop con esas imagenes de j=0, hasta la última imagen existente. Yo no sé si la imagen con j=n ha salido o no, en el caso de que no haya salido quiero que coja como mucho hasta la n-1, y así hasta que la imagen salga....
Mmm en principio había pensado en hacerlo con javascript o jquery, pero si me propones otra manera....

Un abrazo.

emprear · #5 (**permalink**) 27/11/2012, 20:06

Seguimos en la misma. esto como se entiende

Cita:

Yo conzco de antemano como será el url y la hora que sale, pero no se a la hora que sale realmente

vos lo que necesitás son los nombres de los archivos, a no ser que me digas que efectivamente los nombres sean,
1830
1900
1930
2000
2030

pero puede que salgan en estas horas
1835
1920
1945
2002
2038

por otro lado, con que frecuencia salen las imágenes, 1 minuto, 10, 20, etc

Bueno, muchas dudas, de todas formas te dejo esto como tentativa

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<script type="text/javascript">
//<![CDATA[
var ImagenPrueba = new Image();
var fondos = ['castilla.png', 'castilla.jpg', 'castilla.gif'];
var fondo_actual = 0;
 
var CambiarFondo = function(){
if (fondo_actual == fondos.length) {
fondo_actual = 0;
}
var precargar =fondo_actual++;
 
ImagenPrueba.src = fondos[precargar];
ImagenPrueba.onload = function(){
document.getElementById('capa').style.backgroundImage = "url("+this.src+")";
document.getElementById('capa').innerHTML = "";
}
ImagenPrueba.onerror = function(){
document.getElementById('capa').style.backgroundImage = "none";
document.getElementById('capa').innerHTML = "Imagen "+ fondos[precargar] + "  no disponible";
}
 
}
 
window.setInterval(CambiarFondo, 5000);
//]]>
</script>
</head>
<body>
<div style="width: 134px;height:124px;" id="capa">
    Próxima toma en 5 segundos
</div>
</body>
</html>

Para la demo, de las tres imágenes en el array hacé que solo una exista., se pueden hacer variantes.
Saludos

Rolomo · #6 (**permalink**) 27/11/2012, 22:51

Yo conzco de antemano como será el url y la hora que está impresa en el URL, pero no se a la hora que se publica la imagen.
Es como tu primera opción.
Probaré eso.
Ejemplo:
Yo sé de antemano como se llamaran los URL pq la fecha es algo previsible.
Esta imagen que es de la madrugada si la buscas aparece, es una imagen que existe.
http://www.aemet.es/imagenes_d/eltiempo/observacion/radar/201211272330_r8pb.gif
Esta otro de momento no existe porque aun le faltan dos dias para que se cree, pero yo sé que se llamará así:
http://www.aemet.es/imagenes_d/eltiempo/observacion/radar/201211292330_r8pb.gif

Si por casualidad la añadiera en el loop ahora, yo quiero que mi programa se vaya quedando con las anteriores hasta que encuentre una que si que exista...

Pruebo tu programa. Muchas gracias.